Claude Code और Astro से portfolio site कैसे बनाएं: implementation और launch checklist

Portfolio का काम पहले साफ करें

Portfolio site सिर्फ screenshots की gallery नहीं होती। यह decision page है: recruiter, freelance client, conference organizer या collaborator कुछ मिनटों में समझना चाहता है कि आप कौन सा काम कर सकते हैं, आपने क्या बनाया है, और आपसे संपर्क कैसे किया जाए। पहले version में heavy animation से ज्यादा जरूरी है साफ role, concrete projects, contact CTA और trust signal.

इस guide में Claude Code को local development partner की तरह use करेंगे। Claude Code official docs के अनुसार यह codebase पढ़ सकता है, files edit कर सकता है और commands चला सकता है। इसलिए हम इसे एक छोटे Astro project में plan, implementation और review के लिए इस्तेमाल करेंगे।

Implementation के लिए Astro चुनते हैं। Portfolio जैसे static site में Astro अच्छा fit है क्योंकि build के समय HTML बन सकता है और hosting सरल रहती है। Official Astro project structure भी beginner के लिए समझने योग्य है। Claude Code नया है तो पहले Claude Code getting started guide पढ़ें।

पहला version कितना बड़ा होना चाहिए

पहले version में Hero, About, Projects, Services और Contact रखें। CMS, login, complex form backend और animation library बाद में जोड़ें। छोटा scope रखने से Claude Code का diff पढ़ना आसान रहता है।

flowchart TD
  A["Portfolio brief"] --> B["src/data/profile.ts"]
  B --> C["src/pages/index.astro"]
  C --> D["src/styles/global.css"]
  D --> E["npm run build"]
  E --> F["Launch review"]

Data को src/data/profile.ts में रखें और page को render करने का काम index.astro में रखें। इससे बाद में text बदलना, card layout बदलना या project order बदलना अलग-अलग task बन जाता है।

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

Images public/ में रखेंगे, इसलिए URL /projects/booking-site.webp होगा। MDN के img element docs में alt text और dimensions की बात आती है। नीचे की screenshots के लिए lazy loading का loading="lazy" उपयोगी है।

Claude Code को देने वाला prompt

“एक अच्छा portfolio बना दो” बहुत vague है। Audience, files, constraints और done criteria लिखें।

I want to build a personal portfolio site with Astro.
Audience: recruiters and small clients who should understand my work within three minutes.

Requirements:
- One page with Hero, About, Projects, Services, Contact
- Store 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
- CTA buttons must remain readable on mobile
- Finish by running npm run build

Before editing, summarize the plan and files you will change.

Plan पहले मांगना जरूरी है। अगर Claude Code अचानक CMS, API route या animation package जोड़ना चाहे, तो आप scope रोक सकते हैं। Astro workflow के लिए Claude Code Astro guide और SEO review के लिए Claude Code SEO guide देखें।

Copy-paste code

नया project हो तो Astro app बनाएं। Existing repo हो तो पहले structure inspect कराएं।

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

अब profile data बनाएं। Project description में problem, role, implementation और result लिखें। सिर्फ “React आता है” कमज़ोर proof है।

// src/data/profile.ts
export const profile = {
  name: "Masa Tanaka",
  role: "Frontend engineer / Claude Code adoption partner",
  location: "Tokyo, Japan",
  summary:
    "I build fast and 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;

Page file:

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

<html lang="hi">
  <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">View projects</a>
          <a class="button secondary" href={`mailto:${profile.links.email}`}>Start a conversation</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">Read more</a>
              </div>
            </article>
          ))}
        </div>
      </section>
    </main>
  </body>
</html>

Basic CSS:

/* 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%;
  }
}

Real use cases

Portfolio की priority reader पर depend करती है।

Use case	Reader क्या देखता है	Page में क्या रखें
Job search	Technical range और responsibility	Stack, role, demo, GitHub
Freelance	क्या आप business problem solve कर सकते हैं	Services, examples, email CTA
Speaking/writing	Topic authority	Topics, articles, short bio
Learning log	Progress और reproducible work	Notes, mistakes, demo, next steps

Freelance के लिए CTA vague “Contact” नहीं होना चाहिए। “Landing page review”, “performance audit”, “Claude Code workflow review” जैसे concrete entry points लिखें। ClaudeCodeLab में भी free content, checklist, training और consultation को जोड़कर monetization path बनाया जाता है। Example के लिए training page देखें।

SEO, pitfalls और review

SEO का मतलब keyword stuffing नहीं है। Title, description, h1 और projects में naturally ऐसे शब्द रखें जो audience खोजेगी: “frontend portfolio”, “Astro developer”, “Claude Code consulting”. अधिक detail के लिए Claude Code SEO guide देखें।

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.

Common pitfalls: बहुत ज्यादा animation, vague proof, broken links, missing OGP image, mobile overflow, और private client data को AI prompt में डालना। Client names, internal URLs, revenue numbers और .env values कभी paste न करें। Screenshots को anonymize करें या dummy data use करें।

Tested result note

इस structure में सबसे practical decision है data को src/data/profile.ts में रखना। इससे content edits और layout edits अलग रहते हैं, इसलिए Claude Code का diff छोटा और reviewable रहता है। Publish करने से पहले npm run build चलाएं और mobile width पर Hero, Projects और Contact जांचें।

Portfolio publish होने के बाद भी बदलता रहता है। New projects जोड़ें, weak descriptions सुधारें, CTA को अधिक specific बनाएं और relevant internal articles link करें। Claude Code को एक बड़े prompt की जगह छोटे verified improvements के लिए इस्तेमाल करें।