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/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1,37 +0,0 @@
-# Workspace Instructions - my-portfolio
-
-This repository contains a personal portfolio website built with React 19, Vite, TypeScript, and Tailwind CSS 4.
-
-## Project Structure
- `src/components/`: Reusable UI components (cards, modals, navbar).
- `src/pages/`: Main page components.
- `src/sections/`: Modular layout sections used in pages.
- `src/types.ts`: Central location for all TypeScript interfaces and data models.
- `src/App.tsx`: The main entry point managing overall state and routing.
-
-## Development Workflow
- **Package Manager**: Use `pnpm`.
- **Commands**:
-  - `pnpm dev`: Start development server.
-  - `pnpm build`: Type-check and build for production.
-  - `pnpm lint`: Run ESLint.
-  - `pnpm preview`: Preview production build.
-
-## Code Conventions
- **Naming**: Use PascalCase for components and sections (e.g., `ProjectCard.tsx`).
- **Exports**: Prefer named exports for components.
- **Styling**: 
-  - Use Tailwind CSS 4 utility classes.
-  - Follow the "glassmorphism" aesthetic (e.g., `backdrop-blur-sm`, `bg-white/10`, `border-white/10`).
- **Data Models**:
-  - All new data structures (projects, experiences) must be defined in `src/types.ts`.
-  - Content is typically initialized in `App.tsx` and passed down as props.
-
-## Component Principles
- **Separation of Concerns**: Sections in `src/sections/` should focus on presentation and receive data via props from parent pages.
- **Modals**: Modal states (open/close, selected item) are managed in the parent component and passed down.
-
-## Best Practices
- Ensure strict TypeScript typing for all props.
- Use the `@danielgtmn/umami-react` for analytics features if needed.
- Maintain consistent hover effects and layout patterns across cards.
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,34 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Lint
-        run: pnpm run lint
-
-      - name: Build
-        run: pnpm run build
--- a/.gitignore
+++ b/.gitignore
@@ -1,24 +1,44 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+.pnpm-debug.log*

-node_modules
-dist
-dist-ssr
-*.local
+# env files (can opt-in for committing if needed)
+.env*

-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+old/
+.next
--- a/README.md
+++ b/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -6,12 +6,11 @@ services:
      - .:/app
    restart: always
    ports:
-      - "6756:6756"
+      - "6756:3000"
    command: >
      sh -c "
      npm i -g pnpm &&
      pnpm install &&
      pnpm build &&
-      if ! command -v serve >/dev/null 2>&1; then npm i -g serve; fi &&
-      npx serve -s -l 6756 dist
+      pnpm start
      "
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
--- a/index.html
+++ b/index.html
@@ -1,36 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="https://cdn.reversed.dev/pictures/cat.png" type="image/png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-  <title>Space - Developer & Enthusiast</title>
-  <meta name="title" content="Space - Developer & Enthusiast" />
-  <meta name="description" content="Personal portfolio site." />
-  <meta name="author" content="Space" />
-  <meta name="theme-color" content="#000000" />
-
-  <!-- Open Graph / Facebook -->
-  <meta property="og:type" content="website" />
-  <meta property="og:title" content="Space - Developer & Enthusiast" />
-  <meta property="og:description" content="Personal portfolio site." />
-  <meta property="og:image" content="https://cdn.reversed.dev/pictures/20250405_120402.png" />
-
-  <!-- Twitter -->
-  <meta property="twitter:card" content="summary_large_image" />
-  <meta property="twitter:title" content="Space - Developer & Enthusiast" />
-  <meta property="twitter:description" content="Personal portfolio site." />
-  <meta property="twitter:image" content="https://cdn.reversed.dev/pictures/20250405_120402.png" />
-
-  <meta name="robots" content="index, follow" />
-  <link rel="canonical" href="https://space.reversed.dev" />
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
--- a/package.json
+++ b/package.json
@@ -1,38 +1,32 @@
 {
-  "name": "getspaced",
+  "name": "next-profile",
+  "version": "0.1.0",
  "private": true,
-  "version": "0.0.0",
-  "type": "module",
  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
  },
  "dependencies": {
    "@danielgtmn/umami-react": "^1.1.6",
-    "@tailwindcss/vite": "^4.1.17",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.36.0",
    "lucide-react": "^0.577.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
    "react-router-dom": "^7.13.1",
-    "tailwindcss": "^4.1.17"
+    "tailwind-merge": "^3.5.0"
  },
  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "npm:rolldown-vite@7.2.5"
