by joél hawkins torres

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 (v5 as of 2024) - https://gatsbyjs.org/
• React.js (v18.3.1) - https://reactjs.org
  • everything hooks
• Node.js (v20+) - https://nodejs.org/
• Yarn 4 - https://yarnpkg.com/
• emotion – https://emotion.sh/
• polished - https://polished.org/

Clone then yarn && yarn dev

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.

• yarn run format – format with prettier
• yarn run lint – run eslint on src/
• yarn run build – shortcut for gatsby build, creates a production version with optimized images, minified files, and all sorts of other optimizations

• Optimize font files–why is this so difficult with Gatsby? I have beef with the Gatsby devs because there are several sources/doc pages that give conflicting advice on how to serve local fonts. Not everybody uses Inter!
• update content because it's so old.

• converted codebase to typescript
• upgrade to Gatsby v5, latest node, latest react (v18.3.x)
• update assets (resume, font files)
• do away with annoying useless tooling like husky and lint-staged and prettier, other unused packages.

• 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 over gatsby-image

• Converted all CSS to styled-components emotion
• Cleaned unused files / comments / junk code
• Upgraded to gatsby v3
• Custom .babelrc and more coherent .eslintrc.js

• (2024-09-03) still not convinced fonts are loading on all devices. Hard to find any tools to test this (e.g. block/allow use of local fonts with devtools for debugging, restrict fetching remote fonts, formats to use, or best implementation, @font-face vs other methods)
• 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

If you encounter a bug, I offer a $100,000 reward*

*subject to change at any time