Home Page

The home page is built from src/data/home.json. Every headline, label, and link comes from this single file.

Structure

{
  "hero": { ... },
  "marquee": [ ... ],
  "why": { ... },
  "journal": { ... },
  "cta": { ... }
}

Hero

The first thing visitors see.

"hero": {
  "headlineParts": [
    { "text": "A soft studio that lets " },
    { "text": "type", "style": "italic opacity-60" },
    { "text": " hold air, " },
    { "text": "grain", "style": "hl" },
    { "text": " & time." }
  ],
  "note": "We build bento portfolios for studios that sell $45 themes ↓",
  "badge": "Astro + Tailwind — Ready to Ship",
  "scrollLabel": "Scroll to explore",
  "scrollTarget": "#welcome"
}

How headlineParts works:

Each part is a fragment of the headline. If it has a style, it is wrapped in a <span> with that class. This is how you get italic words and stabilo highlights without writing HTML.

Available styles:

• italic opacity-60 — softer italic accent
• hl — stabilo highlight (lime marker effect)
• hl-skew — tilted stabilo highlight

To change the headline, edit the parts. To add an accent, add a new part with a style.

Marquee

The infinite ticker that scrolls across the page.

"marquee": [
  { "text": "PaperHouse", "style": "serif" },
  { "text": "Astro 7", "style": "label" },
  { "text": "Bento Portfolio", "style": "serif" },
  { "text": "$45", "style": "label" }
]

Two styles:

• serif — italic serif, larger
• label — small uppercase sans

Add, remove, or reorder items freely. The marquee loops automatically.

Why this sells

A two-column block: copy on the left, image on the right.

"why": {
  "number": "01",
  "kicker": "why this sells ~",
  "headlineParts": [ ... ],
  "body": "This is the exact formula that sells at $45-$69 on ThemeForest, Framer, Gumroad.",
  "tags": [
    { "label": "Astro 7" },
    { "label": "Tailwind 4" },
    { "label": "Content Collections" },
    { "label": "$45", "accent": true }
  ],
  "cta": { "label": "View all works →", "href": "/works" },
  "image": "https://picsum.photos/seed/hero/1000/1200",
  "caption": "Studio — 2026"
}

• number — the big ghost number in the corner
• headlineParts — same fragment system as hero
• tags — small pills. Set accent: true for a lime background.
• image — replace with your own image URL

Journal

A preview of your latest posts.

"journal": {
  "labelPrefix": "From the",
  "labelHighlight": "Journal",
  "viewAll": "All posts →",
  "readLabel": "Read"
}

Posts are pulled automatically from src/content/blog/. This section only controls the labels.

CTA

The final call-to-action at the bottom of the home page.

"cta": {
  "decorator": "↗",
  "kicker": "ready to ship ~",
  "headlineParts": [
    { "text": "Bento portfolio that " },
    { "text": "sells itself.", "style": "hl-skew" }
  ],
  "body": "Copy, fork, deploy. Every content editable from markdown.",
  "primary": { "label": "See works", "href": "/works" },
  "secondary": { "label": "Read journal", "href": "/blog" },
  "emailLabel": "or",
  "email": "axcora@gmail.com"
}

• decorator — the big ghost character in the corner
• primary — main button (black pill)
• secondary — outline button
• emailLabel — text before the email link

Recipe: Rewrite the hero

Say your studio is called “Northfield” and you design editorial sites. Change home.json:

"hero": {
  "headlineParts": [
    { "text": "Northfield builds " },
    { "text": "editorial", "style": "italic opacity-60" },
    { "text": " sites that " },
    { "text": "read", "style": "hl" },
    { "text": " like print." }
  ],
  "note": "Editorial design for magazines, museums, and independent publishers.",
  "badge": "Booking Q2 2026",
  "scrollLabel": "See the work",
  "scrollTarget": "#welcome"
}

Save, refresh, done. No code touched.

Recipe: Replace the why-sells image

1. Drop your image into public/portfolio.jpg
2. Edit home.json:

"why": {
  "image": "/portfolio.jpg",
  "caption": "Northfield Studio — 2026"
}

Testing your changes

After editing home.json:

1. Save the file
2. If the dev server is running, the browser reloads
3. Check the home page

If nothing changes, you may be editing the wrong file. The home page uses src/data/home.json, not site.json.