Skip to content

ymqy/resume

 
 

Repository files navigation

Resume

An online résumé. Demo Site

a preview of the generated résumé as a website and in print

Features

  • Fully Customizable
  • Semantic HTML
  • Accessible (WCAG AA)
  • h-resume Microformat
  • Self-Contained (no external resources)
  • Search Engine Optimized (meta, JSON-LD, etc...)
  • Critical CSS Inlined
  • Print Styles

Getting Started

The project is based on Node and was tested with v10.15. Newer versions can apparently cause problems with some of the dependencies - I'm working on resolving this soon. To install the necessary packages, run this command in the root folder of the site:

npm install

Commands

  • Run npm start for a development server and live reloading
  • Run npm run build to generate a production build

Deploy a fork of this template to Netlify:

Deploy to Netlify

Customize your Résumé

To edit the content and design of your résumé, follow these steps:

1. Personal Details

Open src/data/author.json and edit the information describing yourself. The following properties are supported (optional properties can be removed from the JSON file):

Key Description Required
name your full name required
occupation your job description required
location your town/state optional
avatar the file name of your profile photo. Must be located in src/assets/images/ optional
pronouns your preferred gender pronouns optional
email your email address optional
telephone your phone number optional
website your personal website optional
skills an array of strings describing your skillset optional
languages an array of objects describing your spoken languages; each object should include a name (e.g. "English") and level (e.g. "fluent") property optional
social an array of objects for each social profile you want to link; each object should include a name (e.g. "Github"), user (e.g. "@maxboeck") and url (e.g. "https://github.com/maxboeck") property optional

2. Introduction

Open entries/content/introduction.md and edit the text content of the file with your personal short introduction summary. Limit it to 2-3 sentences and convey your motivation. You can edit the title of the section here as well.

3. Work Experience & Education

The entries for the sections "work experience" and "education" are stored as markdown files in src/entries/work and src/entries/education.

Delete the demo files in there and create your own. The text should describe your responsibilities, learnings or achievements. Include the following frontmatter data:

Key Description Required
title the title of the entry. in "work experience", this sould be your role/position, in "education" this should be the degree/certification earned. required
start ISO timestamp of when you started this job or education. required
end ISO timestamp of when you ended this job or education. If not defined, that entry will say "- Present" optional
organization name of your employer (when "work") or school (when "education") optional
organizationUrl link to website of your employer (when "work") or school (when "education") optional
location location of company or school optional

4. Custom Content

Edit entries/content/custom.md if you want to edit freeform content to the end of the CV. This could be a legal disclaimer or an additional section. Delete the file if you don't want this section to show up.

5. Meta Data & Design

Open src/data/meta.json and replace the url with the URL of your hosted résumé. You can also customize the language and color scheme here.

Supported properties are:

Key Description Required
url the URL of your hosted résumé, e.g. "https://my-resume.com". (no trailing slash) required
lang the 2-digit language identifier of your résumé, e.g. "en", "de", etc. required
locale the locale code of your résumé, e.g. "en_US", "de_DE", etc. required
colors.primary The HEX code of the primary brand color. defaults to blue #005b96 optional
colors.secondary The HEX code of the secondary brand color. defaults to red #fc6767 optional

6. Internationalization

There are a few hardcoded english strings used in the template, such as the section titles and some labels. If you want to change the default language from english to something else, you can translate these strings by changing the values in data/strings.json.

Credits

Thanks to Eric Bailey for his post "How to not make a résumé in React", which gave me the idea.

Colophon

Releases

No releases published

Packages

No packages published

Languages

  • CSS 53.7%
  • JavaScript 25.0%
  • HTML 21.3%