How this project is built
Tap a section to see its details
- /page— the six-lens homepage + LensDial
- /projects/[slug]page— one project, read through every lens
- /resume/[role]page— a printable CV per lens
- /demopage— the admin panel, public + sandboxed
- /adminpage— the darkroom — owner-only
- middleware.tsmiddleware— gates /admin/* wholesale — no demo exception
- /api/trackroute— anon path + timestamp only — no cookies, no IPs, no PII
- /api/contactroute— Zod length caps
- is_owner()function— SECURITY DEFINER — writes are owner-only
- owner_stats()function— the deep analytics read, owner-scoped
- +1 more components
- projectstable— facets + architecture jsonb — this row included
- skillstable
- contact_messagestable
- site_settingstable
- page_viewstable— insert-only — nobody can read it raw
- +4 more components
01Project 1 of 6Flagship
web
This Site
Don’t just read the portfolio—experience the proof. One Next.js + Supabase system transforms the same work into six distinct interfaces, while a full admin panel reveals the engine behind it through a public read-only demo.
User screens · 5How it works · 6Data & storage · 9
You’re already inside it: Next.js App Router above, Supabase Postgres with RLS below, and one admin panel managing every project/skill/settings. The strata map to the repo’s real routes and tables—not a list of keywords.
Outcome
The site proves its own case: every lens is interactive, the metrics come from real anonymous logs, and the defenses run live. Even the card’s strata map directly to the repo’s routes, services, and tables.
Read the problem and approach
- Problem
- A portfolio that lists “full-stack, React, Postgres” proves little—everyone’s does. The goal was to make the site itself the evidence across every discipline, without maintaining six separate experiences.
- Approach
- One data model, six experiences: full-stack/mobile/frontend/automation/security/AI. A middleware-protected admin panel—the darkroom—manages everything and powers a public read-only demo.
Next.jsTypeScriptSupabasePostgres RLSTailwind CSSFramer Motion