hadisite

Personal portfolio for Hadi Paul Scharbrodt.

Stack: Next.js 15 (App Router) · TypeScript · Tailwind v4 · React Three Fiber · GSAP · Lenis · Framer Motion · next-themes.

Develop

npm install
npm run dev

Open http://localhost:3000.

Build

npm run build
npm start

Deploy

Targets Vercel out of the box. Push to a GitHub repo and import in Vercel — no env vars required.

Layout

• app/ — App Router routes (home, about, experience, activities, projects + 4 case studies)
• components/three/ — R3F hero scene, lazy-loaded
• components/motion/ — Lenis smooth scroll, magnetic cursor, reveal animations, marquee
• components/projects/ — shared CaseStudy layout, live SortingCanvas (merge-sort viz), PsychQuiz (flashcards)
• components/intro/NameLoader.tsx — name-reveal intro (plays once per session)
• components/theme/ — light/dark toggle via next-themes
• content/ — typed source-of-truth for profile, experience, projects, activities

Notes

• The legacy single-file site is preserved at legacy/index.html (gitignored). Source of all content was migrated from there.
• 3D hero falls back to a faceted icosahedron if the optional Fraunces_Regular.json font isn’t present in public/fonts/. Drop a Text3D-compatible font there to render extruded “HADI” letters.
• All motion respects prefers-reduced-motion.