Bundle Portfolio: Astro + Claude Code 1 Hari

TL;DR

• Stack: Astro 6 + Claude Code + Tailwind v4 + Cloudflare Pages. Total Rp 0/bulan hosting.
• Timeline: 6-8 jam dari blank ke production (proven 8x dengan dev/designer Tangerang).
• Verdict: Recommended untuk dev/designer Indonesia yang butuh portfolio fast + high-quality.

Konteks

Saya help 8 portfolio launch dalam Q1-Q2 2026:

1. Dev React Tangerang (4 jam, template starter Astro Theme): cepat karena reuse template
2. Designer UI Jakarta (6 jam, custom design heavy): butuh extra waktu untuk image optimization + animation
3. Dev backend Bekasi (5 jam, focus blog tech): heavy MDX content
4. Fotografer wedding Tangerang (8 jam, gallery + booking inquiry): butuh integration dengan Supabase untuk lead form
5. Dev mobile freelance (5 jam): standard portfolio + 3 case study
6. Designer brand identity (7 jam): heavy visual + animation Framer Motion
7. Dev fullstack senior (6 jam, AI-assisted heavy): productivity tinggi karena familiar Claude Code
8. Dev junior baru lulus (8 jam): butuh extra hand-holding, tapi tetap done dalam 1 day

Average: 6.1 jam dari blank ke production deploy. Median 6 jam.

Pricing (Juni 2026)

Astro 6

Gratis (open-source).

Claude Code

$20/bulan = Rp 320rb. Pakai 1 hari = Rp 11rb. Atau Cursor Pro $20/bulan equivalent.

Tailwind v4

Gratis.

Cloudflare Pages

Free: 100K page view/hari, unlimited bandwidth. Cukup untuk 99% portfolio personal.

Domain

• Niagahoster .com: Rp 175rb/tahun
• Rumahweb .my.id: Rp 35rb/tahun
• Cloudflare Registrar .com: $9.5/year = Rp 152rb/tahun (cheapest)

Total launch cost

• Build: Rp 11rb (1 hari Claude Code) atau Rp 0 (pakai Cursor jika sudah subscribe)
• Year-1 hosting: Rp 0
• Year-1 domain: Rp 150-300rb

Total: Rp 150-310rb untuk year-1.

Architecture

User browser
    ↓
Cloudflare CDN (Jakarta PoP)
    ↓
Static HTML/CSS/JS (Astro build output)

Pure static — no server compute. Latency TTFB Jakarta: 15-25ms.

Untuk contact form: Supabase form submission (free tier) atau ConvertKit/Formspree (free tier 50 submission/bulan).

Hour-by-hour recipe (8 jam)

Hour 1: Setup project

bunx create-astro@latest my-portfolio --template minimal
cd my-portfolio
bun add -D @tailwindcss/vite
bunx astro add tailwind mdx sitemap

Init Git:

git init && git add . && git commit -m "init"

Init Claude Code:

claude
> read README.md and setup CLAUDE.md untuk project portfolio

Claude generate CLAUDE.md dengan stack info + convention.

Hour 2: Hero + About section

Prompt Claude Code:

Build hero section untuk portfolio dev React. Include:
- Headline: "Saya bantu SMB Indonesia ship product web yang scale"
- Subheadline: 1 paragraph tentang pengalaman
- CTA: "Lihat case study" + "Email saya"
- Photo profil placeholder
- Tailwind v4 styling, dark mode bawaan
- Accessible (WCAG AA)

Claude generate component dalam 2-3 menit. Saya review + tweak warna/spacing.

About section: similar prompt, ditambah experience + tech stack.

Hour 3: Case study section

Prompt:

Build case study card grid. 3 case study utama:
1. SaaS dental Jakarta - revenue +Rp 8jt/bulan, build time 2 bulan
2. Ecommerce klinik kecantikan - 1200 order/bulan
3. Admin panel HR - save 20 jam/minggu manual work

Each card: title, image placeholder, 3 bullet metric, link ke detail page.
Use Astro Content Collection untuk MDX detail.

Claude generate card grid + setup Content Collection.

