update

app/Projects/[id]/page.tsx

@@ -0,0 +1,60 @@
+// app/Projects/[id]/page.tsx
+"use client";
+
+import { useParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+interface Project {
+  id: string;
+  title: string;
+  description: string;
+  link: string;
+}
+
+export default function ProjectDetail() {
+  const params = useParams();
+  const { id } = params as { id: string };
+  const [project, setProject] = useState<Project | null>(null);
+
+  useEffect(() => {
+    if (id) {
+      fetch("/data/projects.json")
+        .then((res) => res.json())
+        .then((data: Project[]) => {
+          const found = data.find((proj) => proj.id === id);
+          setProject(found || null);
+
+          // 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));
+        });
+    }
+  }, [id]);
+
+  if (!project) {
+    return <div className="p-10 text-center">Loading...</div>;
+  }
+
+  return (
+    <div className="p-10 bg-gray-100 dark:bg-gray-800 min-h-screen">
+      <h1 className="text-4xl font-bold text-gray-800 dark:text-white">
+        {project.title}
+      </h1>
+      <p className="mt-4 text-gray-600 dark:text-gray-300">
+        {project.description}
+      </p>
+      <Link
+        href={project.link}
+        className="mt-4 inline-block text-blue-500 hover:underline"
+      >
+        Visit Project
+      </Link>
+    </div>
+  );
+}

app/api/stats/route.ts

@@ -0,0 +1,29 @@
+// app/api/stats/route.ts
+import { NextResponse } from "next/server";
+
+const stats = {
+  views: 0,
+  projectsViewed: {} as { [key: string]: number },
+};
+
+export async function GET() {
+  return NextResponse.json(stats);
+}
+
+export async function POST(request: Request) {
+  const { type, projectId } = await request.json();
+
+  if (type === "page_view") {
+    stats.views += 1;
+  }
+
+  if (type === "project_view" && projectId) {
+    if (stats.projectsViewed[projectId]) {
+      stats.projectsViewed[projectId] += 1;
+    } else {
+      stats.projectsViewed[projectId] = 1;
+    }
+  }
+
+  return NextResponse.json({ message: "Stats updated", stats });
+}

app/components/Contact.tsx

@@ -0,0 +1,38 @@
+// app/components/Contact.tsx
+"use client";
+
+export default function Contact() {
+  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">
+        <input
+          type="text"
+          placeholder="Name"
+          className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          required
+        />
+        <input
+          type="email"
+          placeholder="Email"
+          className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          required
+        />
+        <textarea
+          placeholder="Message"
+          className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          rows={5}
+          required
+        ></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"
+        >
+          Send
+        </button>
+      </form>
+    </section>
+  );
+}

app/components/Footer.tsx

@@ -0,0 +1,18 @@
+// 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>
+      <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">
+          Back to Top
+        </button>
+      </Link>
+    </footer>
+  );
+}

app/components/Header.tsx

@@ -0,0 +1,32 @@
+// app/components/Header.tsx
+"use client";
+
+import Link from "next/link";
+
+export default function Header() {
+  return (
+    <header className="p-5 bg-gray-800 text-white">
+      <nav className="flex justify-between items-center">
+        <h1 className="text-lg font-bold">My Portfolio</h1>
+        <ul className="flex space-x-4 items-center">
+          <li>
+            <Link href="#about" className="hover:underline">
+              About
+            </Link>
+          </li>
+          <li>
+            <Link href="#projects" className="hover:underline">
+              Projects
+            </Link>
+          </li>
+          <li>
+            <Link href="#contact" className="hover:underline">
+              Contact
+            </Link>
+          </li>
+          {/* DarkModeToggle removed */}
+        </ul>
+      </nav>
+    </header>
+  );
+}

app/components/Hero.tsx

@@ -0,0 +1,20 @@
+// app/components/Hero.tsx
+
+import Link from "next/link";
+
+export default function Hero() {
+  return (
+    <section
+      id="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>
+      <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">
+          See My Work
+        </button>
+      </Link>
+    </section>
+  );
+}

app/components/Projects.tsx

