134 lines
4.5 KiB
TypeScript
134 lines
4.5 KiB
TypeScript
"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)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|