This site used to be really ugly. I have no idea why I chose to go with a brown and yellow color scheme before (I like bees, I guess?) but anyway, I'm glad we've moved away from that, haha. I decided to rebuild my personal site into a complex technological monster as a way for me to learn as much about full-stack development with enterprise-level tooling and pipelines as I possibly could. I wanted a project that would help me stand out as I was finishing up my college career and starting to look for a job, and this site is the culmination of that desire! Thanks for taking a look :)
Sites like these are inherently based on content, and I needed a way to manage all the content that was also extensible for my future needs. That's why I decided to host my own Content Management System (CMS) using the open-source Strapi CMS on Railway, with Cloudinary for media hosting and optimization. While I'm currently working on migrating from the cloud to my own server infrastructure, this was the easiest for rapid prototyping in the early development stages. Using Strapi, I was able to build my own content schemas, such as collections for Experiences, Projects, and Icons, as well as Single Types for my Footer and Nav. I was also able to design a GraphQL layer using Apollo Client for content mapping. As a result, every part of the site is dynamically loaded and can be changed in real time with updates through a centralized dashboard without needing to modify the code or rebuild the project. I also have two instances of my CMS deployed for two separate pipelines -- dev and prod! That means I have mirrored Postgres databases for each development pipeline so I can go crazy on the dev builds and schema changes without affecting the production site. This was huge for accelerating development as I didn't need to be as careful when making big changes to the site design.
I also decided to go with Vercel as my frontend host provider due to their generous free tier and because it worked very nicely with NextJS, which I was already using for my project. With some simple GitHub integrations, I was able to have live previews for every commit I made, pipeline-dependent environment variables for my CMS instances, Static Site Generation (SSG), React Server Components (RSC), deployment checks for Pull Requests (PRs), periodic content revalidation, and more!
Lastly, I took inspiration from the Vercel conference badge to build my own interactive 3D badge using ThreeJS, React Three Fiber, and Drei, which bring WebGL models with real-time physics to websites. I wanted something that would really wow people who came to my website, and I think it went swimmingly! The rest of the site was built using React, TailwindCSS, TypeScript, and NextJS. Almost everything you see is a component, and most take advantage of RSC and SSG to build most of the site's static data at build time, saving a ton of time and resources for the client and server. For you, that means this site loads fast!
All in all, building this site has been an incredible experience that took many months from inception to initial deployment and has been something I continuously refined ever since. I have so many other big ideas and features I want to add, so stay tuned!