Github Repos를 포트폴리오 웹사이트로 변환

프로젝트 소개

매우 사용자 정의 가능한 웹 앱으로 모든 프로젝트를 멋지게 표현하세요! ✨
Projects는 GitHub API를 사용하여 모든 GitHub 프로젝트를 검색 가능한 그리드에 나열합니다.
또한 devicons 를 사용하여 예쁜 프로그래밍 아이콘을 표시합니다.

영감

내 모든 프로젝트를 표시하는 방법이 필요했고 내 포트폴리오의 프로젝트 섹션을 영감으로 사용했습니다.

프로젝트 받기

프로젝트를 가져오려면 다음 단계를 따르세요.

git clone https://github.com/arupmandal/arupmandalV2
cd projects

나만의 프로젝트 설정

자신의 리포지토리를 표시하도록 프로젝트를 쉽게 설정할 수 있습니다.

저장소 포크

복제

script.js를 열고 username 변수를 GitHub 사용자 이름으로 업데이트합니다.

index.html를 열고 title 태그를 업데이트하여 사용자 이름으로 만듭니다.

파비콘도 업데이트하고 싶을 수도 있습니다. link의 index.html 태그를 업데이트하세요.

변경 사항 푸시

GitHub의 저장소 설정으로 이동하여 GitHub 페이지를 활성화합니다.
사이트는 https://<your-username>.github.io/projects

에 게시되어야 합니다.

다음은 프로필입니다.

저장소 수

리포지토리 수는 maxPages 변수로 제어되며 GitHub API는 페이지당 최대 100개의 리포지토리를 지원합니다.
저장소가 100개 미만인 경우 maxPages를 1로 설정하고 300개인 경우 3으로 설정합니다.

가져오기 쿼리를 편집하여 페이지당 저장소 수를 줄일 수도 있습니다.

페이지 매김이 없으며 모든 리포지토리가 동일한 페이지에 표시됩니다.

인증된 요청

로컬에서 작업 중이고 API가 데이터를 통해 전송하지 않는 것을 확인했다면 GitHub API 요청에 대한 속도 제한 때문일 수 있습니다.

한 시간 동안 기다리거나 GitHub에서 개인용 액세스 토큰을 설정하고 script.js의 가져오기 요청에 전달할 수 있습니다.

프로젝트 보기

즐겨 사용하는 브라우저에서 index.html를 열거나 arupmandal.github.io/arupmandalV2을 방문하십시오.

건축 방법

프로젝트는 HTML CSS & JavaScript를 사용하여 구축되었습니다.
Neovim과 Python http 서버를 기반으로 구축되었습니다.
데이터에는 GitHub API를 사용하고 아이콘 프로그래밍에는 Devicons를 사용합니다.

내가 배운 것

가져오기 API의 몇 가지 단점, 특히 maxPages 의 구현에 대해 배웠습니다.
Flex, box-shadow 및 기타 CSS 트릭을 재검토했습니다.

무엇 향후 계획

필요한 경우 장치 아이콘에 더 많은 언어를 추가하십시오.

이것이 유용하다고 생각되면 ⭐ 버튼을 누르십시오.