This website was made to replace my old one which is still accessible at the time of writing. I hold this website near and dear to me - I made it with minimal experience in web development which shows in its minimal HTML/CSS/JS construction. It was a stylistic choice as well since I enjoy the clean no-frills look of such a simple stack and allowed me to be more creative with the content that I highlighted on it (after all, constraints brew creativity). Although, it was quite restrictive as building upon the exisiting infrastructure was difficult.
In fact, I have a threejs project that is still hosted on the old site. while the functionality is perfectly fine without expanding upon the existing stack, the use of basic UI components leaves something to be desired.
I wanted a site that I can use to develop, host, and highlight new projects. Above all, I wanted it to be excited to contribute to it. Painless was a priority.
A modern stack was a must for my new site. I elected to go with the stock-standard Next.js and React setup, dressed up with Tailwind. Additionally, I am using remark for blog posts since I want it to be minimal-upkeep, as streamlined of an experience as possible for posting.
The design of the site itself was a large consideration for me. Initially, I wanted to employ threejs in creating a 3D navigation menu. Something that invoked the dynamic UI of the PS2 while being sleek and playful. I created a mockup with multiple 3D objects that could be flipped through on a carousel, each one leading to a different page of the site. However, I found the design to be gimmicky as there was no reason to return to the home page. It would be extremely difficult to incorporate design elements from that selection screen into the rest of the site while keeping the experience elegant.
That idea was scrapped and I returned to the drawing board. I know I wanted something slightly askew from the standard website layout, but I also wanted to keep it familiar and easy to navigate. While searching through loadmo.re's library of left-field site designs, I stumbled across everything can be scanned. A showcase of the work of a designer specializing in scanning scraps and trinkets, it reflects the quirkiness of the mediums with a responsive and varied presentations. I absolutely adore this site, it is incredibly easy to interact with while feeling like a truly special space.
I took inspiration from the use of free-floating objects to mimic a messy desk. My messy desk. I figured a careful curation of objects would create a sense of personality that an about page would not be able to get across. After all, I really dislike talking about myself.
And so, after working on it for a couple weeks during lulls in the demand of schoolwork, I created a scalable site with a landing page that resembles a digital scrapbook of sorts. Items can be easily added and removed as they are pulled from a list. These items are then rendered, made responsive, and then physics-enabled. While it could be a simple drag-and-drop, I wanted to emulate the Android Jellybean easter egg. In elementary school, when Android Jellybean was the latest release, I would ask my dad for his phone in moments of boredom. It was his work phone so he certainly didn't have any games, but the easter egg was my saving grace. If you entered the settings app and tapped the version number multiple times, you would be given an interactive screen-saver where you could flick jellybeans around. In an effort to feel like more of a desk-toy than a static portfolio, I gave the items momentum so you can banish them to x and y coordinates far beyond your screen.
Overall, I am happy with the final product. There is much work to be done and I will likely not keep up with posting about each change that I make. Instead, work will be done in the background as I (hopefully) write regularly about other thoughts and projects.