
Portfolio Landing Site
This is my personal portfolio landing site. It brings together a set of Works (portfolio, case
studies) and Notes (brief showcases of what I’ve learned, small experimental projects) in one
place. Built with Next.js (App Router) and Tailwind CSS, the site fetches content from
microCMS and is deployed to Vercel with GitHub Actions.
The goal is to create a central place to showcase my portfolio projects and learning progress,
while also building experience with modern development practices such as creating a site with
Next.js, setting up testing, automating deployments with GitHub Actions, and integrating a
headless CMS (microCMS) for scalable content management.
What I Learned
- Created the site’s initial design in Figma. While not a deep dive into UI/UX theory, it was valuable to design and prototype on my own.
- Learned the importance of deciding the Node.js version before starting a project, while setting up GitHub Actions workflows.
- Configured deployment to Vercel via GitHub Actions, using the Vercel CLI instead of linking the repository directly.
- Set up ESLint for a Next.js project (different from my previous React + Vite setup).
- Integrated Google Fonts with Tailwind CSS in Next.js.
- Explored data fetching patterns in Next.js, including utility functions, API Routes, and Server Actions.
- Configured testing in a Next.js environment and learned considerations specific to Next.js (e.g., mocking Image and Link, differences between pages and components).
- Connected microCMS with Next.js for headless content management.
- Implemented URL-based state management with useRouter to persist list view state when navigating back from a detail page, avoiding the reset that happens with useState alone.
Tech Stack
Frontend |
Next.js
TypeScript
Tailwind CSS
CSS Modules
|
---|---|
Backend |
microCMS
|
Code Quality |
ESLint
Prettier
Husky
|
Testing |
Jest
Testing Library
|
Deployment |
Vercel
GitHub Actions
|
Features

microCMS Integration
Content is managed in HTML format on microCMS, making it easy to maintain and scale as articles grow. Styling for HTML elements is handled via global CSS classes defined in globals.css, and class names are applied directly in the HTML stored in microCMS.
Related Notes

Testing in Next.js: From Setup to Strategy

From Promises to Fetch: Building a Mental Model of Async JavaScript

How to Use Google Fonts with Tailwind CSS and Next.js

Data Fetching Patterns in Next.js — Understanding Utility Functions, API Routes, and Server Actions

Integrating Vercel with GitHub Actions for Flexible Deployments
