8-BitQuest

8-BitQuest is a retro 8-bit, pixel-art developer-portfolio theme for Astro 7 that ships as a complete working site — Home, About, Blog, Projects, and a server-rendered Contact page — with a CSS-first token architecture and light and dark themes built in.

What is 8-BitQuest?

8-BitQuest is an Astro theme that turns typed content collections and a small set of config files into a static developer portfolio. It runs on Astro 7, Tailwind CSS v4, and TypeScript in strict mode, and its only server-rendered route is /contact/, which posts through a Resend-backed Astro action. The theme includes 20 pages, six sample blog posts, six sample projects, and a dev-only /examples/ui catalog, all sourced from the original Figma design.

Key Features

• Tech stack — Built with Astro 7, Tailwind CSS v4, and TypeScript strict; the runtime dependency count is ten, and the motion, icon, and SEO layers add none of their own.
• 20 pages and routes — Includes Home, About, Blog listing and per-post pages, Projects listing and case-study pages, a server-rendered Contact page, Privacy/Terms pages, a 404 page, and a noindex /examples/ui catalog for browsing primitives in dev.
• 39 UI primitives — A component library under src/components/ui/, each with a tailwind-variants recipe, including button, dialog, dropdown, mega-menu, combobox, tabs, table, pixel-panel, and theme-toggle, plus 7 shared internal entries.
• Two icon systems — 18 pixel-art glyphs behind a typed PixelIcon component for the theme's own UI, and 553 inlined 24×24 line icons behind an Icon component for your own pages; both are build-time only and inline into HTML.
• 87 motion utilities — A dependency-free port of tailwind-animations with scroll-driven extensions and a global prefers-reduced-motion guard.
• Owned SEO layer — Every meta and Open Graph tag is emitted natively by BaseHead, with JSON-LD for Organization, WebSite, BlogPosting, and BreadcrumbList built by typed helpers, plus dynamic robots.txt, llms.txt, rss.xml, and sitemap-index.xml. No SEO package is installed.
• Zod-validated content collections — Blog, projects, and authors live in src/data with schemas in src/content.config.ts, so invalid frontmatter fails the build and names the offending entry.
• Typed site config — Site-wide facts are stored in typed files: siteData.json.ts, socialData.json.ts, siteSettings.json.ts, legalData.json.ts, and portfolioData.json.ts, so rebranding is a single edit to one typed file.

Who is it for?

8-BitQuest is aimed at developers, designers, and small studios that want a pixel-art portfolio with a blog and case-study projects. A frontend developer can clone the repo and have a running site with pnpm dev and no configuration; an indie game studio can replace the sample projects with structured case studies; and a solo developer who wants a no-CMS site can use the built-in MDX blog and the contact form that works with JavaScript disabled.

What can you do with 8-BitQuest?

• Developers building a personal brand: replace src/config and the sample content to publish a portfolio with a blog, projects, social links, and a server-rendered contact form in one deploy.
• Indie game studios: publish six case-study project pages with structured frontmatter for tech, specs, features, challenge, and solution, using the pixel-panel look for a retro brand.
• Theme customizers: browse all 39 UI primitives at /examples/ui in dev, then delete the catalog to trim the shared CSS by roughly a quarter (from 84,211 B to 64,246 B) and drop 75 unused keyframes.
• Blog writers: write posts in MDX with frontmatter-validated authors, dates, categories, tags, hero images, and optional updatedDate and draft fields.

How does 8-BitQuest work?

Run pnpm install, then pnpm dev to serve localhost:4321; the project runs with no configuration and no API keys, and the contact form accepts a submission then reports a send failure until Resend keys are added. Site-wide facts are edited in src/config, sample content is replaced in src/data, and a production deploy runs astro build plus wrangler deploy to Cloudflare Workers. The before-you-deploy checklist covers setting SITE_URL, adding RESEND_API_KEY and CONTACT_TO_EMAIL, replacing public/og.jpg, filling sameAs social URLs, and removing the dev UI catalog.

FAQ

Does the contact form work without JavaScript?

Yes. The /contact/ page uses a native form method POST bound to an Astro action, so it works with JavaScript disabled. The server re-validates with contactSchema, runs a honeypot and a submit-time spam gate, and sends mail through a plain fetch to the Resend API with a 10-second timeout.

Does 8-BitQuest need configuration or API keys to start?

No. The development server runs with no configuration and no keys; only the contact form needs keys, specifically RESEND_API_KEY and CONTACT_TO_EMAIL, with an optional CONTACT_FROM_EMAIL. Missing keys are read at request time rather than at build time, so the build never breaks.

Where is 8-BitQuest deployed?

The default setup deploys to Cloudflare Workers: the build emits static pages plus one Worker that renders the on-demand /contact/ route. The adapter in astro.config.mjs can be swapped to @astrojs/node, @astrojs/netlify, or @astrojs/vercel with a two-line change.

Can the site be fully static?

Yes. Remove the contact form or set its prerender flag to true and drop the @astrojs/cloudflare adapter, and any static host can serve the dist/ output. Doing this also removes the duplicate stylesheet that the mixed build emits for the on-demand /contact/ route.