codefolio
1.0.0
라이브 데모 | 배포 | 소개 | 특징 | 기부금
코딩 포트폴리오를 선보일 수 있는 배포 준비 웹 앱입니다.
Codefolio는 프로그래머를 위한 Jamstack 포트폴리오 웹 애플리케이션입니다. Nuxt.js를 사용하여 구축되었으며 @nuxt/content 모듈을 활용하여 /content 디렉토리에 있는 사용자 데이터를 사용하고 프로덕션 준비가 된 정적 자산을 생성합니다.
전체 코드는 모듈과 재사용성을 염두에 두고 작성되었습니다.
이 앱의 주요 기능은 정적 배포를 지원한다는 것입니다. 코딩 포트폴리오에는 많은 변경이 필요하지 않으므로 일반 SPA 또는 전체 스택 앱보다 정적 사이트가 더 나은 선택입니다.
Codefolio의 사용자 인터페이스는 사용자 편의성을 염두에 두고 설계되었습니다. 완벽하게 반응하며 모바일 우선 접근 방식을 사용합니다.
이 디자인은 7-1 Sass 패턴을 기반으로 하며 레이아웃 및 유틸리티에 부분적으로 로드된 Bootstrap 5를 활용합니다.
자산/aprite/svg 디렉토리에는 개별 svg 아이콘 파일이 포함되어 있습니다. 이 아이콘을 사용하거나 이 디렉토리에 자신만의 svg 아이콘을 배치하여 <icon> vue 구성 요소의 아이콘 이름을 참조할 수 있습니다.
Codefolio는 사용자 지정 사용자 데이터를 지원합니다. 개인 세부 정보 외에도 사용자는 외부 링크 및 상단 탐색 모음의 재개 버튼 URL과 같은 다른 멋진 항목을 사용자 정의할 수도 있습니다.
정적 사이트 생성기는 원시 사용자 데이터(일반적으로 markdown 또는 JSON 형식)를 사용하여 프로덕션 준비 HTML을 생성하므로 Codefolio에 콘텐츠를 추가하는 동안 이 가이드를 참조로 필요합니다.
콘텐츠 폴더의 구조는 다음과 같습니다.
content
| navbar.json
| about.md
| social-icons.json
| user.json
|
└───projects
project1.json
project2.json
project3.json
/* so on... */
각 파일이나 폴더의 용도를 살펴보겠습니다.
이 파일은 상단 탐색바와 관련된 선택적 데이터에 사용됩니다.
| 재산 | 유형 | 설명 |
|---|---|---|
| 이력서Url | string | 탐색바 재개 버튼의 재개 파일 URL입니다. |
| 외부링크 | array | 상단 탐색 모음에 외부 링크를 생성하는 개체가 포함된 배열입니다. 각 외부 링크 개체가 제대로 작동하려면 text 및 url 문자열 속성이 있어야 합니다. |
이 마크다운 파일은 About 페이지에 사용됩니다.
이 파일은 About 페이지에서 소셜 아이콘을 생성하는 데 사용됩니다.
| 재산 | 유형 | 설명 |
|---|---|---|
| 아이콘 | array | 연락처 페이지에 소셜 아이콘을 생성하는 개체가 포함된 배열입니다. 각 개체에는 name 및 url 속성(문자열)이 있어야 합니다. name 속성에는 /assets/sprite/svg/ 디렉터리에 일치하는 svg 파일이 있어야 합니다. 대부분의 소셜 아이콘은 이미 사용 가능하지만 사용자 정의 SVG 아이콘을 자유롭게 추가할 수 있습니다. 개발 모드에서는 /_icons 경로를 방문하여 사용 가능한 모든 아이콘을 나열할 수 있습니다. |
이 파일은 홈 페이지에 필요한 사용자 세부 정보에 사용됩니다.
| 재산 | 유형 | 설명 |
|---|---|---|
| 이름 | string | 사용자 이름. |
| ~에 대한 | string | 사용자에 대해 조금. |
| 영상 | string | http 로 시작하는 유효한 이미지 URL 또는 assets/images 디렉토리에 있는 이미지의 이름(확장자 포함)입니다. 더 나은 결과를 얻으려면 이미지를 500x500 으로 자르세요. |
| 제목 | string | 사용자 위치 또는 역할. |
이 파일은 연락처 페이지를 생성하는 데 사용됩니다.
| 재산 | 유형 | 설명 |
|---|---|---|
| 양식액션 | string | 연락처 양식에 대한 사용자 정의 양식 작업입니다. formpree.io를 확인하세요. |
| 위치 | string | 사용자 위치 문자열. |
| 이메일 | string | 사용자 이메일 주소. |
| 핸드폰 | string | 사용자 전화번호. |
이 폴더에는 모든 프로젝트가 json 형식의 개별 파일로 포함되어 있습니다. 이 폴더의 각 파일은 서로 다른 프로젝트를 나타냅니다.
다음 표에는 프로젝트 폴더에 있는 각 파일의 형식이 포함되어 있습니다.
| 재산 | 유형 | 설명 |
|---|---|---|
| ID | integer | 주문에 대한 고유 식별자입니다. |
| 제목 | string | 프로젝트 이름. |
| 설명 | string | 프로젝트에 대한 세부정보입니다. |
| 영상 | string | http 로 시작하는 유효한 이미지 URL 또는 assets/images 디렉토리에 있는 이미지의 이름(확장자 포함)입니다. |
| 모래밭 | object | 프로젝트의 외부 링크를 포함하는 개체입니다. URL에 대한 선택적인 liveDemo , videoDemo 및 sourceCode 속성을 가질 수 있습니다. |
| 기술 | array | 프로젝트에 사용된 모든 기술(문자열)을 포함하는 배열입니다. |
참고: 더 많은 프로젝트를 추가하려면 새 파일을 생성하고 이름을 프로젝트 이름으로 지정하세요.
참조용으로 콘텐츠 폴더의 기존 더미 파일을 참조하세요.
Nuxt.js는 검색 엔진에 맞게 사이트를 최적화하는 효율적인 방법을 제공합니다. 자세한 내용은 Nuxt.js SEO 가이드를 참조하세요.
이 프로젝트는 @nuxtjs/sitemap을 사용하여 sitemap.xml 파일을 자동 생성합니다. 추가 정보가 필요하면 해당 구성 가이드를 참조하세요.
필요에 따라 콘텐츠를 사용자 정의한 후 앱을 프로덕션에 배포해야 합니다.
빌드 파일을 생성하는 방법을 살펴보겠습니다.
git을 사용하여 로컬 컴퓨터에 저장소를 복제하여 시작하세요(또는 수동으로 다운로드하세요).
git clone https://github.com/0xaliraza/codefolio
그런 다음 저장소의 루트 디렉터리로 이동하여 종속성을 설치합니다.
npm install
빌드 파일 생성
npm run generate
이제 배포할 프로덕션 준비 파일이 모두 포함된 ./build 폴더가 생성됩니다. 이러한 파일을 일부 호스팅 서버 또는 CDN에 배포할 수 있습니다.
앱이 로컬에서 실행되는 것을 보고 싶다면
npm run dev
github 작업이나 다른 CI/CD 플랫폼을 사용하여 이를 배포하려면 사전 github/코딩 경험이 필요합니다.
이것은 템플릿 저장소이므로 오른쪽 상단에 있는 "이 템플릿 사용" 버튼을 클릭하여 이 저장소를 복제할 수 있습니다. 필요에 따라 콘텐츠 파일을 사용자 정의하고 작업 탭으로 이동하여 필수 워크플로를 추가하세요. 기존 ci.yml 및 cd.yml 파일을 재사용할 수 있습니다.
자세한 내용은 Github 작업을 참조하세요.
변경하거나 수정해야 할 사항이 있으면 풀 요청이나 이슈를 자유롭게 생성하세요. 아니면 아래 링크를 사용하여 저에게 직접 연락하실 수도 있습니다.
도움이나 정보가 필요하시면 언제든지 저에게 연락해주세요. 연결해 봅시다! :)
웹사이트
Github
지저귀다
중간
링크드인
라이센스 권리 및 제한 사항(MIT)은 LICENSE 파일을 참조하세요.
