Building My Resume in HTML Using Eleventy | Hacker News Reader

Building My Resume in HTML Using Eleventy

michaelengen.com

86 pointsmichaelengen70 comments

If I’m hiring a web developer and you give me a `resume.html` you’d best believe I’m viewing source on that.

This is a high-risk high-reward game, because if it’s clean you’ll get bonus points, but if there’s unnecessary cruft (as defined by me) you’ll loose points.

For example, while this is pretty clean code, I’m currently on my phone and getting horizontal scroll bars. For a text based site like this resume that shouldn’t happen, and perhaps unfairly, that’s going to weigh heavily against the other good work OP has done.

Then it's good thing he doesn't do that and instead converts it to PDF before sending.

`grid-template-columns: max-content 1fr;` is preventing the text from wrapping in `header` elements. Should be a simple fix, but it'd definitely loose some points from me.

Over engineered. Just write it in pure HTML/CSS. It's a resume, you don't need anything more advanced.

Yep. I revisited mine I made in 2015 and it still renders just fine. Haven't touched it in years. No build steps, no external tooling aside from a text editor and a browser.

Print to PDF if you need to via the browser, and you're good to go!

https://github.com/bschwind/resume

Author here—This is fair criticism, but _for me_, the overhead of a simple static site generator is worth all the benefits I get from being able to e.g., separate my data from my styles and so on.

You mean like <style stc="./CV.css">?

I mean I personally would use a static site generator too, but objectively speaking: for a single page (no navigation, not printed page)... It really is overkill

It's definitely overkill! Fun, though :)

It is not a single page. Each application should have a tailored CV. They wont be wildly different but highlight different strengths. You might have a master CV with the kitchen sink that you slim down to the role.

The cynic in me says you're missing the ulterior goal - which was to get the equivalent of product placement for one's resume on Hacker News. :)

I do mine in markdown and then use pandoc to convert it to whatever i want

that's what I did, but pandoc massacred my boy on the first pass, several passes later it was a bit better with just the right args. I got better results just using brave and adjusting the margins by hand for printing to pdf. I started with markdown but it was simply too limiting for anything that involved alignment (left, right, center) without html, and figure if I have to do that, just use html.

This is how my resume was (maybe still is, I haven’t looked I years).

One thing I did that I like was after the most recent jobs, the older and less relevant ones were faded a bit. A hover would make them dark and easier to read. When printing a PDF, only the darker more recent ones would print. This let me keep a full record in a single file (mostly for my own benefit), while still being able to quickly and easily print out a single page version.

I just had an idea reading your comment.

You could have structured data as json etc within that html, and some Javascript that renders that onto final html. Than add a button (or a URL argument, or print action) that returns final html (including all your Javascript). That way you only ever need to update your structured data while never needing to edit the html itself. You could theoretically even add some interface to update the resume. I am thinking tiddlywiki but for the CV.

May be that's what you are saying in your comment already. It will be self

I didn't go that route for the resume, but I have made sites that work like that for start-page type sites (I had a drop down menu to swap out different json files being loaded in for various categories). It could work for a resume as well to keep the front end as whatever you want it to be, while not having to re-write your actual work history. Then instead of giving things a hidden-print class, there could simply not be there at all, but still be in the json if/when needed.

That then leads to the idea of having an api endpoint for your resume data, since it's already in json, with an industry standard format. So instead of all these sites parsing a human formatted resume or text file, they could skip the middle man and have structured data to work with. The downside here would be needing to host it somewhere that can deal with server side code. Or maybe this is a startup idea.

Do you never build anything just for fun?

I've been using LaTeX for mine for years and never looked back. I have it setup in such a way that I just comment or uncomment a few lins at the start and can easily include or exclude, or adjust, types of skills, work experience, length, etc.

Always produces a nice, easy to clean minimal pdf that has some protections against recruiters trying to copy and paste and change things.

I agree, but it can be useful to produce html and plain text versions of your resume and cover letter too. Per-job customization, and adding custom metadata for cover letters, is also useful.

What worked for me was I creating a simple python script that uses json files with custom data as input, and uses mako templates to create latex, html, and text output.

