feat: 포트폴리오 홈페이지 및 포스트 데이터 구성

- 프론트엔드 개발자 포트폴리오 홈페이지 구성
- Core Values 및 기술 스택 소개 섹션 추가
- 자동 생성된 포스트 데이터 파일 추가
- GitHub 스타일 카테고리 색상 시스템 적용

Author: toothlessdev

.vitepress/data/posts.ts

@@ -0,0 +1,61 @@
+
+// 자동 생성된 파일 - 수정하지 마세요
+// yarn generate-posts 명령어로 업데이트하세요
+
+export interface Post {
+  url: string
+  frontmatter: {
+    title: string
+    createdAt: string
+    category: string
+    description: string
+  }
+}
+
+export const posts: Post[] = [
+  {
+    "url": "/pages/posts/Web/css-cascade-algorithm",
+    "frontmatter": {
+      "title": "CSS Cascade Algorithm 이란? (Feat. Cascade Layer)",
+      "createdAt": "2025-04-13T00:00:00.000Z",
+      "category": "WEB",
+      "description": "CSS Cascade Algorithm 은 브라우저에서 스타일을 적용하는 방법을 정의합니다. CSS Cascade Algorithm 을 이해하면 CSS 스타일 우선순위를 이해할 수 있습니다."
+    }
+  },
+  {
+    "url": "/pages/posts/React/hooks-basics",
+    "frontmatter": {
+      "title": "React Hooks 기초",
+      "createdAt": "2024-04-05T00:00:00.000Z",
+      "category": "React",
+      "description": "React Hooks를 사용한 함수형 컴포넌트 개발을 알아보겠습니다. useState, useEffect 등 기본 Hooks의 사용법과 패턴을 다룹니다."
+    }
+  },
+  {
+    "url": "/pages/posts/JavaScript/async-programming",
+    "frontmatter": {
+      "title": "JavaScript 비동기 프로그래밍",
+      "createdAt": "2024-03-20T00:00:00.000Z",
+      "category": "JavaScript",
+      "description": "JavaScript의 비동기 처리 방법들을 알아보겠습니다. Promise, async/await, fetch API 등을 활용한 비동기 프로그래밍 패턴을 다룹니다."
+    }
+  },
+  {
+    "url": "/pages/posts/JavaScript/es6-basics",
+    "frontmatter": {
+      "title": "ES6 기본 문법",
+      "createdAt": "2024-03-15T00:00:00.000Z",
+      "category": "JavaScript",
+      "description": "ES6에서 새로 추가된 기본 문법들을 알아보겠습니다. let, const, 화살표 함수, 템플릿 리터럴 등 모던 JavaScript의 핵심 기능들을 다룹니다."
+    }
+  },
+  {
+    "url": "/pages/posts/JavaScript/test-automation",
+    "frontmatter": {
+      "title": "자동화 테스트 포스트",
+      "createdAt": "2024-01-20",
+      "category": "JavaScript",
+      "description": "사이드바와 포스트 목록이 자동으로 업데이트되는지 테스트하는 포스트입니다."
+    }
+  }
+]

index.md

@@ -0,0 +1,40 @@
+---
+layout: home
+
+hero:
+    name: "Frontend Developer"
+    text: "김대건"
+    tagline: "사용자 중심의 웹 서비스를 만들어가는 개발자입니다"
+    actions:
+        - theme: brand
+          text: 블로그 보기
+          link: /pages/posts/
+        - theme: alt
+          text: GitHub
+          link: https://github.com/toothlessdev
+
+features:
+    - icon: 🎯
+      title: "사용자 중심 개발"
+      details: "사용자 경험을 최우선으로 생각하며, 직관적이고 접근성이 좋은 인터페이스를 구현합니다."
+
+    - icon: 🚀
+      title: "지속적인 성장"
+      details: "새로운 기술과 트렌드를 빠르게 학습하고 적용하여, 더 나은 개발자가 되기 위해 노력합니다."
+
+    - icon: 🤝
+      title: "소통과 협업"
+      details: "팀워크를 중시하며, 명확한 소통을 통해 함께 성장하는 개발 문화를 만들어갑니다."
+
+    - icon: 💡
+      title: "문제 해결 능력"
+      details: "복잡한 문제를 체계적으로 분석하고, 효율적인 솔루션을 찾아 구현하는 것을 즐깁니다."
+
+    - icon: 🛠️
+      title: "기술적 전문성"
+      details: "React, Vue.js, TypeScript 등 모던 프론트엔드 기술 스택에 대한 깊이 있는 이해를 바탕으로 개발합니다."
+
+    - icon: 📚
+      title: "지식 공유"
+      details: "학습한 내용과 경험을 블로그와 오픈소스 기여를 통해 커뮤니티와 함께 나누고 있습니다."
+---