← Home

A build-along workshop3 hours

Portfolio
in a Day

and better every day after.

Build a personal site you will still be improving a year from now — from a one-page idea to your own domain, in one session.

ClaudeClaude CodeGitHuba web frameworkCloudflare

Sanket Tambare · sankettambare.in
Press → to begin · N for notes · F for full screen

00 · Welcome0:01

Hi, I'm Sanket

Software engineerMarathonerWriter

Work

Bridgenext, Punefull-stack · data · DORA metrics

Run

10K → 50K ultraand the Sahyadri forts

Write

English + मराठीessays · newsletter · podcast

Build

Sites for causesNGOs · a birding marathon · data stories

sankettambare.in · card.sankettambare.in

00 · Welcome0:02

Before we begin

The next three hours, in ninety seconds.

  • What we'll build
  • The five steps
  • What to bring
  • What you take home

Click the film to play · K plays or pauses

The opening of the film: 3 hours from now, a browser at yourname.in that says Hi, I'm You.
Vertical cut for phones ↗

00 · Welcome0:03

Why this workshop

“I want one of these.”

  • Building is cheap now — AI writes the code
  • Keeping it alive isn't — most sites are never touched again
  • You already have the skill — scope, phase, cut, check

00 · Welcome0:05

What we'll learn today

  1. Shape an idea with Claude
  2. Choose a stack you own
  3. Keep content apart from code
  4. Build in phases with Claude Code
  5. Ship to your own domain
  6. Keep it growing

by 3:00 — a live URL, a repo, three docs, the prompt pack.

01 · The idea0:07

The three hours

0:00
Welcome
0:08
Idea — why own the stack
0:20
Shape — idea → interview → research → docs
1:05
Decide — framework + host
1:20
Break — 10 minutes
1:30
Build — repo, phases, audits
2:20
Ship — GitHub → Cloudflare → domain
2:38
Case study + featured projects
2:52
Iterate · feedback · thanks

01 · The idea0:08

Sandcastles and houses

App builders

Sandcastle

Fast. Pretty. Gone with the tide.

Your own stack

House

Built a room at a time. Yours to extend.

Not “can I build it today?”
“Will I improve it tomorrow?”

01 · The idea0:10

The iteration test

App builderYour own stack
The codeIn their platformYour GitHub repo
The contentMixed into the codePlain files
Change one wordPrompt and hopeEdit, push, live
The historyA chat logEvery version
The costA monthly planFree tiers

In plain words Repo a project folder with its full history · changelog a list of every change

01 · The idea0:12

The stack: four parts

The builder

Claude Code

Writes, runs and checks the code.

The memory

GitHub

Every version saved. A push triggers a deploy.

The shape

A framework

Pages and rules an AI already knows.

The stage

Cloudflare

Hosting, domain and SSL in one place.

In plain words Framework a starter kit for pages · Cloudflare the servers that show your site

01 · The idea0:14

“Scalable” means
it compounds

The 100th change costs no more than the first.

31major versions of sankettambare.in
43pages, each with a share card
1small change a day

In plain words Major version a new page or a redesign

01 · The idea0:16

Before you start

Accounts

  • Claude — a paid plan
  • GitHub — a simple free account
  • Cloudflare — free plan
  • Domain — optional

On your laptop

  • Claude Code
  • Node.js, Git — optional: Claude can install them
  • An editor — optional

Must have

A folder of your stuff — bio, photo, CV, project links

In plain words Terminal where you type commands · Node.js the engine for website tools

01 · The idea0:18 · plain words

Words we'll use today

Tap any dotted word later for its meaning.

Repository (repo)A project folder that remembers every version of every file — like a Google Doc's version history, for a whole folder.
CommitA saved checkpoint with a short note saying what changed.
PushUpload your saved checkpoints from your laptop to GitHub.
BranchA safe copy of the project to try a change without touching the live site.
FrameworkA starter kit with rules for building pages, so you don't start from a blank file. Astro is one.
BuildTurning your source files into the finished website files.
DeployPutting the built website on the internet for everyone.
Host / hostingThe computers that send your site to each visitor — like renting shop space.
DomainYour site's name, like yourname.com.
DNSThe internet's phonebook: it turns a name like yourname.com into the address of a computer.
SSL / HTTPSThe padlock in the address bar: traffic between visitor and site is encrypted.
ContextHow much of the conversation Claude can keep in mind at once. Long chats crowd it out.
Plan modeClaude writes a plan and waits for your OK before it changes any file.
CLAUDE.mdA short note in your project that Claude reads at the start of every session — its onboarding doc.
MarkdownPlain text where # makes a heading and - makes a bullet. Easy for people and AI to read.
SEOSearch engine optimisation: helping Google and AI search find and show your pages.

02 · Shape0:20 · exercise, 10 min

Write idea.md

What is your core idea? One page, your own words — before any AI.

# idea.md
Who is it for?
What should they do?
Three things it must do
What I already have
What it must never be
Time I'll give it