I've never needed an html version honestly. I do have it setup to produce a text version for copying and pasting into job applications that don't support file upload. Or worse, that want you to paste the same information and then upload your resume anyway.

Mine is also in LaTeX. Every 3-5 years I get a nice reminder of the nightmare that is cobbling together a fully functional LaTeX dev environment to work on it again.

I am keeping my CV on overleaf and it is very convenient. Did you try that option?

The issue for me with LaTeX is the amount of time I spend messing around trying to get different packages to play nicely together.

Sometimes you get lucky and everything just works. If it doesn't... you google it, and pray that someone else hit the same problem and solved it, because trying to actually figure out the problem from first principles is doomed -- the language (and ecosystem) makes Perl look sane.

No guarantees, but try https://tectonic-typesetting.github.io.

Hi, I have a latex resume/cv too and am curious about "some protections against recruiters trying to copy and paste and change things". What does that mean?

Honestly I don't recall exactly because it's been so long since I set it up. I think I did something to make it hard to export/convert to doc/docx, and maybe even prevent or make it hard to copy test for certain blocks. It was just using some tracks for things you can do with the pdf format, but I don't have more information at the moment.

I'll try and dig in later and see what I actually did.

Unpopular opinion: every time I see anything made with LaTeX, it makes my eyes bleed. While it might be great for editing, I find it to be a pain to read. I really wish academic papers (and everything else it is used for) would be written with a tool that generate at least a bit more readable output...

TeX output was optimized for printing, so it looks better on paper than on screen. (IMHO, it looks excellent on paper). Try to zoom in, for better experience, or view generated PDF on eInk display.

Why do you find it hard to read?

I think it's mostly the font itself that hurts me. It curls at all the bad places, and somehow I find most characters disproportional; just like the word spacing, which is pretty much random when you switch between styles (italics to maths formula to normal - spacing is all over the place).

The font itself reminds me of the ugly skinny latin fonts you see on Chinese programs, especially when set in italics.

I see that everyone loves LaTeX with virtually no exception - have no idea if it's an acquired taste that everyone gets, or it's my defect for being unable to find any inherent value in it as a reader. In any case, I just don't get it, lol.

I've kept mine in a single file HTML with some CSS for years too. After toying with more complicated solutions, decided to stick with the KISS principle. It's at https://github.com/astangl/alexstangl-resume if anyone wants to take a look.

I made an Elevnty website for my partner's business. It was a great experience. It worked well and was easy to code.

After I came back to update it 3 years later by cloning the repo and running 'npm i' I got a bunch of errors. Working through the upgrade process failed. I couldn't get it running again.

I dumped the HTML from the live site, changed that directly, and just uploaded that to S3 to host it. I don't think I'd bother with Elevnty again. It's great for making a new site, but the long term maintainability isn't there. To be fair, this is on me. I should have done more to keep it running, or pinned the dependencies, or something.

Am i the only lunatic that has build his resume in troff? I mean, its simple, available in every *nix and absolutely ideal for such an simple document.

This reminds me of writing my resume using nroff[0] when I was a junior engineer years ago. Times have changed but I get why he did it, even though I doubt I would have chosen the same tooling.

0 - https://en.wikipedia.org/wiki/Nroff

I did something similar a few weeks back with Jinja: https://github.com/drproteus/resumaker. Great minds and all that.

Points for originality, but it does seem a little complicated. I did something like this about six months ago, but in HTML, CSS, and zsh. As a next step, try testing your output with a free ATS parser.

Seconded, about trying to make sure it's ingestable by various ATS software.

I had a resume in TeX, distributed as PDF, which I verified could be parsed as text by open source PDF readers, but later learned that ATS software had still been silently throwing away my resume.

You can also try uploading your to the various job sites (e.g., LinkedIn, Indeed, Wellfound), if you don't already have a profile there, and see what they do with it.

You can also test it when applying to employers that use one of the popular SaaSes (the kind that asks you for your LinkedIn, then makes you upload your resume PDF/.doc, then makes you use Web forms to fix what they parsed).

