{"id":27103191,"url":"https://github.com/qkrwoghd04/custom-website","last_synced_at":"2026-02-06T17:31:01.946Z","repository":{"id":256931543,"uuid":"855592986","full_name":"qkrwoghd04/custom-website","owner":"qkrwoghd04","description":"Next.js 와 Notion API를 통해 개인 포트폴리오 구축 및 Vercel을 통한 배포","archived":false,"fork":false,"pushed_at":"2025-03-01T12:44:08.000Z","size":10812,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-06T12:06:27.723Z","etag":null,"topics":["nextjs","vercel"],"latest_commit_sha":null,"homepage":"https://jaehong-park.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qkrwoghd04.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-11T06:05:24.000Z","updated_at":"2025-02-28T06:33:33.000Z","dependencies_parsed_at":"2025-04-06T16:50:45.541Z","dependency_job_id":"797b3b44-c057-4a6a-ae96-4bae82fb6843","html_url":"https://github.com/qkrwoghd04/custom-website","commit_stats":null,"previous_names":["qkrwoghd04/next-portfolio","qkrwoghd04/custom-website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/qkrwoghd04/custom-website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qkrwoghd04%2Fcustom-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qkrwoghd04%2Fcustom-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qkrwoghd04%2Fcustom-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qkrwoghd04%2Fcustom-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qkrwoghd04","download_url":"https://codeload.github.com/qkrwoghd04/custom-website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qkrwoghd04%2Fcustom-website/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29170054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T16:33:35.550Z","status":"ssl_error","status_checked_at":"2026-02-06T16:33:30.716Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","vercel"],"created_at":"2025-04-06T16:49:14.742Z","updated_at":"2026-02-06T17:31:01.924Z","avatar_url":"https://github.com/qkrwoghd04.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js와 Notion API를 활용한 동적 포트폴리오 웹사이트\n\n## 📅 프로젝트 기간\n2024-09-07 ~\n\n## 🛠 기술 스택\n![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge\u0026logo=next.js\u0026logoColor=white)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)\n![Notion](https://img.shields.io/badge/Notion-000000?style=for-the-badge\u0026logo=notion\u0026logoColor=white)\n\n## 🎯 프로젝트 목적\nReact 기반의 Next.js 프레임워크를 사용하여 현대적이고 반응형인 개인 포트폴리오 웹사이트를 구축하고, github Action을 통해 CICD Pipeline을 통해 Vercel에 배포 자동화를 실현합니다.\n\n---\n\n## 🚀 환경 구축\n![portfolio](https://github.com/user-attachments/assets/59feb91a-39c2-4f02-a9be-b6b1b843dafb)\n\n\n### 1. 유튜브 포트폴리오 구축 강의 참고\n- [개발하는 정대리 YouTube 강의](https://www.youtube.com/watch?v=KvoFvmu5eRo\u0026t=643s)\n\n### 2. 프로젝트 설정\n- Notion에서 갤러리 형식으로 포트폴리오 데이터베이스 구축\n- VSCode에서 새로운 Next.js 프로젝트 생성:\n  ```bash\n  npx create-next-app@latest\n  ```\n- [Notion API](https://developers.notion.com/) 개발자 페이지에서 새로운 통합 생성 및 Next.js와 연동\n\n### 3. 주요 설정 변경사항\n- **라우터**: `page/` 대신 `app/` 라우터 사용 (기능 확장성 고려)\n- **언어**: JavaScript 대신 TypeScript 사용 (유지보수 및 확장성 강화)\n\n---\n\n## 💡 프로젝트 기능\n\n### 1. 다크 모드\n- 사용자 경험 향상 및 배터리 절약을 위한 다크 모드 구현\n- Header에 다크 모드 토글 버튼 추가\n\n```typescript\n// header.tsx\nimport DarkModeToggleButton from \"../ui/dark-mode-toggle-button\";\n\nexport default function Header() {\n  return (\n    \u003cheader\u003e\n      {/* ... */}\n      \u003cdiv\u003e\n        \u003cDarkModeToggleButton /\u003e\n      \u003c/div\u003e\n    \u003c/header\u003e\n  );\n}\n```\n\n![다크 모드 토글](https://github.com/user-attachments/assets/c682d89b-364b-43ce-b6c1-70f0d9aa2208)\n\n### 2. 스티키 헤더 (Sticky Header)\n- 스크롤 시 헤더가 화면 상단에 고정되어 따라오도록 구현\n- 사용자 경험 향상 및 디자인 강화\n\n```typescript\n// header.tsx\nimport { useState, useEffect } from \"react\";\n\nexport default function Header() {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() =\u003e {\n    const handleScroll = () =\u003e {\n      setIsSticky(window.scrollY \u003e 0);\n    };\n\n    window.addEventListener('scroll', handleScroll);\n    return () =\u003e window.removeEventListener('scroll', handleScroll);\n  }, []);\n\n  return (\n    \u003cheader className={`\n      ${isSticky ? 'fixed top-0 left-0 right-0 shadow-md bg-white dark:bg-gray-800' : 'absolute top-0 left-0 right-0 bg-transparent'}\n      transition-all duration-300 ease-in-out z-50\n    `}\u003e\n      {/* ... */}\n    \u003c/header\u003e\n  );\n}\n```\n\n![스티키 헤더](https://github.com/user-attachments/assets/baf51356-8bf0-43aa-a676-212c833a4b2c)\n\n### 3. 스무스 스크롤 내비게이션\n- 헤더의 네비게이션 링크 클릭 시 해당 섹션으로 부드럽게 스크롤\n- 시각적 강화 및 직관적인 탐색 경험 제공\n\n```typescript\n// header.tsx\nexport default function Header() {\n  const scrollToSection = (sectionId: string) =\u003e (e: React.MouseEvent\u003cHTMLAnchorElement\u003e) =\u003e {\n    e.preventDefault();\n    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' });\n  };\n\n  return (\n    \u003cheader\u003e\n      \u003cnav\u003e\n        \u003ca href=\"#aboutMe\" onClick={scrollToSection('aboutMe')}\u003eABOUT ME\u003c/a\u003e\n        \u003ca href=\"#techStack\" onClick={scrollToSection('techStack')}\u003eTECH STACK\u003c/a\u003e\n        \u003ca href=\"#projects\" onClick={scrollToSection('projects')}\u003eMY PROJECTS\u003c/a\u003e\n        \u003ca href=\"#contacts\" onClick={scrollToSection('contacts')}\u003eCONTACTS\u003c/a\u003e\n      \u003c/nav\u003e\n    \u003c/header\u003e\n  );\n}\n```\n\n[스무스 스크롤 데모 영상](https://github.com/user-attachments/assets/ad791abd-d34b-4248-bf1f-475570729501)\n\n---\n\n## 📚 참고 자료\n- https://tailwindcss.com/docs/\n- https://gsap.com/docs/v3/Plugins/ScrollTrigger/\n- https://www.hostinger.com/tutorials/web-developer-portfolio#1_Charles_Bruyerre\n- https://nextjs.org/docs\n- https://react-icons.github.io/react-icons/icons/ai/\n- https://github.com/mattboldt/typed.js\n\n---\n\n## 🏁 시작하기\n\n개발 서버 실행:\n\n```bash\nnpm run dev\n# 또는\nyarn dev\n# 또는\npnpm dev\n# 또는\nbun dev\n```\n\n브라우저에서 [http://localhost:3000](http://localhost:3000)을 열어 결과를 확인하세요.\n\n`app/page.tsx` 파일을 수정하여 페이지 편집을 시작할 수 있습니다. 파일을 수정하면 페이지가 자동으로 업데이트됩니다.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqkrwoghd04%2Fcustom-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqkrwoghd04%2Fcustom-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqkrwoghd04%2Fcustom-website/lists"}