update

app/Projects/[slug]/page.tsx

@@ -1,29 +1,32 @@
-// app/Projects/[id]/page.tsx
 "use client";
 
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 
 interface Project {
   id: string;
   title: string;
+  slug: string;
   description: string;
   link: string;
+  image: string;
 }
 
 export default function ProjectDetail() {
   const params = useParams();
-  const { id } = params as { id: string };
+  const router = useRouter();
+  const { slug } = params as { slug: string };
   const [project, setProject] = useState<Project | null>(null);
 
   useEffect(() => {
-    if (id) {
+    if (slug) {
       fetch("/data/projects.json")
         .then((res) => res.json())
         .then((data: Project[]) => {
-          const found = data.find((proj) => proj.id === id);
-          setProject(found || null);
+          const found = data.find((proj) => proj.slug === slug);
+          if (found) {
+            setProject(found);
 
             // Log the project view
             fetch("/api/stats", {
@@ -31,11 +34,18 @@ export default function ProjectDetail() {
               headers: {
                 "Content-Type": "application/json",
               },
-            body: JSON.stringify({ type: "project_view", projectId: id }),
+              body: JSON.stringify({
+                type: "project_view",
+                projectId: found.id,
+              }),
             }).catch((err) => console.error("Failed to log project view", err));
+          } else {
+            // Redirect to 404 if project not found
+            router.replace("/not-found");
+          }
         });
     }
-  }, [id]);
+  }, [slug, router]);
 
   if (!project) {
     return <div className="p-10 text-center">Loading...</div>;
@@ -46,6 +56,11 @@ export default function ProjectDetail() {
       <h1 className="text-4xl font-bold text-gray-800 dark:text-white">
         {project.title}
       </h1>
+      <img
+        src={project.image}
+        alt={project.title}
+        className="mt-4 w-full max-w-md rounded shadow"
+      />
       <p className="mt-4 text-gray-600 dark:text-gray-300">
         {project.description}
       </p>

app/components/Contact.tsx

@@ -1,34 +1,73 @@
-// app/components/Contact.tsx
 "use client";
 
+import { useState } from "react";
+
 export default function Contact() {
+  const [form, setForm] = useState({ name: "", email: "", message: "" });
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    // Replace this with actual form submission logic (e.g., API call)
+    try {
+      // Simulate a successful submission
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      setSuccess(true);
+      setForm({ name: "", email: "", message: "" });
+    } catch (err) {
+      setError("Failed to send message. Please try again.");
+    }
+  };
+
   return (
     <section id="contact" className="p-10 bg-gray-100 dark:bg-gray-800">
       <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
         Contact Me
       </h2>
-      <form className="mt-6 max-w-md mx-auto space-y-4">
+      <form onSubmit={handleSubmit} className="mt-6 max-w-md mx-auto space-y-4">
+        {success && (
+          <p className="text-green-500">
+            Your message has been sent successfully!
+          </p>
+        )}
+        {error && <p className="text-red-500">{error}</p>}
         <input
           type="text"
+          name="name"
           placeholder="Name"
           className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
           required
+          value={form.name}
+          onChange={handleChange}
         />
         <input
           type="email"
+          name="email"
           placeholder="Email"
           className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
           required
+          value={form.email}
+          onChange={handleChange}
         />
         <textarea
+          name="message"
           placeholder="Message"
           className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
           rows={5}
           required
+          value={form.message}
+          onChange={handleChange}
         ></textarea>
         <button
           type="submit"
-          className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800"
+          className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition"
         >
           Send
         </button>

app/components/Footer.tsx

@@ -1,15 +1,30 @@
-// app/components/Footer.tsx
-
 import Link from "next/link";
 
 export default function Footer() {
   return (
     <footer className="text-center p-10 bg-gray-800 text-white">
-      <h1 className="text-5xl font-bold">Hi, this is a Footer</h1>
-      <p className="mt-4 text-xl">Maybe some social links here</p>
-      <p>© Dennis Konkol 2024</p>
+      <h1 className="text-3xl font-bold">Thank You for Visiting</h1>
+      <p className="mt-4 text-xl">Connect with me on social platforms:</p>
+      <div className="flex justify-center space-x-4 mt-4">
+        <Link href="https://github.com/yourusername" target="_blank">
+          <img
+            src="/icons/github.svg"
+            alt="GitHub"
+            className="w-6 h-6 fill-current text-white hover:text-gray-400"
+          />
+        </Link>
+        <Link href="https://linkedin.com/in/yourusername" target="_blank">
+          <img
+            src="/icons/linkedin.svg"
+            alt="LinkedIn"
+            className="w-6 h-6 fill-current text-white hover:text-gray-400"
+          />
+        </Link>
+        {/* Add more social links as needed */}
+      </div>
+      <p className="mt-6">© Dennis Konkol 2024</p>
       <Link href="#hero">
-        <button className="mt-6 inline-block px-6 py-2 bg-black text-white rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">
+        <button className="mt-6 inline-block px-6 py-2 bg-black text-white rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">
           Back to Top
         </button>
       </Link>

app/components/Header.tsx

@@ -1,14 +1,44 @@
-// app/components/Header.tsx
 "use client";
 
 import Link from "next/link";
+import { useState } from "react";
 
 export default function Header() {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <header className="p-5 bg-gray-800 text-white">
-      <nav className="flex justify-between items-center">
+    <header className="p-5 bg-gray-800 text-white fixed w-full z-10">
+      <nav className="flex justify-between items-center max-w-6xl mx-auto">
         <h1 className="text-lg font-bold">My Portfolio</h1>
-        <ul className="flex space-x-4 items-center">
+        <button
+          className="md:hidden block focus:outline-none"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            {isOpen ? (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            ) : (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 8h16M4 16h16"
+              />
+            )}
+          </svg>
+        </button>
+        <ul className={`flex space-x-4 ${isOpen ? "block" : "hidden"} md:flex`}>
           <li>
             <Link href="#about" className="hover:underline">
               About

app/components/Hero.tsx

@@ -1,5 +1,3 @@
-// app/components/Hero.tsx
-
 import Link from "next/link";
 
 export default function Hero() {
@@ -9,9 +7,9 @@ export default function Hero() {
       className="text-center p-20 bg-gradient-to-r from-purple-400 to-blue-500 dark:from-gray-800 dark:to-gray-900 text-white"
     >
       <h1 className="text-5xl font-bold">Hi, I am Dennis</h1>
-      <p className="mt-4 text-xl">A student</p>
+      <p className="mt-4 text-xl">A passionate developer and student.</p>
       <Link href="#projects">
-        <button className="mt-6 inline-block px-6 py-2 bg-black text-white rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">
+        <button className="mt-6 inline-block px-6 py-2 bg-black text-white rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300 transition">
           See My Work
         </button>
       </Link>

app/components/Projects.tsx

@@ -38,7 +38,7 @@ export default function Projects() {
               {project.description}
             </p>
             <Link
-              href={`/Projects/${project.id}`}
+              href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
               className="mt-4 inline-block text-blue-500 hover:underline"
             >
               View Project

app/globals.css

@@ -1,11 +1,8 @@
-/* app/globals.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Global Dark Mode Styles */
+/* Custom Global Styles */
 body {
-    color: #ededed; /* Foreground color */
-    background: #0a0a0a; /* Background color */
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

app/not-found.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
+      <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
+        <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
+          404
+        </h1>
+        <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
+          Oops! The page you're looking for doesn't exist.
+        </p>
+        <Link
+          href="/"
+          className="mt-6 inline-block text-blue-500 hover:underline"
+        >
+          Go Back Home
+        </Link>
+      </div>
+    </div>
+  );
+}

public/data/projects.json

@@ -2,25 +2,33 @@
   {
     "id": "1",
     "title": "Project One",
+    "slug": "project-one",
     "description": "A brief description of Project One.",
-    "link": "/Projects/1"
+    "link": "/Projects/project-one",
+    "image": "/images/project-one.jpg"
   },
   {
     "id": "2",
     "title": "Project Two",
+    "slug": "project-two",
     "description": "A brief description of Project Two.",
-    "link": "/Projects/2"
+    "link": "/Projects/project-two",
+    "image": "/images/project-two.jpg"
   },
   {
     "id": "3",
     "title": "Project Three",
+    "slug": "project-three",
     "description": "A brief description of Project Three.",
-    "link": "/Projects/3"
+    "link": "/Projects/project-three",
+    "image": "/images/project-three.jpg"
   },
   {
     "id": "4",
     "title": "Project Marie/Dennis",
+    "slug": "project-marie-dennis",
     "description": "Ich liebe Marie",
-    "link": "/Projects/4"
+    "link": "/Projects/project-marie-dennis",
+    "image": "/images/project-marie-dennis.jpg"
   }
 ]