idea.md saved.

02 · Shape0:30 · Claude chat

Let Claude interview you

Prompt 01 · Claude chatfull prompt ↗
Here is idea.md. Before writing anything, interview me — at most 5 questions at a time — until you can write concept.md without guessing.

Tip: start a Claude Project for your site.

In plain words Claude Project one folder for a topic's chats and files

02 · Shape0:40 · Research on

Deep research, one topic at a time

Prompt 02 · Claude chat, Research onfull prompt ↗
Using concept.md, research each separately: peer sites · design · frameworks · hosting · SEO. Cite every claim with a link.

Turn on Research in the chat's tools menu.

In plain words Research Claude reads many pages and writes a cited report

02 · Shape0:50

Three documents out

Why + what

concept

How

decisions

When

plan

Prompt 03 · Claude chatfull prompt ↗
From concept.md and the research, write concept.md, technical-decisions.md and phased-plan.md. Keep each short.

In plain words .md a plain-text file: # is a heading, - is a bullet

02 · Shape0:57

Be brief: the plan is a list of cuts

  • One line per feature
  • Phase 1 = the smallest site that can go live
  • ≤ 5 features a phase, each ends deployed
  • New ideas → later.md

A long list is a wish.
A short one is a plan.

In plain words Phase 1 the smallest useful version · later.md a parking lot

02 · Shape1:00

Gather all the data first

Real content makes a layout that fits.

  • Bio in three lengths
  • Original photos
  • Projects: title, one line, link, image
  • Writing, CV, social links

a content folder + INVENTORY.md

In plain words Markdown plain text for writing · JSON plain text for lists

03 · Decide1:05

Choosing the framework

Astro our default

content-firstalmost no JSCloudflare-backed

Next.js

app-firsthuge ecosystemheavier

SvelteKit

lightsimplesmaller community

React + Vite

flexibleneeds SEO workthe case study

Content site → Astro · App → Next.js or SvelteKit

In plain words Framework a starter kit for pages · JS code in the browser: less is faster

03 · Decide1:12

Choosing the host

Cloudflare our pick

freefast everywheredomain included

Vercel

best for Next.jsfree = non-commercial

Netlify

simplecredit limits

GitHub Pages

freestatic only

Free tiers change — check before you pick.

In plain words Hosting the computers serving your site · edge copies near every visitor

04 · Build1:30 · Claude Code

Phase 0: the repo

Prompt 06 · Claude Codefull prompt ↗
Read docs/technical-decisions.md. Do Phase 0: scaffold the framework, fill content/ with my real content, add CLAUDE.md, make the build pass, commit.
my-site/
├─ content/
├─ src/
├─ docs/
├─ CLAUDE.md
└─ CHANGELOG.md

Phase 0 committed, pushed to a new GitHub repo.

In plain words Repo a folder that remembers every version · commit a saved checkpoint

04 · Build1:40

Keep the content apart from the code

  1. Words, links, numbers live in content/
  2. One module reads them
  3. Content has rules — a schema

Change words without touching code — and code without touching words.

In plain words Content what the site says · code how it looks and works

04 · Build1:45

CLAUDE.md: the project's memory

Read at the start of every session. Keep it short.

# my-site
Astro → Cloudflare Workers.
- Content only in content/
- Plan: docs/phased-plan.md
- npm run build must pass
- Log every change
- Lessons: one line each

In plain words CLAUDE.md the note Claude reads at the start of every session

04 · Build1:50

One phase = one session

New phase → new session

  1. Fresh — /clear
  2. Plan mode — Shift+Tab
  3. Build — Esc to steer
  4. Verify — build, run, look
  5. Commit and tick the plan

In plain words Context what Claude can hold in mind · plan mode it proposes, you approve

04 · Build1:55 · Phase 1 now

The phase prompt

Prompt 07 · Claude Code, plan modefull prompt ↗
Read CLAUDE.md and the plan. Do Phase 1 only. Plan first, ask what's unclear. Then build, check every page, log the change, commit.

Phase 1 running on localhost with your real content.

In plain words localhost a private preview on your own laptop

04 · Build2:05

Give Claude a way to check its work

  • The build passes
  • It looks right — /verify
  • A second reader — /code-review
  • You, on your phone

Done = deployed, and you looked at it.

In plain words Build files → finished site · review a second reader

04 · Build2:10

SEO, speed, accessibility

Prompt 09 · Claude Codefull prompt ↗
Audit SEO, performance and accessibility on every page with Lighthouse (mobile). Fix the top issues; show before/after scores.
Lighthouse ≥ 90LCP < 2.5 sCLS < 0.1share card on every page

In plain words Lighthouse Google's free report card · SEO being found on Google

05 · Ship2:20

Push to GitHub

git checkout -b phase-2
git add -A
git commit -m "Phase 2"
git push -u origin phase-2

Or just say: “commit and push to a new branch”.

In plain words Push upload to GitHub · branch a safe copy to try a change

05 · Ship2:25

