Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

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

alexanderbird.software

A classic resume website... excessively customized technical stack when there are plenty out of the box tools that would do just as well 😅

Architecture

  • content is in YAML files
    • in separate files because I like editing my copy as a separate activity from the web dev part
    • in yaml files because I find the format convenient for copy writing and for ingestion (especially multiline strings and alias/repeated nodes)
  • HTML templating is done with Handlebars -- a lightweight templating engine is plenty for what I need
    • I have considered a full JS frontend framework (say, React or Angular) and prerendering all the pages, but it hasn't seemed worth it yet
  • HTML partials are sorted according to Atomic Design categories because I find it convenient
  • CSS is written in SASS and stored next to the relevant HTML partial
    • I'm using BEM with the notable exception that each class name is prefixed with the Atomic group it's part of -- e.g. molecules__tech-stack__box
  • When YAML content needs to be transformed before being rendered, that transformation happens in /gulp/utils/handlebars-helpers.js
  • I'm not running client side JavaScript (except for a few trivial lines) because I wanted to explore using CSS :target selector to change state with CSS
    • I thought this website would be a good opportunity to experiment with the technique so I could learn more about CSS
  • Icons are SVGs, combined using gulp-svg-sprite and displayed with SVG <use href='icon-name'></use>
    • I've made the icons from scratch (because I like that I can customize them, and to learn more about SVG)
    • colors (sometimes multiple for one icon) are set with CSS custom properties.
      • In the SVG: stroke: var(--icon-color-primary, #000)
      • In the CSS for that use of the icon: --icon-color-primary: yellow;

Deployment

Netlify -- because it just works.

Netlify Status

Development

npm run dev

Testing

Visual Regression Testing

Setup

  • latest Ruby
  • bundle

Usage

  • To test: npm run test
  • After inspecting the results, if everything looks good, then run
  • npm run test:reset to lock in the new results

Releases

No releases published

Packages

No packages published