-  },
-  "overrides": {
-    "vite": "npm:rolldown-vite@7.2.5"
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/public/file.svg
+++ b/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/public/globe.svg
+++ b/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/public/next.svg
+++ b/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/public/window.svg
+++ b/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,267 +0,0 @@
-import { useEffect, useState, useMemo } from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import UmamiAnalytics from "@danielgtmn/umami-react";
-import type { Experience, MiniProject, Project, RealWork } from "./types";
-import { MiniProjectModal } from "./components/MiniProjectModal";
-import { ExperienceModal } from "./components/ExperienceModal";
-import { Navbar } from "./components/Navbar";
-import { Footer } from "./sections/Footer";
-
-// Pages
-import { Home } from "./pages/Home";
-import { About } from "./pages/AboutPage";
-import { Contact } from "./pages/ContactPage";
-
-function App() {
-  const [status, setStatus] = useState("");
-  const [borderStatus, setBorderStatus] = useState("border-gray-700");
-  const [glowColor, setGlowColor] = useState("rgba(55, 65, 81, 0.5)");
-  const [statusMessage, setStatusMessage] = useState("[??????]");
-  const [messageIndex, setMessageIndex] = useState(0);
-  const [displayMessage, setDisplayMessage] = useState("");
-  const [isScrambling, setIsScrambling] = useState(false);
-  const [showOldNames, setShowOldNames] = useState(false);
-  const [selectedMiniProject, setSelectedMiniProject] =
-    useState<MiniProject | null>(null);
-  const [selectedExperience, setSelectedExperience] =
-    useState<Experience | null>(null);
-
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [miniProjects, setMiniProjects] = useState<MiniProject[]>([]);
-  const [experiences, setExperiences] = useState<Experience[]>([]);
-  const [realWork, setRealWork] = useState<RealWork[]>([]);
-
-  const oldUsernames = [
-    "getspaced (ingame)",
-    "Space<63> (alternative)",
-    "Space-Banane (2022-2024)",
-  ];
-
-  const rotatingMessages = useMemo(
-    () => [
-      "Yelling at Claude",
-      "Shipping bugs",
-      "Compiling typescript files... Please wait.",
-      "Waiting for CI, this might take a while...",
-      "No debugger attached, but I'm sure it works ?",
-      "Seems fine, must be a problem with your machine lol",
-      "Waiting for pip, this might take a lifetime...",
-      "Collecting Spotify hours, this might take a while...",
-      "Fighting with go modules, i lost",
-      "Nuking Python for the 50th time, it's winning",
-      "Why is uv so cool?",
-      "Pulling 20-ish GB of node modules, see you next year",
-    ],
-    [],
-  );
-
-  const characters =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:',.<>?/`~" +
-    "?????????????????????????";
-
-  useEffect(() => {
-    if (status === "online") {
-      setBorderStatus("border-green-500");
-      setGlowColor("rgba(34, 197, 94, 0.5)");
-      setStatusMessage("Reachable");
-    } else if (status === "offline") {
-      setBorderStatus("border-gray-500");
-      setGlowColor("rgba(107, 114, 128, 0.5)");
-      setStatusMessage("Probably Away");
-    } else if (status === "dnd") {
-      setBorderStatus("border-red-600");
-      setGlowColor("rgba(220, 38, 38, 0.5)");
-      setStatusMessage("Not Reachable");
-    } else if (status === "idle") {
-      setBorderStatus("border-yellow-500");
-      setGlowColor("rgba(234, 179, 8, 0.5)");
-      setStatusMessage("Doing anything but work");
-    } else {
-      setBorderStatus("border-gray-700");
-      setGlowColor("rgba(55, 65, 81, 0.5)");
-      setStatusMessage("[??????]");
-    }
-  }, [status]);
-
-  useEffect(() => {
-    fetch(
-      "https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6",
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        setStatus(data.status);
-      })
-      .catch((err) => {
-        console.error(err);
-        setStatus("offline");
-      });
-  }, []);
-
-  // Scramble effect
-  useEffect(() => {
-    const targetMessage = rotatingMessages[messageIndex];
-
-    if (isScrambling) {
-      let iteration = 0;
-      const scrambleInterval = setInterval(() => {
-        setDisplayMessage(
-          targetMessage
-            .split("")
-            .map((char, index) => {
-              if (index < iteration) {
-                return targetMessage[index];
-              }
-              if (char === " " || /[\u{1F000}-\u{1F9FF}]/u.test(char)) {
-                return char;
-              }
-              return characters[Math.floor(Math.random() * characters.length)];
-            })
-            .join(""),
-        );
-
-        if (iteration >= targetMessage.length) {
-          clearInterval(scrambleInterval);
-          setIsScrambling(false);
-        }
-
-        iteration += 1; // Faster: increment by 1 instead of 1/3
-      }, 15); // Faster: reduce interval to 15ms
-
-      return () => clearInterval(scrambleInterval);
-    } else {
-      setDisplayMessage(targetMessage);
-    }
-  }, [messageIndex, isScrambling, characters, rotatingMessages]);
-
-  // Rotating message effect
-  useEffect(() => {
-    const messageInterval = setInterval(() => {
-      setIsScrambling(true);
-      setMessageIndex((prev) => (prev + 1) % rotatingMessages.length);
-    }, 7000);
-
-    return () => {
-      clearInterval(messageInterval);
-    };
-  }, [rotatingMessages.length]);
-
-  // Fetch data from API on mount
-  useEffect(() => {
-    const fetchRealWork = async () => {
-      try {
-        const res = await fetch(
-          "https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/real_work",
-        );
-
-        if (!res.ok) {
-          throw new Error("Failed to fetch real work data");
-        }
-
-        const data = (await res.json()) as RealWork[];
-        setRealWork(data);
-      } catch {
-        setRealWork([]);
-      }
-    };
-
-    fetch(
-      "https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/projects",
-    )
-      .then((res) => res.json())
-      .then(setProjects)
-      .catch(() => setProjects([]));
-
-    fetch(
-      "https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/mini_projects",
-    )
-      .then((res) => res.json())
-      .then(setMiniProjects)
-      .catch(() => setMiniProjects([]));
-
-    fetch(
-      "https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/experience",
-    )
-      .then((res) => res.json())
-      .then(setExperiences)
-      .catch(() => setExperiences([]));
-
-    fetchRealWork();
-  }, []);
-
-  return (
-    <Router>
-      <UmamiAnalytics
-        websiteId="7d28af45-d984-428e-af79-fb4dc7e91492"
-        url="https://not-a-tracker.reversed.dev"
-      />
-      <div className="relative min-h-screen bg-[#020205] text-white selection:bg-blue-500/30 font-sans overflow-x-hidden">
-        {/* Modern Background */}
-        <div className="fixed inset-0 z-0 pointer-events-none">
-          {/* Main Gradient Glows */}
-          <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-blue-600/10 blur-[120px] animate-pulse"></div>
-          <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-purple-600/10 blur-[120px] animate-pulse" style={{ animationDelay: "1s" }}></div>
-          
-          {/* Subtle Grid Pattern */}
-          <div 
-            className="absolute inset-0 opacity-[0.03]"
-            style={{
-              backgroundImage: `linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)`,
-              backgroundSize: "40px 40px"
-            }}
-          ></div>
-          
-          {/* Noise Overlay */}
-          <div className="absolute inset-0 opacity-[0.02] mix-blend-overlay pointer-events-none bg-[url('https://grainy-gradients.vercel.app/noise.svg')]"></div>
-        </div>
-
-        <Navbar />
-
-        <main className="relative z-10 pt-32 pb-20 px-6 mx-auto max-w-6xl">
-          <Routes>
-            <Route
-              path="/"
-              element={
-                <Home
-                  glowColor={glowColor}
-                  borderStatus={borderStatus}
-                  displayMessage={displayMessage}
-                  rotatingMessages={rotatingMessages}
-                  statusMessage={statusMessage}
-                  showOldNames={showOldNames}
-                  setShowOldNames={setShowOldNames}
-                  oldUsernames={oldUsernames}
-                  projects={projects}
-                  miniProjects={miniProjects}
-                  setSelectedMiniProject={setSelectedMiniProject}
-                  experiences={experiences}
-                  setSelectedExperience={setSelectedExperience}
-                  realWork={realWork}
-                />
-              }
-            />
-            <Route path="/about" element={<About />} />
-            <Route path="/contact" element={<Contact />} />
-          </Routes>
-        </main>
-
-        <Footer />
-
-        {selectedMiniProject && (
-          <MiniProjectModal
-            project={selectedMiniProject}
-            onClose={() => setSelectedMiniProject(null)}
-          />
-        )}
-
-        {selectedExperience && (
-          <ExperienceModal
-            experience={selectedExperience}
-            onClose={() => setSelectedExperience(null)}
-          />
-        )}
-      </div>
-    </Router>
-  );
-}
-
-export default App;
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { About as AboutSection } from "../../sections/About";
+import { Goals } from "../../sections/Goals";
+import { Navbar } from "../../components/Navbar";
+import { Footer } from "../../sections/Footer";
+
+export default function AboutPage() {
+  return (
+    <>
+      <Navbar />
+      <div className="space-y-24 py-24 max-w-4xl mx-auto px-4">
+        <div className="text-center space-y-4">
+          <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+            About Me
+          </h1>
+          <p className="text-gray-400 max-w-2xl mx-auto">
+            A little bit about me...
+          </p>
+        </div>
+
+        <AboutSection />
+
+        <Goals />
+
+        <section className="bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-sm">
+          <h3 className="text-2xl font-bold mb-4">Interests Outside of Coding</h3>
+          <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
+            <li className="flex items-center gap-2">
+              <span className="text-purple-400">✦</span> 3D Printing & Design
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="text-purple-400">✦</span> Graphical Design
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="text-purple-400">✦</span> Gaming & Hardware
+            </li>
+            <li className="flex items-center gap-2">
+              <span className="text-purple-400">✦</span> Open Source Contribution
+            </li>
+          </ul>
+        </section>
+      </div>
+      <Footer />
+    </>
+  );
+}
--- a/src/app/api/hello/route.ts
+++ b/src/app/api/hello/route.ts
@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  return NextResponse.json({ message: 'Hello World' });
+}
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { Contact as ContactSection } from "../../sections/Contact";
+import { Navbar } from "../../components/Navbar";
+import { Footer } from "../../sections/Footer";
+
+export default function ContactPage() {
+  return (
+    <>
+      <Navbar />
+      <div className="flex flex-col items-center justify-center min-h-screen px-4 space-y-12 w-full max-w-4xl mx-auto pt-24 pb-20 text-white">
+        <div className="text-center space-y-4 w-full">
+          <h1 className="text-5xl md:text-6xl font-extrabold text-white">
+            Let's <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">Connect</span>
+          </h1>
+          <p className="text-gray-400 text-xl max-w-xl mx-auto">
+            Whatever you've got in mind, I'm just a few clicks away.
+          </p>
+        </div>
+        
+        <div className="w-full max-w-3xl">
+          <ContactSection />
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-4xl text-center">
+          <div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-blue-500/30 transition-all duration-300">
+            <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">📧</div>
+            <h3 className="font-bold mb-1">Email</h3>
+            <p className="text-sm text-gray-500 underline underline-offset-4 decoration-white/20 hover:decoration-blue-500 transition-colors">
+              space@reversed.dev
+            </p>
+          </div>
+          <div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-purple-500/30 transition-all duration-300">
+            <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">👾</div>
+            <h3 className="font-bold mb-1">Discord</h3>
+            <p className="text-sm text-gray-500">@getspaced</p>
+          </div>
+          <div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-pink-500/30 transition-all duration-300">
+            <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">💻</div>
+            <h3 className="font-bold mb-1">GitHub</h3>
+            <p className="text-sm text-gray-500">github.com/Space-Banane</p>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,30 @@
+@import "tailwindcss";
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.animate-fade-in { animation: fade-in 0.2s ease-out; }
+.animate-scale-in { animation: scale-in 0.3s ease-out; }
+
+:root {
+  --background: #020205;
+  --foreground: #ffffff;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,45 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "@/app/globals.css";
+import { ClientProviders } from "../components/ClientProviders";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Space's portfolio",
+  description: "A developer from Germany building things.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ClientProviders>
+          <div className="relative min-h-screen bg-[#020205] text-white selection:bg-blue-500/30 overflow-x-hidden">
+            <div className="fixed inset-0 z-0 pointer-events-none">
+              <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-500/10 blur-[120px] rounded-full animate-pulse" />
+              <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-500/10 blur-[120px] rounded-full animate-pulse" />
+            </div>
+            {children}
+          </div>
+        </ClientProviders>
+      </body>
+    </html>
+  );
+}
+
+
--- 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)}
+        />
+      )}
+    </>
+  );
+}
+
--- a/src/components/ClientProviders.tsx
+++ b/src/components/ClientProviders.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { ProfileProvider } from "../context/ProfileContext";
+import UmamiAnalytics from "@danielgtmn/umami-react";
+
+export function ClientProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <UmamiAnalytics
+        websiteId="7d28af45-d984-428e-af79-fb4dc7e91492"
+        url="https://not-a-tracker.reversed.dev"
+      />
+      <ProfileProvider>
+        {children}
+      </ProfileProvider>
+    </>
+  );
+}
+
--- a/src/components/ExperienceCard.tsx
+++ b/src/components/ExperienceCard.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { Experience } from "../types";
 import { getTypeColor, getTypeIcon } from "./utils";