Setiap case study punya halaman detail di src/content/case-studies/*.mdx. Saya isi content 15-20 menit per case study.

Hour 4: Blog section

Prompt:

Setup blog section dengan Astro Content Collection.
- src/content/blog/*.mdx
- Schema: title, date, tags, excerpt, ogImage
- Index page: listing dengan filter tag
- Detail page: rendered MDX + table of contents
- RSS feed
- Sitemap include blog

Claude generate full blog setup dalam 5-8 menit.

Saya import 3-5 blog post existing (atau draft baru via Claude prompt: “Write 800-word blog post tentang X”).

Hour 5: Contact + form

Prompt:

Build contact section dengan form (name, email, message).
Backend: Supabase Edge Function insert ke table "leads".
Validation: Zod schema.
UX: optimistic submit + success state + error fallback.
Spam protection: honeypot field.

Claude generate form + Edge Function. Saya setup Supabase project (5 menit).

Alternatif tanpa Supabase: pakai Formspree (free) atau Cloudflare Workers + email forwarding.

Hour 6: Animation + polish

Tambah subtle animation:

• Hero text fade-in (View Transitions API native Astro 6)
• Card hover lift
• Smooth scroll
• Cursor effect (opsional)

Prompt Claude untuk animation snippets. Tweak timing manual.

Image optimization: pakai Astro <Image> component dengan automatic webp/avif conversion.

Hour 7: SEO + meta

Prompt:

Setup SEO meta untuk semua page:
- Title format: "Page Title | Nama - Tagline"
- Description per page
- OG image (1200x630)
- Twitter card
- JSON-LD Person schema untuk homepage
- Canonical URL
- Robots.txt + sitemap.xml

Claude generate <SEO> component + JSON-LD. Apply ke layout.

Audit dengan Lighthouse:

• Performance: 95-100
• Accessibility: 95-100
• Best practices: 100
• SEO: 100

Hour 8: Deploy

Setup repo GitHub:

gh repo create my-portfolio --public --source=. --push

Connect ke Cloudflare Pages:

• Dashboard CF → Pages → Create project → Connect GitHub
• Build command: bun run build
• Output: dist
• Deploy

Setup custom domain (5 menit):

• Add domain di CF Pages
• Update DNS (kalau domain sudah di CF: 1 click; kalau di Niagahoster: update nameserver)

Production live dalam 8 jam total.

Performance result (8 portfolio)

Average Lighthouse score:

Metric	Mobile	Desktop
Performance	96	99
Accessibility	97	98
Best practices	100	100
SEO	100	100

TTFB Jakarta median: 18ms. LCP median: 0.9s.

Bundle size: 8-15 KB JS + 6-12 KB CSS (depending pages count).

Trade-off

Pro

• Time-to-launch 1 hari (bukti repeat)
• Hosting Rp 0/bulan permanent (free tier CF Pages generous)
• Performance world-class (Lighthouse 95-100)
• SEO-friendly by default (static + meta + structured data)
• Maintenance minimal — Astro stable, jarang breaking change
• AI-assisted: pakai Claude Code/Cursor untuk update content cepat

Con

• Tidak fit jika butuh app feature (dashboard, auth, user-generated content)
• Update content butuh git commit (no CMS GUI) — kecuali pakai Tina/Decap CMS
• Limited dynamic feature — comment, search, butuh integration external
• Tidak ideal untuk portfolio dengan database besar (1000+ project)

Gotcha (lesson learned)

1. Image optimization wajib

Default Astro Image work, tapi banyak dev skip. Hasil: bundle balloon 5-10MB. Selalu pakai <Image> component dengan width/height.

2. Custom font: gunakan font-display: swap

Tanpa ini, FOIT (Flash of Invisible Text) drop Lighthouse Performance 5-10 poin.

3. Analytics: pakai Cloudflare Web Analytics atau Plausible

Skip Google Analytics — adds 50-150KB JS + privacy concern. CF Web Analytics free + privacy-friendly.

4. Dark mode: pakai prefers-color-scheme + toggle

Default ke prefers-color-scheme system. Tambah toggle untuk manual override. Pakai localStorage untuk persist.

5. Contact form spam

Honeypot field (hidden, bot fill it, real user skip) + Cloudflare Turnstile (free hCaptcha alternative). Plus email rate-limit di backend.

Konteks Indonesia

Untuk dev/designer Tangerang/Jakarta 2026:

Dev React Tangerang: portfolio launch 4 jam, dapat klien pertama (Rp 12 juta project) dalam 3 minggu via referral dari blog post yang share di Twitter.

Designer UI Jakarta: portfolio launch 6 jam, dapat klien $2K project (Rp 32 juta) dalam 2 minggu via LinkedIn outreach setelah portfolio live.

Fotografer wedding Tangerang: portfolio launch 8 jam dengan booking inquiry form integrated ke Supabase. Average 5 inquiry/minggu, 30% convert ke client (Rp 5-15 juta per booking).

ROI portfolio launch: average 10-20x dalam 3 bulan untuk freelance Indonesia.

Verdict

Recommended untuk dev/designer Indonesia 2026 yang butuh portfolio fast.

Pakai bundle ini jika:

• Solo freelance atau small agency
• Butuh portfolio launch dalam 1-2 hari
• Budget hosting Rp 0-300rb/year
• Content-heavy (case study, blog, gallery)

Skip jika:

• Butuh app feature heavy (dashboard, auth)
• Tim besar dengan workflow CMS established
• Portfolio bukan priority (low-effort job board profile cukup)

Variasi: ganti Cloudflare Pages dengan Vercel Hobby (free) jika prefer Vercel ecosystem. Atau Netlify (free tier 100GB bandwidth).

Untuk update content via CMS GUI: tambah TinaCMS (free) atau Decap CMS (free, Git-based).

Untuk landing page comparison lebih dalam: bundle landing page 5 hari.