update

2025-01-05 21:05:18 +01:00
parent 143bd821e5
commit 33b8b44b1f
13 changed files with 166 additions and 42 deletions
--- a/app/Projects/[slug]/page.tsx
+++ b/app/Projects/[slug]/page.tsx
@@ -1,41 +1,51 @@
-// 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", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ type: "project_view", projectId: id }),
-          }).catch((err) => console.error("Failed to log project view", err));
+            // Log the project view
+            fetch("/api/stats", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              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>
--- a/app/components/Contact.tsx
+++ b/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>
--- a/app/components/Footer.tsx
+++ b/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>
--- a/app/components/Header.tsx
+++ b/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
--- a/app/components/Hero.tsx
+++ b/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>
--- a/app/components/Projects.tsx
+++ b/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
--- a/app/globals.css
+++ b/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;
 }
--- a/app/not-found.tsx
+++ b/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>
+  );
+}