new website, new beginnings, masonsong.com v3.0

the third time is the charm
daily / thoughts
from
2021-11-23

i've done it.

โ€

i've made another contribution to the world-wide-web.

โ€

the last two versions of masonsong.com served a single purpose: my online design portfolio, which accomplished its job wellโ€” by successfully landing my previous and current job, which I'm very thankful for.

โ€

just like most so-called online design portfolios, it began with an H1 page title with a cute hand-wave emoji that reads "Hi ๐Ÿ‘‹ โ€“ I'm Mason, and I'm a UX/UI...", followed by some cheesy introduction about myself that I've seen somewhere from my google searches.

โ€

it was meant to be put together once, attached to a resume, and looked at by a couple of design managers, presented during the interviews, locked away with a password, and then tucked away until you feel like you need to fire up linkedin and start it all over again.

the version 3.0

this time, it'll be much bigger than just that. It's going to have a small blog (I'm going to call it "journal" to be a bit fancy), I'm going to document my side-projects, my TILs (today-I-learned), places I traveled, my tool stacks, etc. I'm going to capture, curate, and share all the meaningful experiences that I go through in my life.

hmm... what are the things that i want to share with the world?

from concepts to launch

starting from a blank canvas and creating something without any templates or plugins has taught me a lot in designing and developing for the web. I've hit many roadblocks and frustrations on the way. (i.e., implementing and customizing various .js libraries from other repositories)

โ€

i've spent many after-hours and late nights in front of my rapidly-aging intel macbook pro, trying to come up with the next iteration of my website.

tracking my design & development process has really helped me stay organized along the way

tool stacks

also, a special shout-out to these excellent tools:

โ€

  • notion for organizing research and documentations
  • whimsical for flowcharts and IA
  • figma for all designs and content
  • webflow for all front-end web development
  • stack overflow for custom javascript implementations
  • after effects for the cool looping SVG animations
  • lottie for letting me embed my animations directly on the web

aaaand, it's online!

and finally, today, I've hit the "publish" button and shipped my MVP1 to the world. Seeing something popup when I type in my name, followed by the dot com in the world-wide-web, was definitely a journey worth taking.

โ€

special thanks to hanbat kil for helping out with the scramble-text .js library customization; i would have not gotten the interaction to be how I exactly wanted it to be without your help!