(I currently do my resume in LibreOffice, and distribute as PDF, on the assumption that will be closer to the MS Word output that ATS sees the most of.)

Do you have any links to free ATS parsers? This is an interesting angle I hadn't considered.

I have considered it, but didn't find any parsers that didn't creep me out.

Any clue if Latex or html works better?

My guts say that only pdf and doc formats matter. I would imagine that it’d be more likely a dev is testing outputs from word or printing to pdf from a browser.

Of your options my thought is HTML to pdf via the browser is most tested.

Really neat solution to build a nice looking resume! You get bonus points for using JSON Resume. I think it's smart to encode your resume in a machine readable format. That way you can generate any presentation you want from the pure data.

That also answers the question so many people seem to have: why not write HTML/CSS by hand instead of using Eleventy. That doesn't work if you want to separate data from presentation

Thank you for sharing. I did my resume[1] in HTML + Bootstrap 3 back in the day but marked it up with Schema.org[2] types and properties.

[1] https://www.amarkota.com/resume

[2] https://validator.schema.org/#url=https%3A%2F%2Fwww.amarkota...

Relevant from 2005: "Word Processing Blues", Tim Bray describes redoing his resume in HTML when Microsoft Word failed him.

https://www.tbray.org/ongoing/When/200x/2005/11/12/Resume-Bl...

Thanks for sharing! I love the idea and did something similar, but with Jekyll on GitHub Pages. I like that it's mobile-friendly but I can print off the PDF as well. https://github.com/pglevy/resume

I'd like to plug AsciiiDoctor-Web-PDF. Simple AsciiDoctor markup + the resume template and you get a really nice PDF and HTML output.

https://github.com/ggrossetie/asciidoctor-web-pdf

Going to plug Reactive Resume here, because it basically does this in an open source, self hostable, easy to use interface.

https://rxresu.me/

The website states that Reactive Resume is open source, but no matter where I look on the website, I cannot find a link to the code.

Can you provide that?

Also question: does Reactive Resume let you import and export in JSON Resume format?

It does allow JSON import/export format, and it used to even allow more granular customization of css before it got a rewrite. Here’s the source code: https://github.com/AmruthPillai/Reactive-Resume

I think I’ll end up doing the same and then printing to a pdf like the article suggested. I previously used Google docs and got more frustrated than I get on even some of the hardest bugs I encounter.

Agreed - just redid mine in plain HTML+CSS yesterday after getting a bit annoyed with Google Docs. I am reminded how annoying margin collapse is but on the whole having more control is nice.

I might have personal preferences for dealing with my resume, but I can't criticize the tinkering itch that this project seemed to scratch.

I think this is clever and unique. Maybe it’s not the most maintainable thing, but can’t we all have a little fun every now and then?

I like it. It looks super clean and professional. You're hired. You can start on Monday

cool - I use just HTML and CSS for mine as part of my jekyll blog: https://josephecombs.com/resume/

But why ?

why not?

Maybe to get experience with eleventy?

Author here—Two reasons, mainly. HTML+CSS is a great layout engine, and Eleventy is a good tool for making development more pleasant. While I have a lot of experience using other tools, e.g., LaTeX, I think they're not as well suited to laying out simple documents.

Disagree. A resume needs to be a professional-looking document, not necessarily a simple one. LaTeX is much better as the primary format, with plan text and html serving as backup.

Thanks for sharing all this btw, I've been wanting to find a good static site generator that fits my needs and this actually led me to it!

You are giving me “how” and I was asking “why”. No biggie but don’t really see why

save yourself some time and just write your resume in a google doc and export it to whatever format you want

why is the robots.txt in html? or is it

Looking good!

The end result looks like it can be made in pure HTML, not even CSS is needed.

How would you set the font?

Inline style or <font>

<font> was deprecated in, I think, the HTML 4 spec. That was published in 1999. Not a great signal to send anyone looking to hire you and checking your source code! And inline styles are just another way of using CSS!

they asked how to do it, not if it was good to do it.

If inline style is ok, what is the problem with CSS? Actually, it is CSS.

Reply on news.ycombinator.com