Vanilla javascript and CSS with no 3rd party libraries (except Maps).
The site is designed to be as small as possible so it will load quickly and smoothly on even the shittiest internet connections. You only download 60kb of data on page load (yes, including fonts).
Around of 250kb of img assets are lazyloaded as you cycle through all the sections. Thumbnails (~ 800kb), photos(~ 35mb if you open every single one) and maps (850kb+) are loaded on demand only.
Using MapboxGL to build some shmancy vector maps with geoJSONs. Connects to Firebase Storage to pull latest rides from Strava.
Using a smaller 3rd party package called ga-lite, a subset of Google Analytics without any of the bloat I dont use or need.
Resources Things I used during the development process.
- svgo-cli - svg optimisation
- sqip - svg based polygonal placeholders for photos
- Clippy - CSS
clip-pathplayground - Rides scraped from the Strava API using Python.
- Encoded polyline algorithm by Google - reduced file size of all GPS coordinates by over 97%.
- Sqoosh - A better png compressor to strip unused colours out of images
- Easings
SASS source files in the scss directory. All JS files in the js directory, then combined and minified for production.
Map related functions are in js/maps.js but the request to get latest versions of MapboxGL from the CDN is in js/scriptj.s.
All colour related files are named bucket.*.
Feel free to reach out if you have any questions about my code. Happy to help - rohanb10@gmail.com