Updated layout and localization:

- Improved "Impressum" and "Me" page layouts.
- Replaced placeholder text with actual content on "Me" page.
- Renamed "Projects" to "Projekte" in the burger menu.

.idea/workspace.xml

@@ -4,18 +4,14 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="15d653a3-00a9-440e-a365-0d5dba6a77a9" name="Changes" comment="Added a picture of me">
+    <list default="true" id="15d653a3-00a9-440e-a365-0d5dba6a77a9" name="Changes" comment="Added proper text for projects and changed localization to german">
-      <changelist_data name="KrisHD1337" email="kriscerni@gmail.com" automatic="false" />
+      <change afterPath="$PROJECT_DIR$/public/img.jpeg" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/layout.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/layout.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/img.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/app/impressum/page.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/impressum/page.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/app/me/page.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/me/page.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/app/page.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/page.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/privacy/page.js" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/burger.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/burger.jsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/projects/gambling/page.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/projects/nuclear-age/page.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/projects/page.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/projects/porsche/page.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/projects/portfolio/page.js" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/app/projects/stalinium/page.js" beforeDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -168,7 +164,8 @@
       <workItem from="1748416153006" duration="3000" />
       <workItem from="1748435208992" duration="1091000" />
       <workItem from="1749106848452" duration="6796000" />
-      <workItem from="1749710145212" duration="2117000" />
+      <workItem from="1749710145212" duration="7446000" />
+      <workItem from="1750314584738" duration="3202000" />
     </task>
     <task id="LOCAL-00001" summary="created a base layout">
       <option name="closed" value="true" />
@@ -338,7 +335,15 @@
       <option name="project" value="LOCAL" />
       <updated>1749107160951</updated>
     </task>
-    <option name="localTasksCounter" value="22" />
+    <task id="LOCAL-00022" summary="Added proper text for projects and changed localization to german">
+      <option name="closed" value="true" />
+      <created>1749713027509</created>
+      <option name="number" value="00022" />
+      <option name="presentableId" value="LOCAL-00022" />
+      <option name="project" value="LOCAL" />
+      <updated>1749713027509</updated>
+    </task>
+    <option name="localTasksCounter" value="23" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -366,6 +371,7 @@
     <MESSAGE value="Rename About page to Impressum" />
     <MESSAGE value="Update project links in burger component and page layout" />
     <MESSAGE value="Added a picture of me" />
-    <option name="LAST_COMMIT_MESSAGE" value="Added a picture of me" />
+    <MESSAGE value="Added proper text for projects and changed localization to german" />
+    <option name="LAST_COMMIT_MESSAGE" value="Added proper text for projects and changed localization to german" />
   </component>
 </project>

src/app/impressum/page.js

@@ -1,5 +1,5 @@
 export default function Impressum() {
-    return <div className={"h-full p-7.5 text-wrap w-screen md:w-2/3"}>
+    return <div className={"h-full justify-center p-7.5 text-wrap w-screen md:w-1/2"}>
         <h1 className={"text-4xl md:text-5xl"}>Impressum und Haftungsausschluss</h1>
         <h2 className={"text-2xl md:text-3xl"}>Impressum</h2>
         <p className={"text-base md:text-lg"}>

src/app/me/page.js

@@ -1,66 +1,29 @@
 export default function Me() {
     return (
-        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+        <div className="flex flex-col md:flex-row dark:animate-pulse-border-dark animate-pulse-border-light
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+                        justify-between md:h-screen h-full items-center border-b-2 border-x-2 border-emerald-800
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+                        dark:border-emerald-300 w-screen p-0 m-0">
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.
-        vLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
-        takimata sanctus est Lorem ipsum dolor sit amet.
-
-
-
-
 
+            <section className="order-2 md:order-1 w-full md:w-1/3 p-5 flex justify-center">
+                <img
+                    className="w-2/3 mx-auto md:w-sm md:pl-20"
+                    src="/img.jpeg"
+                    alt="Bild von Kristian"
+                />
+            </section>
 
+            <section className="order-1 md:order-2 flex flex-col items-center w-full md:w-2/3 p-10 pb-0">
+                <h1 className="text-3xl md:text-6xl dark:animate-pulse-dark animate-pulse-light p-2">Wer bin ich?</h1>
+                <p className="md:text-2xl text-center">
+                    Mein Name ist Kristian und bin Schüler an der Informatikmittelschule in Hottingen. Ich bin in
+                    der Schweiz am 17.07.2007 geboren und bin zum teil Kroate, aber auch Slowener. Ich
+                    programmiere hauptsächlich Mods und Videospiele. In meiner Freizeit programmiere ich gerne Mods
+                    für Minecraft, was ich auch sehr gerne mit meinen Kollegen spiele. Mein grosses Hobby ist die
+                    Flugsimulation, wo ich hauptsächlich mit zivilen Flugzeugen fliege. Am meisten fliege ich mit
+                    der Airbus a320, fliege ab und zu aber auch grössere Flieger. Mein längster simulierter Flug war
+                    von Zürich nach Kanada, wo ich ca. 8 Stunden mit einer Boeing 787 flog.
                 </p>
-    )
+            </section>
+        </div>
+    );
 }

src/app/page.js

@@ -4,13 +4,20 @@ import {Button} from "@/components/ui/button";
 export default function Home() {
     return (
         <div>
-            <div className="flex dark:animate-pulse-border-dark animate-pulse-border-light justify-between h-screen
+            <div className="flex flex-col md:flex-row dark:animate-pulse-border-dark animate-pulse-border-light
-            items-center border-b-2 border-x-2 border-emerald-800 dark:border-emerald-300 w-screen p-0 m-0">
+                        justify-between h-screen items-center border-b-2 border-x-2 border-emerald-800
-                <section className={"w-1/2 md:w-1/3 p-5 place-content-center"}>
+                        dark:border-emerald-300 w-screen p-0 m-0">
-                    <img className={"w-sm pl-20"} src={"/img.png"} alt={"Bild von Kristian"}/>
+
+                <section className="order-2 md:order-1 w-full md:w-1/3 p-5 flex justify-center">
+                    <img
+                        className="w-2/3 mx-auto md:w-sm md:pl-20"
+                        src="/img.jpeg"
+                        alt="Bild von Kristian"
+                    />
                 </section>
-                <section className={"flex flex-col items-center w-1/2 md:w-2/3 left-1/2 md:left-1/3 p-10"}>
+
-                    <h1 className={"text-3xl md:text-6xl dark:animate-pulse-dark animate-pulse-light p-2"}>Willkommen!</h1>
+                <section className="order-1 md:order-2 flex flex-col items-center w-full md:w-2/3 p-10">
+                    <h1 className="text-3xl md:text-6xl dark:animate-pulse-dark animate-pulse-light p-2">Willkommen!</h1>
                     <p className={"md:text-2xl justify-items-center text-center"}>
                         Mein Name ist Kristian und bin Schüler an der Informatikmittelschule in Hottingen. Ich
                         programmiere

src/components/burger.jsx

@@ -26,7 +26,7 @@ export default function Burger() {
                     <li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
                         <Accordion.Root className="" type={"multiple"}>
                             <Accordion.Item value={"item-1"}>
-                                <Accordion.Trigger>Projects</Accordion.Trigger>
+                                <Accordion.Trigger>Projekte</Accordion.Trigger>
                                 <Accordion.Content className="flex justify-center flex-col p-2">
                                     <Link className="text-lg p-2" target={"_blank"} href="https://github.com/michi-mk-zh/PrWR-Porsche"
                                           onClick={() => setIsOpen(!isOpen)}>Wirtschaftsgeschichte von Porsche</Link>