🧩 Project Overview
A portfolio that demonstrates capability by being the demo. The centrepiece is a hand-built 2D water surface rendered in WebGL — ripples, bubbles, and stylised shading — with the water level driven by scroll position, easing from 10% to 80% of the viewport as you move down the page.
Structured as three pages rather than a single scroll, with a shared centred nav and a contact modal, so the content has room to be read properly.
✨ Core Features
Interactive WebGL water background — custom 2D water surface with ripples, bubbles, and stylised shading, reacting to pointer movement.
Scroll-driven water level — eased motion from 10% to 80% as the page scrolls.
Multi-page architecture — Home, About, and Projects with shared navigation.
Contact modal — email and phone surfaced without leaving the page.
Categorised project grid — projects grouped by type (featured, web design, automation, DevOps, game dev, legacy) with tag chips and live/repo links per card.
Scroll-reveal animations — Framer Motion card reveals on enter.
Resume block — downloadable resume served directly from the site.
Experience roadmap & timeline — career history as a visual progression.
Before/after slider — visual comparison component for project work.
🖥️ Page Highlights
Home — hero over the water background, stat chips, badge row.
About — experience roadmap, timeline, toolkit, downloadable resume.
Projects — featured website highlight card, then all projects grouped by category with per-project case-study pages.
🔧 Technical Notes
Next.js App Router, React, TypeScript, Tailwind CSS, Three.js + React Three Fiber for the water shader, Framer Motion for reveals. Project content is served from this same Supabase backend with a local typed fallback, so content updates never touch component code.
Category | Technology |
|---|---|
Framework | Next.js (App Router) |
Language | TypeScript |
3D / Shader | Three.js + React Three Fiber |
Animation | Framer Motion |
Styling | Tailwind CSS |
Database | Supabase (PostgreSQL + Auth) |
🌐 Live Site & Reference
Live: https://dev.kkvasan.ca/