professional: https://joel.fm | github/@hwknsj | in/@hwknsj | behance/@hwknsj
lifestyle: https://jpng.info/ | ig/@joel.biz | soundcloud/@joelbiz
This is the source code to my personal website, https://joel.fm. It's very much a work in progress (and probably always will be). Since this is an entirely personal project, it is in no way representative now a closer representation of what I consider to be a "production quality" or "shippable" codebase.
- Gatsby.js (v3 as of March 2021) - https://gatsbyjs.org/
- React.js - https://reactjs.org
- everything hooks
- Node.js (
v15
, compatible>=v12
) - https://nodejs.org/ - Yarn - https://yarnpkg.com/
- emotion – https://emotion.sh/
- polished - https://polished.org/
Styled-componentsPostCssStylus (sort of)
Make sure to install the Gatsby-cli npm install -g gatsby-cli
as well as a recent version of Node and Yarn. This was developed with Node v15 so I can't guarantee it will work properly with very old versions of Node.
Clone this repo, open it in your terminal, and run yarn
to install dependencies. Then run yarn start
to start the gatsby development environment at http://localhost:8000
.
In order to run the following formatting / linting scripts, you may need to globally install eslint
, prettier
, and import-sort
which are implemented via husky
.
yarn run format
– formats code according to StandardJS syntaxyarn run lint
– runseslint
onsrc/
yarn run build
– shortcut forgatsby build
, creates a production version with optimized images, minified files, and all sorts of other optimizations
- Write tests
- Page transitions
migrate to gatsby-plugin-image✅ v1.1.1
- Updated gatsby 3.0.0 -> 3.0.2
- Implemented page queries to increase page load performance (as opposed to static queries)
- Migrated to the gatsby 3 recommended
gatsby-plugin-image
overgatsby-image
- Converted all CSS to
styled-componentsemotion - Cleaned unused files / comments / junk code
- Upgraded to gatsby v3
- Custom
.babelrc
and more coherent.eslintrc.js
There are some files in the repository that are unused in the actual build. I chose to leave them there because they serve as a starting point / reference for features I plan to implement or changes I plan to make. Also it's my website and my repo, so there.For uBlock Origin users, the cosmetic filtering feature removes some links in the navbar which obnoxiously offsets the site logo and left nav. I'm unsure how to avoid this since uBlock's cosmetic filtering seems to hide any elements with social media links or text.- Don't use
social-*
in your CSS definitions, easy enough
- Don't use
If you encounter a bug, I offer a $100,000 reward*
*subject to change at any time