A cozy, Animal Crossing-themed personal website built with Astro, TailwindCSS, and DaisyUI. Features a warm cream palette, NookPhone-style sidebar navigation, light/dark mode, and charming rounded aesthetics.
- Animal Crossing visual style — warm colors, rounded shapes, 3D press-down buttons
- Light (Day) and Dark (Night) themes with localStorage persistence
- NookPhone-inspired sidebar with icon navigation
- Theme-aware banner images (light/dark variants)
- Blog, Notes, Projects, CV, and Personal pages
- Markdown/MDX content with KaTeX math support
- GitHub Pages deployment workflow included
- Responsive — mobile drawer sidebar, desktop persistent sidebar
# Clone this repo (or use it as a template on GitHub)
git clone https://github.com/yunxinz/ac-site-template.git
cd ac-site-template
# Install dependencies
pnpm install
# Start dev server
pnpm devOpen http://localhost:4321 in your browser.
export const SITE_TITLE = "Your Name"; // Used in header, sidebar, page titles
export const AUTHOR_NAME = "Your Name"; // Used in footer copyright
export const AUTHOR_INITIAL = "YN"; // Used in page title prefixes
export const SITE_DESCRIPTION = "Your Name's personal website.";Update the href attributes for GitHub, LinkedIn, WhatsApp, and Instagram links.
Update the mailto: link in the Contact menu item.
Replace with your own photo. The sidebar displays this image.
The top and bottom of each page use theme-aware banners. Provide light and dark variants:
public/header_banner_light.png/public/header_banner_dark.png— top bannerpublic/banner_light.png/public/banner_dark.png— bottom banner
Sidebar navigation uses square icons from public/. Replace them with your own or keep the included set:
| Page | Icon file |
|---|---|
| Home | nookmiles.png |
| Projects | brush.png |
| CV | nookwallet.png |
| Blog | photos.png |
| Personal | nookcritters.png |
| Notes | drawing.png |
| Contact | messages.png |
Theme toggle uses leaf_light.png / leaf_dark.png.
All content lives in src/content/ as Markdown or MDX files.
---
title: "Your Post Title"
description: "A short description"
pubDate: "Apr 16 2026"
heroImage: "/your-image.webp"
tags: ["tag1", "tag2"]
---
Your content here...Same format as blog posts. Supports KaTeX math:
$$
\int_0^\infty \frac{1}{x^2+1} \, dx = \frac{\pi}{2}
$$And code blocks:
```python
print("hello, world")
```---
title: "Your Project"
description: "Project description"
pubDate: "Apr 16 2026"
heroImage: "/project-preview.webp"
badge: "tag"
github: "https://github.com/yourusername/repo"
liveUrl: "https://yourproject.com"
tags: [tag1, tag2]
---Edit these Astro files to customize page content:
| Page | File |
|---|---|
| Home | src/pages/index.astro |
| Projects | src/pages/projects.astro |
| CV/Resume | src/pages/cv.astro |
| Personal | src/pages/personal.astro |
| Blog | src/pages/blog/index.astro |
| Notes | src/pages/notes/index.astro |
The design uses CSS custom properties defined in src/styles/global.css. The two themes are:
| Token | Day (Light) | Night (Dark) |
|---|---|---|
| Background | #f7f3e7 |
#374063 |
| Text | #877358 |
#e2d6c8 |
| Primary | #2abaaa |
#2abaaa |
DaisyUI themes are defined in tailwind.config.cjs — edit the nord (light) and night (dark) theme objects.
- Latin text: Nunito Variable (rounded, friendly)
- CJK text: LXGW WenKai (霞鹜文楷)
Fonts are composed via CSS @font-face with unicode-range in src/styles/global.css.
A GitHub Actions workflow is included at .github/workflows/deploy.yml.
- Push your code to a
gh-pagesbranch - The workflow builds the site and deploys to GitHub Pages
- Set
BASE_URLin the workflow to match your repo name (e.g.,/your-repo/) - Update
siteinastro.config.mjsto your GitHub Pages URL
For a custom domain, add a CNAME file to public/ and update the site field.
- Astro — Static site framework
- TailwindCSS + DaisyUI — Styling
- Animal Crossing by Nintendo — Visual inspiration
- animal-crossing-ui — Design reference
- okpng nookphone icons - Icon assets
MIT