4th iteration of JeffLombard.com
The purpose of this site is to serve as an aggregator of all projects and learning I am doing in my spare time.
While wrapping up most of the development for this site I ran web.dev. I was pleased when I achieved this rating. It's not all 100's, but I think the 80/20 rule applies here.
I wanted to highlight some of my favorite parts of this codebase, so that people viewing this could appreciate the time that went into this site.
I decided to use GraphQL, because I thought it was an easy way to aggregate data from multiple sources into one convenient endpoint. See When and why to use GraphQL.
Most of the GraphQL stuff is in /schema
I had a valid use case for refs and used one to trigger the playing of the video in src/src/App.js
I'm using React Router, and created the scenes/ directory to house components that would show in the main window.
I think BrandedButton and BrandedAnchor are some good examples.
I did the FrontEnd designs before I touched any code. See /sketch
The list of filter able tags is autogenerated. I use some convenient lodash methods to flatten the list. See: src/src/scenes/Projects.js
Some nice use of higher-order functions project.filter().map() in src/src/components/ProjectsList.js.
I didn't need a full-fledged grid system because I was using react-grid-system so I made this cool little mixin: media-up($breakpoint) and used it in components like book.
It is essentially just a wrapper around media queries, that accepts breakpoints [sm,md,lg,xl] as an arg. It then uses the globally set value for those breakpoints.