How to use this template

This template is a personal blog built with Next.js, MDX, and a clean typography-first style.

1. Project setup

Install dependencies:

bun install

Run local dev:

bun run dev

Build for production:

bun run build

2. Content workflow

All posts live in content/*.mdx.

Minimum frontmatter:

---
title: "Post Title"
date: "YYYY-MM-DD"
tags: ["tag-a", "tag-b"]
description: "Short summary"
---

Slug is derived from filename. For example:

• content/how-to-use-this-template.mdx -> /posts/how-to-use-this-template

3. Styling and typography

Global style system:

• app/globals.css

Typography configuration guide:

• planning/typography_config.md

If you want to tune heading scales and weights, change values under /* Typography Config */ in app/globals.css.

4. Homepage controls

Homepage action row includes:

• LinkedIn
• GitHub
• Terminal
• Filter
• Theme toggle

Filter expands tag pills below the action row and filters post list client-side.

5. Terminal mode

Route:

• /terminal

Command examples:

• help
• ls
• cat <slug>
• open <slug>
• clear
• exit

6. Newsletter

Subscription endpoint:

• POST /api/newsletter

Environment variables:

• RESEND_API_KEY
• RESEND_AUDIENCE_ID
• RESEND_FROM_EMAIL (optional, default is onboarding sender)
• SITE_URL (optional fallback used in welcome email)

Behavior:

• Subscribes contact to Resend audience.
• Sends welcome email after successful signup.

7. Deployment

Recommended: Vercel.

Before deploy:

1. Add required env vars in Vercel project settings.
2. Ensure your domain and sender identity are set correctly if you want production email sending.
3. Push to main to trigger deployment.

8. Common updates you will do

1. Add a new post in content/.
2. Tweak styles in app/globals.css.
3. Adjust homepage/action row in components/Profile.tsx.
4. Update newsletter logic in app/api/newsletter/route.ts.

This should be enough for day-to-day usage of the template.