chibiham home page

About this homepage built with Next.js.

Overview

Developed and maintained as a personal website to showcase profile, portfolio, and blog, raising my presence as an engineer.

Architecture

• Domain registration with Cloudflare
• Chose Vercel since I wanted to run a Next.js app and had no plans to separate frontend and backend
  • Automatic branch-based deployments simply by connecting to GitHub
  • Rich operational features including global CDN, auto-scaling, monitoring, DDoS protection, and environment variable management. Supports both SSG and SSR with Next.js
  • Despite all these features, the free tier is generous — practically free to operate unless traffic is extremely high
    • Plenty of headroom

• Markdown-based content management
  • Markdown files placed under content/blog/ and content/portfolio/, managed with Git
  • Frontmatter parsed with gray-matter, rendered with next-mdx-remote
  • Previously used Notion as a CMS, but migrated to simple Markdown management (details below)
• Resend
  • Email delivery PaaS. Used for contact form email sending. Simple to use with a generous free tier

Tech Stack

• Next.js
  • Provides both static and interactive pages with SSG/SSR support, offering great user experience and cost performance
  • Enables component-based development with React while integrating frontend and backend
  • No complex backend processing needed, so the architecture is kept simple using SSR and Server Actions
• Tailwind CSS
  • Chosen for its SSG compatibility and as a utility-first approach that minimizes downsides in React component development

Design

Used Figma for initial design exploration. Since this is a personal project, fine-tuning was faster done directly in code, so not much time was spent on details.

• Grid-based full-page layout adjustment (~2h)
• Background, logo, and icon image creation (~2h)

• Eye-catch images created with nijijourney (Midjourney)
• The chibiham icon was created through i2i with nijijourney from a hand-drawn illustration, then fine-tuned in Photoshop

Features

Responsive Design with CSS Grid

Responsive design implemented using Tailwind CSS Grid.

Dark Mode Support

Dark mode themes configured in Tailwind CSS, with CSS adjustments in each component for dark mode. Dark mode is applied based on browser settings.

Multilingual Support

Internationalization implemented with i18next and next-i18n-router. See the article for details.

Blog and portfolio article content itself supports multiple languages by preparing separate Markdown files for each locale.

SEO Optimization

Search engine optimization implemented from multiple angles.

• JSON-LD Structured Data: ArticleSchema embedded on each article page for Google Rich Results
• Open Graph / Twitter Cards: Title, description, and cover images dynamically generated per article for optimized SNS sharing
• Dynamic Sitemap: XML sitemap automatically generated in sitemap.ts including all blog and portfolio articles
• Canonical URL / hreflang: Canonical URLs and locale-specific alternate URLs set for each page to support multilingual SEO

Contact Form

Form submission implemented using Next.js Server Actions.

• Zod validation with zod-i18n-map for localized error messages displayed in Japanese or English based on browser language settings
• Rich-text email sending via Resend + react-email. Both the sender and administrator receive emails
• Email templates built with React components, enabling multilingual support with nearly the same implementation as the frontend

Custom MDX Components

Using next-mdx-remote for Markdown rendering with the following custom components:

• CodeBlock: Syntax highlighting with rehype-prism-plus
• MermaidBlock: Client-side rendering of Mermaid diagrams. Automatically re-renders when dark mode is toggled
• Callout: Information and warning callout boxes
• Tables, blockquotes, lists, etc.: Dark mode-compatible styling applied to all Markdown elements

Component Architecture with Atomic Design

Components organized in three layers — Atoms / Molecules / Organisms — ensuring reusability and maintainability.

Content Management: Migration from Notion CMS to Markdown

Initially, Notion was used as a CMS. Components were built one by one to correspond to each Block retrieved via the Notion API. By leveraging Claude 3.7 Sonnet to generate and adjust components matching the API types, nearly all blocks were implemented in about 3 hours.

However, as operations continued, the need to keep using Notion as a CMS diminished, and the system was migrated to simple Markdown file management.

Background for the migration:

• The biggest factor was migrating personal knowledge management from Notion to Obsidian. I wanted to keep article writing and management entirely within the Obsidian vault
• Markdown written in Obsidian can be used directly as homepage content, simplifying the workflow from writing to deployment
• Dependency on Notion API required external communication during builds and cache management
• Maintenance cost for per-block component support

Current setup:

• Markdown files placed at content/blog/{locale}/{slug}.md
• Metadata managed via YAML frontmatter (title, description, cover, date, tags, etc.)
• Frontmatter parsed with gray-matter, MDX rendered with next-mdx-remote
• Supports Mermaid diagrams, KaTeX math formulas, and code block syntax highlighting
• Multilingual content managed via locale subdirectories (ja/, en/)
• Static generation at build time using Next.js generateStaticParams()