Resume
An online résumé. Demo Site
Features
- Fully Customizable
- Semantic HTML
- Accessible (WCAG AA)
- h-resume Microformat
- Spellcheck Linter
- Self-Contained (no external resources)
- Search Engine Optimized (meta, JSON-LD, etc...)
- Critical CSS Inlined
- Print Styles
Getting Started
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:
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 src/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.
Leave the layout
and permalink
data at the top in place, and save the file.
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. 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 |
SpellCheck
If you run the project locally in development, the content of your introduction
and entries
will be automatically spell-checked using your system default spellcheck engine.
Possible misspelled words will be announced as warnings in the console output, like so:
Linter: check spelling for "incorect"
Credits
Thanks to Eric Bailey for his post "How to not make a résumé in React", which gave me the idea.
Colophon
- "Butler" headline font by Fabian de Smet (CC BY-SA 4.0 License)
- Avatar image generated by GAN at thispersondoesnotexist.com.