For template buyers

Start here

Thanks for using this template. These steps take about an hour and turn it into your own site. You can delete this page when you are done.

1. Make it yours

Open Text Styles and Color Styles in the Assets panel. Every page uses them, so one change updates the whole site.

2. Change the accent colour

Edit the colour style “Accent (swap me)”. It is used in exactly three places: the link hover underline, the status dot and the Email button. Keep text on the button dark for contrast.

3. Switch the heading font

Headings use Geist 500. For a softer look, set the Display styles to Instrument Serif 400 with -2% letter spacing, like the “Display/Hero Serif (alt)” style. Body text stays Inter 400.

4. Add your projects

Open CMS > Projects. Each project has a title, a one-line outcome, meta fields, a cover image, a case study body and three stats. Replace every stat marked “Example — replace” with real numbers, or remove the stats row.

5. Replace placeholder images

All images are neutral placeholders. Use 1600 × 1000 px (16:10) covers. Only upload images you own or have the right to use.

6. Update the CV and contact

Edit the rows on the CV page, link the Download button to your own PDF, and change hello@example.com in the Email buttons. Replace the Dribbble and LinkedIn links with your own accounts.

7. Dark mode and motion

Every colour style has a light and a dark value, so dark mode follows the visitor’s system setting. Headline reveal, 1.02 hover and page transitions turn off when the visitor prefers reduced motion.

8. SEO and publish

Set your site title and description in Site Settings > General, and per page in each page’s settings. Then publish.

Template by Roger Chang. Fonts: Geist, Inter and Instrument Serif (open licence, served by Framer). The person, clients and projects in the demo are fictional.