Portfolio Site Development

Portfolio Site Development

A fully static Next.js application deployed on Cloudflare Pages via GitHub Actions. It uses the App Router with static export (output: 'export'), pre-rendering the entire site as HTML at build time with zero server runtime. The architecture separates Server Components and Client Components by role. List pages (blog, works, activities) are Server Components that generate SEO-optimized static HTML through generateStaticParams. Animation-heavy UI — the liquid background, steam cursor, and opening animation — is handled by Client Components with Framer Motion. Multilingual support is implemented via URL prefixes (/en, /ja) rather than a library. Each page generates both language variants at build time, and a postbuild script corrects the html lang attribute for Japanese pages. SEO metadata including hreflang alternates, OGP tags, and JSON-LD structured data (Person, BreadcrumbList) is generated per page. During the prebuild step, a Node.js script fetches the latest articles from Medium (RSS) and Zenn (API). These are normalized into a shared blogPosts.json and imported as static data, keeping blog content current without any runtime API calls. The visual design is built on a custom coffee-themed Tailwind configuration. Six brand colors (cream, latte, beige, brown, dark, espresso) and gradient utilities form the foundation. The opening animation, scroll-linked liquid wave background, and mouse-tracking steam cursor create a cohesive, immersive experience.

View Project

Technologies

Next.js 14 (App Router)TypeScriptReact 18Tailwind CSSFramer MotionLucide ReactCloudflare PagesGitHub Actions

Key Features

  • •Fully static export (SSG) — no server required, deployed on Cloudflare Pages
  • •Server Components for SEO-critical pages + Client Components for interactive elements
  • •URL-based multilingual support (EN/JA) with hreflang, OGP, and JSON-LD structured data
  • •Automatic blog aggregation from Medium & Zenn APIs during prebuild
  • •Postbuild script to fix html lang attribute for Japanese pages
  • •Coffee-themed design system with custom Tailwind color palette and gradients
  • •Scroll-linked liquid background animation and interactive steam cursor effect
  • •Responsive split-screen layout (fixed sidebar on desktop, vertical scroll on mobile)