@@ -0,0 +1,51 @@
+// app/components/Projects.tsx
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+interface Project {
+  id: string;
+  title: string;
+  description: string;
+  link: string;
+}
+
+export default function Projects() {
+  const [projects, setProjects] = useState<Project[]>([]);
+
+  useEffect(() => {
+    fetch("/data/projects.json")
+      .then((res) => res.json())
+      .then((data) => setProjects(data));
+  }, []);
+
+  return (
+    <section id="projects" className="p-10 bg-gray-100 dark:bg-gray-800">
+      <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
+        Projects
+      </h2>
+      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+        {projects.map((project) => (
+          <div
+            key={project.id}
+            className="p-4 border rounded shadow-lg bg-white dark:bg-gray-700"
+          >
+            <h3 className="text-2xl font-bold text-gray-800 dark:text-white">
+              {project.title}
+            </h3>
+            <p className="mt-2 text-gray-600 dark:text-gray-300">
+              {project.description}
+            </p>
+            <Link
+              href={`/Projects/${project.id}`}
+              className="mt-4 inline-block text-blue-500 hover:underline"
+            >
+              View Project
+            </Link>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

app/globals.css

@@ -1,21 +1,11 @@
+/* app/globals.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
+/* Global Dark Mode Styles */
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+    color: #ededed; /* Foreground color */
+    background: #0a0a0a; /* Background color */
+    font-family: Arial, Helvetica, sans-serif;
 }

app/layout.tsx

@@ -1,3 +1,5 @@
+// app/layout.tsx
+
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
@@ -13,17 +15,17 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Dennis's Portfolio",
+  description: "A portfolio website showcasing my work and skills.",
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en">
+    <html lang="en" className="dark">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >

app/page.tsx

@@ -1,101 +1,22 @@
-import Image from "next/image";
+// app/page.tsx
+"use client";
+
+import Header from "./components/Header";
+import Hero from "./components/Hero";
+import Projects from "./components/Projects";
+import Contact from "./components/Contact";
+import Footer from "./components/Footer";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
+    <>
+      <Header />
+      <main>
+        <Hero />
+        <Projects />
+        <Contact />
+        <Footer />
       </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+    </>
   );
 }

app/stats/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+
+export default function StatsDashboard() {
+  const [authenticated, setAuthenticated] = useState(false);
+  const [password, setPassword] = useState("");
+  const [stats, setStats] = useState<{
+    views: number;
+    projectsViewed: Record<string, number>;
+  } | null>(null);
+  const [error, setError] = useState("");
+
+  const handleLogin = () => {
+    // Simple password check. Replace with secure authentication.
+    if (password === "admin123") {
+      setAuthenticated(true);
+      fetchStats();
+    } else {
+      setError("Incorrect password.");
+    }
+  };
+
+  const fetchStats = async () => {
+    try {
+      const res = await fetch("/api/stats");
+      const data = await res.json();
+      setStats(data);
+    } catch (err) {
+      console.error(err);
+      setError("Failed to fetch stats.");
+    }
+  };
+
+  if (!authenticated) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
+        <div className="p-10 bg-white dark:bg-gray-700 rounded shadow-md">
+          <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">
+            Admin Login
+          </h2>
+          {error && <p className="text-red-500">{error}</p>}
+          <input
+            type="password"
+            placeholder="Enter Password"
+            className="w-full p-2 border rounded mb-4 dark:bg-gray-600 dark:border-gray-500 dark:text-white"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <button
+            onClick={handleLogin}
+            className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Login
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-10 bg-gray-100 dark:bg-gray-800 min-h-screen">
+      <h1 className="text-3xl font-bold text-gray-800 dark:text-white">
+        Statistics Dashboard
+      </h1>
+      {stats ? (
+        <div className="mt-6">
+          <p className="text-lg text-gray-700 dark:text-gray-300">
+            Total Views: {stats.views}
+          </p>
+          <h2 className="text-2xl font-semibold mt-4 text-gray-800 dark:text-white">
+            Project Views:
+          </h2>
+          <ul className="list-disc pl-5 mt-2 text-gray-700 dark:text-gray-300">
+            {Object.entries(stats.projectsViewed).map(([projectId, count]) => (
+              <li key={projectId}>
+                Project ID {projectId}: {count} view{count !== 1 ? "s" : ""}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : (
+        <p className="mt-4 text-gray-700 dark:text-gray-300">
+          Loading statistics...
+        </p>
+      )}
+    </div>
+  );
+}

package.json

@@ -9,19 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.1.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.1.3"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

public/data/projects.json

@@ -0,0 +1,26 @@
+[
+  {
+    "id": "1",
+    "title": "Project One",
+    "description": "A brief description of Project One.",
+    "link": "/Projects/1"
+  },
+  {
+    "id": "2",
+    "title": "Project Two",
+    "description": "A brief description of Project Two.",
+    "link": "/Projects/2"
+  },
+  {
+    "id": "3",
+    "title": "Project Three",
+    "description": "A brief description of Project Three.",
+    "link": "/Projects/3"
+  },
+  {
+    "id": "4",
+    "title": "Project Marie/Dennis",
+    "description": "Ich liebe Marie",
+    "link": "/Projects/4"
+  }
+]

tailwind.config.ts

@@ -1,18 +1,16 @@
+// tailwind.config.ts
 import type { Config } from "tailwindcss";
 
+// tailwind.config.js
 export default {
+  darkMode: "class", // Enables class-based dark mode
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./app/components/**/*.{js,ts,jsx,tsx}",
+    // Add other paths if necessary
   ],
   theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
+    extend: {},
   },
   plugins: [],
 } satisfies Config;