Customize Branding, SEO, and the About Page

Edit site.ts, me.ts, static images, and per-post SEO fields. Learn how metadata flows into Open Graph, Twitter cards, and the /me portfolio layout.

Central site configuration

src/config/site.ts holds your blog name, description, author email, Twitter handle, and social URLs. These values feed SEO defaults and the demo banner when NEXT_PUBLIC_DEMO_MODE is enabled.

typescript

export const siteConfig = {
  name: 'My Engineering Blog',
  description: 'Notes on platform engineering and developer tools.',
  author: { name: 'Alex Chen', email: 'alex@example.com' },
}

About page (/me)

src/config/me.ts contains bio text, roles, skills, education, and project section titles. The page layout is static React; optional Notion project data merges in when NOTION_PROJECT_DATABASE_ID is set.

Static images

public/static/images/og.png — 1200×630 Open Graph default
public/static/images/portrait.png — author avatar on /me and widgets

Regenerate placeholder assets with python3 scripts/generate-template-images.py or replace with your own brand kit.

Per-post SEO in Notion

SEO Title and SEO Description columns override the post title and summary in generateMetadata for each /posts/[slug] route. Leave them blank to fall back to the main title and summary fields.

✏️

Keep titles under 60 characters and descriptions under 160 for clean SERP snippets.

Dark mode and typography

Theme toggling uses next-themes with class-based dark mode. Tailwind v4 tokens live in src/styles/globals.css. Adjust accent orange (#ff9500) to match your brand.