maxboeck / resume Goto Github PK

View Code? Open in Web Editor NEW

347.0 9.0 43.0 3.04 MB

An online résumé.

Home Page: https://demo-resume.netlify.app

License: MIT License

JavaScript 25.68% SCSS 52.30% Nunjucks 22.02%

resume's Introduction

Resume

An online résumé. 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

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

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"`. (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

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.

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.

resume's People

Contributors

Stargazers

Watchers

resume's Issues

Bypass the CSS grid Chrome/Webkit bug when printing

Chrome does not honor directives such as page-break-inside in the context of CSS grids.

https://stackoverflow.com/a/49185717/1101509

This means that printing the CV in Chrome might break the sections, even right after the Education title.

It can be (mostly) fixed by using the CSS grid only for the two Skills and Languages columns, while using display: block for the rest of the sections.

Problem writing Eleventy templates: (more in DEBUG output)

ENOENT: no such file or directory, scandir '/home/agc/dev/my_proj/my_cv/resume/node_modules/node-sass/vendor'

Error was thrown:
Error: ENOENT: no such file or directory, scandir '/home/agc/dev/my_proj/my_cv/resume/node_modules/node-sass/vendor'
at Object.readdirSync (fs.js:955:3)
at Object.getInstalledBinaries (/home/agc/dev/my_proj/my_cv/resume/node_modules/node-sass/lib/extensions.js:133:13)
at foundBinariesList (/home/agc/dev/my_proj/my_cv/resume/node_modules/node-sass/lib/errors.js:20:15)
at foundBinaries (/home/agc/dev/my_proj/my_cv/resume/node_modules/node-sass/lib/errors.js:15:5)
at Object.module.exports.missingBinary (/home/agc/dev/my_proj/my_cv/resume/node_modules/node-sass/lib/errors.js:45:5)
at module.exports (/home/agc/dev/my_proj/my_cv/resume/node_modules/node-sass/lib/binding.js:15:30)
at Object. (/home/agc/dev/my_proj/my_cv/resume/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (/home/agc/dev/my_proj/my_cv/resume/src/assets/styles/styles.11ty.js:3:14)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
Copied 1 file / Wrote 0 files in 4.34 seconds (v0.11.0)
Unhandled rejection in promise ([object Promise]): (more in DEBUG output)

ENOENT: no such file or directory, scandir '/home/agc/dev/my_proj/my_cv/resume/node_modules/node-sass/vendor'

Enhancement: Generate multiple resume from single repository

Trying to generate multiple resumes through a single repository where a user who wishes to generate their resume can view it by adding their name as a path.
For example - https://demo-resume.netlify.app/abc returns the resume of the person whose name is abc.
What type of changes to be done in order to obtain the expected result?

Internationalization

just a question: is there a way to output two pages: e.g. en and zh-cn?

thanks for the amazing work!

Embed 11ty default blog

Hello;

Is there a way we can embed 11ty base blog?
I tried, but I just cannot get it to work.

Thanks.

A number of problem running with Node 19

Hi,

I ran into several problem when I tried to build your template using Node19. I wonder if you could help me.

node-sass is not compatible, I fixed this by changing this to sass
and fix up a require() in "src\assets\styles\styles.11ty.js"

this seems ok

then, I ran into the next one
postcss-discard: postcss.plugin was deprecated.

I'm not sure what should I do.

Thank you in advance for your support

Feature suggestion: legal boilerplate section

Due to privacy laws, some countries require people to add a legal note at the bottom, otherwise recruiters or other subjects are forbidden from considering the personal data in the CV.

It could be nice to add it as an option. For example, I hardcoded one here:

<section class="section" id="legal">
<p><small>Autorizzo il trattamento dei dati personali contenuti nel mio curriculum vitae in base all’art. 13 del D. Lgs. 196/2003 e all’art. 13 del Regolamento UE 2016/679 relativo alla protezione delle persone fisiche con riguardo al trattamento dei dati personali.</small></p>
</section>

Deploy to netlify is not working

Hello,
Great template! Seems to be not a tempalte problem but deploy to netlify is not working. Tested couple of minutes ago, some ? node-sass build problem?

What Node version is needed?

I am trying to npm install with Node 14 on macOS 10.15 and it seems to crash during the node-gyp installation phase.

My guess is that I am using the wrong Node version and maybe I should try with another one, but I do not see it mentioned in the README.

Could you clarify if a specific Node version is needed?

Thank you!

Question: adding new icons

Thank you Max for the very cool template!

Did you download the icons from a specific repository? I was adding icons for the social media links and was worried about visual consistency.

Feature suggestion: translated strings

I know this might be a bit out of scope, but it could be a nice feature. 🙂

Yesterday I finished working on my CV and I added this to the metadata:

"lang": "it",
"locale": "it_it",

Nevertheless, there were a few English strings here and there that needed to be changed manually. I fixed the linter too by adding the language to the spell checker:

SpellChecker.setDictionary('it');
const results = SpellChecker.checkSpelling(text)

I was wondering if it could be possible to extract all the strings and put them in a single dictionary file, so users can translate that single file in their own language.

Adding new social icon svg

Hi, great template! I added a new social entry (see below) and a similar named icon svg, e.g. "src/assets/icons/orcid.svg". The social entry is still listed by the name and the icon is not used. Is there another step needed? I have no experience with webdevelopment yet.

        {
            "name": "ORCID",
            "user": "0000-0001-1111-1111",
            "url": "https://orcid.org/0000-0001-1111-1111"
        }