> ## Documentation Index
> Fetch the complete documentation index at: https://docs.olonjs.com/next-dev-portfolio/llms.txt
> Use this file to discover all available pages before exploring further.

# Editing Portfolio Pages in next-dev-portfolio

> Each page in next-dev-portfolio is a JSON file in src/data/pages/. Learn how to edit page metadata, add sections, and control layout settings.

Every page in next-dev-portfolio is defined by a single JSON file inside `src/data/pages/`. Each file declares the page's SEO metadata and an ordered array of sections — typed, data-carrying building blocks that the renderer assembles into the final layout. Editing a page is as simple as updating that JSON file, then rebuilding or letting Studio auto-save the change for you.

## Page File Structure

A page file has four top-level keys:

| Key        | Type     | Purpose                                              |
| ---------- | -------- | ---------------------------------------------------- |
| `id`       | `string` | Unique identifier for the page                       |
| `slug`     | `string` | URL-safe page identifier (e.g. `"home"`, `"about"`)  |
| `meta`     | `object` | SEO title and description                            |
| `sections` | `array`  | Ordered list of section objects rendered on the page |

### The `meta` Object

The `meta` object controls the `<title>` and `<meta name="description">` tags for the page. Keep titles between 50–60 characters and descriptions between 130–155 characters for best SEO results.

```json theme={null}
"meta": {
  "title": "Andrew Linh — Systems Architect & Technical Writer",
  "description": "Portfolio and writing from a backend engineer focused on structured data platforms, schema design, and developer tooling."
}
```

### Sections

Each entry in the `sections` array is an object with three keys:

| Key        | Type     | Purpose                                                  |
| ---------- | -------- | -------------------------------------------------------- |
| `id`       | `string` | Unique identifier within the page (e.g. `"home-hero-1"`) |
| `type`     | `string` | Section type that maps to a renderer component           |
| `data`     | `object` | Content payload; shape depends on the section type       |
| `settings` | `object` | Layout controls such as padding                          |

### The `settings` Object

The `settings` object lets you adjust the vertical breathing room around any section without touching CSS.

| Field           | Accepted values        | Default |
| --------------- | ---------------------- | ------- |
| `paddingTop`    | `"sm"`, `"md"`, `"lg"` | `"md"`  |
| `paddingBottom` | `"sm"`, `"md"`, `"lg"` | `"md"`  |

```json theme={null}
"settings": {
  "paddingTop": "lg",
  "paddingBottom": "lg"
}
```

## Available Pages

The table below lists every page shipped with next-dev-portfolio, its URL path, and the JSON file you edit to change it.

| Page                | URL path       | JSON file                         |
| ------------------- | -------------- | --------------------------------- |
| Home                | `/`            | `src/data/pages/home.json`        |
| About               | `/about`       | `src/data/pages/about.json`       |
| Blog list           | `/blog`        | `src/data/pages/blog.json`        |
| Blog post detail    | `/blog/[slug]` | `src/data/pages/blog/[slug].json` |
| Work list           | `/work`        | `src/data/pages/work.json`        |
| Work project detail | `/work/[slug]` | `src/data/pages/work/[slug].json` |
| Contact             | `/contact`     | `src/data/pages/contact.json`     |

## Available Section Types

| Section type        | Used on                    | Purpose                                                    |
| ------------------- | -------------------------- | ---------------------------------------------------------- |
| `home-hero`         | Home                       | Hero with title, highlight text, description, and two CTAs |
| `page-hero`         | About, Blog, Work, Contact | Simpler hero for inner pages                               |
| `featured-projects` | Home                       | Grid of featured project cards                             |
| `recent-posts`      | Home                       | Short list of the most recent blog posts                   |
| `bio-band`          | Home, About                | Bio block with portrait image and a CTA                    |
| `cta-band`          | Any                        | Full-width call-to-action strip                            |
| `about-story`       | About                      | Narrative section with supporting image                    |
| `skills-stack`      | About                      | Skills and tools displayed as a grid                       |
| `philosophy`        | About                      | Ordered list of guiding principles                         |
| `posts-list`        | Blog                       | Full paginated blog listing                                |
| `projects-list`     | Work                       | Full work/case-study listing                               |
| `post-detail`       | Blog/\[slug]               | Renders a single blog post body                            |
| `project-detail`    | Work/\[slug]               | Renders a full project case study                          |
| `contact-form`      | Contact                    | Contact form with field configuration                      |
| `header`            | Global shell               | Site-wide header                                           |
| `footer`            | Global shell               | Site-wide footer                                           |

