데이터 정리 및 프로젝트 설명 보완

Alchemist·2025년 8월 5일

✅ 목표
각 포트폴리오 섹션에 들어갈 콘텐츠(데이터)를 정리하고, 사용자에게 의미 있는 프로젝트 설명을 보완하는 것이 핵심입니다.


📁 작업 내용 요약

  1. 데이터 파일 분리
    -/src/data/ 디렉토리를 생성하여 JSON 형태로 데이터들을 정리했습니다.
export const projects = [
  {
    title: "포트폴리오 사이트",
    description: "Next.js와 Tailwind CSS로 제작한 개인 포트폴리오 사이트입니다.",
    tags: ["Next.js", "TypeScript", "TailwindCSS"],
    github: "https://github.com/...",
    demo: "https://your-portfolio.vercel.app",
    image: "/images/portfolio.png",
  },
];
  1. 프로젝트 설명 보완
  • 단순히 어떤 기술을 사용했는지 나열하는 것이 아니라, 다음 요소들을 중심으로 작성했습니다
항목설명
✅ 어떤 문제를 해결했는가예: 기존 블로그 구조의 한계를 극복하기 위해 직접 만든 웹사이트
✅ 어떤 기술을 사용했는가예: Next.js, SSR, CodeMirror 등
✅ 어떤 기능을 구현했는가예: 다크모드, 반응형 UI, 에디터, 프로젝트 필터링
✅ 무엇을 배웠는가예: CSR/SSR 차이, Tailwind 반응형, 폴더 구조 관리 등
  1. 이미지 및 미리보기 추가
  • 각 프로젝트에 썸네일 이미지 추가 (public/images 폴더 활용)
  • GitHub 링크와 배포 주소도 명확히 연결
<ProjectCard
  title="문제풀이 플랫폼"
  image="/images/code-platform.png"
  description="정보처리기사 실기 대비용 문제풀이 사이트"
  tags={["React", "CodeMirror", "TypeScript"]}
  github="https://github.com/..."
  demo="https://your-project.vercel.app"
/>
  1. 기술 스택 데이터 보완
  • skills.ts에 본인이 실제 사용 가능한 기술들을 세분화해서 작성
  • 프론트엔드, 백엔드, 협업/기타 도구로 분류 가능
export const skills = [
  "HTML", "CSS", "JavaScript", "TypeScript",
  "React", "Next.js", "TailwindCSS",
  "Git", "GitHub"
];

📝 마무리하며

단순히 데이터를 입력하는 단계를 넘어서, 사용자에게 포트폴리오의 가치를 전달하는 작업을 진행했습니다.
단 한 줄의 설명이더라도, 보는 사람이 "이 사람은 어떤 개발자인가?"를 이해할 수 있도록 고민하며 작성했습니다.

profile
html_programming_language

0개의 댓글