init project files

2026-03-16 21:25:53 +01:00
commit 2045808f00
40 changed files with 3436 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,139 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite logs files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Ignored default folder with query files
+/queries/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.idea/discord.xml
+++ b/.idea/discord.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="ASK" />
+    <option name="description" value="" />
+    <option name="applicationTheme" value="default" />
+    <option name="iconsTheme" value="default" />
+    <option name="button1Title" value="" />
+    <option name="button1Url" value="" />
+    <option name="button2Title" value="" />
+    <option name="button2Url" value="" />
+    <option name="customApplicationId" value="" />
+  </component>
+</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/portfolio.iml" filepath="$PROJECT_DIR$/.idea/portfolio.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/portfolio.iml
+++ b/.idea/portfolio.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,49 @@
+import type { Metadata, Viewport } from 'next';
+import { Syne, DM_Sans } from 'next/font/google';
+import '../styles/globals.scss';
+import Header from '@/components/layout/Header';
+import Footer from '@/components/layout/Footer';
+import { personal } from '@/content/personal';
+
+const syne = Syne({
+  subsets: ['latin'],
+  variable: '--font-display',
+  weight: ['400', '500', '600', '700', '800'],
+});
+
+const dmSans = DM_Sans({
+  subsets: ['latin'],
+  variable: '--font-body',
+  weight: ['400', '500'],
+});
+
+export const metadata: Metadata = {
+  title: `${personal.name} — ${personal.role}`,
+  description: personal.tagline,
+  openGraph: {
+    title: `${personal.name} — ${personal.role}`,
+    description: personal.tagline,
+    type: 'website',
+  },
+};
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 5,
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={`${syne.variable} ${dmSans.variable}`}>
+      <body>
+        <a href="#main" className="skipLink">
+          Skip to content
+        </a>
+        <Header />
+        <main id="main">{children}</main>
+        <Footer />
+      </body>
+    </html>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -0,0 +1,19 @@
+import Hero       from '@/components/sections/Hero';
+import TechStack  from '@/components/sections/TechStack';
+import Projects   from '@/components/sections/Projects';
+import About      from '@/components/sections/About';
+import Experience from '@/components/sections/Experience';
+import Contact    from '@/components/sections/Contact';
+
+export default function Home() {
+  return (
+    <>
+      <Hero />
+      <TechStack />
+      <Projects />
+      <About />
+      <Experience />
+      <Contact />
+    </>
+  );
+}
--- a/components/layout/Footer.module.scss
+++ b/components/layout/Footer.module.scss
@@ -0,0 +1,43 @@
+.footer {
+  border-top: 1px solid var(--border);
+  background: var(--bg-2);
+}
+
+.container {
+  @include container;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 1.25rem;
+}
+
+.copy {
+  font-size: 0.875rem;
+  color: var(--text-3);
+}
+
+.links {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.footerLink {
+  font-size: 0.875rem;
+  color: var(--text-3);
+  transition: color var(--transition);
+
+  &:hover {
+    color: var(--accent);
+  }
+}
+
+.back {
+  font-size: 1.25rem;
+  color: var(--text-2);
+  transition: color var(--transition);
+
+  &:hover {
+    color: var(--accent);
+  }
+}
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -0,0 +1,23 @@
+import { personal } from '@/content/personal';
+import styles from './Footer.module.scss';
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.container}>
+        <p className={styles.copy}>
+          © {new Date().getFullYear()} {personal.name}
+        </p>
+        <div className={styles.links}>
+          <a href={personal.social.github} target="_blank" rel="noopener noreferrer" className={styles.footerLink} aria-label="GitHub">
+            GitHub
+          </a>
+          <a href={`mailto:${personal.email}`} className={styles.footerLink}>
+            Contact
+          </a>
+          <a href="#home" className={styles.back} aria-label="Back to top">↑</a>
+        </div>
+      </div>
+    </footer>
+  );
+}
--- a/components/layout/Header.module.scss
+++ b/components/layout/Header.module.scss
@@ -0,0 +1,144 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  transition: box-shadow var(--transition);
+}
+
+.scrolled {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+}
+
+.container {
+  @include container;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+}
+
+.logo {
+  font-family: $font-display;
+  font-weight: 700;
+  font-size: 1.125rem;
+  letter-spacing: 0.02em;
+  color: var(--accent);
+  transition: opacity var(--transition);
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+
+  @include respond(md) {
+    display: none;
+  }
+}
+
+.navLink {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-2);
+  position: relative;
+  padding-bottom: 2px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--accent);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.25s ease;
+    border-radius: 1px;
+  }
+
+  &:hover {
+    color: var(--text);
+
+    &::after {
+      transform: scaleX(1);
+      transform-origin: left;
+    }
+  }
+}
+
+.hamburger {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  width: 44px;
+  height: 44px;
+  background: none;
+  border: none;
+  border-radius: 8px;
+  color: var(--text);
+
+  @include respond(md) {
+    display: flex;
+  }
+
+  &:hover {
+    background: var(--bg-2);
+  }
+
+  span {
+    display: block;
+    width: 20px;
+    height: 2px;
+    background: currentColor;
+    border-radius: 2px;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+  }
+}
+
+.open span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+
+.open span:nth-child(2) {
+  opacity: 0;
+}
+
+.open span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
+.mobileMenu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  padding: 0.5rem 0 1rem;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
+}
+
+.mobileLink {
+  display: block;
+  padding: 0.75rem clamp(1.25rem, 5vw, 2.5rem);
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-2);
+  transition: color var(--transition), background var(--transition);
+
+  &:hover {
+    color: var(--accent);
+    background: var(--bg-2);
+  }
+}
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -0,0 +1,71 @@
+'use client';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { personal } from '@/content/personal';
+import styles from './Header.module.scss';
+
+const navLinks = [
+  { label: 'Home',       href: '#home'       },
+  { label: 'Tech',       href: '#tech'       },
+  { label: 'Projects',   href: '#projects'   },
+  { label: 'About',      href: '#about'      },
+  { label: 'Experience', href: '#experience' },
+  { label: 'Contact',    href: '#contact'    },
+];
+
+export default function Header() {
+  const [scrolled, setScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const fn = () => setScrolled(window.scrollY > 80);
+    window.addEventListener('scroll', fn);
+    return () => window.removeEventListener('scroll', fn);
+  }, []);
+
+  return (
+    <header className={`${styles.header} ${scrolled ? styles.scrolled : ''}`}>
+      <div className={styles.container}>
+        <Link href="#home" className={styles.logo}>
+          Ole Sch.
+        </Link>
+
+        {/* Desktop Nav */}
+        <nav className={styles.nav} aria-label="Main navigation">
+          {navLinks.map(link => (
+            <a key={link.label} href={link.href} className={styles.navLink}>
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        {/* Hamburger */}
+        <button
+          className={`${styles.hamburger} ${menuOpen ? styles.open : ''}`}
+          onClick={() => setMenuOpen(v => !v)}
+          aria-label="Toggle menu"
+          aria-expanded={menuOpen}
+        >
+          <span /><span /><span />
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <nav className={styles.mobileMenu} aria-label="Mobile navigation">
+          {navLinks.map((link, i) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className={styles.mobileLink}
+              onClick={() => setMenuOpen(false)}
+              style={{ animationDelay: `${i * 0.05}s` }}
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      )}
+    </header>
+  );
+}
--- a/components/sections/About.module.scss
+++ b/components/sections/About.module.scss
@@ -0,0 +1,155 @@
+.section {
+  @include section;
+  background: var(--bg-2);
+  padding-block: clamp(4rem, 10vw, 7rem);
+}
+
+.container {
+  @include container;
+}
+
+.wrapper {
+  max-width: 640px;
+  margin-inline: auto;
+}
+
+.header {
+  margin-bottom: clamp(2rem, 4vw, 2.5rem);
+}
+
+.eyebrow {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--accent);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+}
+
+.heading {
+  font-family: $font-display;
+  font-size: clamp(2rem, 4.5vw, 2.5rem);
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+}
+
+.dot {
+  color: var(--accent);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(1.75rem, 3vw, 2.25rem);
+}
+
+.paragraphs {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.para {
+  font-size: clamp(1rem, 1.25vw, 1.0625rem);
+  color: var(--text-2);
+  line-height: 1.85;
+}
+
+.currently {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.currentlyLabel {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-3);
+  letter-spacing: 0.04em;
+}
+
+.currentlyTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--accent);
+  background: var(--accent-alpha);
+  border: 1px solid rgba(34, 211, 238, 0.2);
+  border-radius: 999px;
+  padding: 0.5rem 1rem;
+  transition: border-color var(--transition), background var(--transition);
+
+  &:hover {
+    border-color: var(--accent);
+    background: rgba(34, 211, 238, 0.18);
+  }
+}
+
+.quote {
+  margin: 0;
+  padding: 1.25rem 1.5rem;
+  font-size: clamp(0.9375rem, 1.1vw, 1rem);
+  font-style: italic;
+  color: var(--text-2);
+  line-height: 1.7;
+  background: var(--bg-3);
+  border-radius: var(--radius-lg);
+  border-left: 4px solid var(--accent);
+  box-shadow: 0 1px 0 0 var(--border);
+
+  @include respond(sm) {
+    padding: 1rem 1.25rem;
+  }
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  padding-top: 0.5rem;
+
+  @include respond(sm) {
+    gap: 0.75rem;
+  }
+}
+
+.stat {
+  text-align: center;
+  padding: 1.25rem 0.75rem;
+  background: var(--bg-3);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  transition: border-color var(--transition), transform var(--transition);
+
+  &:hover {
+    border-color: var(--border-light);
+    transform: translateY(-2px);
+  }
+}
+
+.statValue {
+  display: block;
+  font-family: $font-display;
+  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
+  font-weight: 800;
+  color: var(--accent);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.statLabel {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-3);
+  margin-top: 0.35rem;
+  letter-spacing: 0.02em;
+}
--- a/components/sections/About.tsx
+++ b/components/sections/About.tsx
@@ -0,0 +1,102 @@
+'use client';
+import { motion } from 'framer-motion';
+import { personal } from '@/content/personal';
+import styles from './About.module.scss';
+
+export default function About() {
+  return (
+    <section className={styles.section} id="about">
+      <div className={styles.container}>
+        <motion.div
+          className={styles.wrapper}
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-50px' }}
+          transition={{ duration: 0.5 }}
+        >
+          <header className={styles.header}>
+            <h2 className={styles.heading}>
+              A bit about me<span className={styles.dot}>.</span>
+            </h2>
+          </header>
+
+          <div className={styles.content}>
+            <div className={styles.paragraphs}>
+              {personal.aboutMe.paragraphs.map((p, i) => (
+                <motion.p
+                  key={i}
+                  className={styles.para}
+                  initial={{ opacity: 0, y: 12 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.4, delay: i * 0.08 }}
+                >
+                  {p}
+                </motion.p>
+              ))}
+            </div>
+
+            <motion.div
+              className={styles.currently}
+              initial={{ opacity: 0, y: 12 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.4, delay: 0.12 }}
+            >
+              <span className={styles.currentlyLabel}>Right now</span>
+              <div className={styles.currentlyTags}>
+                {personal.aboutMe.currently.map((item, i) => (
+                  <motion.span
+                    key={i}
+                    className={styles.tag}
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    whileInView={{ opacity: 1, scale: 1 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.3, delay: 0.1 + i * 0.05 }}
+                    whileHover={{ scale: 1.05 }}
+                  >
+                    {item}
+                  </motion.span>
+                ))}
+              </div>
+            </motion.div>
+
+            <motion.blockquote
+              className={styles.quote}
+              initial={{ opacity: 0, y: 12 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.4, delay: 0.18 }}
+            >
+              {personal.aboutMe.funFact}
+            </motion.blockquote>
+
+            <motion.div
+              className={styles.stats}
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={{ visible: { transition: { staggerChildren: 0.08 } } }}
+            >
+              {personal.stats.map((s, i) => (
+                <motion.div
+                  key={s.label}
+                  className={styles.stat}
+                  variants={{
+                    hidden: { opacity: 0, y: 14 },
+                    visible: { opacity: 1, y: 0 },
+                  }}
+                  transition={{ duration: 0.4, ease: [0.22, 0.61, 0.36, 1] }}
+                  whileHover={{ y: -2 }}
+                >
+                  <span className={styles.statValue}>{s.value}</span>
+                  <span className={styles.statLabel}>{s.label}</span>
+                </motion.div>
+              ))}
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
--- a/components/sections/Contact.module.scss
+++ b/components/sections/Contact.module.scss
@@ -0,0 +1,80 @@
+.section {
+  @include section;
+  background: var(--bg-2);
+}
+
+.container {
+  @include container;
+}
+
+.inner {
+  text-align: center;
+  max-width: 560px;
+  margin-inline: auto;
+}
+
+.heading {
+  font-family: $font-display;
+  font-size: clamp(2rem, 4vw, 2.75rem);
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 0.75rem;
+}
+
+.dot {
+  color: var(--accent);
+}
+
+.sub {
+  font-size: 1.0625rem;
+  color: var(--text-3);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.email {
+  display: inline-block;
+  font-family: $font-mono;
+  font-size: clamp(1rem, 2vw, 1.125rem);
+  font-weight: 500;
+  color: var(--accent);
+  margin-bottom: 2rem;
+  padding: 0.5rem 0.25rem 0.35rem;
+  @include accent-underline(2px);
+  transition: color var(--transition);
+  min-height: 44px;
+  line-height: 1.4;
+
+  &:hover {
+    color: var(--accent-dark);
+  }
+}
+
+.socials {
+  display: flex;
+  justify-content: center;
+  gap: 1.25rem;
+  flex-wrap: wrap;
+
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    color: var(--text-2);
+    transition: border-color var(--transition), color var(--transition);
+
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    &:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+  }
+}
--- a/components/sections/Contact.tsx
+++ b/components/sections/Contact.tsx
@@ -0,0 +1,71 @@
+'use client';
+import { motion } from 'framer-motion';
+import { personal } from '@/content/personal';
+import { SiGithub } from 'react-icons/si';
+import styles from './Contact.module.scss';
+
+export default function Contact() {
+  return (
+    <section className={styles.section} id="contact">
+      <div className={styles.container}>
+        <motion.div
+          className={styles.inner}
+          initial={{ opacity: 0, y: 28 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6, ease: [0.22, 0.61, 0.36, 1] }}
+        >
+          <motion.h2
+            className={styles.heading}
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4 }}
+          >
+            Let's work together<span className={styles.dot}>.</span>
+          </motion.h2>
+          <motion.p
+            className={styles.sub}
+            initial={{ opacity: 0, y: 8 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4, delay: 0.06 }}
+          >
+            Have a project in mind or just want to chat? My inbox is always open.
+          </motion.p>
+
+          <motion.div
+            initial={{ opacity: 0, y: 8 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4, delay: 0.12 }}
+          >
+            <a href={`mailto:${personal.email}`} className={styles.email}>
+              {personal.email}
+            </a>
+          </motion.div>
+
+          <motion.div
+            className={styles.socials}
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.4, delay: 0.18 }}
+          >
+            <motion.a
+              href={personal.social.github}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="GitHub"
+              whileHover={{ scale: 1.1, y: -2 }}
+              whileTap={{ scale: 0.95 }}
+              transition={{ duration: 0.2 }}
+            >
+              <SiGithub />
+            </motion.a>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
--- a/components/sections/Experience.module.scss
+++ b/components/sections/Experience.module.scss
@@ -0,0 +1,115 @@
+.section {
+  @include section;
+  background: var(--bg-2);
+  padding-block: clamp(4rem, 8vw, 6rem);
+}
+
+.container {
+  @include container;
+}
+
+.header {
+  margin-bottom: clamp(2rem, 4vw, 2.5rem);
+}
+
+.eyebrow {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--accent);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+}
+
+.heading {
+  font-family: $font-display;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.02em;
+}
+
+.dot {
+  color: var(--accent);
+}
+
+.grid {
+  display: grid;
+  gap: 1.25rem;
+}
+
+.card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem 1.75rem;
+  border-left: 4px solid var(--accent);
+  transition: border-color var(--transition), box-shadow var(--transition);
+
+  &:hover {
+    border-left-color: var(--accent-dark);
+    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.cardHeader {
+  margin-bottom: 0.75rem;
+}
+
+.period {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-3);
+  letter-spacing: 0.04em;
+  margin-bottom: 0.35rem;
+}
+
+.role {
+  font-family: $font-display;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 0.25rem;
+}
+
+.company {
+  font-size: 0.9375rem;
+  color: var(--accent);
+  transition: color var(--transition);
+
+  &:hover {
+    color: var(--accent-dark);
+  }
+}
+
+.desc {
+  font-size: 0.9375rem;
+  color: var(--text-2);
+  line-height: 1.65;
+  margin-bottom: 0.75rem;
+}
+
+.highlights {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--text-3);
+  line-height: 1.6;
+
+  li {
+    position: relative;
+    padding-left: 1rem;
+    margin-bottom: 0.4rem;
+
+    &::before {
+      content: '→';
+      position: absolute;
+      left: 0;
+      color: var(--accent);
+      font-weight: 600;
+    }
+  }
+}
--- a/components/sections/Experience.tsx
+++ b/components/sections/Experience.tsx
@@ -0,0 +1,56 @@
+'use client';
+import { motion } from 'framer-motion';
+import { experience } from '@/content/experience';
+import styles from './Experience.module.scss';
+
+export default function Experience() {
+  return (
+    <section className={styles.section} id="experience">
+      <div className={styles.container}>
+        <motion.header
+          className={styles.header}
+          initial={{ opacity: 0, y: 16 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          <span className={styles.eyebrow}>Experience</span>
+          <h2 className={styles.heading}>
+            Where I've worked<span className={styles.dot}>.</span>
+          </h2>
+        </motion.header>
+
+        <div className={styles.grid}>
+          {experience.map((item, i) => (
+            <motion.article
+              key={item.id}
+              className={styles.card}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-20px' }}
+              transition={{ duration: 0.45, delay: i * 0.1, ease: [0.22, 0.61, 0.36, 1] }}
+            >
+              <div className={styles.cardHeader}>
+                <span className={styles.period}>{item.period}</span>
+                <h3 className={styles.role}>{item.role}</h3>
+                {item.companyUrl ? (
+                  <a href={item.companyUrl} className={styles.company} target="_blank" rel="noopener noreferrer">
+                    {item.company} ↗
+                  </a>
+                ) : (
+                  <span className={styles.company}>{item.company}</span>
+                )}
+              </div>
+              <p className={styles.desc}>{item.description}</p>
+              <ul className={styles.highlights}>
+                {item.highlights.map((h, j) => (
+                  <li key={j}>{h}</li>
+                ))}
+              </ul>
+            </motion.article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/components/sections/Hero.module.scss
+++ b/components/sections/Hero.module.scss
@@ -0,0 +1,261 @@
+.hero {
+  @include section;
+  min-height: 100svh;
+  display: flex;
+  align-items: center;
+  overflow: visible;
+}
+
+.container {
+  @include container;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+
+  @include respond(lg) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.content {
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--text-3);
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 0.35rem 0.85rem;
+  margin-bottom: 1.5rem;
+}
+
+.dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: #22c55e;
+  animation: pulse-dot 2s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+.title {
+  font-family: $font-display;
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+}
+
+.name { color: var(--accent); }
+
+.roleWrapper {
+  font-family: $font-display;
+  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+  font-weight: 500;
+  color: var(--text-2);
+  height: 2.2em;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+}
+
+.bio {
+  font-size: 1.0625rem;
+  color: var(--text-3);
+  max-width: 520px;
+  margin-bottom: 2.5rem;
+  line-height: 1.75;
+}
+
+.ctas {
+  display: flex;
+  gap: 0.875rem;
+  flex-wrap: wrap;
+}
+
+.btnPrimary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 500;
+  font-size: 0.9375rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius);
+  transition: background var(--transition), transform var(--transition);
+
+  &:hover { background: var(--accent-dark); transform: translateY(-2px); }
+}
+
+.btnSecondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: transparent;
+  color: var(--text-2);
+  font-weight: 500;
+  font-size: 0.9375rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  transition: border-color var(--transition), color var(--transition);
+
+  &:hover { border-color: var(--accent); color: var(--accent); }
+}
+
+.visual {
+  position: relative;
+  height: 400px;
+  perspective: 800px;
+  overflow: visible;
+  isolation: isolate;
+
+  @include respond(lg) { display: none; }
+}
+
+.grid {
+  position: absolute;
+  left: 0;
+  right: -40px;
+  top: -40px;
+  bottom: -40px;
+  border-radius: var(--radius-lg);
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  z-index: 0;
+  /* Dot grid – dezentes Punktmuster, zurückgenommen */
+  background-image: radial-gradient(
+    circle at center,
+    var(--border) 1px,
+    transparent 1px
+  );
+  background-size: 24px 24px;
+  opacity: 0.35;
+  /* Leichter Verlauf von der Mitte nach außen */
+  mask-image: radial-gradient(
+    ellipse 80% 80% at 50% 50%,
+    black 20%,
+    transparent 85%
+  );
+  -webkit-mask-image: radial-gradient(
+    ellipse 80% 80% at 50% 50%,
+    black 20%,
+    transparent 85%
+  );
+}
+
+// ─── Apple-style Terminal ──────────────────────────────────
+.terminal {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  max-width: 340px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45);
+  transform: rotateY(-4deg) rotateX(2deg);
+  overflow: hidden;
+  font-family: $font-mono;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.terminalHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: rgba(40, 44, 52, 0.9);
+  border-bottom: 1px solid var(--border);
+}
+
+.trafficLights {
+  display: flex;
+  gap: 6px;
+}
+
+.trafficRed,
+.trafficYellow,
+.trafficGreen {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.trafficRed {
+  background: #ff5f57;
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+.trafficYellow {
+  background: #febc2e;
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+.trafficGreen {
+  background: #28c840;
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+.terminalTitle {
+  color: var(--text-3);
+  font-size: 0.75rem;
+  flex: 1;
+  text-align: center;
+  margin-right: 3rem;
+}
+
+.terminalBody {
+  padding: 1rem 1.25rem;
+  min-height: 160px;
+}
+
+.terminalLine {
+  margin-bottom: 0.25rem;
+}
+
+.prompt {
+  color: var(--accent);
+  margin-right: 0.5rem;
+}
+
+.cmd {
+  color: var(--text-2);
+}
+
+.output,
+.accentLine {
+  color: var(--text-3);
+  padding-left: 1.25rem;
+}
+
+.accentLine {
+  color: var(--accent);
+}
+
+.cursor {
+  display: inline-block;
+  width: 8px;
+  height: 1em;
+  background: var(--accent);
+  animation: blink 1s step-end infinite;
+  vertical-align: -0.15em;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
--- a/components/sections/Hero.tsx
+++ b/components/sections/Hero.tsx
@@ -0,0 +1,121 @@
+'use client';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { personal } from '@/content/personal';
+import styles from './Hero.module.scss';
+
+const fadeUp = (delay = 0) => ({
+  initial: { opacity: 0, y: 28 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.65, ease: [0.22, 0.61, 0.36, 1], delay },
+});
+
+export default function Hero() {
+  const [roleIndex, setRoleIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRoleIndex(i => (i + 1) % personal.roles.length);
+    }, 2800);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <section className={styles.hero} id="home">
+      <div className={styles.container}>
+        <div className={styles.content}>
+
+          {/* Availability Badge */}
+          <motion.div className={styles.badge} {...fadeUp(0)}>
+            <span className={styles.dot} />
+            {personal.availabilityText}
+          </motion.div>
+
+          {/* Heading */}
+          <motion.h1 className={styles.title} {...fadeUp(0.1)}>
+            Hi, I'm <span className={styles.name}>{personal.name}</span>
+          </motion.h1>
+
+          {/* Animated Role */}
+          <motion.div className={styles.roleWrapper} {...fadeUp(0.2)}>
+            <AnimatePresence mode="wait">
+              <motion.span
+                key={roleIndex}
+                className={styles.role}
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -12 }}
+                transition={{ duration: 0.4 }}
+              >
+                {personal.roles[roleIndex]}
+              </motion.span>
+            </AnimatePresence>
+          </motion.div>
+
+          {/* Bio */}
+          <motion.p className={styles.bio} {...fadeUp(0.3)}>
+            {personal.bio}
+          </motion.p>
+
+          {/* CTAs */}
+          <motion.div className={styles.ctas} {...fadeUp(0.4)}>
+            <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
+              <Link href="#projects" className={styles.btnPrimary}>
+                View Projects
+              </Link>
+            </motion.div>
+            <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
+              <Link href="#experience" className={styles.btnSecondary}>
+                Experience
+              </Link>
+            </motion.div>
+          </motion.div>
+
+        </div>
+
+        {/* Right side: grid + terminal */}
+        <motion.div
+          className={styles.visual}
+          initial={{ opacity: 0, y: 30, scale: 0.96 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          transition={{ duration: 0.9, ease: [0.22, 0.61, 0.36, 1], delay: 0.25 }}
+        >
+          <div className={styles.grid} aria-hidden="true">
+            <motion.div
+              className={styles.terminal}
+              initial={{ opacity: 0, scale: 0.92 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: 0.5, ease: [0.22, 0.61, 0.36, 1] }}
+            >
+              <div className={styles.terminalHeader}>
+                <div className={styles.trafficLights}>
+                  <span className={styles.trafficRed} />
+                  <span className={styles.trafficYellow} />
+                  <span className={styles.trafficGreen} />
+                </div>
+                <span className={styles.terminalTitle}>zsh — portfolio</span>
+              </div>
+              <div className={styles.terminalBody}>
+                <div className={styles.terminalLine}>
+                  <span className={styles.prompt}>$</span>{' '}
+                  <span className={styles.cmd}>whoami</span>
+                </div>
+                <div className={styles.terminalLine}><span className={styles.output}>{personal.name.replace(' ', '-').toLowerCase()}</span></div>
+                <div className={styles.terminalLine}>
+                  <span className={styles.prompt}>$</span>{' '}
+                  <span className={styles.cmd}>cat role.txt</span>
+                </div>
+                <div className={styles.terminalLine}><span className={styles.accentLine}>{personal.role}</span></div>
+                <div className={styles.terminalLine}>
+                  <span className={styles.prompt}>$</span>{' '}
+                  <span className={styles.cursor} />
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
--- a/components/sections/Projects.module.scss
+++ b/components/sections/Projects.module.scss
@@ -0,0 +1,220 @@
+.section {
+  @include section;
+  padding-block: clamp(3.5rem, 8vw, 6rem);
+}
+
+.container {
+  @include container;
+}
+
+.header {
+  margin-bottom: clamp(2rem, 4vw, 3rem);
+}
+
+.heading {
+  font-family: $font-display;
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+  letter-spacing: -0.02em;
+}
+
+.subtitle {
+  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
+  color: var(--text-3);
+  max-width: 36ch;
+}
+
+.dot {
+  color: var(--accent);
+}
+
+.empty {
+  padding: clamp(2.5rem, 5vw, 3.5rem);
+  text-align: center;
+  background: var(--bg-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+}
+
+.emptyText {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--text-3);
+}
+
+.featured {
+  @include card;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  margin-bottom: clamp(2rem, 4vw, 3rem);
+  border-color: var(--border);
+  transition: border-color var(--transition), box-shadow var(--transition);
+
+  @include respond(lg) {
+    grid-template-columns: 1fr;
+  }
+
+  &:hover {
+    border-color: var(--border-light);
+    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.featuredImage {
+  position: relative;
+  min-height: 260px;
+  background: var(--bg-3);
+
+  @include respond(lg) {
+    min-height: clamp(200px, 45vw, 280px);
+  }
+
+  @include respond(sm) {
+    min-height: 200px;
+  }
+}
+
+.featuredContent {
+  padding: clamp(1.5rem, 3vw, 2.5rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  justify-content: center;
+
+  @include respond(sm) {
+    padding: 1.25rem;
+  }
+}
+
+.featuredContent h3 {
+  font-family: $font-display;
+  font-size: clamp(1.25rem, 2vw, 1.5rem);
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.25;
+}
+
+.featuredContent p {
+  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
+  color: var(--text-3);
+  line-height: 1.65;
+  flex: 1;
+}
+
+.links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  min-height: 44px;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--bg);
+  background: var(--accent);
+  border-radius: var(--radius);
+  transition: background var(--transition), transform var(--transition);
+
+  &:hover {
+    background: var(--accent-dark);
+    transform: translateY(-1px);
+  }
+}
+
+.linkGhost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  min-height: 44px;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-2);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: border-color var(--transition), color var(--transition);
+
+  &:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: clamp(1.25rem, 3vw, 1.5rem);
+
+  @include respond(sm) {
+    gap: 1.25rem;
+  }
+
+  @media (min-width: #{$bp-sm}) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: #{$bp-lg}) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.card {
+  @include card;
+  padding: clamp(1.25rem, 2.5vw, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+
+  &:hover {
+    border-color: var(--accent);
+    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.35);
+  }
+}
+
+.cardTitle {
+  font-family: $font-display;
+  font-size: clamp(1rem, 1.5vw, 1.125rem);
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+  line-height: 1.3;
+}
+
+.cardDesc {
+  font-size: clamp(0.8125rem, 1.2vw, 0.875rem);
+  color: var(--text-3);
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  flex: 1;
+}
+
+.cardLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: auto;
+}
+
+.cardLinks .link {
+  min-height: 40px;
+  padding: 0.4rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.cardLinks .linkGhost {
+  min-height: 40px;
+  padding: 0.4rem 0.75rem;
+  font-size: 0.8125rem;
+}
--- a/components/sections/Projects.tsx
+++ b/components/sections/Projects.tsx
@@ -0,0 +1,117 @@
+'use client';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+import { projects } from '@/content/projects';
+import styles from './Projects.module.scss';
+import { SiGithub } from 'react-icons/si';
+import { ArrowUpRight } from 'lucide-react';
+
+export default function Projects() {
+  const featured = projects.find(p => p.featured);
+  const rest = projects.filter(p => !p.featured);
+  const hasProjects = projects.length > 0;
+
+  return (
+    <section className={styles.section} id="projects">
+      <div className={styles.container}>
+        <motion.header
+          className={styles.header}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className={styles.heading}>Selected Work<span className={styles.dot}>.</span></h2>
+          <p className={styles.subtitle}>
+            {hasProjects ? 'A selection of recent projects and side work.' : 'Projects will be added here soon.'}
+          </p>
+        </motion.header>
+
+        {!hasProjects && (
+          <motion.div
+            className={styles.empty}
+            initial={{ opacity: 0, y: 16 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            <p className={styles.emptyText}>Nothing here yet — check back later or get in touch.</p>
+          </motion.div>
+        )}
+
+        {/* Featured Project */}
+        {hasProjects && featured && (
+          <motion.div
+            className={styles.featured}
+            initial={{ opacity: 0, y: 28 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, ease: [0.22, 0.61, 0.36, 1] }}
+          >
+            {featured.image && (
+              <div className={styles.featuredImage}>
+                <Image src={featured.image} alt={featured.title} fill style={{ objectFit: 'cover' }} />
+              </div>
+            )}
+            <div className={styles.featuredContent}>
+              <h3>{featured.title}</h3>
+              <p>{featured.description}</p>
+              <div className={styles.links}>
+                {featured.liveUrl && (
+                  <a href={featured.liveUrl} target="_blank" rel="noopener noreferrer" className={styles.link}>
+                    Live <ArrowUpRight size={14} />
+                  </a>
+                )}
+                {featured.githubUrl && (
+                  <a href={featured.githubUrl} target="_blank" rel="noopener noreferrer" className={styles.linkGhost}>
+                    <SiGithub size={15} /> GitHub
+                  </a>
+                )}
+              </div>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Project Grid */}
+        {hasProjects && (
+        <motion.div
+          className={styles.grid}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: '-20px' }}
+          variants={{ visible: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } } }}
+        >
+          {rest.map((project, i) => (
+            <motion.article
+              key={project.id}
+              className={styles.card}
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 },
+              }}
+              transition={{ duration: 0.45, ease: [0.22, 0.61, 0.36, 1] }}
+              whileHover={{ y: -5, transition: { duration: 0.2 } }}
+            >
+              <h3 className={styles.cardTitle}>{project.title}</h3>
+              <p className={styles.cardDesc}>{project.description}</p>
+              <div className={styles.cardLinks}>
+                {project.liveUrl && (
+                  <a href={project.liveUrl} target="_blank" rel="noopener noreferrer" className={styles.link}>
+                    View <ArrowUpRight size={13} />
+                  </a>
+                )}
+                {project.githubUrl && (
+                  <a href={project.githubUrl} target="_blank" rel="noopener noreferrer" className={styles.linkGhost}>
+                    <SiGithub size={14} />
+                  </a>
+                )}
+              </div>
+            </motion.article>
+          ))}
+        </motion.div>
+        )}
+
+      </div>
+    </section>
+  );
+}
--- a/components/sections/TechStack.module.scss
+++ b/components/sections/TechStack.module.scss
@@ -0,0 +1,115 @@
+.section {
+  @include section;
+  background: var(--bg-2);
+  padding-block: clamp(4rem, 8vw, 6rem);
+}
+
+.container {
+  @include container;
+}
+
+.header {
+  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
+}
+
+.heading {
+  font-family: $font-display;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.02em;
+  margin-bottom: 0.35rem;
+}
+
+.subtitle {
+  font-size: 0.9375rem;
+  color: var(--text-3);
+}
+
+.dot {
+  color: var(--accent);
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
+}
+
+.tab {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-3);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 0.5rem 1rem;
+  min-height: 40px;
+  transition: border-color var(--transition), color var(--transition), background var(--transition);
+
+  &:hover {
+    color: var(--text-2);
+    border-color: var(--border-light);
+  }
+}
+
+.tabActive {
+  background: var(--accent-alpha);
+  color: var(--accent);
+  border-color: rgba(34, 211, 238, 0.35);
+
+  &:hover {
+    background: var(--accent-alpha);
+    color: var(--accent);
+    border-color: var(--accent);
+  }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
+  gap: 0.875rem;
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  padding: 0.875rem 1rem;
+  background: var(--bg-3);
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
+
+  &:hover {
+    background: var(--bg);
+    border-color: var(--border);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.iconWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 6px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.icon {
+  width: 1.15rem;
+  height: 1.15rem;
+  color: var(--text-2);
+}
+
+.label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-2);
+  line-height: 1.3;
+}
--- a/components/sections/TechStack.tsx
+++ b/components/sections/TechStack.tsx
@@ -0,0 +1,86 @@
+'use client';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import * as Si from 'react-icons/si';
+import { techStack } from '@/content/techstack';
+import styles from './TechStack.module.scss';
+
+const categories = ['all', 'language', 'framework', 'tool', 'database'] as const;
+
+export default function TechStack() {
+  const [active, setActive] = useState<string>('all');
+
+  const filtered = active === 'all'
+    ? techStack
+    : techStack.filter(t => t.category === active);
+
+  return (
+    <section className={styles.section} id="tech">
+      <div className={styles.container}>
+        <motion.header
+          className={styles.header}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-30px' }}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className={styles.heading}>
+            Technologies<span className={styles.dot}>.</span>
+          </h2>
+          <p className={styles.subtitle}>Languages, frameworks, tools & databases I work with.</p>
+        </motion.header>
+
+        <motion.div
+          className={styles.tabs}
+          role="tablist"
+          initial={{ opacity: 0, y: 12 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.4, delay: 0.08 }}
+        >
+          {categories.map(cat => (
+            <button
+              key={cat}
+              role="tab"
+              aria-selected={active === cat}
+              className={`${styles.tab} ${active === cat ? styles.tabActive : ''}`}
+              onClick={() => setActive(cat)}
+            >
+              {cat.charAt(0).toUpperCase() + cat.slice(1)}
+            </button>
+          ))}
+        </motion.div>
+
+        <motion.div
+          className={styles.grid}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: '-20px' }}
+          variants={{ visible: { transition: { staggerChildren: 0.03, delayChildren: 0.05 } } }}
+        >
+          {filtered.map((tech, i) => {
+            const Icon = (Si as Record<string, React.ElementType>)[tech.icon] ?? Si.SiCoder;
+            return (
+              <motion.div
+                key={tech.name}
+                className={styles.card}
+                variants={{
+                  hidden: { opacity: 0, y: 16 },
+                  visible: { opacity: 1, y: 0 },
+                }}
+                transition={{ duration: 0.35, ease: [0.22, 0.61, 0.36, 1] }}
+                whileHover={{ y: -3, transition: { duration: 0.2 } }}
+              >
+                <span className={styles.iconWrap}>
+                  <Icon className={styles.icon} aria-hidden="true" />
+                </span>
+                <span className={styles.label}>{tech.name}</span>
+              </motion.div>
+            );
+          })}
+        </motion.div>
+
+      </div>
+    </section>
+  );
+}
--- a/content/experience.ts
+++ b/content/experience.ts
@@ -0,0 +1,52 @@
+export type ExperienceItem = {
+  id: string;
+  role: string;
+  company: string;
+  companyUrl?: string;
+  period: string;
+  type: "fulltime" | "freelance" | "internship";
+  description: string;
+  highlights: string[];
+};
+
+export const experience: ExperienceItem[] = [
+  {
+    id: "norisk-client",
+    role: "Developer",
+    company: "NoRisk Client",
+    companyUrl: "https://noriskclient.com",
+    period: "2025 — Present",
+    type: "fulltime",
+    description: "Full-stack development for NoRisk Client, a Minecraft client. Client (Fabric), backend, web and Tauri desktop app.",
+    highlights: [
+      "Minecraft client development with Fabric",
+      "Backend services and web stack",
+      "Desktop app with Tauri",
+    ],
+  },
+  {
+    id: "fiverr",
+    role: "Freelance Developer",
+    company: "Fiverr",
+    companyUrl: "https://fiverr.com",
+    period: "2021 — Present",
+    type: "freelance",
+    description: "Freelance developer on Fiverr. Delivering web, backend and app projects for clients worldwide.",
+    highlights: [
+      "Consistently active since 2021",
+      "Wide range of projects: web apps, APIs, automation, and more",
+    ],
+  },
+  {
+    id: "content-creator",
+    role: "Developer for Content Creators",
+    company: "Various clients",
+    period: "2020 — Present",
+    type: "freelance",
+    description: "Development for content creators: tools, integrations, websites and custom solutions.",
+    highlights: [
+      "Ongoing since 2020",
+      "Custom tools and workflows for streamers, YouTubers and creators",
+    ],
+  },
+];
--- a/content/personal.ts
+++ b/content/personal.ts
@@ -0,0 +1,30 @@
+export const personal = {
+  name: "Ole Schumacher",
+  role: "Full Stack Developer",
+  roles: ["Full Stack Developer", "Web & Backend", "App Developer"],
+  tagline: "Web, Backend & App — clean code and thoughtful solutions.",
+  bio: "I'm Ole, 19, from Cologne. Full-stack developer focused on Web, Backend and App — 8+ years of experience and still a student, learning by building.",
+  availability: true,
+  availabilityText: "Available for projects",
+  email: "contact@oleeeedev.de",
+  location: "Cologne, Germany",
+
+  social: {
+    github: "https://github.com/jakubbbdev",
+  },
+
+  stats: [
+    { value: "8+", label: "Years Experience" },
+    { value: "20+", label: "Projects Built" },
+    { value: "19", label: "Years Old" },
+  ],
+
+  aboutMe: {
+    paragraphs: [
+      "I build full stack — Web, Backend and App — with 8+ years of experience at 19 and still in school. Based in Cologne, I turn ideas into solid code.",
+      "I focus on clear architecture, maintainable code and user-centred applications. I work on my own projects, for clients and keep learning along the way.",
+    ],
+    currently: ["Full Stack: Web, Backend & App", "Student", "Building from Cologne"],
+    funFact: "8+ years of coding at 19 — learning by doing.",
+  },
+};
--- a/content/projects.ts
+++ b/content/projects.ts
@@ -0,0 +1,13 @@
+export type Project = {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  image?: string;
+  liveUrl?: string;
+  githubUrl?: string;
+  featured?: boolean;
+};
+
+export const projects: Project[] = [
+];
--- a/content/techstack.ts
+++ b/content/techstack.ts
@@ -0,0 +1,42 @@
+export type TechItem = {
+  name: string;
+  icon: string;
+  category: "language" | "framework" | "tool" | "database";
+};
+
+export const techStack: TechItem[] = [
+  // Languages
+  { name: "TypeScript", icon: "SiTypescript", category: "language" },
+  { name: "JavaScript", icon: "SiJavascript", category: "language" },
+  { name: "Python", icon: "SiPython", category: "language" },
+  { name: "Java", icon: "SiOpenjdk", category: "language" },
+  { name: "Kotlin", icon: "SiKotlin", category: "language" },
+  { name: "HTML", icon: "SiHtml5", category: "language" },
+  { name: "CSS/SCSS", icon: "SiSass", category: "language" },
+  { name: "Rust", icon: "SiRust", category: "language" },
+  { name: "Go", icon: "SiGo", category: "language" },
+  { name: "C++", icon: "SiCplusplus", category: "language" },
+
+  // Frameworks
+  { name: "Next.js", icon: "SiNextdotjs", category: "framework" },
+  { name: "Vue", icon: "SiVuedotjs", category: "framework" },
+  { name: "React", icon: "SiReact", category: "framework" },
+  { name: "Node.js", icon: "SiNodedotjs", category: "framework" },
+  { name: "Express", icon: "SiExpress", category: "framework" },
+  { name: "Flutter", icon: "SiFlutter", category: "framework" },
+
+  // Tools
+  { name: "Git", icon: "SiGit", category: "tool" },
+  { name: "Docker", icon: "SiDocker", category: "tool" },
+  { name: "Kubernetes", icon: "SiKubernetes", category: "tool" },
+  { name: "Vercel", icon: "SiVercel", category: "tool" },
+  { name: "CI/CD", icon: "SiGithubactions", category: "tool" },
+  { name: "gRPC", icon: "SiGoogle", category: "tool" },
+  { name: "Prisma", icon: "SiPrisma", category: "tool" },
+  { name: "Terraform", icon: "SiTerraform", category: "tool" },
+
+  // Databases
+  { name: "Redis", icon: "SiRedis", category: "database" },
+  { name: "MongoDB", icon: "SiMongodb", category: "database" },
+  { name: "PostgreSQL", icon: "SiPostgresql", category: "database" },
+];
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -0,0 +1,16 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  sassOptions: {
+    additionalData: `
+      @use './styles/_variables' as *;
+      @use './styles/_mixins' as *;
+    `,
+  },
+  images: {
+    remotePatterns: [
+      { protocol: 'https', hostname: 'placehold.co', pathname: '/**' },
+    ],
+  },
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,992 @@
+{
+  "name": "portfolio",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "portfolio",
+      "version": "1.0.0",
+      "dependencies": {
+        "framer-motion": "^11.0.0",
+        "lucide-react": "^0.383.0",
+        "next": "^14.2.0",
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
+        "react-icons": "^5.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "sass": "^1.70.0",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.35.tgz",
+      "integrity": "sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.37",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.37.tgz",
+      "integrity": "sha512-8kzdPJ3FsNsVIurqBs7oodNnCEVbni9yUEkaHbgptDACOPW04jimGagZ51E6+lXUwJjgnBw+hyko/lkFWCldqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.28",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
+      "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001779",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001779.tgz",
+      "integrity": "sha512-U5og2PN7V4DMgF50YPNtnZJGWVLFjjsN3zb6uMT5VGYIewieDj1upwfuVNXf4Kor+89c3iCRJnSzMD5LmTvsfA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "11.18.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
+      "integrity": "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.18.1",
+        "motion-utils": "^11.18.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/immutable": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
+      "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.383.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.383.0.tgz",
+      "integrity": "sha512-13xlG0CQCJtzjSQYwwJ3WRqMHtRj3EXmLlorrARt7y+IHnxUCp3XyFNL1DfaGySWxHObDvnu1u1dV+0VMKHUSg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "11.18.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
+      "integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^11.18.1"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "11.18.1",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz",
+      "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz",
+      "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.35",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.33",
+        "@next/swc-darwin-x64": "14.2.33",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
+        "@next/swc-linux-arm64-musl": "14.2.33",
+        "@next/swc-linux-x64-gnu": "14.2.33",
+        "@next/swc-linux-x64-musl": "14.2.33",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
+        "@next/swc-win32-x64-msvc": "14.2.33"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
+      "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.98.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz",
+      "integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==",
+      "devOptional": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "portfolio",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.383.0",
+    "next": "^14.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-icons": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "sass": "^1.70.0",
+    "typescript": "^5"
+  }
+}
--- a/public/images/.gitkeep
+++ b/public/images/.gitkeep
--- a/public/images/projects/.gitkeep
+++ b/public/images/projects/.gitkeep
--- a/styles/_animations.scss
+++ b/styles/_animations.scss
@@ -0,0 +1,24 @@
+@keyframes marquee-left {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+
+@keyframes marquee-right {
+  from { transform: translateX(-50%); }
+  to   { transform: translateX(0); }
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.5; transform: scale(0.85); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50%       { transform: translateY(-12px); }
+}
+
+@keyframes shimmer {
+  from { background-position: -200% 0; }
+  to   { background-position: 200% 0; }
+}
--- a/styles/_mixins.scss
+++ b/styles/_mixins.scss
@@ -0,0 +1,61 @@
+@use 'variables' as *;
+
+// Responsive helper
+@mixin respond($bp) {
+  @if $bp == sm  { @media (max-width: #{$bp-sm})  { @content; } }
+  @if $bp == md  { @media (max-width: #{$bp-md})  { @content; } }
+  @if $bp == lg  { @media (max-width: #{$bp-lg})  { @content; } }
+  @if $bp == xl  { @media (max-width: #{$bp-xl})  { @content; } }
+}
+
+// Accent underline on links / headings
+@mixin accent-underline($height: 2px) {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -3px; left: 0;
+    width: 100%; height: $height;
+    background: var(--accent);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s ease;
+    border-radius: 999px;
+  }
+  &:hover::after, &.active::after { transform: scaleX(1); }
+}
+
+// Frosted glass (dark)
+@mixin glass($alpha: 0.9) {
+  background: rgba(26, 29, 33, $alpha);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+// Container
+@mixin container {
+  width: 100%;
+  max-width: 1100px;
+  margin-inline: auto;
+  padding-inline: clamp(1rem, 5vw, 2.5rem);
+}
+
+// Section spacing (responsive)
+@mixin section {
+  padding-block: clamp(3rem, 8vw, 6rem);
+}
+
+// Flex center
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Card base
+@mixin card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  transition: border-color var(--transition), transform var(--transition);
+}
--- a/styles/_typography.scss
+++ b/styles/_typography.scss
@@ -0,0 +1,9 @@
+@use 'variables' as *;
+
+// Global typography defaults — headings can be extended in components
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display, $font-display);
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--text);
+}
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -0,0 +1,24 @@
+// ─── Colors (Dark Theme) ──────────────────────────────────
+$color-bg:           #1a1d21;
+$color-bg-2:         #212529;
+$color-bg-3:         #262a2f;
+$color-border:       #343a40;
+$color-border-light: #495057;
+$color-text:         #f8f9fa;
+$color-text-2:       #dee2e6;
+$color-text-3:       #adb5bd;
+$color-accent:       #22d3ee;
+$color-accent-dark:  #06b6d4;
+$color-accent-alpha: rgba(34, 211, 238, 0.15);
+
+// ─── Typography ────────────────────────────────────────────
+$font-display: 'Syne', sans-serif;
+$font-body:    'DM Sans', sans-serif;
+$font-mono:    'JetBrains Mono', monospace;
+
+// ─── Breakpoints ───────────────────────────────────────────
+$bp-sm:  640px;
+$bp-md:  768px;
+$bp-lg:  1024px;
+$bp-xl:  1280px;
+$bp-2xl: 1536px;
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -0,0 +1,69 @@
+@use 'variables' as v;
+@use 'mixins';
+@use 'typography';
+@use 'animations';
+
+:root {
+  --bg:           #{v.$color-bg};
+  --bg-2:         #{v.$color-bg-2};
+  --bg-3:         #{v.$color-bg-3};
+  --border:       #{v.$color-border};
+  --border-light: #{v.$color-border-light};
+  --text:         #{v.$color-text};
+  --text-2:       #{v.$color-text-2};
+  --text-3:       #{v.$color-text-3};
+  --accent:       #{v.$color-accent};
+  --accent-dark:  #{v.$color-accent-dark};
+  --accent-alpha: #{v.$color-accent-alpha};
+  --radius:       8px;
+  --radius-lg:    14px;
+  --transition:   0.25s ease;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  scroll-behavior: smooth;
+  font-size: clamp(15px, 2vw, 16px);
+  overflow-x: hidden;
+}
+
+body {
+  font-family: var(--font-body, 'DM Sans', sans-serif);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+  min-width: 0;
+}
+
+::selection {
+  background: var(--accent-alpha);
+  color: var(--accent-dark);
+}
+
+a { color: inherit; text-decoration: none; }
+
+img, video { max-width: 100%; display: block; }
+
+button { cursor: pointer; font: inherit; }
+
+.skipLink {
+  position: absolute;
+  top: -100px;
+  left: 0.5rem;
+  z-index: 9999;
+  padding: 0.5rem 1rem;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--radius);
+  transition: top 0.2s ease;
+}
+.skipLink:focus {
+  top: 0.5rem;
+  outline: 2px solid var(--text);
+  outline-offset: 2px;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "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": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}