Customisation

1. Change the brand name

Open assets/js/config.js and edit the value labelled CUSTOMIZE: Brand name . JavaScript updates elements marked with data-brand . Also replace the name in each page title and metadata for complete SEO customisation.

brandName: 'Your Studio',
contactEmail: 'hello@yourstudio.com',
location: 'Your city, country'

Change the logo

The default mark is CSS-generated through .brand-mark . Replace that span with an image or inline SVG in the navigation helper markup of each page. Keep an accessible text name or aria-label .

2. Change colours

Primary tokens live at the top of assets/css/base.css and theme overrides live in assets/css/themes.css . Change semantic values rather than individual components.

:root {
  --accent: #d8ff57;
  --bg: #101112;
  --text: #f3f1ea;
}

After changing colours, verify text, focus indicators, buttons and text placed over artwork in both themes.

Change fonts

The default package uses high-quality system font stacks, so it works offline and has no font licence dependency. Update --sans , --serif and --mono . To add an open-source webfont, place its files in a new assets/fonts directory and define only the weights you use with @font-face .

3. Change text and contact details

Content is written directly in each HTML file. Search for the visible sentence and replace it while preserving the surrounding semantic element. Contact values marked with data-email and data-location can be centrally updated in config.js .

4. Add or remove a project

1. Duplicate one complete <a class="project-card" ...> block.
2. Change its title, category, year, link, alt text and artwork path.
3. Add the same category to data-category when the card is used on the filterable grid.
4. Copy an existing project-detail file if a dedicated story is required.
5. Test the link from both local files and hosted preview.

Change project filters

Each filter button uses data-filter="Category" . Each card uses a matching data-category="Category" . All shows every card. Controls are native buttons and update aria-pressed .

5. Add a team member

Duplicate a complete team card, replace the fictional name, role, portrait artwork, biography and social URL. Copy team-member.html for an individual profile and update its structured data to Person .

Social links

Replace placeholder social labels and URLs in the footer, mobile menu, contact page and team profiles. External links that open a new tab should include rel="noopener" .

6. Replace visual artwork

Original abstract SVG files are in assets/artwork . Replace them with legally licensed SVG, AVIF, WebP, JPEG or PNG files. Preserve width and height attributes where possible, write meaningful alt text for informative images and use empty alt text for decorative images.

Add video

<video controls playsinline preload="metadata" poster="../assets/artwork/poster.webp">
  <source src="../assets/media/showreel.mp4" type="video/mp4">
  <p>Download the <a href="../assets/media/showreel.mp4">showreel</a>.</p>
</video>

Do not autoplay audio. Compress media, provide a poster and avoid loading large videos before a visitor requests them.

7. Loader, transitions, cursor and intensity

Open assets/js/config.js . Set any optional feature to false :

enableLoader: true,
enablePageTransitions: true,
enableCursor: true,
animationIntensity: 1,
enableDarkMode: true

Animation intensity accepts a number from 0 to 1. Reduced-motion preferences override decorative movement automatically.

Light and dark mode

Set the initial data-theme attribute on the HTML element. The theme script respects a stored manual choice and otherwise can follow the device preference. Remove the theme button only after verifying the chosen fixed palette on every page.

8. Media optimisation

• Use SVG for geometric artwork and icons.
• Export photographic images as AVIF or WebP with a suitable fallback where necessary.
• Size images near their maximum rendered dimensions rather than shipping originals.
• Keep width and height attributes to reduce layout shift.
• Lazy-load below-the-fold images and do not preload every visual.