## Editing a Page

You can edit pages in two ways:

<Steps>
  <Step title="Open the JSON file directly">
    Navigate to `src/data/pages/` in your editor and open the file for the page you want to change (for example, `home.json`). Edit the `meta` fields or the `data` payload of any section, then save.
  </Step>

  <Step title="Rebuild to apply changes">
    Run the build command to bake your updated JSON into `public/`:

    ```bash theme={null}
    npm run build
    ```

    Alternatively, start the development server and view changes live:

    ```bash theme={null}
    npm run dev
    ```
  </Step>

  <Step title="Or use Studio">
    Navigate to `/admin` in your running dev server to open the visual Studio editor. Edit sections using the form UI and click **Save**. When **Save2Repo** is active, Studio writes the JSON directly to `src/data/pages/` and triggers an automatic bake — no manual build step required.
  </Step>
</Steps>

<Note>
  After editing JSON files directly (outside Studio), always run `npm run build` before deploying. Studio with Save2Repo active handles this automatically on every save.
</Note>

## Complete Example: Editing the Home Page Hero

The example below shows a complete `home.json` with all five sections from the default template. The `data` shape for each section type is shown as-is — edit only the field values, not the field names.

```json theme={null}
{
  "id": "home-page",
  "slug": "home",
  "meta": {
    "title": "Andrew Linh — Systems Architect & Technical Writer",
    "description": "Portfolio and editorial site of Andrew Linh. Backend architecture, structured data infrastructure, developer tools, and AI-native systems — written with precision."
  },
  "sections": [
    {
      "id": "home-hero-1",
      "type": "home-hero",
      "data": {
        "label": "Systems architect · technical writer",
        "title": "I design backends that stay honest,",
        "titleHighlight": "then write about why.",
        "description": "Architecture for structured data platforms, developer tools, and AI-native systems — with the calm of a well-tuned terminal.",
        "primaryCta": {
          "id": "cta-work",
          "label": "View work",
          "href": "/work",
          "variant": "primary"
        },
        "secondaryCta": {
          "id": "cta-blog",
          "label": "Read writing",
          "href": "/blog",
          "variant": "secondary"
        }
      },
      "settings": {
        "paddingTop": "lg",
        "paddingBottom": "lg"
      }
    },
    {
      "id": "home-featured-1",
      "type": "featured-projects",
      "data": {
        "label": "Selected work",
        "title": "Case studies",
        "description": "Engagements where schema contracts, type safety, and measurable outcomes mattered.",
        "limit": 4,
        "items": { "$ref": "../collections/projects/projects.json" }
      },
      "settings": {
        "paddingTop": "md",
        "paddingBottom": "md"
      }
    },
    {
      "id": "home-posts-1",
      "type": "recent-posts",
      "data": {
        "label": "Writing",
        "title": "Latest notes",
        "limit": 3,
        "items": { "$ref": "../collections/posts/posts.json" }
      },
      "settings": {
        "paddingTop": "md",
        "paddingBottom": "md"
      }
    },
    {
      "id": "home-bio-1",
      "type": "bio-band",
      "data": {
        "label": "Briefly",
        "title": "Precision over performance.",
        "body": "I spend most of my time on the seams: schemas that bind editors to runtimes, APIs that stay typed end-to-end, and agent tooling you can actually grade.",
        "image": {
          "url": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=1200&q=80",
          "alt": "Portrait of a man in a dark shirt looking calmly at the camera"
        },
        "cta": { "id": "bio-about", "label": "Full about", "href": "/about", "variant": "secondary" }
      },
      "settings": {
        "paddingTop": "md",
        "paddingBottom": "md"
      }
    },
    {
      "id": "home-cta-1",
      "type": "cta-band",
      "data": {
        "title": "Need a calm systems partner?",
        "description": "Architecture reviews, schema design, and technical writing for teams shipping structured platforms.",
        "primaryCta": { "id": "cta-contact", "label": "Start a conversation", "href": "/contact", "variant": "primary" }
      },
      "settings": {
        "paddingTop": "lg",
        "paddingBottom": "lg"
      }
    }
  ]
}
```

<Tip>
  The `titleHighlight` field in a `home-hero` section renders in your accent color. Use it to emphasize the most memorable fragment of your headline — typically a verb phrase or a punchy qualifier.
</Tip>

<Warning>
  Every section `id` must be unique within a page. Duplicate IDs cause unpredictable rendering behavior. A safe convention is to suffix the section type with a counter: `"home-hero-1"`, `"cta-band-2"`.
</Warning>