Building a Portfolio Website

A walkthrough of building a personal portfolio website using Next.js and Tailwind CSS.

Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS
• Content: Markdown + gray-matter
• Deployment: Vercel

Key Features

1. Bilingual support (Korean/English)
2. Markdown-based content management
3. Syntax highlighting for code blocks
4. Responsive design

1// Example: sorting posts by date
2export function getSortedPosts(locale: Locale): Post[] {
3  const slugs = getPostSlugs();
4  const posts: Post[] = [];
5  for (const slug of slugs) {
6    const post = getPostBySlug(slug, locale);
7    if (post) posts.push(post);
8  }
9  return posts.sort((a, b) =>
10    b.frontmatter.date > a.frontmatter.date ? 1 : -1
11  );
12}

Applied a dark theme with glow effects to achieve a modern aesthetic.