logo

Portfolio

Proof of growth

Tech Stack

Technologies and tools I use

Total technologies

28

Categories

7

Primary track

Frontend

TypeScript

Use discriminated unions and satisfies to encode domain rules in the type layer.

Preparing code walkthrough…

const tech = {
  name: 'React',
  category: ['Frameworks & Libraries'],
  beforeCode: 'const count = 0',
  afterCode: 'const [count] = useState(0)',
};

What changed

Moves from a loose object literal to a discriminated union (kind: 'code' | 'narrative') verified with satisfies — TypeScript catches missing fields at the definition site, not at the call site.

AI agent engineering

I use agents like working surfaces, not magic shortcuts.

The strongest signal is not that I can prompt Codex or Claude Code. It is that I can shape bounded tasks, explicit contracts, verification loops, and proof artifacts so the work is engineerable by both humans and agents.

CodexClaude Code

Task decomposition & spec writing

Claim

I turn vague requests into implementation-ready work packets with clear scope, constraints, and success criteria.

Workflow

I start from repository truth, then break the job into bounded tasks, interfaces, and acceptance checks that can survive handoff.

Codex

Codex is my primary implementation surface when the repo needs grounded edits, test runs, and iterative verification.

Claude Code

Claude Code is useful when I want a second execution lens on spec shape, prompt clarity, or task framing before or alongside coding.

Input contract

Every task gets a brief with the goal, hard constraints, changed surfaces, expected artifact, and the exact proof needed to call it done.

Verification

I do not stop at 'the agent answered.' The output must line up with source, docs, and tests.

CodexClaude CodePlaywright

Tool / orchestration fluency

Claim

I know how to route work across CLI tools, repo instructions, prompts, and browser automation without losing the thread.

Workflow

I keep the execution surface explicit: AGENTS.md, task-specific prompts, repo paths, and the command surface the agent is allowed to use.

Codex

Codex handles repo-native implementation, shell-driven inspection, and test-backed iteration inside the actual project context.

Claude Code

Claude Code complements that with alternate reasoning on prompt shape, decomposition, and high-context review loops when I want contrast.

Input contract

The agent does not get a vibe-based ask. It gets the exact file or subsystem scope, allowed tools, and the expected output format.

Verification

The orchestration is only good if another engineer can rerun it, inspect the same artifacts, and reach the same conclusion.

CodexClaude CodeVitestPlaywright

Verification & harness design

Claim

I build verification into the workflow so agent output becomes evidence-backed engineering instead of plausible text.

Workflow

I close the loop with repo-native checks, page-level assertions, and markdown decision records that explain what the system proves.

Codex

Codex is where I wire the source edits, route metadata, and executable checks into a single working harness.

Claude Code

Claude Code is useful as a contrasting reviewer for whether the brief, prompt surface, and observed result still line up.

Input contract

The contract ends with runnable checks and named proof artifacts, not with a narrative summary alone.

Verification

For this portfolio, the proof is the combination of UI, source data, tests, and markdown documentation all agreeing.

Engineerable harness

The workflow I expect an agent task to survive

If a workflow cannot survive a handoff, a rerun, and a verification pass, I do not consider it production-ready engineering.

  1. Brief and constraints

    Start with the actual goal, hard boundaries, changed surfaces, and the acceptance criteria that matter.

    Example surface

    goal + constraints + acceptance criteria

  2. Agent execution surface

    Give the agent the repo contract, task prompt, and relevant paths so it can operate inside a bounded system.

    Example surface

    AGENTS.md + prompts + repo paths

  3. Verification loop

    Run the repo-native checks that prove the output works, not just that the patch exists.

    Example surface

    pnpm lint && pnpm test -- --run && pnpm build

  4. Proof artifacts

    Leave behind docs, source, and test evidence that another engineer can inspect without re-discovering intent.

    Example surface

    docs/agent-engineering.md + project source + tests

Languages

Core programming languages used in product delivery and frontend systems.

JavaScript

TypeScript

HTML

TypeScript

Use discriminated unions and satisfies to encode domain rules in the type layer.

Preparing code walkthrough…

const tech = {
  name: 'React',
  category: ['Frameworks & Libraries'],
  beforeCode: 'const count = 0',
  afterCode: 'const [count] = useState(0)',
};

What changed

Moves from a loose object literal to a discriminated union (kind: 'code' | 'narrative') verified with satisfies — TypeScript catches missing fields at the definition site, not at the call site.

Frameworks & Libraries

Framework and state patterns for scalable interfaces.

React

Next.js

SvelteKitExpress.jsElysia.jsWeb ComponentTanStack QueryXState

React

Replace manual loading state with React 19's built-in action model.

Preparing code walkthrough…

function CheckoutButton({ items }) {
  const [loading, setLoading] = useState(false);

  async function handleClick() {
    setLoading(true);
    await fetch('/api/checkout', {
      method: 'POST',
      body: JSON.stringify(items),
    });
    setLoading(false);
  }

  return <button onClick={handleClick}>Buy</button>;
}

What changed

Moves from ad-hoc useState flags to useActionState — the form's action prop drives the async lifecycle, isPending replaces manual toggles, and success callbacks compose cleanly.

Database

Data layer technologies used for product persistence and analytics.

MySQL

MongoDB

SupabasePrismaPostgreSQL

Supabase

BaaS speed with full Postgres control — auth, real-time, and RLS in one platform.

Explanation-only walkthrough

I reach for Supabase when I need to prototype at BaaS speed without giving up Postgres depth. Row Level Security encodes authorization rules inside the database itself — keeping API routes thin and access policies version-controlled. The real-time layer replaces polling with a WebSocket push channel, a natural fit for collaborative or live-updating surfaces. Supabase's auto-generated REST and typed client mean the schema becomes the contract, and breaking changes surface at build time rather than in production.

What changed

Moves authorization out of application code and into Row Level Security policies at the database layer, reducing surface area for bugs and making access rules auditable alongside the schema.

Styling

Design-system and styling approaches for maintainable UI.

CSS

Vanilla Extract

Tailwind CSSArtboardStyleX

Testing

Quality and confidence tooling for stable releases.

Storybook

Playwright

Playwright

Structure tests as readable steps, not a flat sequence of awaits.

Preparing code walkthrough…

test('tech stack page', async ({ page }) => {
  await page.goto('/en/tech-stack');
});

What changed

Moves from a single navigation to named test.step blocks — each assertion is scoped, failures point to the broken step, and the test report reads like a product spec.

Tools

Execution environment, collaboration tooling, and AI-agent surfaces used daily.

Bun.js

Codex

Claude CodeGithubCommand LineFigmaStorybookPlaywright

Playwright

Structure tests as readable steps, not a flat sequence of awaits.

Preparing code walkthrough…

test('tech stack page', async ({ page }) => {
  await page.goto('/en/tech-stack');
});

What changed

Moves from a single navigation to named test.step blocks — each assertion is scoped, failures point to the broken step, and the test report reads like a product spec.

Backend

Server and platform technologies used in full-stack delivery.

Next.js

SvelteKit

Express.jsElysia.jsSupabasePrismaPostgreSQL

Next.js

Use PageProps and async params to keep the route server-first with full type safety.

Preparing code walkthrough…

"use client";

export default function TechStackPage() {
  const [selected, setSelected] = useState('React');

  return <TechStackExperience selected={selected} />;
}

What changed

Moves from a client-heavy page shell to an async Server Component typed with PageProps<'/route'> — the globally available helper generated by next typegen that resolves params as a Promise and eliminates manual type annotations.