Using this theme

Getting Started

Run npm install, then npm run dev to work on the site and npm run build to produce it in out/. Start in src/config/site.ts: the site’s name, URL, owner, contact details, social links, menu and footer columns are all set there. The docs/ folder has the longer version of everything on this page.

Three Personas

The theme presents its owner in one of three ways, each with its own home, about and contact page:

• Investor: /, /investor/about/ and /investor/contact/
• Founder: /founder/, /founder/about/ and /founder/contact/
• Serial Entrepreneur: /serial-entrepreneur/, /serial-entrepreneur/about/ and /serial-entrepreneur/contact/

The ventures, thesis, podcast and blog pages, the legal pages and the header and footer are shared by all three. The personas’ names, firm and city are PERSONAS in src/config/site.ts; the menu lists them as Home, About and Contact A, B and C (MENU). Keep the persona that fits you, put your own name in, then delete the other two’s folders in app and their entries in MENU. The Investor home is /; to make another persona the home page, move its page to app/page.tsx and update ROUTES.

Content Collections

Repeated content is read from collections defined in src/content.config.ts, never pasted into the pages. Ventures and blog posts are Markdown files in src/content/ventures and src/content/posts; everything else is a JSON file in src/content/data:

• Ventures and their categories, focus areas, milestones and experiences
• Blog posts and their categories
• FAQs, awards, events, testimonials and talks
• The podcast page’s topics, appearances and recorded talks (videos)

Add a file and its page appears: a venture at /ventures/its-name/, a post at /blog/its-name/, and a category page for every category that has an entry. Images are referenced from public/images by path, so replacing a file keeps the layout intact.

Forms

The newsletter signup in the footer and the three contact forms post to the endpoints in src/config/forms.ts, which are empty when the theme ships. Until you set one, a form checks its fields, sends nothing and says so; it shows its success message only after your endpoint answers. Any service that accepts a form post will do. The protected page (/401/) is a design only: it is not connected to a password check, and its form sends nothing.

Motion

Reveals, counters and scrubbed sections use GSAP with ScrollTrigger and SplitText, and Lenis smooths scrolling on devices with a mouse. Pages ask for an effect with a data-anim attribute; every effect, with its timing, is in EFFECTS in src/scripts/motion.ts. With reduced motion turned on in the visitor’s system settings, everything is shown at once, nothing moves and smooth scrolling is off. Strips that scroll on their own have a pause button. Videos play only when pressed, and a recorded talk on the podcast page loads YouTube’s player only when someone presses play (set its videoUrl in src/content/data/videos.json).

Colors, Type and Images

Colors, type sizes and spacing are design tokens in src/styles/theme.css; the style guide shows them in use. The two font families are served from public/fonts and declared in src/styles/fonts.css. Hand-written corrections belong in src/styles/additions.css.

Before Publishing

• Set the site’s address (SITE.url) and your own name, email and social links.
• Replace the demo content. Every person, company, award, event and figure in it is invented, and the photos and videos are placeholders (see Licenses).
• Replace the privacy policy and terms with your own, naming your form provider and host.
• Connect the forms, or remove the ones you will not use.
• Delete the persona pages you do not use, this page and the style guide.