- Removed unused SVG files from the project.

- Updated Contact page layout, adding contact links and restructuring sections.
- Modified CSS for improved styling and hover effects on contact links.
- Refactored metadata for layout with updated title, description, and favicon.
- Renamed `title` state on the Home page for clarity.

src/app/about/page.js

@@ -145,10 +145,9 @@ export default function About() {
         setTimelineFinished(currentSection === timelineData.length - 1);
     }, [currentSection, timelineData.length]);
     return (
-        // Ändern Sie den äußeren Container-Style
         <div style={{
             width: "100%",
-            position: "relative", // Hinzugefügt
+            position: "relative",
             overflowX: "hidden"
         }}>
             <FadeInSection>

src/app/contact/page.js

@@ -1,12 +1,10 @@
 "use client";
 
-import React, {useEffect} from "react";
-import Link from "next/link";
+import { useEffect } from "react";
 import Image from "next/image";
 
 export default function ContactPage() {
     useEffect(() => {
-        // Load Ionicons if not already present
         if (!window.customElements.get("ion-icon")) {
             const script = document.createElement("script");
             script.setAttribute("type", "module");
@@ -23,45 +21,53 @@ export default function ContactPage() {
     return (
         <div className="css_body">
             <main>
-                <h1>Kontakt und Impressum</h1>
+                <h1>Kontakt & Impressum</h1>
 
                 <article>
                     <h2>Kontakt</h2>
                     <section className="contact-list">
                         <div className="contact-item">
+                            <Image
+                                className="contact-pic"
+                                src="https://avatars.githubusercontent.com/u/143030312?v=4"
+                                alt="Frederik Spirgi"
+                                width={180}
+                                height={180}
+                            />
                             <p className="contact-name">Frederik Spirgi</p>
-                            <a className="contact-link" href="https://github.com/IM23a-spirgif" target="_blank"
-                               rel="noopener noreferrer">
-                                <img className="contact-pic" src="https://avatars.githubusercontent.com/u/143030312?v=4"
-                                     alt="Frederik Spirgi"/>
-                                <span className="icon">
-                  Writer & Developer
-                  <br/>
-                  <ion-icon name="logo-github"></ion-icon>
-                </span>
-                            </a>
+                            <div className="contact-links">
+                                <a
+                                    className="contact-link"
+                                    href="https://github.com/IM23a-spirgif"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    <ion-icon name="logo-github"></ion-icon>
+                                    <span>GitHub</span>
+                                </a>
+                                <a className="contact-link" href="mailto:Frederik@spirgi.com">
+                                    <ion-icon name="mail-outline"></ion-icon>
+                                    <span>Email</span>
+                                </a>
+                                <a className="contact-link" href="tel:+41775337036">
+                                    <ion-icon name="call-outline"></ion-icon>
+                                    <span>Phone</span>
+                                </a>
+                            </div>
                         </div>
                     </section>
                 </article>
-
                 <article>
                     <h2>Impressum</h2>
                     <section className="impressum">
-                        <p className="impressum-item">
-                            <strong>Frederik Spirgi</strong><br/>
-                            Frederik@spirgi.com<br/>
+                        <div className="impressum-item">
+                            <strong>Frederik Spirgi</strong><br />
+                            Frederik@spirgi.com<br />
                             077 533 70 36
-                        </p>
+                        </div>
                     </section>
                 </article>
             </main>
         </div>
     );
 }
-
-function toggleSidebar() {
-    const sidebar = document.getElementById("sidebar");
-    if (!sidebar) return;
-    const isOpen = sidebar.style.transform === "translateX(0%)";
-    sidebar.style.transform = isOpen ? "translateX(-100%)" : "translateX(0%)";
-}

src/app/globals.css

@@ -411,14 +411,30 @@ nav.navbar {
     color: #ffffff;
 }
 
-.contact-link {
-    text-decoration: none;
-    color: #ddd;
+.contact-links {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 0.5rem;
-    position: relative;
+    gap: 0.75rem;
+    margin-top: 1rem;
+}
+
+.contact-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #ccc;
+    font-size: 1rem;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.contact-link:hover {
+    color: #fff;
+}
+
+.contact-link ion-icon {
+    font-size: 1.2rem;
 }
 
 .contact-link .icon {

src/app/layout.js

@@ -14,8 +14,11 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata = {
-    title: "Fretux Portfolio",
-    description: "Frederik Spirgi – Full-stack developer",
+    title: "Fretux",
+    description: "Frederik Spirgi – Frontend developer",
+    icons: {
+        icon: "/favicon.ico",
+    },
 };
 
 export default function RootLayout({ children }) {

src/app/page.js

@@ -7,7 +7,7 @@ import FadeInSection from "./components/FadeInSection";
 
 export default function Home() {
     const [showScrollPrompt, setShowScrollPrompt] = useState(false);
-    const [title, setTitle] = useState("Fretux");
+    const [title, setTitle] = useState("Frederik Spirgi");
     const [phase, setPhase] = useState("normal");
     useEffect(() => {
         let fadeTimeout;