The first concept of this I made by accident when playing with gradients for my home page and I created a grid of blue colors that ended up looking very atmospheric and really stood out to me. I figured I could use the same method to recreate a bunch of other meteorology as well and I ended up with palettes for day, night, sunrise, sunset, clouds, rain, snow and thunderstorm. By that time I was less impressed with the idea of the homepage being exclusively forecast based so I built in a way to account for images as well. The personal site is a constant paradox because you want to show off what you can do but of course the second you finish you already feel like you know how to do the whole thing better. Nevertheless, I'm proud of where this stands currently and I hope you enjoy poking around and finding all of the little details I've hidden in here. A full accounting is below. It includes a bunch of the tricks I've learned from my designer developer friends the likes of Jacob Waites and Mike Wagz.
All of the "weather" palettes that the main menu makes use of.
I built the homepage so that it can also accommodate images in addition to gradients for its tiling.
The about page features a section where you can record and send me a voice memo that will be sent to my texts. This is made possible through Firestore, Twilio, and Next.js serverless functions. When a message is recorded it converted to an mp3 and is then uploaded to Firestore. The link that Firestore returns pointing to the newly hosted mp3 is then sent in the media url query of our Twilio request which sends it as a file to my phone via a Somerville number I registered.
I originally had my Spotify linked under music but then I began thinking about how when people click on your music they're often more interested in seeing what you listen to at a glance rather than going to listen for themselves. So I wanted an interface that showed off this information compactly and at a glance. Using Next's router capability I also added the ability for anyone to make this page for themselves as easily as adding their username in the url while I was at it.
I always look forward to making the 404 page for any site I'm making because you have permission to put really whatever you want. This 404 page has some Damon Zucconi style word art for the link back to the homepage. It also will grab one of my are.na boards at random and flip through the images like a slideshow. Pictured here are two boards: "My favorite album covers" and "Things I saved to my camera roll." The link on the homepage that says 404 grabs a random wikipedia page to use as the slug to get to the 404 page.
Any event on the site triggers the favicon to change to a new emoji from a predetermined set of my favorite emojis.
When you click on the email at the bottom left corner it will copy the email to your clipboard and trigger an animation.
The site makes use of Sanity + Next.js which is very helpful because if I ever want to go back and add/edit a project or my bio I don't need to edit the code. Next.js is helpful because I can statically render all of the project pages. It's featured on the Sanity community page.
The console features a tag I add to everything I make. I learned this trick from Schoooool.
