A cinematic, scroll-driven portfolio built to prove a point: that an engineer can also design and ship an award-grade interface. The homepage isn't a stack of sections — it's a single pinned 3D world you scroll through, rendered with a hand-written GLSL shader and React Three Fiber.
Live: https://hxndev.com
- Scroll-driven 3D hero. One persistent crystal whose camera dolly, drift, scale, rotation, and surface morph are all driven directly by scroll progress (GSAP ScrollTrigger → R3F render loop). Text "acts" reveal inside the same world.
- Hand-written GLSL. A custom aurora backdrop shader (domain-warped fractal noise) — no Spline, no shader libraries — that reacts to the cursor and refracts through the glass.
- "Aurora Noir" design system. Deep near-black canvas with an electric-cyan primary and a warm-amber accent. Cyan + amber sit on the blue–yellow axis, the most colorblind-safe high-contrast pairing, so hierarchy reads through luminance and hue.
- Buttery motion. Lenis momentum scrolling synced to GSAP, a magnetic custom cursor, and Framer Motion reveals.
- Terminal boot preloader. The site boots like a shell — a zsh-style window types through a fake boot log (
npx hxndev@latest boot) before the curtain lifts. Every visit ends with a choice, right in the terminal: Explorer (full cinematic) or Recruiter (fast & focused). - Interactive terminal. A real, working shell at
/terminal(reachable from the homepage teaser, footer and mobile menu):help,projects,open <id>,skills,neofetch, tab-completion, arrow-key history — andsudo hire-me. - Play mode. An opt-in mini-game: the cursor becomes a rocket, collectible orbs are scattered down the page, and a confetti win dialog tops it off. Auto-disabled on touch and reduced-motion.
- Cheat code. Type
playanywhere on the site and the rocket game launches with a toast. - Designed 404. Wrong URLs get a custom "lost in the aurora" page instead of a silent redirect.
- Recruiter mode. Picked from the boot terminal on every visit — it flattens the whole experience: no 3D, no animations, system cursor, a clean scannable hero with stats and CTAs. The playful extras (play mode, terminal, live GitHub feed) are hidden too. Cinematic mode proves the craft; recruiter mode proves the judgment.
- Live GitHub feed. A "Proof of life" section on the homepage pulls repo stats and the latest commits straight from the public GitHub API (localStorage-cached, fails silently offline).
- Performance-conscious. Device-tiered 3D quality, clamped DPR, off-screen render pausing, lazy-loaded routes, and full
prefers-reduced-motionsupport.
- React 18 + Vite — fast SPA tooling and HMR.
- React Router 7 — client-side routing with lazy-loaded pages.
- Three.js + @react-three/fiber + @react-three/drei — declarative 3D.
- @react-three/postprocessing — bloom and post effects.
- Custom GLSL — the aurora backdrop fragment shader.
- GSAP (ScrollTrigger) + Lenis — scroll choreography and smooth scrolling.
- Framer Motion — UI transitions and staggered reveals.
- Tabler Icons — iconography.
- ESLint + Prettier — code quality and formatting.
- Vercel — hosting with SPA rewrites (
vercel.json), custom domainhxndev.com.
# Clone
git clone https://github.com/HxnDev/hxndev.github.io.git
cd hxndev.github.io
# Install
npm install
# Develop (http://localhost:3000)
npm run dev
# Production build → ./dist
npm run build
# Preview the production build
npm run previewnpm run lint # ESLint
npm run format # Prettier (write)
npm run format:check # Prettier (check)
npm run check # lint + format checkhxndev.github.io/
├── .github/workflows/ # CI/CD (build + deploy to gh-pages)
├── public/ # Static assets (images, resume, project media)
├── src/
│ ├── components/
│ │ ├── common/ # Marquee and shared bits
│ │ ├── core/ # Cursor, SmoothScroll, Preloader (terminal boot),
│ │ │ # Grain, Magnetic, UIModeProvider (recruiter/cinematic)
│ │ ├── game/ # PlayMode (rocket game), CheatCode, GameProvider
│ │ ├── home/ # CinematicStage, RecruiterHero, GitHubActivity
│ │ ├── layout/ # Navbar, Footer
│ │ ├── projects/ # ProjectCard, ProjectModal
│ │ ├── three/ # CinematicScene, AuroraBackdrop (GLSL)
│ │ └── utils/ # Asset path helpers
│ ├── data/ # profile, skills, experience, certifications,
│ │ # recommendations, projects.json
│ ├── hooks/ # useGetProjects, useScrollReveal
│ ├── pages/ # Home, Projects, About, Certifications,
│ │ # Recommendations, Contact, Terminal, NotFound
│ ├── styles/ # global.css (design tokens), ui.css
│ ├── App.jsx # Routing + global layout
│ └── main.jsx # Entry point
├── index.html
├── vite.config.js
└── README.md
- Cinematic flow.
CinematicStage.jsxowns a tall scroll region with aposition: stickyviewport. A singleScrollTriggerwrites scroll progress (0→1) into a ref thatCinematicScene.jsxreads every frame to animate the camera and crystal, and derives the active text act from. This keeps per-frame work off the React render path. - Data-driven content. All résumé content (experience, skills, certifications, recommendations, stats) lives in small modules under
src/data/, so updating the site is a content edit, not a code change. - Accessibility. Honors reduced-motion (disables smooth scroll, freezes shader time, drops heavy 3D), keyboard-navigable, and built on a colorblind-safe palette.
Hosted on Vercel at hxndev.com. Every push to main triggers an automatic production deployment; vercel.json rewrites all routes to index.html so React Router deep links work on refresh.
Two other live apps on the same domain, both featured on the Work page:
- BiteBook (repo) — a shared family recipe book with photos and per-100g macros. React + TypeScript + Supabase, with an IndexedDB offline fallback.
- JobTracker (repo) — a job-application dashboard where a Google Sheet stays the database, via browser-only OAuth. No backend.
Distributed under the MIT License. See LICENSE for details.
Hassan Shahzad — Senior Full-Stack Engineer (Geneva, CH)
- Email: hassanshahzad.dev@gmail.com
- LinkedIn: hassan-shahzad-2a6617212
- GitHub: HxnDev
- Portfolio: https://hxndev.com