Overview

This is the open-source personal blog, portfolio and video site of Zacchary Puckeridge, a Brisbane-based web developer, live at zacchary.me. It is now built with Astro and Vite, using React islands, Directus as the CMS, Tailwind CSS and shadcn/ui for the UI, Framer Motion, and Mux for video, and it deploys to Cloudflare Workers. (Earlier versions used Next.js, PagesCMS and Vercel.)

As a template, it offers a full personal-site structure: a home page with a timeline preview, projects and Discord status, plus pages for posts and notes, videos, projects, about, uses, a CV, colophon and imprint. Content types in Directus cover posts, notes, videos, projects, books, movies, credits and uses.

Features

MDX articles: Side notes, inline definitions, footnotes, Tweet embeds, a table of contents, reading time and copy-link sharing.
Video hosting: Mux player with optional password protection.
Live activity feed: An anonymous, city-level pageview stream retained for 24 hours, without storing IPs.
Presence and status: Discord status via Lanyard, plus 365-day heatmaps of work, home and Discord online time sampled by a Cloudflare cron job.
GitHub contributions: A contributions graph on the homepage.
Newsletter and analytics: Loops signups and PostHog analytics.
Extras: RSS feed, Website Carbon badge and light and dark theme toggle.

Tech stack

Astro, Vite, React islands, TypeScript
Tailwind CSS, shadcn/ui, Framer Motion
Directus, Mux, Lanyard, Loops, PostHog
Cloudflare Workers

Getting started

git clone https://github.com/zpuckeridge/blog
cp .env.example .env.local
npm install
npm run dev