Skip to main content

Call Sheet

Instructions for Editing the Template

1. Overview​

This portfolio template is designed to be “Edit-Once, Update-Everywhere.” You do not need to hunt through hundreds of lines of code to change your phone number or add a new project.

Almost all your content is managed in one specific section at the bottom of the index.html file called portfolioConfig.

Software required: You can use any text editor, such as VS Code (recommended), Sublime Text, or Notepad. Do not use Word.

2. The Golden Rules​

⚠️ Read this before editing

To prevent the site from breaking, follow these syntax rules:

  1. Keep the quotes: All text must be wrapped in "straight quotes".
    • ❌ Bad: name: Luke Dunsmore,
    • ✅ Good: name: "Luke Dunsmore",
  2. Watch the commas: Lines in a list must end with a comma ,.
  3. Don’t touch the left side: Only edit the text on the right side of the colon.

3. How to Edit Content​

Scroll to the bottom of the file (approx line 350). Look for the large comment block:

👇 EDIT YOUR PORTFOLIO CONTENT HERE 👇

A. Personal Details (personal)​

  • name: Your full name. Updates page title, footer, and copyright.
  • roleTitle: The small text above your main headline.
  • heroHeadline: The big text in the centre. Tip: Use <br> for line breaks.
  • heroBio: The short paragraph under the main headline.
  • availability: Status text in the top-left box.
  • heroImage: File path to your background image (e.g., "assets/hero.jpg").

B. About Section (about)​

  • title: Large heading in the About section.
  • paragraphs: A list of text blocks. To add a new paragraph, add a comma after the previous quote and start a new line.
  • badges: Small tags (e.g. “BECTU”, “UK PASSPORT”).
  • profileImage: URL or file path to your portrait.

C. Contact Details (contact)​

  • email / phone: Contact info. The system automatically creates clickable links.
  • agentEmail / agentRef: Representation details.

D. Credits (credits)​

This is a list of your projects. Each project is wrapped in curly brackets { ... }.

To add a new credit:
Copy an entire block from the opening { to the closing }, and paste it into the list.

E. Gallery & Filters​

Crucial: The category in your image list must match the value in your filter list.

// Filter
{ label: "Set Design", value: "set-design" },

// Image
{
  src: "assets/img1.jpg",
  category: "set-design" // Must match 'value' above
}

4. Social Media & SEO (Head Section)​

⚠️ Important: Social platforms (LinkedIn, Facebook) cannot read the JavaScript config at the bottom. You must edit the meta tags separately.

Scroll to the very top of the file (lines 5–15) and edit the tags starting with <meta property="og:...">.

  • og:title: Headline shown on a social card
  • og:description: Text shown under the headline
  • og:image: The thumbnail image shown on social media

5. Troubleshooting​

My site went blank You likely broke the syntax in the config area.

Check:

  • Did you delete a comma , at the end of a line?
  • Did you forget to close a quote "?
  • Did you use “smart quotes” (curved) instead of straight quotes?

Filters aren’t working Check that the category in your image list matches the filter value exactly.

  • Set Design (with a space) is not the same as set-design.

© 2026 Luke Dunsmore.