example-portfolio

example-portfolio is an Astro-based portfolio and blog template with React-powered interactive components, styled entirely with Tailwind CSS v4 and configured through a single JSON file.

What is example-portfolio?

example-portfolio is a static-site portfolio and blog template built on Astro, with React handling interactive elements such as the archive list and search overlay. It takes content from a JSON profile file (public/0user.json) and Markdown posts in src/content/archives/, and outputs a static personal site with home, archives, tags, resume, and 404 pages. The repository has 9 stars and is MIT-licensed.

Key Features

• Astro static generation — Astro handles static pages and content collections; posts live as plain Markdown files in src/content/archives/ with frontmatter for title, description, date, tags, and a draft flag.
• React interactivity — React is used for the interactive parts, specifically the archive list and the search overlay.
• Tailwind CSS v4 styling — all styling is done with Tailwind CSS v4; the color scheme is defined in src/styles/global.css as light (:root) and dark blocks using oklch(...) values with inline comments.
• Single-file site config — public/0user.json holds the name, role, homepage paragraphs, site metadata, contact links (email, GitHub, X, Discord), and the entire resume section.
• Expressive Code blocks — highlighted code blocks support file tabs and terminal windows, plus grouped tabs.
• KaTeX math — write LaTeX math directly in Markdown posts.
• Markdown callouts — support for NOTE, TIP, SUCCESS, IMPORTANT, WARNING, and CAUTION callout boxes.
• JetBrains Mono typography — the whole site uses JetBrains Mono, loaded in src/layouts/Base.astro.

Who is it for?

• Developers building a personal site: clone the repo, edit 0user.json, and publish a portfolio with resume and blog without writing layout code.
• Technical writers who blog in Markdown: draft posts by copying the included draft files, add tags and frontmatter, and flip draft off to publish.
• Designers who want to restyle quickly: tweak the oklch color tokens in global.css to reskin the site.

How does example-portfolio work?

Clone the repo, run pnpm install, then pnpm dev and open http://localhost:4321 (add --host to view from another device). Content goes in two places: public/0user.json for personal info and resume, and src/content/archives/ for Markdown posts. Copy 0-draft-1.md or 0-draft-2.md to start a post, then remove the draft flag to publish.

FAQ

What do I need to run example-portfolio?

Node.js v18 or newer and the pnpm package manager. The setup commands are listed in the README as git clone, pnpm install, and pnpm dev.

How do I publish a blog post?

Create a Markdown file in src/content/archives/ with frontmatter containing title, description, date, and tags. Posts are hidden while draft: true is set, so remove or set that field to false to publish.

Which pages does the template include?

The src/pages/ directory contains home, archives, tags, resume, and 404 pages. Site info, contacts, and resume content all come from public/0user.json.