const draw = () => {
  // Pan stars slowly to the right (parallax by depth)
  for (const s of stars) {
    s.x += s.z * 0.04;
    if (s.x > w + 5) s.x = -5;
    // Twinkle
    const tw = 0.55 + 0.45 * Math.sin(t * 200 * s.z + s.y * 0.05);
    ctx.arc(s.x, s.y, s.r * s.z, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(draw);
};

const draw = () => {
  // Pan stars slowly to the right (parallax by depth)
  for (const s of stars) {
    s.x += s.z * 0.04;
    if (s.x > w + 5) s.x = -5;
    // Twinkle
    const tw = 0.55 + 0.45 * Math.sin(t * 200 * s.z + s.y * 0.05);
    ctx.arc(s.x, s.y, s.r * s.z, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(draw);
};

const draw = () => {
  // Pan stars slowly to the right (parallax by depth)
  for (const s of stars) {
    s.x += s.z * 0.04;
    if (s.x > w + 5) s.x = -5;
    // Twinkle
    const tw = 0.55 + 0.45 * Math.sin(t * 200 * s.z + s.y * 0.05);
    ctx.arc(s.x, s.y, s.r * s.z, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(draw);
};

const draw = () => {
  // Pan stars slowly to the right (parallax by depth)
  for (const s of stars) {
    s.x += s.z * 0.04;
    if (s.x > w + 5) s.x = -5;
    // Twinkle
    const tw = 0.55 + 0.45 * Math.sin(t * 200 * s.z + s.y * 0.05);
    ctx.arc(s.x, s.y, s.r * s.z, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(draw);
};

const draw = () => {
  // Pan stars slowly to the right (parallax by depth)
  for (const s of stars) {
    s.x += s.z * 0.04;
    if (s.x > w + 5) s.x = -5;
    // Twinkle
    const tw = 0.55 + 0.45 * Math.sin(t * 200 * s.z + s.y * 0.05);
    ctx.arc(s.x, s.y, s.r * s.z, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(draw);
};

const draw = () => {
  // Pan stars slowly to the right (parallax by depth)
  for (const s of stars) {
    s.x += s.z * 0.04;
    if (s.x > w + 5) s.x = -5;
    // Twinkle
    const tw = 0.55 + 0.45 * Math.sin(t * 200 * s.z + s.y * 0.05);
    ctx.arc(s.x, s.y, s.r * s.z, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(draw);
};

Side project / 2026 →

VibeCoding

I build websites for my girlfriend. Three so far, all still live, all built as gifts instead of texting back like a normal person.

Along the way that habit turned into a real practice: React, Next.js, TypeScript, and the Vercel deploy loop — learned backwards, one shipped page at a time, with an AI agent doing the typing and me doing the judging.

React / Next.js / Vercel / agent-driven

websites built for an audience of one. all still live

commits on this site since april 24

10,629

lines of TypeScript in production

pages in the current production build

Project overview

The gift was the excuse. The craft is the point.

The first site was a joke that got out of hand. Somewhere between the second and the third it stopped being about the gift and started being about the work — components, routing, deploys, and the distance between a page that functions and a page that feels right. This site is built the same way, with the same tools.

Method

Agent-driven — Claude Code in the terminal

Stack

React, Next.js, TypeScript, Tailwind

Infra

Vercel — preview, production, DNS

Medium

English in, diffs out, judgment between

the medium — one exchange, verbatim shape

intent

> the calendar rows should match the meeting length — a 90-minute lunch shows 90-minute slots

result

fix(book): grid row size matches meeting duration

components/booking/BookingFlow.tsx · +38 −17

verdict

shipped. next.

A real exchange from this site's booking flow. The prompt is the spec; the diff is the deliverable; the review is the job.

The loop

Describe, review, ship. Repeat until it feels right.

Nobody handed me a curriculum. Every concept arrived attached to a problem — state when a page needed memory, API routes when it needed a backend, DNS when it needed to exist at a URL she could open. That order turns out to be the fastest way to actually keep what you learn.

01 / Describe

The source file is a sentence.

Work starts in plain English: what the page should do, how it should feel, what it must never look like. Intent is the input. The prompt does the job a spec used to do — and a vague one produces exactly what it deserves.

02 / Review

Read every diff. Reject most of the first drafts.

The agent produces code fast and confidently — including confident mistakes. The real work is the read: catching what looks plausible but reads wrong, holding a visual bar the model does not hold on its own, saying no until it is right.

03 / Ship

Vercel closes the loop in minutes.

Preview build, production deploy, DNS, a URL she can open. When shipping costs minutes instead of days, taste compounds — every no gets you to the next attempt while the idea is still warm.

Artifacts

No photos. The proof is the repo.

components/HeroVideoBackground.tsx — the starfield fallback

const draw = () => {
  // Pan stars slowly to the right (parallax by depth)
  for (const s of stars) {
    s.x += s.z * 0.04;
    if (s.x > w + 5) s.x = -5;
    // Twinkle
    const tw = 0.55 + 0.45 * Math.sin(t * 200 * s.z + s.y * 0.05);
    ctx.arc(s.x, s.y, s.r * s.z, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(draw);
};

If the hero video ever fails to load, this draws a slow-panning starfield so the page never looks broken. Nobody asked for it. That is the fun of it.

git log — selected, verbatim

04.24 feat: cinematic portfolio v0.1 — 42 files, one pass

04.30 feat(book): week-view glass calendar + progressive reveal

04.30 fix(book): grid rows match meeting duration

07.01 fix(chat): graceful fallbacks instead of raw API JSON

07.01 Move chat persona context to markdown

94 commits and counting. The first one shipped the whole scaffold in a day.

vercel — production deploy, today

$ vercel deploy --prod

Building: Running "npm run build"

Building: ✓ Compiled successfully

Building: ✓ Generating static pages (25/25)

Building: Build Completed in /vercel/output [2m]

Production: will-yashar.vercel.app [1m]

Aliased: https://willyashar.com

Idea to production URL in minutes. This page went live the same way.

The typing is delegated. The judgment is not.

Vibecoding gets described as letting the machine do the work. That is not what it is. It is closer to running a small studio — setting direction, reviewing everything, holding a bar the tools will not hold for you. MarketMatch taught me to ship for dealerships. This taught me to ship for an audience of one, which is a harsher critic. I think most software gets built this way within a few years.

Will Yashar / on how this site was built

Next project

MarketMatch Technologies

Automotive intelligence pricing 24,000+ vehicles a month across 8 dealerships.