A curriculum vitæ built with modern web technologies

A simple and effective way to keep the CV up to date and always available as an (accessible and blazing fast) web site.

Regardless of the technology used, since long you can always find the most up-to-date version of my CV at https://cv.l3x.in/.

Blog post: https://a.l3x.in/2020/01/31/updating-curriculum-with-web-tech.html

Features

• easy to keep updated: all the actual content is filed under content/, formatted in Markdown
• simply reshuffle the layout editing one CSS property
• fast load times, Google Insights gives 99% thumbs up for both mobile and desktop
• displays decently on any modern web browser (including low-end smartphones and screen readers)
• unadorned printable layout used by the browser Print function
• single section views exposed as /<section name>/, e.g. https://cv.l3x.in/about/

Tech

• Hugo static site generator:
  • generate HTML pages from Markdown content through partials templates
  • compile CSS files from SCSS assets thanks to the native integration
  • expose partial content as pretty urls with section templates
  • all personal metadata in config.toml
• (as much semantic as possible) HTML5 for markup
• CSS3 Grid, Flexbox and Media queries for the responsive layout
• no JavaScript

Usage

Please feel free to fork this repo, just remember to clean up before publishing:

• config.toml: base URL, name, job title and link to GitHub repo
• content/*.md: sections, e.g. about.md
• content/work/*.md: job entries
• README.md: this very file
• static/me.jpg

Everything else should be relatively abstract and reusable as is.

Tweaks

• As it is well described in the CSS-Tricks article mentioned below in the credits section, named CSS grid-template-areas are used to position the various sections on the viewport, which makes it pretty easy to update the current layout when needed. For example:

  grid-template-areas:    =>      grid-template-areas:
    "work   skills"       =>        "about  skills"
    "work   ......"       =>        "work   work"
    "about  ......";      =>        "work   work";
  

  Search for grid-template-areas in assets/style.scss and assets/large.scss for current implementation.

• If you want to add more sections and/or jobs a new Markdown content file needs to be created, e.g:

  • hugo new new-section.md
  • hugo new work/my-last-workplace.md

Caveats

• the file name (without .md) of new added content will be used as CSS class, remember to add it somewhere in grid-template-areas in order to properly position the new section
• the title defined in the front matter will be displayed as section/work title
• grid order defined with grid-template-areas is not respected when printing with Firefox, the normal (weighted) markup order of content sections is used instead

Deploy

You could evaluate to install Stylelint and Html5validator, then add make pre-commit as a pre-commit hook, e.g.:

MY_HOOK=.git/hooks/pre-commit
echo make pre-commit > $MY_HOOK
chmod +x $MY_HOOK

I'm using Netlify to automate deployment at each new commit pushed to origin/master, see the official documentation if you want to know more about their CI/CD features.

PS Netlify promptly adds support for latest Hugo (stable) version as soon as it is released.

Credits

Many thanks to:

• Ali Churcher for her excellent CSS-Tricks article which gave me the idea in the first place
• Tim Holman for the modern take on the fork me on Github link (in pure SVG!)
• Netlify for their amazing platform and (free) services
• Francesco Albanese of Studiocompresso for continuous feedback plus shooting the profile picture