Whisper

Whisper is a minimal Astro blog and portfolio theme that uses the Catppuccin color palette and ships with full example content for a fictional developer named Max Bytefield.

What is Whisper?

Whisper is a blog and portfolio theme built with the Astro static-site generator, distributed as a GitHub repository. It takes Markdown blog posts and configuration files as input and produces a fully static, responsive website with a home page, about page, "now" page, "uses" page, a projects showcase, a 404 page, and blog post pages. The theme is pre-configured with example content for a fictional developer named Max Bytefield, which you can replace entirely through the provided customization steps.

Key Features

• Catppuccin Color Palette — Whisper uses the Catppuccin Latte (light) and Mocha (dark) themes, with colors defined in src/styles/main.css and tested for WCAG AA contrast compliance.
• Dark Mode with System Preference Support — The theme switches smoothly between light and dark based on the visitor's operating system setting.
• Mobile-First Responsive Layout — The design adapts to phones, tablets, and desktops without extra configuration.
• SEO and Open Graph — Proper meta tags and Open Graph support are built in for better sharing on social networks.
• Blog with Reading Time and Table of Contents — Blog posts are stored as Markdown in src/content/blog/, and each post automatically gets a reading time estimate and a table of contents.
• Example Content Included — The repository ships with a complete developer portfolio for Max Bytefield, including a welcoming home page, a detailed about page, a "now" page for current projects, a "uses" page with tool descriptions, a projects showcase, and a quirky 404 error page.
• Config-Driven Site Settings — Site-wide metadata lives in src/config/site.ts, while per-page titles and descriptions are stored in src/config/page.ts.

Who is it for?

• Individual developers who want a personal blog and portfolio are the primary audience; you can replace the example content with your own about, now, uses, and projects pages.
• Writers who prefer minimal design get a clean, distraction-free reading interface with a built-in table of contents and reading time.
• Astro learners can use the straightforward project structure (assets, components, layouts, pages) to see how a complete Astro site is organized.

What can you do with Whisper?

• Launch a personal website — Use the included home, about, now, uses, and projects pages to present your identity and work, then deploy the static output from pnpm build.
• Publish a blog — Add Markdown files to src/content/blog/ and every post automatically gains reading time, a table of contents, and SEO meta tags.
• Customize the theme — Update the Catppuccin colors in src/styles/main.css, edit the site and page configuration files, and change the content of any page in src/pages/.

How does Whisper work?

Whisper is built on Astro and managed with pnpm. After installing dependencies with pnpm install, you can run pnpm dev to start a local development server at localhost:4321, pnpm build to compile the site into ./dist/, and pnpm preview to test the production build locally. All commands are run from the root of the project.