Background
I wanted to create a site that not only showed professional aspects of myself, but also authentically convey who I was as a person. I didn't want to just use a portfolio template that someone else created.
I started off with mood boards and inspiration boards to better understand what I needed and how to portray these feelings in my site!
I started off with mood boards and inspiration boards to better understand what I needed and how to portray these feelings in my site!
Design System
I created a design system in order to map light and dark modes while building the site.
To ensure that both modes were accessible, I created color palettes while making sure that color contrasts between text and backgrounds met compliance ratios set by WCAG.
For the main body and tooltips, I set benchmarks to level AAA (at least 7:1 contrast ratio) as texts here were key information that site visitors focused on.
For captions and buttons, I used level AA (at least 4.5:1) as they required less attention.
To ensure that both modes were accessible, I created color palettes while making sure that color contrasts between text and backgrounds met compliance ratios set by WCAG.
For the main body and tooltips, I set benchmarks to level AAA (at least 7:1 contrast ratio) as texts here were key information that site visitors focused on.
For captions and buttons, I used level AA (at least 4.5:1) as they required less attention.
Site Analytics
Heatmap Indicating No.1 Most Clicked Element
Google Analytics Snapshot
Tooltips
I integrated Hotjar and Google Analytics into my site to understand visitor behavior. The visual insights from the heatmaps and recordings generated by Hotjar were especially useful because they allowed me to see how visitors engaged with my site. Seeing the interactions, I received validation that visitors loved the switch I created on the homepage!
It also informed me that visitors were getting frustrated by the protected page wall, indicating that I needed to create more user feedback.
I added the tooltip to manage visitor's expectations about project pages. This reduced drop-off rates for visitors without a password. It also helped guide visitors to explore the rest of the homepage or to view a project that was open to the public.
It also informed me that visitors were getting frustrated by the protected page wall, indicating that I needed to create more user feedback.
I added the tooltip to manage visitor's expectations about project pages. This reduced drop-off rates for visitors without a password. It also helped guide visitors to explore the rest of the homepage or to view a project that was open to the public.
Inspirations
Bob's Burgers Tina's room
Open Inspiration
@phdjourney room
Hesam's Shiba Room
I learned how to use Blender during the same period I started creating augmented reality filters (which u can read in more detail here!). Isometric rooms have been a staple, along with donuts hahah, in learning 3D modelling. Tina's room from the show Bob's Burgers was my first isometric room that I created in 2020. I was binge watching the series at that time and it was a fun way to see something displayed in a 3D manner that I could interact with!
I decided to create an isometric room to give my site's visitors a peek into what I am like. Only people close to you get to visit your home and see how you live!
I wanted my virtual room to give a studious yet open feeling. I was particularly inspired by Jin (@phdjourney) and her work focused setup that didn't compromise on cuteness and openness.
Because of my design systems experience, I knew I wanted to have day and night modes for the site. This question naturally arose: "Why don't I make day and night modes for my room too!" As a result, the switch was born.
Through web analytics I know that my visitors love playing with the switch hahaha! I'd like to thank Hesam for creating his shiba room that really inspired me.
I decided to create an isometric room to give my site's visitors a peek into what I am like. Only people close to you get to visit your home and see how you live!
I wanted my virtual room to give a studious yet open feeling. I was particularly inspired by Jin (@phdjourney) and her work focused setup that didn't compromise on cuteness and openness.
Because of my design systems experience, I knew I wanted to have day and night modes for the site. This question naturally arose: "Why don't I make day and night modes for my room too!" As a result, the switch was born.
Through web analytics I know that my visitors love playing with the switch hahaha! I'd like to thank Hesam for creating his shiba room that really inspired me.
Ideation sketch of my room
Day Room
Night Room
I started off sketching the overall design of the room and changed things as I built them in blender. I used tutorials and resources from Polygon Runway, which really sped up the process. I ended up not sculpting the climbing shoes and went for a cop-out with just a chalk bag, but stay tuned! :-)
Next Steps
I am incrementally improving the site as I discover new ideas and have new inspirations. Please feel free to check back for any updates and contact me for any queries.
I am currently working on making my room interactive with three.js so visitors can orbit and pan to explore details!
Thanks for visiting my site and have a great day!! 🌻
I am currently working on making my room interactive with three.js so visitors can orbit and pan to explore details!
Thanks for visiting my site and have a great day!! 🌻