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/.
- 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/
- Hugo static site generator:
- (as much semantic as possible) HTML5 for markup
- CSS3 Grid, Flexbox and Media queries for the responsive layout
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.
content/work/*.md: job entries
- README.md: this very file
Everything else should be relatively abstract and reusable as is.
As it is well described in the CSS-Tricks article mentioned below in the credits section, named CSS
grid-template-areasare 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";
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
- the file name (without
.md) of new added content will be used as CSS class, remember to add it somewhere in
grid-template-areasin order to properly position the new section
titledefined in the front matter will be displayed as section/work title
- grid order defined with
grid-template-areasis not respected when printing with Firefox, the normal (weighted) markup order of content sections is used instead
MY_HOOK=.git/hooks/pre-commit echo make pre-commit > $MY_HOOK chmod +x $MY_HOOK
PS Netlify promptly adds support for latest Hugo (stable) version as soon as it is released.
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