From 33b8b44b1f24648d15ee087dd6df81b513640121 Mon Sep 17 00:00:00 2001 From: Denshooter Date: Sun, 5 Jan 2025 21:05:18 +0100 Subject: [PATCH] update --- app/Projects/{[id] => [slug]}/page.tsx | 45 ++++++++++++++++--------- app/components/Contact.tsx | 45 +++++++++++++++++++++++-- app/components/Footer.tsx | 27 +++++++++++---- app/components/Header.tsx | 38 ++++++++++++++++++--- app/components/Hero.tsx | 6 ++-- app/components/Projects.tsx | 2 +- app/globals.css | 7 ++-- app/not-found.tsx | 22 ++++++++++++ public/data/projects.json | 16 ++++++--- public/images/project-marie-dennis.jpg | Bin 0 -> 5088111 bytes public/images/project-one.jpg | Bin 0 -> 5947081 bytes public/images/project-three.jpg | Bin 0 -> 2669507 bytes public/images/project-two.jpg | Bin 0 -> 2743674 bytes 13 files changed, 166 insertions(+), 42 deletions(-) rename app/Projects/{[id] => [slug]}/page.tsx (50%) create mode 100644 app/not-found.tsx create mode 100644 public/images/project-marie-dennis.jpg create mode 100644 public/images/project-one.jpg create mode 100644 public/images/project-three.jpg create mode 100644 public/images/project-two.jpg diff --git a/app/Projects/[id]/page.tsx b/app/Projects/[slug]/page.tsx similarity index 50% rename from app/Projects/[id]/page.tsx rename to app/Projects/[slug]/page.tsx index 9774b62..0860261 100644 --- a/app/Projects/[id]/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(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
Loading...
; @@ -46,6 +56,11 @@ export default function ProjectDetail() {

{project.title}

+ {project.title}

{project.description}

diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx index 16c8b8d..be728b3 100644 --- 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, + ) => { + 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 (

Contact Me

-
+ + {success && ( +

+ Your message has been sent successfully! +

+ )} + {error &&

{error}

} diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index 7536f72..ebd39d0 100644 --- 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 (