--- a/src/components/ExperienceModal.tsx
+++ b/src/components/ExperienceModal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { Experience } from "../types";
 import { getTypeColor, getTypeIcon } from "./utils";

--- a/src/components/MiniProjectCard.tsx
+++ b/src/components/MiniProjectCard.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { MiniProject } from "../types";

 export function MiniProjectCard({
--- a/src/components/MiniProjectModal.tsx
+++ b/src/components/MiniProjectModal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { MiniProject } from "../types";

 export function MiniProjectModal({
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,8 +1,11 @@
+"use client";
+
 import { useUmami } from "@danielgtmn/umami-react";
-import { Link, useLocation } from "react-router-dom";
+import Link from "next/link";
+import { usePathname } from "next/navigation";

 export function Navbar() {
-  const location = useLocation();
+  const pathname = usePathname();
  const { track } = useUmami();

  const navItems = [
@@ -12,7 +15,7 @@ export function Navbar() {
  ];

  const handleSwitch = (path: string) => {
-    track("nav_to_" + path.replaceAll("/", "_"));
+    track("nav_to_" + path.replaceAll("/", "root"));
  };

  return (
@@ -21,11 +24,11 @@ export function Navbar() {
        {navItems.map((item) => (
          <Link
            key={item.path}
-            to={item.path}
+            href={item.path}
            onClick={() => handleSwitch(item.path)}
            className={`text-sm font-semibold transition-all duration-300 px-4 py-2 rounded-full 
              ${
-                location.pathname === item.path
+                pathname === item.path
                  ? "bg-white text-black scale-105 shadow-xl shadow-white/10"
                  : "text-gray-400 hover:text-white"
              }`}
@@ -37,3 +40,4 @@ export function Navbar() {
    </nav>
  );
 }
+
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { Project } from "../types";

 export function ProjectCard({ project }: { project: Project }) {
--- a/src/context/ProfileContext.tsx
+++ b/src/context/ProfileContext.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState, useMemo } from "react";
+import type { Experience, MiniProject, Project, RealWork } from "../types";
+
+interface ProfileContextType {
+  status: string;
+  statusMessage: string;
+  borderStatus: string;
+  glowColor: string;
+  displayMessage: string;
+  isScrambling: boolean;
+  rotatingMessages: string[];
+  projects: Project[];
+  miniProjects: MiniProject[];
+  experiences: Experience[];
+  realWork: RealWork[];
+  selectedMiniProject: MiniProject | null;
+  setSelectedMiniProject: (p: MiniProject | null) => void;
+  selectedExperience: Experience | null;
+  setSelectedExperience: (e: Experience | null) => void;
+}
+
+const ProfileContext = createContext<ProfileContextType | undefined>(undefined);
+
+export function ProfileProvider({ children }: { children: React.ReactNode }) {
+  const [status, setStatus] = useState("");
+  const [borderStatus, setBorderStatus] = useState("border-gray-700");
+  const [glowColor, setGlowColor] = useState("rgba(55, 65, 81, 0.5)");
+  const [statusMessage, setStatusMessage] = useState("[??????]");
+  const [messageIndex, setMessageIndex] = useState(0);
+  const [displayMessage, setDisplayMessage] = useState("");
+  const [isScrambling, setIsScrambling] = useState(false);
+
+  const [selectedMiniProject, setSelectedMiniProject] = useState<MiniProject | null>(null);
+  const [selectedExperience, setSelectedExperience] = useState<Experience | null>(null);
+
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [miniProjects, setMiniProjects] = useState<MiniProject[]>([]);
+  const [experiences, setExperiences] = useState<Experience[]>([]);
+  const [realWork, setRealWork] = useState<RealWork[]>([]);
+
+  const rotatingMessages = useMemo(
+    () => [
+      "Yelling at Claude",
+      "Shipping bugs",
+      "Compiling typescript files... Please wait.",
+      "Waiting for CI, this might take a while...",
+      "No debugger attached, but I'm sure it works ?",
+      "Seems fine, must be a problem with your machine lol",
+      "Waiting for pip, this might take a lifetime...",
+      "Collecting Spotify hours, this might take a while...",
+      "Fighting with go modules, i lost",
+      "Nuking Python for the 50th time, it's winning",
+      "Why is uv so cool?",
+      "Pulling 20-ish GB of node modules, see you next year",
+    ],
+    [],
+  );
+
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:',.<>?/`~" +
+    "?????????????????????????";
+
+  useEffect(() => {
+    if (status === "online") {
+      setBorderStatus("border-green-500");
+      setGlowColor("rgba(34, 197, 94, 0.5)");
+      setStatusMessage("Reachable");
+    } else if (status === "offline") {
+      setBorderStatus("border-gray-500");
+      setGlowColor("rgba(107, 114, 128, 0.5)");
+      setStatusMessage("Probably Away");
+    } else if (status === "dnd") {
+      setBorderStatus("border-red-600");
+      setGlowColor("rgba(220, 38, 38, 0.5)");
+      setStatusMessage("Not Reachable");
+    } else if (status === "idle") {
+      setBorderStatus("border-yellow-500");
+      setGlowColor("rgba(234, 179, 8, 0.5)");
+      setStatusMessage("Doing anything but work");
+    } else {
+      setBorderStatus("border-gray-700");
+      setGlowColor("rgba(55, 65, 81, 0.5)");
+      setStatusMessage("[??????]");
+    }
+  }, [status]);
+
+  useEffect(() => {
+    fetch("https://shsf-api.reversed.dev/api/exec/6/c084ec4a-1b20-491e-ab2e-67c5fa8881e6")
+      .then((res) => res.json())
+      .then((data) => setStatus(data.status))
+      .catch(() => setStatus("offline"));
+
+    const fetchRealWork = async () => {
+      try {
+        const res = await fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/real_work");
+        if (res.ok) setRealWork(await res.json());
+      } catch { setRealWork([]); }
+    };
+
+    fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/projects")
+      .then(res => res.json()).then(setProjects).catch(() => setProjects([]));
+    fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/mini_projects")
+      .then(res => res.json()).then(setMiniProjects).catch(() => setMiniProjects([]));
+    fetch("https://shsf-api.reversed.dev/api/exec/4/e942538c-caa1-49d1-8953-dfab1e62f8cb/experience")
+      .then(res => res.json()).then(setExperiences).catch(() => setExperiences([]));
+
+    fetchRealWork();
+  }, []);
+
+  useEffect(() => {
+    const targetMessage = rotatingMessages[messageIndex];
+    if (isScrambling) {
+      let iteration = 0;
+      const interval = setInterval(() => {
+        setDisplayMessage(targetMessage.split("").map((char, i) => {
+          if (i < iteration) return targetMessage[i];
+          if (char === " " || /[\u{1F000}-\u{1F9FF}]/u.test(char)) return char;
+          return characters[Math.floor(Math.random() * characters.length)];
+        }).join(""));
+        if (iteration >= targetMessage.length) {
+          clearInterval(interval);
+          setIsScrambling(false);
+        }
+        iteration += 1;
+      }, 15);
+      return () => clearInterval(interval);
+    } else {
+      setDisplayMessage(targetMessage);
+    }
+  }, [messageIndex, isScrambling, characters, rotatingMessages]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsScrambling(true);
+      setMessageIndex((prev) => (prev + 1) % rotatingMessages.length);
+    }, 7000);
+    return () => clearInterval(interval);
+  }, [rotatingMessages.length]);
+
+  const value = {
+    status, statusMessage, borderStatus, glowColor, displayMessage, isScrambling,
+    rotatingMessages,
+    projects, miniProjects, experiences, realWork,
+    selectedMiniProject, setSelectedMiniProject,
+    selectedExperience, setSelectedExperience
+  };
+
+  return <ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>;
+}
+
+export function useProfile() {
+  const context = useContext(ProfileContext);
+  if (context === undefined) throw new Error("useProfile must be used within a ProfileProvider");
+  return context;
+}
--- a/src/index.css
+++ b/src/index.css
@@ -1,29 +0,0 @@
-@import "tailwindcss";
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes scale-in {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.animate-fade-in {
-  animation: fade-in 0.2s ease-out;
-}
-
-.animate-scale-in {
-  animation: scale-in 0.3s ease-out;
-}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
--- a/src/pages/AboutPage.tsx
+++ b/src/pages/AboutPage.tsx
@@ -1,39 +0,0 @@
-import { About as AboutSection } from "../sections/About";
-import { Goals } from "../sections/Goals";
-
-export function About() {
-  return (
-    <div className="space-y-24 py-12 max-w-4xl mx-auto px-4">
-      <div className="text-center space-y-4">
-        <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
-          About Me
-        </h1>
-        <p className="text-gray-400 max-w-2xl mx-auto">
-          A little bit about me...
-        </p>
-      </div>
-
-      <AboutSection />
-
-      <Goals />
-
-      <section className="bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-sm">
-        <h3 className="text-2xl font-bold mb-4">Interests Outside of Coding</h3>
-        <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
-          <li className="flex items-center gap-2">
-            <span className="text-purple-400">✦</span> 3D Printing & Design
-          </li>
-          <li className="flex items-center gap-2">
-            <span className="text-purple-400">✦</span> Graphical Design
-          </li>
-          <li className="flex items-center gap-2">
-            <span className="text-purple-400">✦</span> Gaming & Hardware
-          </li>
-          <li className="flex items-center gap-2">
-            <span className="text-purple-400">✦</span> Open Source Contribution
-          </li>
-        </ul>
-      </section>
-    </div>
-  );
-}
--- a/src/pages/ContactPage.tsx
+++ b/src/pages/ContactPage.tsx
@@ -1,38 +0,0 @@
-import { Contact as ContactSection } from "../sections/Contact";
-
-export function Contact() {
-  return (
-    <div className="flex flex-col items-center justify-center min-h-[70vh] px-4 space-y-12 w-full max-w-4xl mx-auto">
-      <div className="text-center space-y-4 w-full">
-        <h1 className="text-5xl md:text-6xl font-extrabold text-white">
-          Let's <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">Connect</span>
-        </h1>
-        <p className="text-gray-400 text-xl max-w-xl mx-auto">
-          Whatever you've got in mind, I'm just a few clicks away.
-        </p>
-      </div>
-      
-      <div className="w-full max-w-3xl">
-        <ContactSection />
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-4xl text-center">
-        <div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-blue-500/30 transition-all duration-300">
-          <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">📧</div>
-          <h3 className="font-bold mb-1">Email</h3>
-          <p className="text-sm text-gray-500">space@reversed.dev</p>
-        </div>
-        <div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-purple-500/30 transition-all duration-300">
-          <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">👾</div>
-          <h3 className="font-bold mb-1">Discord</h3>
-          <p className="text-sm text-gray-500">@getspaced</p>
-        </div>
-        <div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-pink-500/30 transition-all duration-300">
-          <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">💻</div>
-          <h3 className="font-bold mb-1">GitHub</h3>
-          <p className="text-sm text-gray-500">github.com/Space-Banane</p>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,156 +0,0 @@
-import { Hero } from "../sections/Hero";
-import { WorkExperience } from "../sections/WorkExperience";
-import type { MiniProject, Experience, Project, RealWork } from "../types";
-import { ProjectCard } from "../components/ProjectCard";
-import { MiniProjectCard } from "../components/MiniProjectCard";
-import { ExperienceCard } from "../components/ExperienceCard";
-
-interface HomeProps {
-  glowColor: string;
-  borderStatus: string;
-  displayMessage: string;
-  rotatingMessages: string[];
-  statusMessage: string;
-  showOldNames: boolean;
-  setShowOldNames: (show: boolean) => void;
-  oldUsernames: string[];
-  projects: Project[];
-  miniProjects: MiniProject[];
-  setSelectedMiniProject: (p: MiniProject) => void;
-  experiences: Experience[];
-  setSelectedExperience: (e: Experience) => void;
-  realWork: RealWork[];
-}
-
-export function Home({
-  glowColor,
-  borderStatus,
-  displayMessage,
-  rotatingMessages,
-  statusMessage,
-  showOldNames,
-  setShowOldNames,
-  oldUsernames,
-  projects,
-  miniProjects,
-  setSelectedMiniProject,
-  experiences,
-  setSelectedExperience,
-  realWork,
-}: HomeProps) {
-  const groupedExperiences = experiences.reduce(
-    (acc, exp) => {
-      if (!acc[exp.type]) {
-        acc[exp.type] = [];
-      }
-      acc[exp.type].push(exp);
-      return acc;
-    },
-    {} as Record<string, Experience[]>,
-  );
-
-  const rewriteType = (type: string) => {
-    switch (type) {
-      case "languages":
-        return "Languages";
-      case "software":
-        return "Software";
-      case "plattforms":
-        return "Platforms";
-      case "experience":
-        return "Experience";
-      case "other":
-        return "Other";
-      default:
-        return type.charAt(0).toUpperCase() + type.slice(1);
-    }
-  };
-
-  return (
-    <div className="space-y-24 pb-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 space-y-12">
-        <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 px-4">
-          {projects.map((project, index) => (
-            <ProjectCard key={index} project={project} />
-          ))}
-        </div>
-      </section>
-
-      <section className="w-full max-w-6xl space-y-12">
-        <div className="text-center space-y-4">
-          <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">
-            Mini Projects
-          </h2>
-          <p className="text-gray-400 max-w-2xl mx-auto">
-            Small tools, experiments, and fun little things I've built.
-          </p>
-        </div>
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 px-4">
-          {miniProjects.map((mini, index) => (
-            <MiniProjectCard
-              key={index}
-              project={mini}
-              onClick={() => setSelectedMiniProject(mini)}
-            />
-          ))}
-        </div>
-      </section>
-
-      <section className="w-full max-w-6xl space-y-16">
-        <div className="text-center space-y-4">
-          <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">
-            Experience
-          </h2>
-          <p className="text-gray-400 max-w-2xl mx-auto">
-            My journey through the tech world so far.
-          </p>
-        </div>
-
-        <div className="space-y-12 px-4">
-          {Object.entries(groupedExperiences)
-            .sort(([typeA], [typeB]) => typeA.localeCompare(typeB))
-            .map(([type, items]) => (
-              <div key={type} className="space-y-6">
-                <div className="flex items-center gap-4">
-                  <h3 className="text-xl font-semibold text-gray-200 capitalize whitespace-nowrap">
-                    {rewriteType(type)}
-                  </h3>
-                  <div className="h-px w-full bg-gradient-to-r from-gray-500/20 via-gray-500/10 to-transparent" />
-                </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  {items.map((exp, index) => (
-                    <ExperienceCard
-                      key={index}
-                      experience={exp}
-                      onClick={() => setSelectedExperience(exp)}
-                    />
-                  ))}
-                </div>
-              </div>
-            ))}
-        </div>
-      </section>
-    </div>
-  );
-}
--- a/src/sections/About.tsx
+++ b/src/sections/About.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 export function About() {
  return (
    <section className="w-full space-y-8">
--- a/src/sections/Contact.tsx
+++ b/src/sections/Contact.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 export function Contact() {
  return (
    <section className="w-full max-w-2xl text-center space-y-4 pb-8 mx-auto">
--- a/src/sections/Footer.tsx
+++ b/src/sections/Footer.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useUmami } from "@danielgtmn/umami-react";
 import { Github, Mail, MessageSquare } from "lucide-react";

--- a/src/sections/Goals.tsx
+++ b/src/sections/Goals.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 export function Goals() {
  return (
    <section className="w-full space-y-8">
--- a/src/sections/Hero.tsx
+++ b/src/sections/Hero.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 export function Hero({
  glowColor,
  borderStatus,
@@ -18,7 +20,7 @@ export function Hero({
  oldUsernames: string[];
 }) {
  return (
-    <section className="flex flex-col items-center text-center space-y-8 animate-fade-in">
+    <section className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in">
      <div className="relative group">
        <div
          className={`absolute -inset-1 rounded-full blur opacity-75 transition duration-500`}
--- a/src/sections/WorkExperience.tsx
+++ b/src/sections/WorkExperience.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { RealWork } from "../types";

 interface WorkExperienceProps {
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -0,0 +1 @@
+declare module "*.css";
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,35 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/**/*.d.ts",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules", "old"]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-});
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`