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, content-sources.md for the content, deployment.md for going live.
Set your address in src/config/site.ts, replace the demo logo and photography, connect the contact form, then run npm run build 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 src/scripts/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 src/styles/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 honours.
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 src/config/site.ts, page copy sits beside each page, and images are files in src/assets/images that you replace in place.
Posts, services and events are Astro content collections in src/content. Add a file and it appears; point CONTENT_SOURCE at a CMS to source them remotely.
Reusable pieces live in src/components, so a card or a button is edited once and changes everywhere it appears.