From 6f3af0791912260749d50a77c164a77a1c5b1c93 Mon Sep 17 00:00:00 2001
From: Integr-0 <erik.reitbauer@outlook.de>
Date: Thu, 28 Mar 2024 21:36:47 +0100
Subject: [PATCH] Formatting

---
 src/App.tsx                      | 180 ++++++++++++++++++-------------
 src/components/Box.tsx           |  15 ++-
 src/components/CardComponent.tsx |  22 +++-
 src/components/Image.tsx         |   6 +-
 src/components/LinkButton.tsx    |  11 +-
 src/components/MainBox.tsx       |  25 ++++-
 src/index.css                    |   4 -
 src/main.tsx                     |  18 ++--
 8 files changed, 179 insertions(+), 102 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cad1a12..2f9fcc3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,19 +1,19 @@
-import './App.css'
-import csharp from './assets/csharp.png'
-import css from './assets/css.png'
-import html from './assets/html.png'
-import java from './assets/java.png'
-import javascript from './assets/javascript.png'
-import kotlin from './assets/kotlin.png'
-import python from './assets/python.png'
-import react from './assets/react.png'
-import typescript from './assets/typescript.png'
-import icon from './assets/icon.png'
-import Card from './components/CardComponent'
-import MainBox from './components/MainBox'
-import Box from './components/Box'
-import LinkButton from './components/LinkButton'
-import Image from './components/Image'
+import "./App.css";
+import csharp from "./assets/csharp.png";
+import css from "./assets/css.png";
+import html from "./assets/html.png";
+import java from "./assets/java.png";
+import javascript from "./assets/javascript.png";
+import kotlin from "./assets/kotlin.png";
+import python from "./assets/python.png";
+import react from "./assets/react.png";
+import typescript from "./assets/typescript.png";
+import icon from "./assets/icon.png";
+import Card from "./components/CardComponent";
+import MainBox from "./components/MainBox";
+import Box from "./components/Box";
+import LinkButton from "./components/LinkButton";
+import Image from "./components/Image";
 
 function App() {
     return (
@@ -21,73 +21,107 @@ function App() {
             <div className="area_center">
                 <MainBox icon={icon} />
 
-                <Box content={
-                    <div className="card-body">
-                        <p className="title_center"><i className="fa-solid fa-person" /> About me</p>
-                        <h5 className="card-title">
-                            <h4>Hi, im Erik!</h4>
-                            I'm a developer from <b>Austria</b> who likes to try out different stuff.
-                            <br />
-                            I mainly code in <b>Java</b> or <b>Kotlin</b> (I don't really do Front end)
-                        </h5>
-                    </div>
-                } />
+                <Box
+                    content={
+                        <div className="card-body">
+                            <p className="title_center">
+                                <i className="fa-solid fa-person" /> About me
+                            </p>
+                            <h5 className="card-title">
+                                <h4>Hi, im Erik!</h4>
+                                I'm a developer from <b>Austria</b> who likes to
+                                try out different stuff.
+                                <br />I mainly code in <b>Java</b> or <b>Kotlin</b> (I don't really do Front end)
+                            </h5>
+                        </div>
+                    }
+                />
 
-                <Box content={
-                    <div className="card-body">
-                        <p className="title_center"><i className="fa-solid fa-language" /> Languages</p>
+                <Box
+                    content={
+                        <div className="card-body">
+                            <p className="title_center">
+                                <i className="fa-solid fa-language" /> Languages
+                            </p>
 
-                        <p className="icon_wrapper_pc">
-                            <Image src={kotlin} />
-                            <Image src={css} />
-                            <Image src={csharp} />
-                            <Image src={html} />
-                            <Image src={java} />
-                            <Image src={python} />
-                            <Image src={react} />
-                            <Image src={typescript} />
-                            <Image src={javascript} />
-                        </p>
+                            <p className="icon_wrapper_pc">
+                                <Image src={kotlin} />
+                                <Image src={css} />
+                                <Image src={csharp} />
+                                <Image src={html} />
+                                <Image src={java} />
+                                <Image src={python} />
+                                <Image src={react} />
+                                <Image src={typescript} />
+                                <Image src={javascript} />
+                            </p>
 
-                        <p className="icon_wrapper_phone">
-                            <Image src={kotlin} />
-                            <Image src={css} />
-                            <Image src={csharp} />
-                            <Image src={html} />
-                            <Image src={java} />
-                        </p>
+                            <p className="icon_wrapper_phone">
+                                <Image src={kotlin} />
+                                <Image src={css} />
+                                <Image src={csharp} />
+                                <Image src={html} />
+                                <Image src={java} />
+                            </p>
 
-                        <p className="icon_wrapper_phone">
-                            <Image src={python} />
-                            <Image src={react} />
-                            <Image src={typescript} />
-                            <Image src={javascript} />
-                        </p>
-                    </div>
-                } />
+                            <p className="icon_wrapper_phone">
+                                <Image src={python} />
+                                <Image src={react} />
+                                <Image src={typescript} />
+                                <Image src={javascript} />
+                            </p>
+                        </div>
+                    }
+                />
 
-                <Box content={
-                    <div className="card-body">
-                        <p className="title_center"><i className="fa-solid fa-code" /> Some Projects</p>
+                <Box
+                    content={
+                        <div className="card-body">
+                            <p className="title_center">
+                                <i className="fa-solid fa-code" /> Some Projects
+                            </p>
 
-                        <Card title="ContentAutomation" bio="Automatically generates clips of a length of around 30 seconds. Perfect for platforms like TikTok and YouTube-shorts." link="https://github.com/Integr-0/ContentAutomation" />
-                        <Card title="Trajectory" bio="Trajectory is a fast event system Kotlin." link="https://github.com/Integr-0/Trajectory" />
-                        <Card title="JsonCompiler" bio="Executes Json like normal code..." link="https://github.com/Integr-0/JsonCompiler" />
-                    </div>
-                } />
+                            <Card
+                                title="ContentAutomation"
+                                bio="Automatically generates clips of a length of around 30 seconds. Perfect for platforms like TikTok and YouTube-shorts."
+                                link="https://github.com/Integr-0/ContentAutomation"
+                            />
+                            <Card
+                                title="Trajectory"
+                                bio="Trajectory is a fast event system Kotlin."
+                                link="https://github.com/Integr-0/Trajectory"
+                            />
+                            <Card
+                                title="JsonCompiler"
+                                bio="Executes Json like normal code..."
+                                link="https://github.com/Integr-0/JsonCompiler"
+                            />
+                        </div>
+                    }
+                />
 
-                <Box content={
-                    <div className="card-body">
-                        <p className="title_center"><i className="fa-solid fa-link" /> Links</p>
+                <Box
+                    content={
+                        <div className="card-body">
+                            <p className="title_center">
+                                <i className="fa-solid fa-link" /> Links
+                            </p>
 
-                        <LinkButton link="https://github.com/Integr-0" name="GitHub" />
-                        <LinkButton link="https://discordapp.com/users/688059979105697844" name="Discord" />
-                    </div>
-                } />
+                            <LinkButton
+                                link="https://github.com/Integr-0"
+                                name="GitHub"
+                            />
+                            <LinkButton
+                                link="https://discordapp.com/users/688059979105697844"
+                                name="Discord"
+                            />
+                        </div>
+                    }
+                />
             </div>
             <br />
         </>
-    )
+    );
 }
 
-export default App
+export default App;
diff --git a/src/components/Box.tsx b/src/components/Box.tsx
index 888432f..7303733 100644
--- a/src/components/Box.tsx
+++ b/src/components/Box.tsx
@@ -4,9 +4,18 @@ interface Prop {
 
 export default function Box(props: Prop) {
     return (
-        <div className="card" style={{ margin: 'auto', marginTop: '40px', backgroundColor: 'rgba(177, 177, 177, 0.75)', boxShadow: 'rgba(0, 0, 0, 0.25) 0px 4px 4px', borderRadius: '40px', width: 'fit-content' }}>
+        <div
+            className="card"
+            style={{
+                margin: "auto",
+                marginTop: "40px",
+                backgroundColor: "rgba(177, 177, 177, 0.75)",
+                boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px",
+                borderRadius: "40px",
+                width: "fit-content",
+            }}
+        >
             {props.content}
         </div>
-
     );
-}
\ No newline at end of file
+}
diff --git a/src/components/CardComponent.tsx b/src/components/CardComponent.tsx
index 523a9bb..3bf560b 100644
--- a/src/components/CardComponent.tsx
+++ b/src/components/CardComponent.tsx
@@ -6,12 +6,28 @@ interface Prop {
 
 export default function card(prop: Prop) {
     return (
-        <div className="card" style={{ margin: 'auto', marginTop: '40px', backgroundColor: 'rgba(177, 177, 177, 0.75)', boxShadow: 'rgba(0, 0, 0, 0.25) 0px 4px 4px', borderRadius: '40px' }}>
+        <div
+            className="card"
+            style={{
+                margin: "auto",
+                marginTop: "40px",
+                backgroundColor: "rgba(177, 177, 177, 0.75)",
+                boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px",
+                borderRadius: "40px",
+            }}
+        >
             <div className="card-body">
                 <h5 className="card-title">{prop.title}</h5>
                 <p className="card-text">{prop.bio}</p>
-                <a href={prop.link} className="btn btn-secondary" style={{ borderRadius: '40px' }}>Go there  <i className="fa-solid fa-arrow-up-right-from-square" /></a>
+                <a
+                    href={prop.link}
+                    className="btn btn-secondary"
+                    style={{ borderRadius: "40px" }}
+                >
+                    Go there{" "}
+                    <i className="fa-solid fa-arrow-up-right-from-square" />
+                </a>
             </div>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/src/components/Image.tsx b/src/components/Image.tsx
index 0ebe3b2..9f006bb 100644
--- a/src/components/Image.tsx
+++ b/src/components/Image.tsx
@@ -3,7 +3,5 @@ interface Prop {
 }
 
 export default function Image(props: Prop) {
-    return (
-        <img alt="image" src={props.src} className="icon" />
-    );
-}
\ No newline at end of file
+    return <img alt="image" src={props.src} className="icon" />;
+}
diff --git a/src/components/LinkButton.tsx b/src/components/LinkButton.tsx
index 5945c1d..1a1a081 100644
--- a/src/components/LinkButton.tsx
+++ b/src/components/LinkButton.tsx
@@ -5,6 +5,13 @@ interface Prop {
 
 export default function LinkButton(props: Prop) {
     return (
-        <a href={props.link} className="btn btn-secondary" style={{ borderRadius: '40px', marginRight: '10px',}}>{props.name}  <i className="fa-solid fa-arrow-up-right-from-square" /></a>
+        <a
+            href={props.link}
+            className="btn btn-secondary"
+            style={{ borderRadius: "40px", marginRight: "10px" }}
+        >
+            {props.name}{" "}
+            <i className="fa-solid fa-arrow-up-right-from-square" />
+        </a>
     );
-}
\ No newline at end of file
+}
diff --git a/src/components/MainBox.tsx b/src/components/MainBox.tsx
index 413d6ca..5094c7b 100644
--- a/src/components/MainBox.tsx
+++ b/src/components/MainBox.tsx
@@ -4,10 +4,27 @@ interface Prop {
 
 export default function MainBox(prop: Prop) {
     return (
-        <div className="card" style={{ margin: 'auto', backgroundColor: 'rgba(177, 177, 177, 0.75)', boxShadow: 'rgba(0, 0, 0, 0.25) 0px 4px 4px', width: 'fit-content', borderRadius: '40px' }}>
-            <img alt="Logo" src={prop.icon} className="img" style={{ marginLeft: '30px', marginRight: '30px', marginTop: '30px' }} />
+        <div
+            className="card"
+            style={{
+                margin: "auto",
+                backgroundColor: "rgba(177, 177, 177, 0.75)",
+                boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px",
+                width: "fit-content",
+                borderRadius: "40px",
+            }}
+        >
+            <img
+                alt="Logo"
+                src={prop.icon}
+                className="img"
+                style={{
+                    marginLeft: "30px",
+                    marginRight: "30px",
+                    marginTop: "30px",
+                }}
+            />
             <p className="title_center">Integr</p>
         </div>
-
     );
-}
\ No newline at end of file
+}
diff --git a/src/index.css b/src/index.css
index 6afe1af..9ccec4b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,10 +24,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  
-}
-
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
diff --git a/src/main.tsx b/src/main.tsx
index 7ef237e..e7d10d8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './App.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./App.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+ReactDOM.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+);