Disclaimer

Fork away, reverse engineer, have a blast, reach out to me with questions!

But. Please do not just replace the content (e.g. with your crypto marketing) and republish the site as your own. I wish I were joking, but this has happened twice. That I know of.

bryantcodes.art

Hello! This is my portfolio site bryantcodes.art. It is a wild work in progress (currently barely at an MVP stage) and also my safe place to experiment with new things I wanna try. Examine the code if you dare. Ha! I'm slowly going through and commenting/cleaning things I hastily created. There are actually a few novel solutions lurking in there that I'm proud of--maybe future blog posts!

Want to know how any particular thing was acheived? You should write me because I love nerding out about this stuff and my gf and dog are honestly sick of hearing about it.

Great libraries you should try

In no particular order, here are some cool things I found and liked:

• Once you go Typescript, you never go back.
• CMS is Sanity.
• Typesafety in sanity via sanity-codegen.
• Frontend is currently Next.js, maybe one day soon it will be Astro.
• Hosted on Vercel.
• 3D rendering via Three.js and the AMAZING declarative implementation React Three Fiber.
• UNBELIEVABLY VALUABLE SET OF THREE.JS TOOLS: Drei. Must have. I used it to embed HTML in the 3D space, to quickly spin up GLSL shader materials, to draw text, and loads more.
• 3D accessibility tools via @react-three/a11y.
• Useful a11y hooks via react-aria.
• Best way to handle complex touch/click interactions: @use-gesture/react. (E.g. used here for the drawing canvas.)
• Not for everyone, but I wrote nearly all the CSS with Tailwind and I love it. Haters? Let's debate. lol!
• My new favorite way to manage state: Zustand. I used to use Redux and/or Context, but Zustand beats both for nearly all my state abstraction use cases!
• Loads of great, typesafe react hooks usehooks-ts.
• Still trying to decide which I like better between framer-motion and react-spring.
• Observe font loading with use-font-face-observer. Helps me wait for Roboto to load before I paint to canvas.
• Great SEO solution for Next.js you probably already found: next-seo.
• I stole my loading spinner from Pure CSS Spinners
• Something I use to quickly spin up UIs to tweak e.g. animation variables in the browser while developing: Leva.

Notice something? Like 50% of the coolest things come from pmndrs. I am a HUGE fan of these cats.

Dev

Its a "monorepo" (sorta?) with a frontend and backend dir. I like em together so I can easily facilitate typesafety and version changes that are tightly coupled.

Frontend - Next.js

TODO: Probably Astro would be better for this site, since I only really SSG a single page in the MVP. (Technically, I opened up endpoints for each 3D scene, but those are really only meant for dev convenience. I dont think I want users drilling into a particular scene directly.) And I'm totally abusing _app. I'm entertaining a few future features, though, for which Next.js might come in handy... So iunno. It's fine for now.

The usual commands in the frontend dir:

# Build, useful for checking if you have deploy-blocking issues
yarn build
# Work on the site
yarn dev

Backend - Sanity

IMPORTANT: Don't forget to generate types if you change the Sanity schema! See below.

In the backend dir:

# Basically I aliased the sanity CLI commands:
yarn dev
yarn deploy
yarn build

# Codegen for cross-stack type-safety,
# run this any time you edit the schema
# to generates types used in the frontend code.
yarn build:types