Instructions
Introductory Guide: Use this simple guide to start editing your website smoothly.
Everything about this theme is in its own docs folder: customizing.md for the look and the content, deployment.md for going live.
Set your address in hugo.toml, replace the demo logo and photography, connect the contact form, then run hugo and check it over.
This theme animates with GSAP and Lenis, the same two libraries the original used. Everything they do is declared in the markup and defined in one file.
1. Open assets/js/motion.ts — every effect is listed in EFFECTS
2. Elements opt in through a data-anim attribute in the markup
3. Remove that attribute from an element to stop it animating
4. Retime or switch off an effect once in EFFECTS and every use follows
5. Hover and open states are CSS, in tailwind/additions.css
6. All of it stops for a reader who asks for reduced motion
The libraries own documentation, and the browser preference the layer honors.
The design's own widths are wired into Tailwind, so max-lg, max-md and max-sm mean 991, 767 and 479 pixels exactly as the original does.
The theme is files, so its history is your version control. Commit before a large change and you can return to any earlier state at any time.
Site-wide text is in hugo.toml, each page's copy is in its own file in content/, and images are files in assets/images that you replace in place.
News stories, services and events are Markdown files in content/, and the shorter lists are JSON files in data/. Add a file and it appears.
Reusable pieces are partials in layouts/_partials, so a card or a button is edited once and changes everywhere it appears.