nextjs resume 다운로드 - nextjs resume 소스 코드 다운로드

nextjs resume

AI 소스 코드

1.0.0

다운로드

다음 .js와 테일 윈드 이력서

특히 소프트웨어 전문가를 염두에두고 구축 된 이력서. 아름답고 믿을 수 없을 정도로 빠른 이력서 웹 사이트로 잠재적 인 고용주에게 깊은 인상을 주거나 이메일 및 인쇄용 PDF를 생성하십시오.

예를 참조하십시오

이력서는 공개 URL에 액세스 할 수없는 정보를 표시하는 보안 URL을 생성 할 수도 있습니다. 보안 버전에는 이메일, 전화 번호 및 우편 주소와 같은 개인 정보가 포함될 수 있습니다. 잠재적 인 고용주에게 개인 링크를 보내거나 더 완전한 PDF를 생성하는 데 사용될 수 있습니다.

특징

간단한 마크 다운 파일로 이력서를 업데이트하십시오
- ContentLayer를 사용하여 안전한 컨텐츠 관리를 입력하십시오
- 외부 CMS 시스템과의 통합이 향후 가능할 것입니다.
이력서를보고 소셜 미디어 링크를보고 잠재적 인 고용주에게 보내는 아름답고 접근 가능한 웹 앱
비밀 링크를 사용하여 추가 개인 정보로 이력서를 생성하십시오.
Dright 또는 Dark Mode에서보고, 다운로드 또는 인쇄하려면 요청에 따라 PDF를 생성합니다.
쉽게 사용자 정의 할 수 있습니다
- 19 개의 악센트 컬러 팔레트
- 6 개의 중립 컬러 팔레트
- 각 팔레트에 대한 자동 명당 및 다크 모드
- 앱 및 생성 된 이미지를 수정하는 테일 윈드 클래스
동적 OG는 이미지를 밝거나 어두운 모드로 공유합니다

기술

다음 .js
TypeScript
테일 윈드 CSS
ContentLayer
반응 -PDF
Radix UI 색상
테스트 라이브러리

이 프로젝트를 사용하는 방법

이 프로젝트는 사용자 정의 구성을 설정하고 내부 CMS에 컨텐츠를 추가하고 Vercel 또는 NetLify에 배포하는 데 몇 단계 만 필요합니다!

복제 및 배치

시작하는 가장 간단한 방법은 한 단계로 복제하고 배포하는 것입니다. 그 후에는 CMS 및 템플릿을 편집하여 요구 사항에 맞게 할 수 있습니다.

이 프로젝트는 NetLify 또는 Vercel에 배치되도록 설계되었습니다. 다음 버튼 중 하나를 클릭하여 Repo를 복제하고 환경 변수를 설정하고 배포 할 수 있습니다.

개발

이력서를 사용자 정의하려면 방금 만든 프로젝트를 로컬 컴퓨터와 cd 를 복제하십시오.

 cd my-resume
npm i

bun , npm , pnpm 및 yarn 로 프로젝트를 테스트했으며 주목할만한 문제가 발생하지 않았습니다. 개발을 위해 테스트 러너는 기본적으로 기본적으로 bun 입니다.

사용자 정의 구성을 수정하십시오

좋아하는 편집기에서 프로젝트를 열고 루트에서 edit-me/config/ 폴더를 열면 resumeConfig.ts 파일을 편집하여 요구 사항을 충족시킬 수 있습니다. 구성 파일에는 프로젝트 전반에 걸쳐 사용될 다음 상수가 포함되어 있습니다 (적절한 자동 완성 및 오류 점검을 제공하기 위해 입력됩니다).

accentColor : AccentColor . Radix UI 색상의 악센트 팔레트 이름. 표준 색상을 사용하는 경우 대조적 인 텍스트 색상이 흰색이되며 밝은 색상을 사용하면 대조적 인 텍스트 색상이 검은 색입니다.
neutralColor : NeutralColor . Radix UI Grays의 중립 팔레트의 이름.
appTheme : 'system' | 'light' | 'dark' . appTheme system 으로 설정되면 Résumé 사이트가 사용자의 시스템 환경 설정에 기본값을받습니다. light 거나 dark 설정하면 사용자의 선호도가 재정의됩니다.
imageTheme : 'light' | 'dark' . OG 공유 이미지 및 앱 아이콘은 밝은 또는 어두운 변형으로 생성됩니다.
pdfTheme : 'light' | 'dark' . PDF는 빛 또는 어두운 변형으로 생성됩니다.

또한 문서 하단에 외부 링크를 생성하는 links.ts 도 있습니다. 이 링크와 함께 간단한 아이콘의 아이콘을 사용할 수 있습니다.

색상 팔레트 예제