Deploy on Cloudflare

  1. Workers & Pages → Create
  2. Import your GitHub repo
  3. Build npm run build · output dist
  4. Deploy → *.workers.dev

Push to main = live. Other branches = preview links.

In plain words Deploy put the site online · preview a test link per branch

05 · Ship2:35

Your domain

  1. Buy a domain
  2. Point its nameservers to Cloudflare
  3. Worker → Add custom domain
  4. Add www, redirect it

https://yourname.com, live.

In plain words DNS the internet's phonebook · nameservers who keeps your entry

06 · Case study2:38

sankettambare.in

React + ViteCloudflareGitHubClaude Code
31major versions
43pages
30docs for Claude

Its database is skipped today — start with files.

In plain words Database a store for many records — skipped today

06 · Case study2:40 · possibilities

What a portfolio can become

sankettambare.in
The sankettambare.in homepage globe.
A world map of you
/ask
Ask the Archive.
A chatbot over it all
/logbook
The Logbook.
Writing, as a map
/training
The Training page.
A training log
/newsletter
The Newsletter page.
A monthly letter
/stats
The Stats page.
A yearly almanac

Start with four pages.
Add a room at a time:

  • Books, with notes
  • Races, treks, photos
  • Projects as case studies
  • Talks and videos
  • A “now” page

06 · Case study2:42

What kept it iterating

One source per fact

Bio and links in one file

Content apart

One door to the data

A changelog

On every change

Tests guard rules

The build fails, not you

Generated files

Sitemap, feeds, docs

Lessons written

One line in CLAUDE.md

In plain words Source of truth the one place a fact lives · test an automatic check

06 · Case study2:44

What broke, what it taught

Blank to crawlers

Bots saw an empty page. Render HTML from day one.

10 ms of CPU

Share images timed out. Test on the real deploy.

Silent WebP

Images vanished, no error. Write gotchas in CLAUDE.md.

In plain words Crawler a robot that reads sites for search and AI

07 · Featured projects2:46 · 1 of 4

Visiting Card

Flip it, toss it — one card, many versions of you.

The card in the Wanderer theme
Wanderer
The card in the Terminal theme
Terminal
The card in the Sahyadri theme
Sahyadri
The card in the Blueprint theme
Blueprint
The card in the Holographic theme
Holographic
  • 5 themes × 5 views
  • The link remembers your choice
  • vCard + résumé, one tap

→ card.sankettambare.in

card.sankettambare.in
The visiting card in the Sahyadri theme.
?theme=terminal&view=developer
The same card in the Terminal theme, Developer view.
The visiting card on a phone.

In plain words vCard a contact your phone saves in one tap

07 · Featured projects2:48 · 2 of 4

Vetal Tekdi Birding Marathon

One week, one hill, every bird counted.

164species, 2025
92checklists
111→1642023 → 2025
  • Live from eBird
  • English + Marathi

→ vtbm.in

vtbm.in
The VTBM homepage.
vtbm.in/birds
The Birds of Vetal Tekdi page.
The VTBM homepage on a phone.

In plain words API one site asking another for data

07 · Featured projects2:50 · 3 of 4

RunFolio In progress

Every finish line, worth framing.

  • Log any race — time, bib, photos
  • One link to share
  • Free tools for runners
26races on my profile
589 kmof racing
freefor runners

→ runfolio.in

runfolio.in
The RunFolio homepage.
runfolio.in/runner/sankettambare
A RunFolio runner profile.

In plain words PB personal best

07 · Featured projects2:51 · 4 of 4

Pumped Storage: are they useful?

A bilingual data story on the Sahyadri — trees first.

  • Every number cites its source
  • Projects ranked by trees felled
  • Open data downloads

→ are-psp-useful.pages.dev

are-psp-useful.pages.dev
The Pumped Storage homepage.
/projects
The Projects page.

In plain words Open data the numbers, offered as downloads

08 · Iterate2:52

From now on, a change is a prompt

“Add my Pune Half Marathon to Races, with this photo.”

  1. Say it — laptop, browser or phone
  2. Claude edits on a new branch
  3. Preview link — check on your phone
  4. Merge — one click
  5. Live in about a minute

In plain words Merge fold a branch's change into the live site

08 · Iterate2:54 · homework

Seven days, seven changes

  1. Live on workers.dev
  2. Your own domain
  3. Real content everywhere
  4. Run the audit
  5. One new section
  6. A friend tests it
  7. Write about it

Take-aways

The prompt pack
Words in plain English
Doc templates
This deck as a PDF

Read

Claude Code best practices
Astro content collections
Cloudflare static assets

In plain words workers.dev Cloudflare's free address, before a domain

09 · Close2:56 · your turn

How was it?

1

How was it, 1–5?

2

What stood out most?

3

How far did you get?

4

Where were you stuck?

5

What should I add or cut?

6

Send me your URL

09 · Close2:59

Thank you

One small change a day.

Prompt packevery prompt

Scan for my card.

Portfolio in a Day