Skip to content

robsterlini/robsterlini-frontend

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

Rob Sterlini

Under the bonnet

robsterlini.co.uk is built using Eleventy. The templating is done in Nunjucks and spits out HTML based on data stored as a mixture of JavaScript and JSON. The styling is pre-processed using Sass and inlined to reduce the need for an extra HTTP request; some pages have extra styles which are inlined in the same way and served on a per-page basis.

The two main webfonts are Mackinac by P22 and Clone by Rosetta which are self-served and subset using Font Squirrel. Code blocks are set in Fira Code and served (only on pages that need it) by Google Fonts as a variable font.

A heavy focus on all things typographic come from a wonderful undergraduate education experienced at the Department of Typography and Graphic Communication at University of Reading – if you love type and/or design, it’s the place to be educated!

The embedded tweets (as found here) are built off the back of [Kyle Mit’s plugin](https://github.com/KyleMit/eleventy-plugin-embed-tweet].

The theme picker (originally just a light/dark mode) is now heavily inspired by the one found on Max Böck’s site, kudos if you understand the little references in there. It automatically selects a theme based on your browser and contrast preferences, but then stores an overriden selection in localStorage for next time you come back! The code for this can be found in theme-selector.html

Core principles

Don’t overcomplicate the build

It’s easy to keep adding things, but for a site this small, it’s important to validate it’s use. That said it’s a playground with no stakeholders, so it is always an opportunity to test things and have fun!

Regularly update time-sensitive information

A site is no good if it’s not up-to-date, the CV should have information added wherever relevant.

Make it work for everyone

  • Everything should work without JavaScript enabled
  • All colour contrast should be AA, and AAA with the high contrast preference

It will never be finished

It’s okay for it to be improved iteratively… there will always be more to do!

Styleguide

  • Use British English with a casual tone
  • Use single quotes for speech
  • Separate items with a spaced en-dash, represent durations or ranges with an unspaced en-dash, join words with a hyphen
  • Use correct micro-typographic glyphs – × not x etc
  • Use non-breaking spaces – either  , \xa0, or   (Space) – between the final two words of anything that might split over two lines to avoid typographic orphans
  • Immediate punctuation (full stops, commas, colons etc) lives outside links (as decided by Twitter)

Setup

To run the project locally:

$ npm i
$ npm start

To build the project:

$ npm run build

License

robsterlini.co.uk by Rob Sterlini is licensed under CC BY-NC-ND 4.0

About

Frontend developer, typography enthusiast, amateur triathlete & lego master builder.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published