Membuat Situs Portfolio dengan Claude Code dan Astro: Implementasi Praktis

Tentukan fungsi portfolio sebelum menulis kode

Situs portfolio bukan sekadar galeri screenshot. Halaman ini harus membantu recruiter, calon klien, partner, atau penyelenggara acara memahami siapa Anda, masalah apa yang pernah Anda selesaikan, bukti apa yang bisa dilihat, dan bagaimana memulai percakapan. Versi pertama tidak perlu animasi rumit. Yang penting adalah pesan jelas, project konkret, CTA terlihat, dan mobile nyaman dibaca.

Di artikel ini Claude Code dipakai sebagai partner development lokal. Dokumentasi resmi Claude Code menjelaskan bahwa Claude Code dapat membaca codebase, mengedit file, menjalankan command, dan bekerja dengan tool development. Karena itu kita bisa memakainya untuk membuat versi kecil, memeriksa diff, lalu menjalankan build.

Implementasi menggunakan Astro dan CSS biasa. Untuk portfolio pribadi, static HTML sering sudah cukup: cepat, mudah di-host, dan tidak memaksa kita menambah React atau UI library besar terlalu awal. Struktur foldernya juga jelas di Astro project structure.

Jika masih baru dengan Claude Code, baca dulu panduan mulai Claude Code. Untuk pola Astro, lanjutkan dengan pengembangan Astro memakai Claude Code.

Scope versi pertama

Kita akan membuat satu halaman dengan Hero, About, Projects, Services, dan Contact. CMS, login, form backend, dan animasi berat bisa ditambahkan belakangan. Scope kecil membuat hasil lebih mudah direview.

flowchart TD
  A["Brief portfolio"] --> B["src/data/profile.ts"]
  B --> C["src/pages/index.astro"]
  C --> D["src/styles/global.css"]
  D --> E["npm run build"]
  E --> F["Review sebelum publikasi"]

Pisahkan data dan tampilan. Simpan profil serta project di src/data/profile.ts; biarkan index.astro fokus menampilkan halaman. Dengan struktur ini, permintaan ke Claude Code bisa kecil: “perbaiki copy project”, “ubah layout card”, atau “tambahkan satu project baru”.

my-portfolio/
  src/
    data/profile.ts
    pages/index.astro
    styles/global.css
  public/
    ogp.png
    projects/booking-site.webp

Gambar di public/ dapat dipanggil sebagai /projects/booking-site.webp. Referensi MDN untuk elemen img menekankan alt yang bermakna. Untuk screenshot di bawah fold, halaman MDN tentang Lazy loading menjelaskan loading="lazy".

Prompt untuk Claude Code

Prompt seperti “buat portfolio keren” terlalu luas. Tulis audience, file, batasan, dan kriteria selesai.

I want to build a personal portfolio site with Astro.
The audience is recruiters and small clients who need to understand my work within three minutes.

Requirements:
- One page with Hero, About, Projects, Services, and Contact
- Store profile and project data in src/data/profile.ts
- Implement src/pages/index.astro and src/styles/global.css
- Do not add React or a heavy UI library
- Add alt text to every image
- Make CTA buttons readable on mobile
- Finish by running npm run build

Before editing, summarize the implementation plan and the files you expect to change.

Meminta rencana sebelum edit membantu menangkap scope creep. Jika Claude Code ingin menambah CMS, API route, atau animation package, minta alasan dulu. Untuk review SEO setelah implementasi, pakai SEO dengan Claude Code.

Kode awal yang bisa disalin

Untuk project baru, buat app Astro. Jika sudah ada repo, minta Claude Code membaca struktur dulu.

npm create astro@latest my-portfolio
cd my-portfolio
npm run dev

Buat file data. Deskripsi project harus menjawab masalah, peran, implementasi, dan hasil. Hindari hanya menulis daftar teknologi.

// src/data/profile.ts
export const profile = {
  name: "Masa Tanaka",
  role: "Frontend engineer / Claude Code adoption partner",
  location: "Tokyo, Japan",
  summary:
    "I build fast, maintainable websites with Astro, React, TypeScript, and practical content operations.",
  skills: ["Astro", "TypeScript", "React", "CSS", "SEO", "Content Ops"],
  links: {
    email: "masa@example.com",
    github: "https://github.com/example",
  },
} as const;

export const projects = [
  {
    title: "Booking site conversion cleanup",
    description:
      "Improved mobile navigation, service explanation, and reservation CTA so visitors could choose the next step faster.",
    image: "/projects/booking-site.webp",
    alt: "Booking website screenshot with service cards and reservation button",
    tags: ["Astro", "SEO", "Responsive"],
    url: "https://example.com/booking",
  },
  {
    title: "SaaS task dashboard",
    description:
      "Redesigned task cards, status filters, and empty states for first-time trial users.",
    image: "/projects/task-dashboard.webp",
    alt: "SaaS dashboard screenshot with task cards and filters",
    tags: ["TypeScript", "UI Design", "Dashboard"],
    url: "https://example.com/dashboard",
  },
] as const;

