포트폴리오 웹사이트 개발기

Next.js와 Tailwind CSS를 활용하여 개인 포트폴리오 웹사이트를 구축한 과정을 정리합니다.

기술 스택

• 프레임워크: Next.js 15 (App Router)
• 스타일링: Tailwind CSS
• 콘텐츠: Markdown + gray-matter
• 배포: Vercel

주요 기능

1. 다국어 지원 (한국어/영어)
2. 마크다운 기반 글 관리
3. 코드 구문 강조
4. 반응형 디자인

1// 예시: 포스트 정렬 함수
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}

다크 테마와 글로우 이펙트를 적용하여 모던한 느낌을 살렸습니다.