portfolio-landing-page

---
name: portfolio-landing-page
description: Use when building a creator portfolio (hero, selected work grid, case-study sections, contact) — opinionated Astro + Tailwind layout that ships in under an hour without dragging in a CMS.
source: https://astro.build/
generated: 2026-05-07T21:42:45.956Z
category: concept
audience: creators
---

## Tutorials

- https://skillmake.xyz/v/portfolio-landing-page.mp4

## When to use

- Designer / developer / video-maker portfolio that needs to look intentional
- Self-hosted alternative to Read.cv / Cargo / Squarespace
- Writing-friendly portfolio where case studies are MDX, not Figma exports
- Static-first build that deploys to Cloudflare Pages / Vercel / Netlify in one click

## Key concepts

### Astro content collections

src/content/work/*.mdx for case studies, src/content/posts/*.mdx for writing, both typed via Zod schemas in src/content/config.ts. Astro handles routing, frontmatter validation, and MDX rendering with zero JS shipped to the browser.

### hero / work-grid / case-study / contact sections

The four sections every creator portfolio needs. Hero = name + one-line + immediate proof. Work grid = 6–9 thumbnails with hover states. Case study = long-form story per project (problem, solution, result). Contact = email + social + maybe Cal.com.

### image optimisation

<Image src={...} /> from astro:assets generates AVIF + WebP + JPG fallback per breakpoint. For video thumbnails, use a poster image and lazy-load the actual video tag below the fold. Set priority on the hero image only.

## API reference

```
src/content/config.ts schema
```

Zod schema that validates every case study's frontmatter at build time — title, date, hero image, role, client, link.

```
import { z, defineCollection } from 'astro:content';
const work = defineCollection({
  type: 'content',
  schema: ({ image }) => z.object({
    title: z.string(),
    date: z.coerce.date(),
    hero: image(),
    role: z.string(),
    client: z.string().optional(),
    link: z.string().url().optional(),
    summary: z.string().max(200),
  }),
});
export const collections = { work };
```

```
src/pages/work/[...slug].astro dynamic route
```

Generates one HTML page per case study at build time using getStaticPaths + getCollection.

```
---
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
  const entries = await getCollection('work');
  return entries.map((entry) => ({ params: { slug: entry.slug }, props: { entry } }));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<Layout title={entry.data.title}><Content /></Layout>
```

## Gotchas

- Don't ship a JS framework just for the work grid — Astro renders it as static HTML; reach for islands only when you need real interactivity (e.g. filter toggles).
- Big hero videos kill mobile LCP. Use a poster image, lazy-load video on intersection, and offer a still fallback.
- Single column on mobile, 2–3 column work grid on tablet, 3+ on desktop. Don't try to fit 4 columns on a phone.
- Keep case studies under 1500 words; readers skim. Use pull-quotes and headings every 200–300 words.

---
Generated by SkillMake from https://astro.build/ on 2026-05-07T21:42:45.956Z.
Verify against source before relying on details.

File: ~/.claude/skills/portfolio-landing-page/SKILL.md