이력서 생성기는 19 개의 악센트 컬러 팔레트와 6 개의 중립 색상 팔레트를 제공합니다. 아래는 밝은 모드와 어두운 모드 모두에서 몇 가지 변형의 스크린 샷입니다.

라이트 모드	다크 모드
파란색/연기	파란색/연기
루비/그레이	루비/그레이
민트/슬레이트	민트/슬레이트

OG 이미지 예제

악센트, 중립 및 색 구성표 기본 설정은 생성 된 OG 이미지에도 적용됩니다.

라이트 모드	다크 모드
파란색/슬레이트	파란색/슬레이트

CMS를 설정하십시오

다음으로 edit-me/content/ 에 포함 된 Mock CMS 데이터를 수정하십시오. 각 Markdown 파일은 항목에 속성을 추가하는 데 사용되는 전면 물질 필드를 사용합니다. 이러한 속성은 타입 안전하므로 필요한 필드가 누락되거나 유효하지 않은 경우 프로젝트가 실행되지 않습니다. 나머지 마크 다운 파일은 항목에 대한 설명을 제공하기 위해 HTML로 렌더링됩니다.

모의 파일은 매우 자명해야하지만 필요한 필드 및 선택 필드에 대한 자세한 설명을 위해 ContentLayer 구성을 볼 수 있습니다.

환경 변수

앱이 배포되는 위치에 관계없이 다음 환경 변수에 대한 액세스가 필요할 수 있습니다.

PRIVATE_KEY (선택 사항) : 이것은 저자가 결정한 코드로, 개인 정보가 포함 된 이력서 버전에 대한 URL 액세스를 제공합니다. 이 코드를 생성하는 것이 좋습니다 (예 : UUID 또는 비밀번호 생성기 사용).

개인 링크

프로젝트는 공개 URL보다 더 많은 정보를 표시 할 비밀 URL을 제공하도록 구성 할 수 있습니다. 이것은 잠재적 인 고용주에게 완전한 이력서를 보내거나 자신의 용도로 PDF를 생성하려는 경우 도움이됩니다. 이 버전에는 일반 대중에게 보이지 않는 이메일, 전화 번호 및 주소와 같은 개인 정보를 포함시킬 수 있습니다.

설정

PRIVATE_KEY 환경 변수를 추가 한 경우에만 개인 URL이 작동합니다. 로컬로 작업하는 경우 .env.local 파일로 추가 할 수 있습니다.

 PRIVATE_KEY=your-private-key

그런 다음 https://your-url.com/private/your-private-key 방문하여 이력서의 개인 버전을 볼 수 있습니다.

개인 콘텐츠 추가

내장 마크 다운 통합의 경우 개인 정보를 공개 git repo에 커밋하지 않아야합니다 . 이 기능을 개인 레포에만 사용하고 심지어 GIT Repo에 대한 개인 정보를 촉구하는 보안 문제를 알고 있습니다 .

CMS에 개인 데이터를 추가하려면 privateFields 폴더에 추가하십시오.

cms/privateFields/ . 표시하려는만큼의 개인 연락처 정보 필드를 추가하십시오. 폴더에 정렬 된 순서대로 나타나므로 숫자 접두사를 사용하여 주문할 수 있습니다.
- label : 필수 문자열 . "이메일"또는 "주소"와 같은 필드의 레이블.

보안

이 개인 URL은 귀하가 보내는 사람들만큼 안전합니다 . 이전 개인 URL을 무효화하려면 PRIVATE_KEY 환경 변수를 변경하면됩니다.

설계 및 사용자 정의

템플릿은 반응이 좋고 아름답고 바로 바로 접근 할 수 있도록 만들어졌습니다. 웹 버전의 자동 다크/라이트 모드 테마 및 PDF 버전의 훌륭한 단일 페이지 인쇄 레이아웃을 지원합니다. 이 프로젝트는 Accent Colors와 같은 최소한의 구성 세트를 지원하지만 프론트 엔드 개발자 또는 디자이너 인 경우 소스 코드를 쉽게 열고 맞춤화 할 수 있지만 맞춤화 할 수 있습니다.

실제로 사용자 정의를 심화하려면 루트 폴더 tailwind.config.ts 파일에서 Tailwind 구성을 완전히 제어 할 수 있습니다.

다음.js 이미지 생성을 사용하여 동적 열린 그래프 (Facebook/Twitter) 공유 이미지 및 앱 아이콘을 생성합니다. src/app/api/og/route.tsx 의 Tailwind 클래스와 src/app/icon.tsx 의 아이콘을 사용하여 OG 이미지의 레이아웃, 스타일 및 텍스트를 편집 할 수 있습니다.

이 동적 공유 이미지는 CMS의 데이터뿐만 아니라 사용자 정의 accentColor 설정을 사용합니다.