Prototype website for our indie game studio — built in our spare time.
- Vite + React + TypeScript
- Tailwind CSS v3 (custom retro pixel theme)
npm install
npm run dev # http://localhost:5173| Command | What it does |
|---|---|
npm run dev |
Start the dev server |
npm run build |
Type-check + production build to dist/ |
npm run preview |
Preview the production build locally |
Two real HTML entry points (no client-side router), both listed in
vite.config.ts:
| URL | Entry | Source |
|---|---|---|
/ |
index.html |
src/ — the studio page |
/whiskers-in-the-sand/ |
whiskers-in-the-sand/index.html |
src/game/ — the game page |
Each page ships its own <title> and social tags, and GitHub Pages serves the
subpage as a plain static file — no 404.html redirect trick needed.
- Studio copy + the homepage game showcase:
src/content.ts(sections insrc/components/). - Whiskers In The Sand copy — pitch, features, items, cats, screenshots,
trailer, Steam links:
src/game/content.ts(sections insrc/game/components/).
Game art lives in public/ (art/, features/, items/, portraits/,
screens/). Reference it through the asset() helper so paths stay correct
under the GitHub Pages base path.
The footer form posts straight to Web3Forms — no backend, which is why it works on GitHub Pages. To switch it on:
- Request a free access key at web3forms.com using the address that should receive the mail.
- Paste it into
contact.accessKeyinsrc/content.ts.
Until a key is set the form refuses to send and shows a note in dev.
The access key is not a secret. It's a public, write-only form ID: it can
only submit this form, and can't read past messages or change settings. It
belongs in the page source and is fine to commit — the worst case is spam, and
rotating it is a one-line change. A hidden botcheck honeypot field filters the
crawlers; add Turnstile or hCaptcha if real spam
ever shows up. Never put a mail-provider API key or a Discord webhook here —
those are credentials and would be abusable by anyone viewing source.
Messages are emailed, never stored, so the site keeps no personal data — but Web3Forms processes it, so name them in the privacy policy.
Two source colors in src/theme.ts (accent + base, both
taken from the logo) derive the studio palette. Tweak them live via the 🎨 Theme
Lab panel in dev, then Export and paste the result into src/index.css.
The game page keeps its own ancient-Egypt palette (tomb, sand, dune,
gold, papyrus…) — it's switched on by the theme-desert class on <body>
in whiskers-in-the-sand/index.html, which re-points the shared --gold and
--muted vars and restyles .pixel-card. Both palettes live in
tailwind.config.js.