Digital treehouse: making my personal site less static after 2 years
I built my first personal site 2 years ago. I had only learnt about the existence of UI just a few months prior (I come from an international relations background), and acutely remember being floored by the sites of Brian Lovin and Linus Rogge — sites that were visually beautiful but were somehow also scalable personal systems in of themselves. You could visit these sites a week later, find new things to read and awe at, and peek into the personal, growing worlds and sensibilities of the website author.
My first site was the perfect representation of my early perspectives on UI. The only font I knew by name was Inter, the only platforms I felt comfortable using were Editor X and Webflow, and my skills then limited me to the creation of a very, very static one-page site with the occasional preset animated pop. To say the least, I’ve always felt an ever-looming itch to refresh my site.
So this new site is an attempt at making a larger, more complex, more alive site that reflects my learnings from the past 2 years. At the moment, the site has the functionality of a basic CRUD app, allowing me to easily add new components and content. But I don’t dare call my site an actual app seeing how I sort of cheated — you’ll see what I mean.
The harsh truth is that the current version of the site I’ve shipped is but half complete, nothing but a pretty coat of paint. Sure, it has some nifty buttons and interactions here and there, but a portfolio is incomplete without case studies or at the very least shots of projects and links. I am aware of this fatal sin, yet I decided to publish the site anyways because of 1) I’m currently un-hirable seeing how I’m under slave contract with the Republic of Korea Army for the next 120 days, 2) even after weeks of iterating, I haven’t come up with a satisfactory layout for my projects page (I love Chester’s design), 3) publishing my site and leaving it open to public scrutiny will hopefully give me enough peer pressure to get off my butt and finish my case studies.
Although, I should mention that I’m not necessarily in the best position to comfortably push updates to my site. Being stuck in the mountains, only a few kilometers from the DMZ, not only do we have mind numbingly horrible reception (no Wifi, only cellular data), but 1) I only have access to an iPad, so I have to make do with the mobile versions of Figma and Framer, which isn’t exactly a pleasant experience (the tablet version of Figma doesn’t let you scroll or zoom around — tho I try to make do with an app called Figurative), 2) daily tech curfews mean I only get to work on my site at night for 2 hours a day, 3) studying is almost universally frowned upon here, seeing how tinkering around in Figma isn’t exactly “macho”. If only Figma was a protein shake.
Fonts: Matter, PP Mori, Iowan Old Style
Stack: Framer, Figma, with sprinkles of HTML/CSS, JavaScript
1. Floating Nav Bar
I’ve always loved widgets, and had been experimenting with the possibility of adding “custom widgets” of my own to the site. In the end, I don’t think the floating nav bar is close to what I deem to be a live widget with live data, but it works like a “static” widget of sorts with the occasional update to its content. The behavior of the interface itself is completely built with hovers and overlays, and I had to build variations of the floating nav bar so that it was responsive to smaller screen sizes.
I left the basic navigation to the top nav bar, with the goal of having the floating nav bar link to the more “personal” sections of my site. I’m assuming that the floating nav bar will become the most trademarkable aspect of my site — but there is so much more room for experimentation and improvement.
2. Shortcuts
One of my biggest struggles while building this site was choosing the sort of buttons that I would add to the floating nav bar. Early on I knew I wanted something that looked like a music player and that there would be links to the Timeline and Contact overlays. But I wasn’t satisfied with just 3 buttons — I needed one more. I initially had the the idea of adding a Bookmarks page with personal curations, but it would’ve become redundant because of the Currently page. I also knew that I wanted something that was more functional and interactive, so I played around with the idea of a guestbook (like Seungmee Lee) or an FAQ page. But then I came across Atakan’s website and was immediately hooked. I wasn’t able to add keyboard commands, but I was able to come up with a pretty decent second-hand version of the original on Framer.
All it took was another overlay, plus multiple invisible components that immediately animated upon hover. In the future, I do hope to add actual cmd+k functionality to the shortcuts feature, but this version will have to do for now.
3. Pseudo CMS
I built the Currently and Timeline pages with the purpose of them serving as my own public-facing, short-form journals that I could regularly update. The Currently page consists of some dynamic content such as links and images, as well as a more “handcrafted” custom design, so I knew that a CMS system would come in handy. I already knew that the Timeline page would be easier to scale seeing how it was a very simple, hierarchical, top-down design with text and an un-resizable image box, so copy and pasting would’ve done the job (although I was still able to turn the process into a more “classy” system with components).
Unfortunately, I found out midway that my pricing plan limited me to only 1 CMS collection, which I had already reserved and setup for my Writings page. Not wanting to have to pay double for a Pro plan (I’m paid less than half the minimum wage here in the army), what I’ve been able to do is create the illusion of a CRUD app through Framer’s components feature, bypassing Framer’s own CMS feature, just so that I wouldn’t have to pay for extra CMS collections.
The “system” is completely scalable, automatically responsive, and very easy to update (as easy as filling out a form), so while it is admittedly not a real backend, it works perfectly fine for my purposes. Framer pros might laugh at the supposed obviousness of my choices, but I’m pretty happy with how it turned out.
4. Digital treehouse, easter eggs, fun features
Honestly, even tho I call my site a Digital Treehouse, there isn’t much “treeness” in the design of the site itself. I have just always loved the concept of a treehouse since I was young, and adding the monocle of “digital” seemed like a cheap way to sound novel hehe. No deep philosophy behind the name unfortunately.
There was already a plan in place to dedicate an entire page to my extracurriculars, but I wanted something that would give a quick summary of the highlights on my about page. Coincidentally, I was talking with Junhee from base, and he introduced me to the work of Nam Jun Baek (남준백), a Korean artist who became famous for stacking retro TV boxes together, creating a grid layout for constantly moving art. The summary of hobbies grid, although admittedly a simple design, is my favorite part of the website.
I also wanted the site to represent my refined comedic tastes. In the end, I ended up using/wasting one of my precious 10 Framer pages on a stupid pun. Was it worth it? Definitely. Planning on adding more of these silly easter eggs and other interesting overlays in the future.
Am I satisfied?
I don’t know about you, but my short journey in design has been driven by what I might call “productive self-loathing”. On one hand, it is this self-loathing of thine own designs that drove me to pursue the healthy habit of even attempting a redesign of my site (Brian Lovin wrote a great piece about this). Yet, this self-loathing can also be counter-intuitive, seeing how the immediate mistrust that I feel towards any design of mine leads to a never-ending cycle of second-guessing that means weeks or even months of static progress.
I sometimes wonder if one of the qualities of a good designer is a person who is capable of feeling “satisfied” about one’s design. After all, you need to ship something at some reasonable time, right? That same logic, however, doesn’t seem to apply to personal projects. Because no matter how many “deadlines” you personally subject yourself to, in the end, they are but fake deadlines that you’ve created for yourself, and your brain can’t be fooled by itself. In the end, all of this means that any personal projects of mine require a substantial amount of time to iterate and iterate and iterate for me to feel any level of satisfaction.
And indeed did I go through countless iterations. I’ve been designing this site for the past 4 months. I actually had a shippable version of the site 2 months ago, but somehow couldn’t bring myself to click publish.
Thankfully, I’ve now arrived at a sufficient level of satisfaction to bring myself to finally pull the lever. But I’m not done designing this site — the hope is that as I grow as a designer, the site will naturally grow alongside me.
Learnings and future improvements
The first person I sent my site to was Seungmee Lee, an interactive designer at Dell who I met on read.cv. I’m mentioning her because she probably sent the most helpful chain of texts I’ve ever received in my life.
Needless to say, I think I’ll be using her texts as a checklist for future iterations of my site. Some of the points she brought up: a collapsible version of the floating nav bar would prevent the nav bar from distracting the user from other important CTAs on the main pages, the necessity of project pages, and many other amazing points.
Other notes for future reference:
- I need to figure out a way to add filters and tags to posts on my Currently and Timeline pages, so that the page doesn’t become too crowded in the future and I can navigate through posts by date and category. Would’ve been easy if I had access to Framer’s CMS, but I don’t.
- Unfortunately, Framer doesn’t allow you to export code, meaning I have to pay for annual hosting on Framer. I wish I could do what I did when I used Webflow and paid to export the site as a separate HTML/CSS file to host the site for free on Github Pages or on Netlify (by linking to my Github repository).
- I want to add a “summary” modal as an overlay.
- As mentioned, add cmd+k functionality to the Shortcuts overlay.
- Compress the videos on my site more so that it loads faster and I get a better score on PageSpeed Insights.
- Of course, finalize my Projects page.
- Redesign my Writings page because I’m not satisfied with it.
- Experiment with the “live journal” concept of the Extra page. Make it more fun, less static.
- Add a Kakao ID page (maybe a future case study to be written) because Kakao doesn’t seem to have a specific linkable address to Kakao profiles. It was a point of controversy on Kakao’s open developer community.
- Add copy email address functionality to the Contact and Shortcuts overlays. I know that Framer has a clipboard function, but the interface is inconveniently un-stylable for my purposes.
- I made the mistake of not redirecting my old domain to the new site…might have lost all the progress I made on the SEO front. Oh well.
Anyways, that’s all. I’ll use my site’s Timeline as a Changelog and add more updates there. Wish me luck!
