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.

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.

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.

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.

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

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