├── .gitignore
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package.json
├── src
├── components
│ ├── common
│ │ ├── ProgressBar.tsx
│ │ └── index.tsx
│ ├── layout.css
│ ├── layout.tsx
│ ├── sections
│ │ ├── about.tsx
│ │ ├── action.tsx
│ │ ├── careers.tsx
│ │ ├── index.tsx
│ │ ├── profile.tsx
│ │ └── skills.tsx
│ └── seo.tsx
├── images
│ └── gatsby-icon.png
├── models
│ └── index.ts
└── pages
│ ├── 404.tsx
│ └── index.tsx
├── static
├── profile-yaml.png
├── resumes
│ ├── chick.png
│ └── john-doe.yaml
└── simple-resume.png
├── tsconfig.json
├── tslint.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 gatsbyjs
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
🐤️ Simple-resume
6 |
7 |
8 | 
9 |
10 | 
11 | 
12 | 
13 | 
14 |
15 |
16 | ## Overview
17 | Simple-resume은 React+Gatsby와 yaml을 통해 편리하고 빠르게 이력서를 작성 할 수 있습니다.
18 |
19 |
20 |
{value}
;
31 | return (
32 | Sentence
33 | );
34 | })
35 | }
36 |
37 |
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/components/sections/action.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Linkify from 'react-linkify';
3 | import styled from 'styled-components';
4 | import { Action } from '../../models';
5 | import { Contents, Date, HeadLine, Section, StyledH3 } from '../common';
6 |
7 | interface Props {
8 | title: string;
9 | icon: string;
10 | actions: Action[];
11 | }
12 |
13 | const Information = styled.span`
14 | `;
15 |
16 | const Text = styled.p`
17 | `;
18 |
19 | export const ActionComponent = ({ title, icon, actions }: Props) => {
20 | return (
21 |
22 |
23 | {actions && actions.map((action, i) => {
24 | return (
25 |
26 | {action.name}
27 | {action.information}
28 | {
29 | action.date &&
30 |
31 | }
32 |
33 | {
34 | action.description &&
35 | action.description.map((value, j) => {
36 | return (
37 | {value}
38 | );
39 | })
40 | }
41 |
42 |
43 | );
44 | })}
45 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/components/sections/careers.tsx:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery } from 'gatsby';
2 | import React from 'react';
3 | import Resume, { Career, Project } from '../../models';
4 | import { Date, FaIcon, HeadLine, Row, RowLeft, RowRight, Section, StyledH3, StyledH4, StyledH5, StyledLi, StyledP, StyledUl } from '../common';
5 |
6 | const TechStack = ({ career }: { career: Career }) => {
7 | return (
8 | <>
9 | {'Tech Stacks'}
10 |
11 | {career.techStacks.map((techStack, i) => {
12 | return (
13 |
14 | {`${techStack.name} : ${techStack.items.join(', ')}`}
15 |
16 | );
17 | })
18 | }
19 |
20 |
21 | );
22 | };
23 |
24 | const ProjectComponent = ({ projects }: { projects: Project[] }) => {
25 | return (
26 | <>
27 | {
28 | projects.map((project, i) => {
29 | return (
30 |
31 |
32 |
39 | {project.name}
40 |
41 | {
42 | project.date &&
43 |
44 | }
45 | Descrition
46 | {project.description}
47 | What did I do
48 |
49 | {project.parts.map((part, j) => {
50 | return (
51 |
52 | {part}
53 |
54 | );
55 | })}
56 |
57 |
58 | );
59 | })
60 | }
61 |
62 | );
63 | };
64 |
65 | export const Careers = () => {
66 | const data = useStaticQuery(graphql`
67 | query {
68 | allResumesYaml {
69 | edges {
70 | node {
71 | careers {
72 | name
73 | information
74 | date {
75 | start
76 | end
77 | }
78 | techStacks {
79 | name
80 | items
81 | }
82 | projects {
83 | name
84 | date {
85 | start
86 | end
87 | }
88 | description
89 | parts
90 | }
91 | }
92 | }
93 | }
94 | }
95 | }
96 | `);
97 | const resume: Resume = data.allResumesYaml.edges[0].node;
98 |
99 | return (
100 |
101 |
102 | {
103 | resume.careers.map((career, i) => {
104 | return (
105 |
106 |
107 | {career.name}
108 | {career.information}
109 | {
110 | career.date &&
111 |
112 | }
113 |
114 |
115 |
116 |
117 |
118 |
119 | );
120 | })
121 | }
122 |
123 | );
124 | };
125 |
--------------------------------------------------------------------------------
/src/components/sections/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './profile';
2 | export * from './skills';
3 | export * from './careers';
4 | export * from './action';
5 | export * from './about';
6 |
--------------------------------------------------------------------------------
/src/components/sections/profile.tsx:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery } from 'gatsby';
2 | import React from 'react';
3 | import styled from 'styled-components';
4 | import Resume from '../../models';
5 | import { ALink, FaIcon, Row, RowLeft, RowRight, Section, StyledH2, StyledLi, StyledUl } from '../common';
6 |
7 | const Sentence = styled.div`
8 | `;
9 |
10 | const Introduction = styled.div`
11 | padding: 2rem 0 0rem;
12 | border-bottom: 0px;
13 | & > ${Sentence} {
14 | margin: 0 0 1rem 0;
15 | font-size: 2rem;
16 | line-height: 1.4;
17 | font-weight: 500;
18 | }
19 | `;
20 |
21 | const ProfileRow = styled(Row)`
22 | padding: 2rem 0 0rem;
23 | border-bottom: 0px;
24 | `;
25 |
26 | const Name = styled(StyledH2)`
27 | margin-top: 0px;
28 | `;
29 |
30 | const Address = styled(StyledUl)`
31 | list-style-type: none;
32 | `;
33 |
34 | const AddressItem = styled(StyledLi)`
35 | ${Address} > & {
36 | padding: .6rem 0 .2rem 0;
37 | }
38 | &::before{
39 | content:none;
40 | }
41 | `;
42 |
43 | export const Profile = () => {
44 | const data = useStaticQuery(graphql`
45 | query {
46 | allResumesYaml {
47 | edges {
48 | node {
49 | photo
50 | name
51 | links {
52 | type
53 | name
54 | symbol
55 | }
56 | introduction
57 | }
58 | }
59 | }
60 | }
61 | `);
62 | const resume: Resume = data.allResumesYaml.edges[0].node;
63 |
64 | return (
65 |
66 |
67 |
68 | 
69 |
70 |
71 |
72 | {resume.name}
73 |
74 |
75 | {
76 | resume.links.map((value, i) => {
77 | return (
78 |
79 |
84 | {value.name}
85 |
86 | );
87 | })
88 | }
89 |
90 |
91 |
92 |
93 | {
94 | resume.introduction.map((value, i) => {
95 | return {value};
96 | })
97 | }
98 |
99 |
100 | );
101 | };
102 |
--------------------------------------------------------------------------------
/src/components/sections/skills.tsx:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery } from 'gatsby';
2 | import React from 'react';
3 | import Resume from '../../models';
4 | import { HeadLine, Row, RowLeft, RowRight, Section, StyledH3, StyledLi, StyledUl } from '../common';
5 |
6 | export const Skills = () => {
7 | const data = useStaticQuery(graphql`
8 | query {
9 | allResumesYaml {
10 | edges {
11 | node {
12 | skills {
13 | name
14 | items
15 | }
16 | }
17 | }
18 | }
19 | }
20 | `);
21 | const resume: Resume = data.allResumesYaml.edges[0].node;
22 |
23 | return (
24 |
25 |
26 | {
27 | resume.skills.map((value, i) => {
28 | return (
29 |
30 |
31 | {value.name}
32 |
33 |
34 |
35 | {
36 | value.items.map((item, j) => {
37 | return {item};
38 | })
39 | }
40 |
41 |
42 |
43 | );
44 | })
45 | }
46 |
47 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/seo.tsx:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery } from 'gatsby';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 | import Helmet from 'react-helmet';
5 |
6 | function SEO({ description, lang, meta, title }: { description: string, lang: string, meta: any, title: string }) {
7 | const { site } = useStaticQuery(
8 | graphql`
9 | query {
10 | site {
11 | siteMetadata {
12 | title
13 | description
14 | author
15 | }
16 | }
17 | }
18 | `,
19 | );
20 |
21 | const metaDescription = description || site.siteMetadata.description;
22 |
23 | return (
24 |
65 | );
66 | }
67 |
68 | SEO.defaultProps = {
69 | lang: `en`,
70 | meta: [],
71 | description: ``,
72 | };
73 |
74 | SEO.propTypes = {
75 | description: PropTypes.string,
76 | lang: PropTypes.string,
77 | meta: PropTypes.arrayOf(PropTypes.object),
78 | title: PropTypes.string.isRequired,
79 | };
80 |
81 | export default SEO;
82 |
--------------------------------------------------------------------------------
/src/images/gatsby-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suites/simple-resume/6415ed4e6fe644aee26feccc94e7cc27681e3c7d/src/images/gatsby-icon.png
--------------------------------------------------------------------------------
/src/models/index.ts:
--------------------------------------------------------------------------------
1 | export default interface Resume {
2 | blogUrl: string;
3 | description: string;
4 | cover: string;
5 | name: string;
6 | photo: string;
7 | introduction: string[];
8 | skills: Skill[];
9 | careers: Career[];
10 | links: Link[];
11 | experiences: Action[];
12 | educations: Action[];
13 | licenses: Action[];
14 | aboutme: string[];
15 | }
16 |
17 | export interface Skill {
18 | name: string;
19 | items: string[];
20 | }
21 |
22 | export interface Action {
23 | name: string;
24 | information?: string;
25 | date?: ActionDate;
26 | description?: string[];
27 | }
28 |
29 | export interface ActionDate {
30 | start: string;
31 | end?: string;
32 | }
33 |
34 | export interface Career extends Action {
35 | techStacks: Skill[];
36 | projects: Project[];
37 | }
38 |
39 | export interface Project extends Action {
40 | parts: string[];
41 | }
42 |
43 | export interface Link {
44 | name: string;
45 | symbol: string;
46 | type: string;
47 | }
48 |
--------------------------------------------------------------------------------
/src/pages/404.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import SEO from '../components/seo';
4 |
5 | const NotFoundPage = () => (
6 | <>
7 |
8 | NOT FOUND
9 | You just hit a route that doesn't exist... the sadness.
10 |
11 | );
12 |
13 | export default NotFoundPage;
14 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Layout from '../components/layout';
4 | import SEO from '../components/seo';
5 |
6 | const IndexPage = () => {
7 | return (
8 | <>
9 |
10 |
11 |
12 | );
13 | };
14 |
15 | export default IndexPage;
16 |
--------------------------------------------------------------------------------
/static/profile-yaml.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suites/simple-resume/6415ed4e6fe644aee26feccc94e7cc27681e3c7d/static/profile-yaml.png
--------------------------------------------------------------------------------
/static/resumes/chick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suites/simple-resume/6415ed4e6fe644aee26feccc94e7cc27681e3c7d/static/resumes/chick.png
--------------------------------------------------------------------------------
/static/resumes/john-doe.yaml:
--------------------------------------------------------------------------------
1 | # Head config [views/partials/head.ejs]
2 | # Meta tag 관련 설정입니다.
3 | # Meta tag-related settings.
4 | blogUrl: http://example.com/resume
5 | description: This is a resume of software engineer John Doe.
6 | cover: "/"
7 | # Resume config [views/partials/profile.ejs]
8 | # 이력서 상단에 들어갈 사진과 이름, 간단 소개입니다.
9 | # A picture, name and brief introduction to the top of your resume.
10 | name: John Doe
11 | photo: "resumes/chick.png"
12 | introduction:
13 | - Hello! I'm John Doe. I'm Software Engineer.
14 | - I enjoy playing games and eating. I'm happiest when I eat. I like pork.
15 |
16 | # Profile link config [views/sections/profile.ejs]
17 | # email, github, linkedin, blog의 주소와 아이콘 설정입니다.
18 | # The address and icon settings for email, github, linkedin, and blog.
19 |
20 | # name: 연결할 서비스의 주소입니다.
21 | # symbol: 링크 앞의 awesome font 심볼입니다. [https://fontawesome.com/icons/](ex : fab fa-apple)
22 | # type: 링크의 서비스명 입니다.
23 |
24 | # name: The address of the service to which you want to connect.
25 | # symbol: Awesome font symbol in front of the link. [https://fontawesome.com/icons/](ex : fab fa-apple)
26 | # type: This is the service name of the link.
27 |
28 | links:
29 | - name: "john.doe@example.com"
30 | symbol: FaEnvelope
31 | type: email
32 | - name: "https://github.com/johndoe"
33 | symbol: FaGithub
34 | type: github
35 | - name: https://www.linkedin.com/in/johndoe
36 | symbol: FaLinkedin
37 | type: linkedin
38 | - name: http://example.com
39 | symbol: FaHome
40 | type: blog
41 |
42 | # Skills config [views/sections/skills.ejs]
43 | # 보유기술 설정입니다. 항목을 자유롭게 추가할 수 있습니다.
44 |
45 | # This is a technology setting. You can add items freely.
46 | skills:
47 | - name: Languages
48 | items:
49 | - Node.js
50 | - python
51 | - mysql
52 | - name: Libraries
53 | items:
54 | - Express
55 | - name: Tools
56 | items:
57 | - vscode
58 | - name: VCS
59 | items:
60 | - Git
61 |
62 | # Careers config [views/sections/careers.ejs]
63 | # 경력사항 설정입니다. 회사와 프로젝트를 추가할 수 있습니다.
64 | # 회사 추가시 careers 밑의 -company 부터 복사하여 사용하고,
65 | # 프로젝트 추가시 projects 밑의 -name 부터 복사하여 사용합니다.
66 | # Date type : yyyy.mm
67 |
68 | # Experience settings. You can add companies and projects.
69 | # When adding a company, copy and use it from "-company" under careers.
70 | # When adding a project, copy and use "-name" under projects.
71 | careers:
72 | - name: John Company
73 | information: Junior Software Engineer
74 | date:
75 | start: '2018.03'
76 | end: 'now'
77 | techStacks:
78 | - name: Language
79 | items:
80 | - HTML
81 | - CSS3
82 | - JavaScript
83 | - Node.js
84 | - name: System
85 | items:
86 | - Ubuntu 16.04
87 | - name: Tool
88 | items:
89 | - Git
90 | projects:
91 | - name: Member management service operations
92 | date:
93 | start: '2018.03'
94 | end: '2018.06'
95 | description: The member management functions were developed and maintained for the smooth service use of users.
96 | parts:
97 | - Development of member management
98 | - Implement SNS login
99 |
100 | # Other Experiences config [views/sections/experiences.ejs]
101 | # 기타 경험 설정입니다. 이름, 역할, 기간, 요약등을 추가할 수 있습니다.
102 | # 항목 추가시 -experience 부터 description까지 복사하여 사용합니다.
103 |
104 | # Other experience settings. You can add names, informations, date, and summaries.
105 | # When adding an item, copy and use -experience to description under otherExperience.
106 | experiences:
107 | - name: Delicious Cookie Hackathon
108 | information: Development
109 | date:
110 | start: '2018.08'
111 | end: '2018.08'
112 | description:
113 | - Delicious Cookie Hackathon has developed Cookie Food Service and won it.
114 | - name: Nursing home volunteer activities
115 | information: Volunteer
116 | date:
117 | start: '2018.06'
118 | end: '2018.07'
119 | description:
120 | - https://example.com/example/
121 | - I went to the nursing home and did volunteer work. It was rewarding.
122 |
123 | # Educations config [views/sections/educations.ejs]
124 | # 학력, 교육 항목 설정입니다. 이름과 기간 요약을 추가할 수 있습니다.
125 | # 항목 추가시 -education 부터 description까지 복사하여 사용합니다.
126 |
127 | # Education, education item settings. Lets you add a name and a summary of the date summary.
128 | # When adding an item, copy and use the item from -education to description.
129 | educations:
130 | - name: Korea Cookie University
131 | date:
132 | start: '2011.03'
133 | end: '2015.03'
134 | description:
135 | - I graduated from school.
136 |
137 | # Licenses config [views/sections/licenses.ejs]
138 | # 자격증 항목 설정입니다. 이름과 기간 요약을 추가할 수 있습니다.
139 | # 항목 추가시 licenses 밑의 -license 부터 description까지 복사하여 사용합니다.
140 |
141 | # Certificate entry settings. Lets you add a name and a summary of the date summary.
142 | # When adding items, copy and use the -license to description under Licenses.
143 |
144 | licenses:
145 | - name: Confectionary function qualification
146 | information: Cookie Land
147 | date:
148 | start: '2008.03'
149 | end: ''
150 | description:
151 | - I got a license.
152 |
153 | # aboutme config [views/sections/about.ejs]
154 | # 자기소개서 설정입니다. 자유롭게 작성할 수 있습니다.
155 | # - 로 항목을 추가하면 문단이 추가되는 효과가 있습니다.
156 | aboutme:
157 | - Elit minim consectetur adipisicing nisi et laborum occaecat esse
158 | - dolor cupidatat exercitation consequat pariatur sunt. Esse est ipsum nostrud consectetur tempor ad. Anim laboris Lorem deserunt ad eu deserunt est aute.
159 | - '# Sit elit veniam'
160 | - Irure velit sit eiusmod cupidatat minim irure cupidatat velit magna mollit in cupidatat cillum. Amet aliqua dolor elit enim.
161 | - '## Sit elit veniam'
162 | - Minim esse consectetur velit sunt nostrud nulla id aliqua.
163 | - '## incididunt exercitation'
164 | - 'https://example.com'
165 | - veniam deserunt proident voluptate occaecat dolor incididunt exercitation irure sit ex. Veniam cupidatat excepteur nulla laboris non sunt Lorem irure Lorem eu non enim dolor. Culpa enim nulla quis ex cupidatat anim ad occaecat anim ea nostrud.
166 |
--------------------------------------------------------------------------------
/static/simple-resume.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suites/simple-resume/6415ed4e6fe644aee26feccc94e7cc27681e3c7d/static/simple-resume.png
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "module": "commonjs",
5 | "jsx": "react",
6 | "strict": true,
7 | "esModuleInterop": true,
8 | "typeRoots": [
9 | "./node_modules/@types",
10 | "./@types",
11 | ]
12 | }
13 | }
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "defaultSeverity": "error",
3 | "extends": [
4 | "tslint:recommended"
5 | ],
6 | "jsRules": {},
7 | "rules": {
8 | "indent": {
9 | "options": [
10 | "spaces",
11 | 2
12 | ]
13 | },
14 | "interface-name": {
15 | "options": [
16 | "never-prefix"
17 | ]
18 | },
19 | "max-classes-per-file": {
20 | "options": [
21 | 10
22 | ]
23 | },
24 | "max-line-length": {
25 | "options": [
26 | 150
27 | ],
28 | "severity": "warning"
29 | },
30 | "member-access": false,
31 | "member-ordering": false,
32 | "no-console": false,
33 | "no-empty-interface": false,
34 | "no-reference": false,
35 | "no-var-requires": false,
36 | "object-literal-sort-keys": false,
37 | "quotemark": {
38 | "options": [
39 | "single",
40 | "jsx-single",
41 | "avoid-escape"
42 | ]
43 | },
44 | "trailing-comma": {
45 | "options": {
46 | "esSpecCompliant": true,
47 | "multiline": "always",
48 | "singleline": "never"
49 | }
50 | },
51 | "variable-name": {
52 | "options": [
53 | "ban-keywords",
54 | "check-format",
55 | "allow-pascal-case",
56 | "allow-snake-case"
57 | ]
58 | }
59 | },
60 | "rulesDirectory": []
61 | }
--------------------------------------------------------------------------------