To mark the start of finding a new job and moving to the UK, I revamped my website.

After looking at several inspiring websites, I decided that for this revamp, I wanted to express more of my personality as well as make it fun! I was mainly inspired by lynnandtonic's website, and have been fangirling about it ever since finding it. Not only does it showcase really cool and fun projects, but it also impressively showcases annual iterations of the website in the Archive page, which I find motivating and encouraging. I am especially wowed by the wild and imaginative digital easter eggs on the websites (e.g., re-sizing the window to show animations, dragging and dropping icons to change the theme of components).

Without further ado, here is how I revamped my website.

The illustrated cover

Highly inspired by lynnandtonic's 2018 website, which features a Bob's burger-styled illustration of lynn in her room, I decided to sketch myself in our (Dan + my) HK home in the style of LittleDigits' illustration of Hilda from the Netflix TV Series Hilda. I really liked the idea of paying homage to our humble home in HK seeing as we would be moving away to the UK soon.

Since I do not have a drawing tablet/pad, the illustrations were drawn using my mousepad in Figma. I roughly traced a photo of our home and a sketch of myself.

Home page fun elements

To welcome visitors, I thought it would be cute to have a little animation of myself saying hello. The animation was created by using @keyframes CSS to run through the six SVG images that make up the frames of the animation. To prevent lagging in the animation, I had to preloaded the images.

 Animation frames of myself created using Figma variants

For the digital easter egg, my plan was to use the light switch of our HK home to toggle the light/dark mode of the website. It was very satisfying to create the light switch using CSS (see my CodePen), since I am new to drawing with CSS. As it was my first time implementing dark mode, to toggle the theme of the website, I followed Dmitry Borody's post about theming web applications with SASS, which I found rather clever!

See you next time!

That's pretty much all for this time's revamp! Now we must wait for whenever another wave of inspiration and motivation to revamp the site hits me.

My first-ever version of my website was in 2019, just after I graduated from university. The website lasted me through my first job. Below is a screenshot of what it looked like. Back then, I kept the style minimalistic and chic. Many of the projects showcased were past university projects.

Last year, I created a new version of my website using Jekyll. It all started when I came across Ian Li's website during my time as a researcher. I really liked the website because, although the design is simple, clean, and easy to understand, it still manages to present character and individuality through the color scheme, illustrations, and layout. I also enjoyed looking through the fun personal projects.

Inspired by the website and his work, I dug into his GitHub account to get some hints on how he implemented his website. That was when I was first introduced to Jekyll! After some self-learning and trial-and-error, I am now a fan of Jekyll. Unlike how my original website (source code) was built, which involved a fair amount of copy-and-pasting HTML code (e.g., for the navigation bar and footer), Jekyll produces a complete static website based on given content and templates. Using Jekyll reduced code repetition and allowed for easier content management of the website.

I learnt...

• how to use GitHub. The first time I created a pull request on GitHub, it was intimidating. But now, I feel much more confident in using Git. I really appreciate the workflow and how it allows coders to collaboratively work on the same project. By letting others review my code and reviewing others' code, I have learned a lot.

• what tickets are. Took me a little longer than I'd like to admit to realise what "tickets" are.

• how to write clean code. From watching Uncle Bob's videos, which were introduced to me by an experienced developer, I learnt one school of thought regarding coding practices.

• the importance of a good work space. This is something I didn't think was as important before. I learnt the value of keyboard shortcuts, essential keyboard configurations (e.g. changing the Caps Lock key to Control for easy access of keys), time-saving development environment plugins, and ways to make the terminal easier to work with (e.g. Fish, Oh My Zsh). Apart from these practical tips, I found that each developer in the start-ups had their own individualized desk things (i.e., clickety-clack keyboards, mouse/touchpad, fidget toys, headphones, fun mugs), which spoke to each developer's personality and inspired me to invest in a set of my own.

• how to use an Apple laptop. Being cheap, I never owned a personal Mac laptop prior to working in these start-ups. Using an Apple laptop for work has successfully convinced me to purchase my own Apple laptop.

• how to strive for a CI/CD or Agile work flow. This involves automating tests as much as possible to shorten the systems development work cycle. I remember, at one point, I had to implement end-to-end tests by simulating what a user would do for various use cases to make the development cycle more efficient.

• what project management looks like. The different start-ups used different project management systems like Trello, Jira, and Notion. In appreciation of the satisfaction of moving the tasks to done, I have also incorporated these systems into my personal life as well via Notion.