Skip to main content
Studio lets you edit every piece of content in your portfolio without touching code. Page sections, blog posts, and project case studies all have dedicated editing views with form fields derived from their Zod schemas. The steps below walk you through each editing workflow.

​
Editing a Page Section

Page sections are the building blocks of each route in your portfolio — home hero, bio band, skills stack, and so on. Each section renders its own form in Studio.
1

Open Studio

Navigate to /admin on your site. Locally, that’s http://localhost:3000/admin. On Vercel, use your deployed URL.
2

Select the page you want to edit

Use the sidebar navigation in Studio to choose a page — for example, Home or About. Studio loads that page’s sections in the editor panel.
3

Locate the section

Each section (e.g., home-hero, bio-band, skills-stack) appears as a labelled card with its editable fields listed below it.
4

Edit a field

Click any field and type your changes. Text fields update inline. Image fields open the asset picker so you can enter a URL or upload a file. CTA fields expose label, href, and variant inputs.
5

Save your changes

Click Save. In Save2Repo mode, Studio commits the updated JSON to your GitHub repo and Vercel triggers a new deployment. In local mode, the corresponding file in src/data/ is written to disk immediately.
6

Verify the update

The page refreshes automatically after saving. Confirm your changes appear as expected in the live preview.

​
Section Settings

Every section includes a settings block that controls its vertical spacing. You’ll find these fields at the bottom of each section’s form.
Use lg padding on standalone feature sections like your hero or work preview to give them visual breathing room. Use sm for compact connector sections.

​
Editing Blog Posts

Blog posts are managed as a collection. Each post is an entry in src/data/collections/posts/posts.json.
1

Open the Blog collection

In Studio’s sidebar, click Blog. You’ll see a list of all existing posts.
2

Open a post

Click any post title to open its detail editor. You can edit the following fields:
  • Title — the post headline
  • Dek — the subtitle or summary line displayed below the title
  • Body — full Markdown content, including headings, lists, and code blocks
  • Tags — comma-separated topic labels
  • Date — publication date in YYYY-MM-DD format
  • Image — cover image url and alt text
3

Save the post

Click Save. In Save2Repo mode, the updated posts.json is committed to your repo and a new deployment is triggered.
To add a new post, click the New button in the Blog list view. Studio creates a blank post entry and opens the detail editor. Alternatively, add an entry manually to src/data/collections/posts/posts.json:
The body field accepts full Markdown. You can use headings (##, ###), bullet lists, numbered lists, inline code, fenced code blocks, and blockquotes.

​
Editing Projects and Case Studies

Projects are managed as a collection stored in src/data/collections/projects/projects.json. Each project entry represents a case study with structured content fields.
1

Open the Work collection

In Studio’s sidebar, click Work. You’ll see a list of all existing projects.
2

Open a project

Click any project to open its detail editor. Editable fields include:
  • Title — the project name
  • Context — background and framing for the project
  • Problem — the challenge or opportunity addressed
  • Architecture — technical design decisions and approach
  • Result — outcomes and impact
  • Stack — technologies used (list of strings)
  • Image — project image url and alt text
  • Featured — boolean toggle controlling home page visibility
3

Toggle featured visibility

Set featured to true to display the project in the work preview section on your home page. Set it to false to keep it in the full Work listing only.
4

Save the project

Click Save. The updated projects.json is persisted locally or committed to your repo in Save2Repo mode.

​
Field Reference

Use this reference when filling out content fields across sections and collections.

​
Image Fields

Every image field has two required properties:
Both url and alt are required. Missing alt text will cause accessibility and SEO issues.

​
CTA Fields

Call-to-action fields expose three properties:

​
List Fields

Fields that accept a list of strings (such as skills or stack items) render as a tag-style input in Studio. Add or remove items individually.
Keep skill and stack lists concise — aim for 6–12 items to avoid visual clutter in the rendered sections.