../missions / this-site
This Site (ethanpecora.com)
If my pitch is 'I can build,' the portfolio can't be a slow React template — it has to be the proof. So I shipped v1, then rebuilt it from scratch as a static-first Astro TUI for speed, craft, and security.
- problem
- A portfolio is the one project a recruiter or founder actually experiences instead of reading about. My v1 — Neon Nexus — looked the part (3D hero, Framer Motion, theme modes) but it was a heavy, client-rendered React/Vite SPA. If I'm telling people I can build, an artifact that's slow or feels like every other template quietly argues the opposite.
- my_role
- Solo, end-to-end. Architecture, design system, every route, the AI guide, the admin panel, auth, and deploy — all mine. It's also where I dogfood the tools I'd bring to a team: Claude, Cursor, and an agent loop.
- system_built
- ethanpecora.com v2: Astro 6, static-first, with React 19 only as hydrated islands (explicit client:* directives, not a blanket SPA). Tailwind v4 @theme tokens drive a literal-TUI aesthetic — box-drawing, scanlines, a cmdk command palette. Supabase handles GitHub OAuth/PKCE auth, typed content, and an append-only audit log, with row-level security on every table. Echo, an SSE-streamed AI guide, answers questions about me from the site's own content. An /op operator panel runs feature flags, contact triage, and visitor-mark moderation behind an admin gate.
- proof
- Static-first architecture, interactivity scoped to islands (terminal JS budgeted under ~45KB gzipped), security headers + report-only CSP in middleware, RLS on every Supabase table, and the live site you're reading right now. Targets: FCP under 800ms and Lighthouse 95+ across performance, accessibility, and best practices.
- proof_status
- public demo / shipped interface
- proof_note
- Live, shipping interface — this site itself is the artifact. v2 (Astro/TUI) replaces v1 (Neon Nexus, React/Vite).
- why_it_matters
- This is the build half of 'sell + build,' done in public and verifiable in real time — you're standing in the demo. It also shows judgment, not just output: I chose to throw away a working v1 and rebuild static-first because the right architecture mattered more than the sunk cost.
- Framework
- Astro 6 (static-first)
- Interactive
- React 19 islands
- Auth + data
- Supabase + RLS
- AI guide
- Echo (SSE stream)
v1 — Neon Nexus — was a React 19 + Vite 6 operator portfolio: a 3D React Three Fiber hero with scroll-linked camera work, Framer Motion throughout, four theme modes (neon, matrix, clean, ember), an SSE-backed Echo AI, an Operator Panel, and a playable Signal Breach arcade behind a CRT launcher. It shipped, it looked the part, and it taught me where a heavy client-rendered SPA starts to cost you — first paint, bundle weight, and the gap between 'impressive' and 'fast.'
v2 is a from-scratch rebuild on a different thesis: the portfolio should be static-first and the interactivity should be surgical. Astro 6 renders almost everything at build time, and React shows up only as hydrated islands with explicit client:load|visible|idle directives — never a blanket app. The aesthetic moved from neon-gradient maximalism to a leaner, literal TUI: box-drawing, a command palette as primary navigation, and a tiny ~5KB OGL shader as the one deliberate exception.
Under the hood: Tailwind v4 @theme tokens, TypeScript strict, zod-validated environment and request bodies, and Supabase across three client tiers (anon browser, JWT server, service-role) with row-level security mandatory on every table. Auth is GitHub OAuth/PKCE. Echo streams replies over SSE from a serverless route, builds its context from the site's own content collections, and is rate-limited (Vercel KV when available, in-memory otherwise). An /op admin panel — gated by an allowlist and an append-only audit log — runs feature flags, contact-submission triage, and moderated visitor 'marks.'
Smaller touches carry the aesthetic: a boot-path picker that routes friends, recruiters, and founders differently; a Golden Signal generative-art piece on /lab (a seeded canvas ASCII animation that honors prefers-reduced-motion); and security headers mirrored in both middleware and vercel.json. It's still in progress — CSP moves from report-only to enforce, and a performance/accessibility pass is on the list before cutover — but the architecture and the bones are shipped and live.
- Static-first with surgical islands beats a blanket SPA for a content site — you keep the interactivity that earns its weight and ship the rest as fast HTML.
- Throwing away a working v1 was the right call: the v1 → v2 rewrite was about architecture and judgment, not features. Sunk cost is not a reason to keep shipping the wrong shape.
- RLS-on-every-table and an append-only audit log are cheap up front and miserable to retrofit — security belongs in the first migration, not a later phase.
- A portfolio that IS the product demo holds you to a higher bar: every performance and accessibility shortcut is one a visitor can feel.
