feat: implement project fetching and markdown rendering for enhanced project display

app/Projects/[slug]/page.tsx

@@ -1,18 +1,22 @@
+// app/Projects/[slug]/page.tsx
 "use client";
 
 import {useParams, useRouter} from "next/navigation";
 import {useEffect, useState} from "react";
 import Link from "next/link";
-import Image from "next/image";
 import Header from "../../components/Header";
 import Footer from "./Footer";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import matter from "gray-matter";
 
 interface Project {
     id: string;
     title: string;
-    slug: string;
     description: string;
-    link: string;
+    text: string;
+    slug: string;
     image: string;
 }
 
@@ -24,28 +28,34 @@ export default function ProjectDetail() {
 
     useEffect(() => {
         if (slug) {
-            fetch("/data/projects.json")
+            fetch(`/projects/${slug}.md`)
-                .then((res) => res.json())
+                .then((res) => res.text())
-                .then((data: Project[]) => {
+                .then((content) => {
-                    const found = data.find((proj) => proj.slug === slug);
+                    const {data, content: markdownContent} = matter(content);
-                    if (found) {
+                    setProject({
-                        setProject(found);
+                        id: data.id,
+                        title: data.title,
+                        description: data.description,
+                        text: markdownContent,
+                        slug: slug,
+                        image: data.image,
+                    });
 
-                        // Log the project view
+                    // Log the project view
-                        fetch("/api/stats", {
+                    fetch("/api/stats", {
-                            method: "POST",
+                        method: "POST",
-                            headers: {
+                        headers: {
-                                "Content-Type": "application/json",
+                            "Content-Type": "application/json",
-                            },
+                        },
-                            body: JSON.stringify({
+                        body: JSON.stringify({
-                                type: "project_view",
+                            type: "project_view",
-                                projectId: found.id,
+                            projectId: data.id,
-                            }),
+                        }),
-                        }).catch((err) => console.error("Failed to log project view", err));
+                    }).catch((err) => console.error("Failed to log project view", err));
-                    } else {
+                })
-                        // Redirect to 404 if project not found
+                .catch(() => {
-                        router.replace("/not-found");
+                    // Redirect to 404 if project not found
-                    }
+                    router.replace("/not-found");
                 });
         }
     }, [slug, router]);
@@ -59,26 +69,18 @@ export default function ProjectDetail() {
             <Header/>
             <div className="flex-grow p-10 pt-24">
                 <div
-                    className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto">
+                    className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
-                    <h1 className="text-4xl font-bold text-gray-800 dark:text-white">
+                    <div className="mt-4 text-gray-600 dark:text-gray-300 markdown">
-                        {project.title}
+                        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
-                    </h1>
+                            {project.text}
-                    <Image
+                        </ReactMarkdown>
-                        src={project.image}
+                    </div>
-                        alt={project.title}
+                    <div className={"mt-10"}>
-                        width={400}
+                        <button
-                        height={400}
+                            className={"md:w-1/6 p-3 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl hover:from-blue-600 hover:to-purple-600 transition"}>
-                        className="mt-4 w-full max-w-md rounded shadow-lg"
+                            <Link href="/">Back to Projects</Link>
-                    />
+                        </button>
-                    <p className="mt-4 text-gray-600 dark:text-gray-300">
+                    </div>
-                        {project.description}
-                    </p>
-                    <Link
-                        href={`/`}
-                        className="mt-4 inline-block text-blue-500 hover:underline"
-                    >
-                        Go back Home
-                    </Link>
                 </div>
             </div>
             <Footer/>

app/api/projects/route.tsx

@@ -0,0 +1,26 @@
+import {NextResponse} from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+
+export async function GET() {
+    const projectsDirectory = path.join(process.cwd(), 'public/projects');
+    const filenames = fs.readdirSync(projectsDirectory);
+
+    console.log('Filenames:', filenames);
+
+    const projects = filenames.map((filename) => {
+        const filePath = path.join(projectsDirectory, filename);
+        const fileContents = fs.readFileSync(filePath, 'utf8');
+        const {data} = matter(fileContents);
+
+        return {
+            id: data.id,
+            title: data.title,
+            description: data.description,
+            slug: filename.replace('.md', ''),
+        };
+    });
+
+    return NextResponse.json(projects);
+}

app/components/Projects.tsx

@@ -8,16 +8,24 @@ interface Project {
     id: string;
     title: string;
     description: string;
-    link: string;
+    slug: string;
 }
 
 export default function Projects() {
     const [projects, setProjects] = useState<Project[]>([]);
 
     useEffect(() => {
-        fetch("/data/projects.json")
+        const fetchProjects = async () => {
-            .then((res) => res.json())
+            try {
-            .then((data) => setProjects(data));
+                const response = await fetch('/api/projects');
+                const projectsData = await response.json();
+                setProjects(projectsData);
+            } catch (error) {
+                console.error("Failed to fetch projects:", error);
+            }
+        };
+
+        fetchProjects();
     }, []);
 
     return (
@@ -29,7 +37,7 @@ export default function Projects() {
                 {projects.map((project) => (
                     <Link
                         key={project.id}
-                        href={`/Projects/${project.title.toLowerCase().replace(" ", "-")}`}
+                        href={`/Projects/${project.slug}`}
                         className="cursor-pointer"
                     >
                         <div
@@ -44,9 +52,8 @@ export default function Projects() {
                             </p>
                         </div>
                     </Link>
-
                 ))}
             </div>
         </section>
     );
-}
+}

app/globals.css

@@ -11,6 +11,71 @@ body {
     min-height: 100vh;
 }
 
+.markdown h1 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+    color: #333;
+}
+
+.markdown h2 {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-top: 1.25rem;
+    margin-bottom: 0.75rem;
+    color: #444;
+}
+
+.markdown h3 {
+    font-size: 1.75rem;
+    font-weight: bold;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    color: #555;
+}
+
+.markdown p {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
+    color: #666;
+}
+
+.markdown img {
+    max-width: 100%;
+    height: auto;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.markdown ul {
+    list-style-type: disc;
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.markdown ol {
+    list-style-type: decimal;
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.markdown blockquote {
+    border-left: 4px solid #ccc;
+    color: #777;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-style: italic;
+    background-color: #f9f9f9;
+    padding: 1rem;
+    border-radius: 4px;
+}
+
 .bg-radiant-animated {
     background: radial-gradient(circle at 20% 20%, #ff8185, transparent 25%),
     radial-gradient(circle at 80% 80%, #ffaa91, transparent 25%),

package.json

@@ -13,7 +13,11 @@
     "next": "15.1.3",
     "prisma": "^6.1.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-markdown": "^9.0.3",
+    "gray-matter": "^4.0.3",
+    "remark-gfm": "^4.0.0",
+    "rehype-raw": "^7.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

public/data/projects.json

@@ -1,34 +0,0 @@
-[
-  {
-    "id": "1",
-    "title": "Project One",
-    "slug": "project-one",
-    "description": "A brief description of Project One.",
-    "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/project-two",
-    "image": "/images/project-two.jpg"
-  },
-  {
-    "id": "3",
-    "title": "Project Three",
-    "slug": "project-three",
-    "description": "A brief description of Project Three.",
-    "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/project-marie-dennis",
-    "image": "/images/project-marie-dennis.jpg"
-  }
-]

public/projects/project-marie-dennis.md

@@ -0,0 +1,29 @@
+---
+id: "4"
+title: "Project Marie/Dennis"
+description: "Ein liebevolles Projekt über die gemeinsame Reise von Marie und Dennis."
+---
+
+# Project Marie/Dennis
+
+**Project Marie/Dennis** ist ein Herzensprojekt, das die tiefe Liebe zwischen Marie und Dennis feiert. Es dokumentiert
+ihre schönsten gemeinsamen Erinnerungen, besondere Momente und die vielen kleinen Dinge, die ihre Beziehung
+so einzigartig machen.
+
+## Unsere Liebesgeschichte
+
+Von den ersten Blicken bis zu den vielen gemeinsamen Abenteuern – Marie und Dennis verbindet eine besondere
+Geschichte voller Liebe, Vertrauen und Zusammenhalt. In jeder Herausforderung haben sie sich gegenseitig unterstützt,
+in jedem glücklichen Moment haben sie gemeinsam gelacht.
+
+## Besondere Erinnerungen
+
+- **Erstes Treffen** – Der magische Anfang einer wunderbaren Reise.
+- **Gemeinsame Rituale** – Vom Adventskalender voller liebevoller Überraschungen bis zu alltäglichen kleinen Gesten.
+- **Erfolgreiche Meilensteine** – Marie’s Abschlussarbeit, Dennis’ persönliche Entwicklungen und gemeinsame
+  Zukunftspläne.
+
+## Warum dieses Projekt?
+
+Es ist ein digitales Denkmal für eine wunderschöne Liebe – ein Ort voller Erinnerungen, voller Emotionen und voller
+Dankbarkeit. Dieses Projekt wird wachsen, so wie die Liebe zwischen Marie und Dennis mit jedem Tag stärker wird.

public/projects/project-one.md

@@ -0,0 +1,41 @@
+---
+id: "1"
+title: "AI-Powered Chatbot"
+description: "An intelligent chatbot designed to enhance customer service through natural language processing."
+---
+
+# AI-Powered Chatbot
+
+The AI-Powered Chatbot is a sophisticated conversational agent designed to assist businesses in automating customer
+interactions. Utilizing **Natural Language Processing (NLP)** and **Machine Learning (ML)**, it understands user queries
+and responds appropriately.
+
+## Overview
+
+With the increasing demand for instant customer support, businesses are shifting towards AI-driven solutions to handle
+customer interactions more efficiently. The AI-powered chatbot leverages state-of-the-art NLP techniques to process and
+interpret customer messages, ensuring accurate and helpful responses. This chatbot is built to learn and adapt, refining
+its accuracy with each conversation.
+
+Customer engagement is critical in today's digital landscape. A well-implemented chatbot improves user experience by
+reducing response times, ensuring accurate assistance, and enabling businesses to provide 24/7 support. Whether used
+in e-commerce, banking, healthcare, or IT services, the AI chatbot enhances operational efficiency while reducing costs.
+
+## Features
+
+- **Multi-language support**: Communicate with customers in various languages to break language barriers and
+  reach a global audience.
+- **24/7 availability**: Always online to handle customer inquiries, ensuring businesses never miss a potential lead or
+  support request.
+- **Integration with CRM**: Seamlessly connect with customer relationship management systems to provide personalized
+  and context-aware responses.
+- **Sentiment analysis**: Detect customer emotions to tailor responses accordingly, improving user satisfaction.
+- **Self-learning capabilities**: Uses machine learning to improve responses over time based on user interactions.
+- **Secure authentication**: Ensures secure user verification, protecting sensitive customer data.
+
+## Use Cases
+
+- **E-commerce support**: Automate order tracking, refunds, and general customer inquiries.
+- **Healthcare industry**: Assist patients with appointment scheduling and medical inquiries.
+- **Financial services**: Provide instant banking support and transaction details.
+- **IT helpdesk**: Troubleshoot user issues with automated responses and guided solutions.

public/projects/project-three.md

@@ -0,0 +1,45 @@
+---
+id: "3"
+title: "Smart IoT Home Automation System"
+description: "An IoT-powered system to enhance home automation and energy efficiency."
+---
+
+# Smart IoT Home Automation System
+
+The Smart IoT Home Automation System is designed to provide convenience, security, and energy efficiency by
+interconnecting household devices via the Internet of Things (IoT). Users can remotely monitor and control their homes
+through a mobile app or voice commands.
+
+## Overview
+
+Smart home technology is rapidly transforming the way people interact with their living spaces. By integrating
+IoT-enabled
+devices, homeowners can automate routine tasks, enhance security, and optimize energy usage. This system connects
+various smart devices, allowing seamless communication between them.
+
+With the rise of artificial intelligence and machine learning, smart home automation can now learn user preferences
+and adjust device settings accordingly. This creates a highly personalized and efficient home environment that not only
+offers convenience but also contributes to significant energy savings.
+
+## Features
+
+- **Voice and app control**: Operate devices via smartphone applications or virtual assistants like Alexa and Google
+  Assistant.
+- **Energy management**: Optimize power consumption by monitoring and adjusting electricity usage, leading to reduced
+  energy bills.
+- **Security integration**: Connect smart locks, cameras, and alarm systems to enhance home security.
+- **Customizable automation**: Set schedules and rules for devices to function automatically based on user preferences.
+- **Remote monitoring**: Check and control home appliances from anywhere using a mobile application.
+- **Emergency alerts**: Receive real-time alerts in case of fire, gas leaks, or unauthorized access.
+- **AI-driven automation**: Learn user habits and optimize home settings accordingly.
+
+## Use Cases
+
+- **Smart lighting**: Automatically adjust brightness based on time of day and room occupancy.
+- **Home security**: Monitor security cameras, lock doors remotely, and receive alerts for unusual activity.
+- **Climate control**: Adjust thermostats based on weather conditions and occupancy to maintain comfort and efficiency.
+- **Elderly assistance**: Improve quality of life for seniors by automating tasks and ensuring their safety.
+- **Energy efficiency**: Monitor and reduce power consumption dynamically based on usage patterns.
+
+This IoT-based system not only makes daily life easier but also contributes to a more sustainable future by ensuring
+intelligent energy usage and minimizing waste.

public/projects/project-two.md

@@ -0,0 +1,37 @@
+---
+id: "2"
+title: "Blockchain-Based Voting System"
+description: "A secure and transparent voting system leveraging blockchain technology."
+---
+
+# Blockchain-Based Voting System
+
+This project aims to revolutionize voting systems by leveraging **blockchain** to ensure security, transparency, and
+immutability. The system enables safe and verifiable elections while preventing voter fraud and manipulation.
+
+## Overview
+
+Traditional voting systems are prone to various security risks such as hacking, ballot tampering, and voter fraud.
+Blockchain technology offers a decentralized approach where every vote is securely recorded, making the process
+transparent and tamper-proof. By eliminating the need for intermediaries, blockchain voting provides a direct,
+cost-effective,
+and highly secure method of conducting elections.
+
+The system ensures that each vote is unique, immutable, and instantly verifiable, thereby eliminating common voting
+challenges such as multiple voting, unauthorized access, and discrepancies in counting. Voter anonymity is also
+maintained through advanced cryptographic techniques, ensuring that privacy is never compromised.
+
+## Features
+
+- **Decentralized ledger**: Ensures tamper-proof voting records by storing votes on a distributed network.
+- **Anonymous yet verifiable**: Protects voter privacy while ensuring authenticity through cryptographic verification.
+- **Smart contracts**: Automates vote counting and validation, reducing the risk of human error.
+- **Public auditing**: Allows independent parties to audit election results without compromising voter anonymity.
+- **Remote voting**: Enables secure voting from anywhere, increasing accessibility and voter participation.
+- **Immutable transactions**: Once recorded, votes cannot be altered, ensuring trust and fairness.
+
+## Use Cases
+
+- **National elections**: Ensure transparency and security in presidential and parliamentary elections.
+- **Corporate voting**: Facilitate decision-making in organizations and shareholder meetings.
+- **University elections**: Implement secure and transparent voting systems for student bodies.