Implemented Contact Page

.idea/workspace.xml

@@ -4,14 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="15d653a3-00a9-440e-a365-0d5dba6a77a9" name="Changes" comment="Added proper text for projects and changed localization to german">
+    <list default="true" id="15d653a3-00a9-440e-a365-0d5dba6a77a9" name="Changes" comment="Updated layout and localization:  &#10;- Improved &quot;Impressum&quot; and &quot;Me&quot; page layouts.  &#10;- Replaced placeholder text with actual content on &quot;Me&quot; page.  &#10;- Renamed &quot;Projects&quot; to &quot;Projekte&quot; in the burger menu.">
-      <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$/public/img.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/app/contact/page.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/contact/page.js" afterDir="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/layout.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/layout.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/components/burger.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/burger.jsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -165,7 +161,7 @@
       <workItem from="1748435208992" duration="1091000" />
       <workItem from="1749106848452" duration="6796000" />
       <workItem from="1749710145212" duration="7446000" />
-      <workItem from="1750314584738" duration="3202000" />
+      <workItem from="1750314584738" duration="3869000" />
     </task>
     <task id="LOCAL-00001" summary="created a base layout">
       <option name="closed" value="true" />
@@ -343,7 +339,15 @@
       <option name="project" value="LOCAL" />
       <updated>1749713027509</updated>
     </task>
-    <option name="localTasksCounter" value="23" />
+    <task id="LOCAL-00023" summary="Updated layout and localization:  &#10;- Improved &quot;Impressum&quot; and &quot;Me&quot; page layouts.  &#10;- Replaced placeholder text with actual content on &quot;Me&quot; page.  &#10;- Renamed &quot;Projects&quot; to &quot;Projekte&quot; in the burger menu.">
+      <option name="closed" value="true" />
+      <created>1750318095078</created>
+      <option name="number" value="00023" />
+      <option name="presentableId" value="LOCAL-00023" />
+      <option name="project" value="LOCAL" />
+      <updated>1750318095078</updated>
+    </task>
+    <option name="localTasksCounter" value="24" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -372,6 +376,7 @@
     <MESSAGE value="Update project links in burger component and page layout" />
     <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" />
+    <MESSAGE value="Updated layout and localization:  &#10;- Improved &quot;Impressum&quot; and &quot;Me&quot; page layouts.  &#10;- Replaced placeholder text with actual content on &quot;Me&quot; page.  &#10;- Renamed &quot;Projects&quot; to &quot;Projekte&quot; in the burger menu." />
+    <option name="LAST_COMMIT_MESSAGE" value="Updated layout and localization:  &#10;- Improved &quot;Impressum&quot; and &quot;Me&quot; page layouts.  &#10;- Replaced placeholder text with actual content on &quot;Me&quot; page.  &#10;- Renamed &quot;Projects&quot; to &quot;Projekte&quot; in the burger menu." />
   </component>
 </project>

src/app/contact/page.js

@@ -1,8 +1,69 @@
+"use client";
+
+import { Mail, Github, MessageCircle } from "lucide-react";
+
 export default function Contact() {
-    return <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+  return (
-        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    <div
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+      className="flex flex-col md:flex-row
-        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+                 dark:animate-pulse-border-dark animate-pulse-border-light
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+                 justify-between h-screen items-center
-        takimata sanctus est Lorem ipsum dolor sit amet.</p>
+                 border-b-2 border-x-2 border-emerald-800 dark:border-emerald-300
+                 w-screen p-0 m-0"
+    >
+      <section className="flex flex-col items-center w-full p-10 gap-10">
+        <h1 className="text-3xl md:text-6xl dark:animate-pulse-dark animate-pulse-light p-2">
+          Kontakt
+        </h1>
+
+        <div className="flex flex-col gap-6 w-full max-w-lg">
+          <ContactCard
+            href="mailto:kriscerni@gmail.com"
+            icon={Mail}
+            label="E-Mail"
+            value="kriscerni@gmail.com"
+          />
+          {/*<ContactCard
+            href="https://discord.com/users/KrisHD#6748"
+            icon={MessageCircle}
+            label="Discord"
+            value="KrisHD#6748"
+          />
+          */}
+          <ContactCard
+            href="https://github.com/KrisHD1337"
+            icon={Github}
+            label="GitHub"
+            value="github.com/KrisHD1337"
+          />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function ContactCard({ href, icon: Icon, label, value }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center gap-4 p-5 rounded-lg border-2
+                 border-emerald-800 dark:border-emerald-300
+                 bg-white dark:bg-black/40 transition
+                 hover:scale-[1.02] hover:border-emerald-600
+                 dark:hover:border-emerald-400"
+    >
+      <Icon
+        size={32}
+        className="text-emerald-800 dark:text-emerald-300 shrink-0"
+      />
+      <div className="flex flex-col">
+        <span className="text-lg font-medium">{label}</span>
+        <span className="text-sm text-gray-600 dark:text-gray-400">
+          {value}
+        </span>
+      </div>
+    </a>
+  );
 }

src/app/layout.js

@@ -22,7 +22,7 @@ export default function RootLayout({children}) {
             case "/me":
                 return "Über mich";
             case "/contact":
-                return "Contact";
+                return "Kontakt";
             case "/projects/gambling":
                 return "Gambling API";
             case "/projects/stalinium":