Resume

An online résumé template. Demo Site

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
• NEW PDF version is built automatically
• NEW Contact info encoded in QR code included in the print version
• NEW Fonts fetched and bundled from Google Fonts
• NEW Email and phone are scrambled to protect against spam

Getting Started

1. Fork this repository.
2. Edit src/data/meta.json to adjust url according to your GitHub username and the name of your forked repository.
3. After a minute or two, the site will be built automatically.
4. To enable GitHub Pages, go to the Settings tab, then Pages, then choose gh-pages where it says "Select a source below to enable GitHub Pages for this repository."
5. The site will be live at <your-github-username>.github.io/<forked-repository-name>

Development

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

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
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. Github Repositories

If you want, you can include the five most starred repositories from your Github account. This will fetch the current data at build time, at most once a day. To do this, edit src/data/repositories.js and change the YOUR_GITHUB_USERNAME var to your Github username.

5. Custom Content

Edit the files in entries/content/custom if you want to add a freeform section to the end of the CV. This could be a legal disclaimer or an additional section. Delete the files if you don't want these sections to show up. If a section doesn't contain a lot of text, it will only be as wide as needed. To assume the full width, add wide: true to the frontmatter data.

6. 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/resume".	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

7. 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.

8. Printable Output

To adjust printable features, such as orientation, column count, font size, etc. edit src/assets/styles/utils/_variables.scss. This template will create a PDF file by opening a virtual Chrome browser and using the "Print to PDF" feature.

9. QR Code With Contact Information

A QR code encoding your contact information as a vCard will be included in the printed version.

Credits

Thanks to Max Böck for creating this template.

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

Colophon

• Avatar image generated by GAN at thispersondoesnotexist.com.