User GuideEssentials
Getting Started
How to install the theme, run it, and find the files you will edit first. The guides in the docs/ folder go further.
Install and Run
You need Node.js 22.12 or later. In the theme folder, run npm install once, then npm run dev for a local preview that reloads as you edit (Astro prints its address). npm run build writes the finished static site to dist/, and npm run preview serves that build so you can check it.
Site Settings
src/config/site.ts is the file to edit first: the event’s name, year and venue, the contact details, the social links, the header navigation and footer columns, and SITE.url, your live domain, which the sitemap, canonical links and social cards are built from.
Event Days and Tickets
EVENT_DAYS in site.ts lists the event’s dates. The schedule tabs, the ticket tabs and the speaker pages all read it, so moving the event is a change there. The theme sells nothing itself: TICKETING.url is where every ticket button goes. It is the contact page until you set it to your ticketing provider’s event page; the currency and the small print sit beside it.
Forms
The newsletter, contact and sponsor forms post to the endpoints in src/config/forms.ts. They ship empty, so a form tells the visitor it could not be sent instead of pretending it was. Set each one to a service that accepts a form POST, such as Formspree, Basin, Netlify Forms or a function of your own.
Content
Speakers, blog posts and the legal pages are Markdown files in src/content/. Sessions, tickets, FAQs, partners, reviews and the gallery are JSON files in src/content/data/. src/content.config.ts checks every entry when the site builds, so a missing or mistyped field stops the build and says which entry it was.
Images
Every image is in src/assets/images and is named from the content, so a file replaced by one with the same name keeps its place in the layout. The demo photos and videos are licensed to the original designer: replace them before you launch.
Colors and Fonts
The design’s colors and type sizes are custom properties set on body in src/styles/global.css, such as --color-style--primary for the orange, and repeated in each breakpoint block below it: change every copy, or override the token once on body in src/styles/additions.css, which outranks them all. Urbanist is declared under fonts in astro.config.ts and downloaded when the site builds.
Animation
Motion uses GSAP and Lenis. An element names its effect with a data-anim attribute, and the effects are defined in src/scripts/motion.ts; smooth scrolling is set up in src/scripts/smooth-scroll.ts. Everything that loops has a pause button. Visitors whose system asks for reduced motion get the content with no animation, and the loops start paused.
Before Publishing
Set SITE.url, replace the demo images and the sample privacy policy and terms, connect the forms, then deploy the dist/ folder to any static host. Delete the pages you do not need, this one included.
( Collect Your Ticket )