Portfolio Website

Full-Stack Application. Role: Full-Stack Developer.

Open the live app

A personal portfolio set in a 3D room, with an admin dashboard only the owner can sign in to. The admin edits projects, skills, experience, certificates and messages without a redeploy.

Highlights

• 3D room baked in Blender (Cycles) and rendered with three.js
• Server-rendered pages: content and SEO work without WebGL
• Room shelves laid out at runtime from API data, no rebuild per edit
• Owner-only admin behind Clerk; each drag-drop reorder is one atomic Postgres RPC
• Zod-validated Express backend; the Supabase service-role key stays on the server
• Playwright end-to-end tests on Chromium and WebKit, desktop and mobile

Main challenge

Make a 3D room that loads fast and looks real on phones, while every page still reads as plain HTML for search engines and visitors without WebGL, and content edits never need a new Blender bake.

How it was solved

Blender bakes only the empty room and its fixtures. Certificates, skill books and papers are templates laid out at runtime along slot rows from the API data. Pages are server-rendered by Next.js and the room loads behind them as a lazy three.js chunk. Each admin reorder is one atomic Postgres RPC (reorder_portfolio_items) that rejects duplicate ids and orders. Zod validates every Express route; the Supabase service-role key stays on the server.

What shipped

• Content added in the admin appears in the room on the next page load
• Text renders before any WebGL; the room never blocks the page
• Admin dashboard with drag-drop reorder for projects, skills, experience and certificates
• Playwright end-to-end tests across Chromium and WebKit on desktop and mobile
• Netlify (frontend) and Render (backend) deploy

Built with

• Next.js
• React
• TypeScript
• Tailwind CSS
• Three.js
• Blender
• Express
• Zod
• Supabase
• Clerk
• Vitest
• Playwright