robsterlini.co.uk is built using HTML, CSS and a sprinkling of JS. There’s no build step, no complicated pre/post-processing because the site is just 3 pages (and 2 of those are error states).
The two main webfonts are Mackinac by P22 and Clone by Rosetta which are self-served and subset using Font Squirrel.
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 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 Gielinor reference 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!
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!
A site is no good if it’s not up-to-date, the CV should have information added wherever relevant.
- Everything should work without JavaScript enabled
- All colour contrast should be AA, and AAA with the high contrast preference
It’s okay for it to be improved iteratively… there will always be more to do!
robsterlini.co.uk has gone through a few (a lot) of revisions over time, and with some poking and prodding I’ve been able to rescue a few notable years. They’re to be consumed as seen, no fixes (other than ensuring the builds ran) were made, so be kind while you’re judging me!
- 2022.robsterlini.co.uk
- 2019.robsterlini.co.uk
- 2018.robsterlini.co.uk
- 2017.robsterlini.co.uk
- 2015.robsterlini.co.uk
- 2014.robsterlini.co.uk
Shown on the 2022 archive build
- The last pizza recipe you’ll ever need
- Better CSS strikethroughs
- The right tool for the wrong person
- Instagram is nothing but a highlight reel
- Light & dark mode, plus…
- A fresh lick of paint
- Parkrun changed my life
- I’m a triathlete
- My first three months at Fueled
- Opentype & ::selection don’t mix
- Responsive web design techniques
- 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 - Immediate punctuation (full stops, commas, colons etc) lives outside links (as decided by Twitter)
To run the project locally just open index.html in your browser 🎉
robsterlini.co.uk by Rob Sterlini is licensed under CC BY-NC-ND 4.0
