Initial commit

2026-05-18 22:26:10 +02:00
commit db92ad2f88
34 changed files with 2158 additions and 0 deletions
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,133 @@
+import { useState, useEffect } from 'react'
+import { Menu, X } from 'lucide-react'
+
+const navItems = [
+  { label: 'About', href: '#about' },
+  { label: 'Interests', href: '#interests' },
+  { label: 'Projects', href: '#projects' },
+  { label: 'Experience', href: '#experience' },
+  { label: 'Topics', href: '#topics' },
+  { label: 'Contact', href: '#contact' },
+]
+
+export default function Navigation() {
+  const [visible, setVisible] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const [activeSection, setActiveSection] = useState('')
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setVisible(window.scrollY > window.innerHeight * 0.6)
+    }
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveSection(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: '-40% 0px -40% 0px' }
+    )
+
+    navItems.forEach((item) => {
+      const el = document.querySelector(item.href)
+      if (el) observer.observe(el)
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+    e.preventDefault()
+    const el = document.querySelector(href)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth' })
+      setMobileOpen(false)
+    }
+  }
+
+  return (
+    <>
+      <nav
+        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
+          visible ? 'translate-y-0 opacity-100' : '-translate-y-full opacity-0'
+        }`}
+      >
+        <div className="glass">
+          <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+            <a
+              href="#"
+              onClick={(e) => {
+                e.preventDefault()
+                window.scrollTo({ top: 0, behavior: 'smooth' })
+              }}
+              className="font-mono text-sm text-grey-900 hover:text-pink-brand transition-colors tracking-widest"
+            >
+              depoliticized.
+            </a>
+
+            {/* Desktop nav */}
+            <div className="hidden md:flex items-center gap-8">
+              {navItems.map((item) => (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  onClick={(e) => handleClick(e, item.href)}
+                  className={`text-xs font-display uppercase tracking-widest transition-colors relative ${
+                    activeSection === item.href.slice(1)
+                      ? 'text-pink-brand'
+                      : 'text-grey-600 hover:text-grey-900'
+                  }`}
+                >
+                  {item.label}
+                  {activeSection === item.href.slice(1) && (
+                    <span className="absolute -bottom-1 left-0 right-0 h-px bg-pink-brand" />
+                  )}
+                </a>
+              ))}
+            </div>
+
+            {/* Mobile toggle */}
+            <button
+              className="md:hidden text-grey-900"
+              onClick={() => setMobileOpen(!mobileOpen)}
+              aria-label="Toggle menu"
+            >
+              {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile menu */}
+        <div
+          className={`md:hidden glass overflow-hidden transition-all duration-300 ${
+            mobileOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+          }`}
+        >
+          <div className="px-6 py-4 flex flex-col gap-4">
+            {navItems.map((item) => (
+              <a
+                key={item.href}
+                href={item.href}
+                onClick={(e) => handleClick(e, item.href)}
+                className={`text-sm font-display uppercase tracking-widest transition-colors ${
+                  activeSection === item.href.slice(1)
+                    ? 'text-pink-brand'
+                    : 'text-grey-600 hover:text-grey-900'
+                }`}
+              >
+                {item.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </nav>
+    </>
+  )
+}