File halaman:

---
import { profile, projects } from "../data/profile";
import "../styles/global.css";
---

<html lang="id">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{profile.name} | Portfolio</title>
    <meta name="description" content={`${profile.role}: selected projects, services, and contact.`} />
    <meta property="og:title" content={`${profile.name} | Portfolio`} />
    <meta property="og:description" content={profile.summary} />
    <meta property="og:image" content="/ogp.png" />
  </head>
  <body>
    <main>
      <section class="hero" aria-labelledby="hero-title">
        <p class="eyebrow">{profile.location}</p>
        <h1 id="hero-title">{profile.name}</h1>
        <p class="lead">{profile.summary}</p>
        <div class="actions">
          <a class="button primary" href="#projects">Lihat project</a>
          <a class="button secondary" href={`mailto:${profile.links.email}`}>Mulai percakapan</a>
        </div>
      </section>

      <section id="projects" class="section" aria-labelledby="projects-title">
        <h2 id="projects-title">Projects</h2>
        <div class="project-grid">
          {projects.map((project) => (
            <article class="project-card">
              <img src={project.image} alt={project.alt} width="960" height="540" loading="lazy" />
              <div class="project-body">
                <h3>{project.title}</h3>
                <p>{project.description}</p>
                <a href={project.url} target="_blank" rel="noreferrer">Baca detail</a>
              </div>
            </article>
          ))}
        </div>
      </section>
    </main>
  </body>
</html>

CSS dasar:

/* src/styles/global.css */
:root {
  --bg: #f7f3ec;
  --panel: #ffffff;
  --text: #1f2933;
  --accent: #0f766e;
  --line: #d8dee4;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
}

.hero,
.section {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  min-height: 82vh;
  display: grid;
  align-content: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
}

.button.primary {
  background: var(--accent);
  color: white;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.project-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.project-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .button {
    width: 100%;
  }
}

Use case nyata

Portfolio harus menyesuaikan pembaca.

Use case	Yang ingin divalidasi	Yang perlu ditampilkan
Cari kerja	Stack, tanggung jawab, bukti	Role, demo, GitHub, ukuran tim
Freelance	Apakah Anda cocok untuk masalah bisnis	Services, contoh, email CTA
Talk atau tulisan	Otoritas topik	Topik, artikel, bio singkat
Catatan belajar	Progress dan project yang bisa dicoba	Catatan, kesalahan, demo, next step

Untuk freelance, CTA jangan hanya “Contact”. Tulis entry point yang konkret: audit landing page, review performance, perbaikan CTA, atau review workflow Claude Code. ClaudeCodeLab juga memakai pola ini: artikel gratis membangun trust, checklist membantu aksi pertama, lalu training atau konsultasi menyelesaikan masalah spesifik. Lihat contoh di training dan konsultasi.

SEO, pitfall, dan review

SEO untuk portfolio berarti jelas. Pakai kata yang dicari audience: “frontend portfolio”, “Astro developer”, “Claude Code consulting”, atau kata lokal jika menjual jasa di wilayah tertentu. Masukkan secara natural di title, description, h1, dan project copy.

Review this Astro portfolio for SEO and accessibility.
Check title, description, heading order, image alt, internal links, external links,
CTA, and mobile readability.
Return only issues, reasons, and the smallest useful fixes.

Pitfall yang sering muncul: terlalu banyak animasi sebelum pesan utama jelas; bukti terlalu umum seperti “bisa React”; publish tanpa npm run build, cek link, OGP, dan mobile; serta memasukkan data klien, URL internal, revenue, atau nilai .env ke prompt AI. Gunakan screenshot yang sudah dianonimkan atau dummy data.

Catatan hasil uji dan langkah lanjut

Keputusan paling berguna di struktur ini adalah memindahkan data ke src/data/profile.ts. Dalam praktik, perubahan copy dan layout bisa dipisah sehingga diff Claude Code lebih pendek dan mudah direview. Sebelum publish, jalankan npm run build, lalu cek Hero, Projects, dan Contact di lebar mobile.

Portfolio bukan halaman yang selesai sekali. Tambahkan screenshot yang lebih kuat, perbaiki deskripsi project yang lemah, buat CTA lebih spesifik, dan sambungkan artikel internal yang relevan. Claude Code paling efektif saat dipakai untuk iterasi kecil yang bisa diverifikasi.