Editing Portfolio Pages in next-dev-portfolio

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.

"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"`

"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:

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.

Rebuild to apply changes

Run the build command to bake your updated JSON into public/:

npm run build

Alternatively, start the development server and view changes live:

npm run dev

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.

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

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.

{
  "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"
      }
    }
  ]
}

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.

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".

Get Started

Content

Studio

Customization

Advanced

Page File Structure

The `meta` Object

Sections

The `settings` Object

Available Pages

Available Section Types

Editing a Page

Complete Example: Editing the Home Page Hero

​Page File Structure

​The meta Object

​Sections

​The settings Object

​Available Pages

​Available Section Types

​Editing a Page

​Complete Example: Editing the Home Page Hero

Page File Structure

The `meta` Object

Sections

The `settings` Object

Available Pages

Available Section Types

Editing a Page

Complete Example: Editing the Home Page Hero