Personal Portfolio
My personal portfolio: a statically exported Next.js 16 site with a custom WebGL particle scene that reshapes and recolours itself as you scroll, from a dotted globe with the portrait set inside it, to an infrastructure lattice, a career helix and a contact portal. It has light and dark themes and an interactive terminal visitors can type into.
1 / 9Overview
The site is built around one fixed Three.js layer of up to 15,000 particles driven by a custom GLSL shader. Each particle stores its position in five shapes, and the shader blends between them as the visitor scrolls: a dotted world map generated from a land mask with network arcs leaving Darwin, drawn so it always sits behind the hero portrait, an infrastructure lattice behind skills and services, an animated wave field behind projects, a double helix behind the career timeline, and a ring behind contact. Pointer movement adds parallax, the arc pulses with travelling light, and the particle count scales down on phones.
The typography carries the rest of the identity. Archivo's variable width axis does the heavy lifting: headings pair an ultra-wide heavy cut with an ultra-narrow light one, and on load each letter of the name animates along the width axis. Projects sit on a pinned horizontal track with 3D-tilting screenshots, and the experience timeline's rail fills as you read.
Content still lives in one typed data layer, and every section can be switched off from a single config file. The site respects reduced-motion settings (no intro, instant shape changes, stacked projects), pauses rendering when the tab is hidden, and ships as a static export for an Nginx host on AWS Lightsail.
Built with
3D and motion
- A custom GLSL particle shader morphs one point cloud between five shapes based on which section is in view.
- The hero globe is built from a real land mask, with pulsing network arcs from Darwin, and tracks the portrait at every screen size.
- One orchestrated load sequence: particles converge into the globe while the name animates along Archivo's width axis.
- Projects scroll sideways on a pinned track, with screenshots that tilt toward the pointer.
Interaction
- An interactive terminal that boots by printing about_me.py, then accepts commands like whoami, skills, projects, contact, cv and goto.
- Scroll-spy navigation with an animated active pill, and a full-screen menu on phones.
- A contact form that opens WhatsApp, opens SMS on mobile, or copies the message on desktop.
Architecture and accessibility
- Light and dark themes with a circular view-transition toggle; particles and colours adapt to each theme and each section.
- Fully typed content model in TypeScript, shared by the homepage, case studies, terminal and metadata.
- Respects prefers-reduced-motion, pauses WebGL when the tab is hidden, and falls back gracefully without WebGL.