update

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