쉽게 만드는 웹 이력서

안녕하세요! 이번에 쉽고 간단하게 웹으로 이력서 만들 수 있는 웹 어플리케이션을 만들었습니다.

링크 먼저 보시죠!

https://jjongtaeng.github.io/friendly-resume

이력서 - 조인태

 

깔끔하죠? 순서에 맞게 따라하시면 저 비슷한 URL도 무료로 얻을 수 있습니다.

 

먼저 github에 가입해주세요

https://github.com 

GitHub: Where the world builds software

회원가입하고서 아래 링크로 이동합니다.

https://github.com/JJongTaeng/friendly-resume 

GitHub - JJongTaeng/friendly-resume

링크로 오시면 우측 상단에 Fork를 누릅니다

 

 

빨간 박스에 있는 이름이 웹 URL에 뒤 path가 될것입니다.

https://jjongtaeng.github.io/friendly-resume  이러식으로요!  

 

위 이미지 하단에 Create fork 버튼을 클릭합니다.

 

 

다음으로 NodeJS를 설치합니다.

https://nodejs.org/ko/

Node.js

여기 링크에 들어가서 좌측 버튼 LTS 버전을 다운로드합니다~

 nodejs를 설치하셨으면 깃허브에 본인 레포지토리에 있는 코드를 clone해야합니다.

 

위 사진처럼 생성한 본인의 깃허브 계정에서 아까 fork 해둔 레포지토리가 생겼을 것 입니다.

해당 레포지토리로 들어가면

요 URL을 복사해주세요.

그리고 터미널을 킵니다.

git clone [복사한 URL]

위 커맨드를 입력하면 현재 폴더 위치 안에 레포지토리가 다운로드 됩니다. 프로그램정도로 생각해주세요.

cd friendly-resume // 본인이 설정한 이름

 

Usage

프로젝트를 fork 해서 자신의 레포지토리에 저장하세요. (레포지토리 이름이 url path가 되니 원하는 레포지토리 이름으로 변경하세요.)

모듈을 설치해야합니다. 아래 명령어를 프로젝트 루트에서 실행해주세요!

npm install

프로젝트 모듈이 모두 설치가 되면 아래 명령어로 만들어진 이력서를 볼 수 있습니다.

npm start

사용하는 IDE, 텍스트 에디터로 ./src/assets/resume.json 파일을 열고, 해당 파일의 내용을 수정해주세요.

파일을 수정하면 개발 서버에서 바로 적용됩니다!

수정 후 아래 명령어를 입력하면 [자신의 github name].github.io/[레포지토리 이름] 으로 배포됩니다~ ex) https://jjongtaeng.github.io/friendly-resume

npm run deploy

Profile Photo

1. ./src/assets/profile.jpg 폴더 내에 profile.jpg 파일 명으로 이미지를 넣으면 프로필 설정됩니다.

resume.json

크게 Heading 과 Contents로 구분됩니다

{
  "browserTitle": "이력서 - 조인태", # 브라우저 검색, 제목
  "header": {
    "title": "즐거움과 편리함을 주는 개발자", # 한줄로 표현하는 자신
    "introduction": {
      "title": "About me", # 간력 소개 타이틀
      "description": "안녕하세요. 웹 프론트엔드 엔지니어 조인태입니다. ~~~ "  # 자신에 대한 간략 소개입니다.
    },
    "links": [ # 타 링크로 이동
      {
        "name": "github",
        "link": "[이동할 페이지 링크를 넣어주세요.]",
        "image": "[이미지 링크를 넣어주세요.]"
      },
      {
        "name": "email",
        "link": "<mailto:jjojjo141995@gmail.com>",
        "image": "[이미지 링크를 넣어주세요.]"
      }
    ]
  },
  "contents": [ # 주요 내용을 작성합니다. children 중첩구조로 같은 형태로 반복할 수 있습니다.(추천 반복 최대 3deps)
    {
      "title": "Work Experience", # Work Experience -> 알서포트 -> RemoteView Box 구조입니다.
      "period": "", # 해당 제목에 대한 기간을 지정합니다.
      "children": [
        {
          "title": "알서포트",
          "period": "2022.01.03 ~",
          "children": [
            {
              "title": "RemoteView Box",
              "period": "",
              "children": [ # 마지막 중첩에는 string 배열 구조로 가져갑니다.
                "Remote View 서비스의 사용할 수 없는 환경에서 사용하기 위해 장치인 Box의 관리자 페이지를 구성",
                "Remote View Client(원격) 에이전트 등록 페이지 작업",
                "접속 네트워크 정보(Wi-Fi, Ethernet) 설정 페이지 작업",
                "사용 기술 스택: React, TypeScript, Recoil, React-Query, CSS-in-JS, Storybook"
              ]
            }
          ]
        }
      ]
    },
    {
      "title": "Other Experience",
      "period": "",
      "children": [
        {
          "title": "Simple Meeting",
          "period": "2022.06.25 ~ ",
          "link": "<https://meeting.jjongtaeng.com/>",
          "children": [
            "화상 미팅 웹 어플리케이션",
            "[Front 기술] WebRTC, SocketIO, React, TypeScript, Tailwind, Recoil",
            "[Back 기술] NestJS, SocketIO, TypeORM, MariaDB"
          ]
        }
      ]
    }
  ]
}

header은 간략한 자기소개 공간입니다

contents는 이력, 스킬, 경험 등 나타내고 싶은 자신의 강점들을 정리해주세요.

contents는 children 중첩구조로 가져갈 수 있으며, 마지막 children은 string 배열로 설명을 적어주세요.

수정하실 땐 꼭 npm run start로 개발서버를 실행하시고, 확인하시면서 작업해주세요.

PDF Save

• 크롬에서 사용 시 인쇄버튼 클릭 후 PDF 저장하면 PDF 로 저장이 가능합니다! UI가 깨지거나 링크가 없어지지 않습니다.