Skip to content
Alexander Fortin's curriculum vitæ
HTML CSS Makefile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes
assets
content
layouts
static
.gitignore
.stylelintrc
LICENSE
Makefile
README.md
config.toml
netlify.toml
package-lock.json
package.json
requirements.txt

README.md

A curriculum vitæ built with modern web technologies

google-insights made-with-Markdown License Netlify Status

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:
  • (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:

You can’t perform that action at this time.