nataliemarleny.github.io
A project which forks Primer CSS to build a Githubbified Resume.
I challenged myself to:
- Write as little of my own CSS as possible
- Build a screen-agnostic layout
- Create a working heatmap using d3.js
- Draw my own illustrations
The Primer design system is available for use under the MIT license. Copyright Github 2018.
Primer has been created and is maintained by Github's Design Systems team
d3.js Calendar Heatmap forked from Darragh Kirwan's Calendar Heatmap
Illustrations are drawn (by me) and versioned using Figma. Source file included.
- Show rather than tell my skillset by building a static site resume
- Familiarise myself with the Primer Design System
- Version the process in Git and make the project open source
- Use the visual language and informational structure of a Github profile to tell my story
I cross checked what I was building against inspecting source on my Github profile. I wondered if the semantics of the HTML tags would alter with this being a single static site page, with particular reference to span tags used in the timeline section. Applying heading tags where spans were applied on the Github profile page overwrote some of the CSS styling which undermined the challenge of working solely within Primer's CSS system, and made me question if I was using the 'correct' or rather, 'most semantic' tag.
Regrets started to settle around the time I started constructing the timeline
As I wanted to work quickly I forked the heatmap rather than build it from scratch. Adjustments to the padding or layout would cause the tooltip to break; as the tooltip was a crucial source of information I decided to compromise on displaying the heatmap on mobile layouts.
As the priority with this project was to ship rather than reach perfection I worked using the Primer build CSS (core and product) and forked the documentation landing page for the boilerplate HTML. If this resume was to become an frequently updated project I would take the time to refactor using Jekyll as the CMS.
