Dev Portfolio 2026 – Interactive WebGL Developer Showcase

🧩 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.

🌐 Live Site & Reference

Live: https://dev.kkvasan.ca/

Repo: https://github.com/K-Keerthivasan/dev-portfolio-2026