Switched to Next.Js

2026-03-14 13:48:16 +01:00
parent e60da1905c
commit b473840ed9
49 changed files with 3355 additions and 1588 deletions
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useProfile } from "../context/ProfileContext";
+import { Hero } from "../sections/Hero";
+import { WorkExperience } from "../sections/WorkExperience";
+import { ProjectCard } from "../components/ProjectCard";
+import { MiniProjectCard } from "../components/MiniProjectCard";
+import { ExperienceCard } from "../components/ExperienceCard";
+import { ExperienceModal } from "../components/ExperienceModal";
+import { MiniProjectModal } from "../components/MiniProjectModal";
+import { Navbar } from "../components/Navbar";
+import { Footer } from "../sections/Footer";
+import { useState } from "react";
+import type { Experience } from "../types";
+
+export default function Home() {
+  const {
+    glowColor, borderStatus, displayMessage, statusMessage,
+    rotatingMessages,
+    projects, miniProjects, setSelectedMiniProject,
+    experiences, setSelectedExperience, realWork,
+    selectedMiniProject, selectedExperience
+  } = useProfile();
+
+  const [showOldNames, setShowOldNames] = useState(false);
+  const oldUsernames = [
+    "getspaced (ingame)",
+    "Space (alternative)",
+    "Space-Banane (2022-2024)",
+  ];
+
+  const groupedExperiences = experiences.reduce(
+    (acc, exp) => {
+      if (!acc[exp.type]) acc[exp.type] = [];
+      acc[exp.type].push(exp);
+      return acc;
+    },
+    {} as Record<string, Experience[]>,
+  );
+
+  return (
+    <>
+      <Navbar />
+      <div className="space-y-24 pb-20 pt-20">
+        <Hero
+          glowColor={glowColor}
+          borderStatus={borderStatus}
+          displayMessage={displayMessage}
+          rotatingMessages={rotatingMessages}
+          statusMessage={statusMessage}
+          showOldNames={showOldNames}
+          setShowOldNames={setShowOldNames}
+          oldUsernames={oldUsernames}
+        />
+
+        <WorkExperience realWork={realWork} />
+
+        <section className="w-full max-w-6xl mx-auto space-y-12 px-4">
+          <div className="text-center space-y-4">
+            <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+              Featured Projects
+            </h2>
+            <p className="text-gray-400 max-w-2xl mx-auto">
+              A selection of my personal favorites. Many more on my GitHub.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {projects.map((project, index) => (
+              <ProjectCard key={index} project={project} />
+            ))}
+          </div>
+        </section>
+
+        <section className="w-full max-w-6xl mx-auto space-y-12 px-4">
+          <div className="text-center space-y-4">
+            <h2 className="text-3xl font-bold">More Projects</h2>
+            <p className="text-gray-400">Smaller projects or tools I've built.</p>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {miniProjects.map((project, index) => (
+              <MiniProjectCard
+                key={index}
+                project={project}
+                onClick={() => setSelectedMiniProject(project)}
+              />
+            ))}
+          </div>
+        </section>
+
+        <section className="w-full max-w-6xl mx-auto space-y-12 px-4 pb-20">
+          <div className="text-center space-y-4">
+            <h2 className="text-3xl font-bold">Skills & Experience</h2>
+            <p className="text-gray-400">Things I've worked with over the years.</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            {Object.entries(groupedExperiences).map(([type, items]) => (
+              <div key={type} className="space-y-6">
+                <h3 className="text-xl font-semibold border-l-4 border-blue-500 pl-4 capitalize">
+                  {type}
+                </h3>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  {items.map((exp, index) => (
+                    <ExperienceCard
+                      key={index}
+                      experience={exp}
+                      onClick={() => setSelectedExperience(exp)}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+
+      <Footer />
+
+      {selectedMiniProject && (
+        <MiniProjectModal
+          project={selectedMiniProject}
+          onClose={() => setSelectedMiniProject(null)}
+        />
+      )}
+      {selectedExperience && (
+        <ExperienceModal
+          experience={selectedExperience}
+          onClose={() => setSelectedExperience(null)}
+        />
+      )}
+    </>
+  );
+}
+