Jan 2025 | My New Visual Portfolio

---

My name is Saachi and today is January 31st; I’m 9 months into a 12-month sabbatical. If you’re new here, I’m taking a break from work - data viz analytics for a financial institution - to focus on a research and communication design project. The aim of this project is to: 

1. Understand the current sustainability of urban waterfronts and their future potential to address food insecurity at a community level
2. Upskill in communication, data visualization, coding, and 3D modelling
3. Combine points 1 and 2 into a visual portfolio that doubles as speculative fiction about sustainability on an urban lakefront and four shared meals

Photo by Mark Duffel on Unsplash

I gave myself five rules to follow while building my “About Me” page:

1. In January, build the page from mockup to deploy
2. Cut down on production by only using 3D models I've already made
3. Include at least one D3.js data visualization 
4. Limit AI coding help unless necessary for time management
5. Track changes properly in Git

Since I’d like to use this blog post as a companion piece to the “About Me” page and as teaching material when I mentor other visual analysts, this post is twice as long as normal. 

To help, I’ve divided my experience of making the page into nine sections which can be navigated using the Table of Contents below. Each section is about 300 words and not very technical, but feel free to skip the “how I made” and go straight to how I thought I did on constructing my "About Me" page. 

I already covered the importance of mockups in my August 2024 blog post, So my first step in this project was to open Google Docs and jot down the following:

• The main point of the website: "tell people about myself and my skills in a way that also demonstrates the level of my skills"
• The main audience the website is for: "hiring managers and other visual analysts"
• A full outline of the site, including all the written content and a description of the visual content. 

If I were making this website with or for someone else, I would’ve opened up Figma or something similar to make a visual mockup as well. But, I decided to stick with just Google Docs and start constructing my website for three reasons:

1. I was working alone and had a clear idea of what I wanted the page and individual sections to look like
2. I wanted to be efficient at this point to leave lots of time for testing
3. It’s difficult to test user interactions on ReactJS sites using other tools

Art takes the most time because I like making everything myself. That’s why my second rule was only to use pre-existing models.  The majority of my models are food-related, and the majority of those models are baked goods, so I made pastries the visual theme of my website.  This decision also helped me decide my shape language - round - and a colour palette - neutral earth tones and muted orange.

The difficulty was how to make it clear that this site is still about me and my various technical skills in front-end development and analytics, and not pastries. 

Starting a new project sucks. It’s easy to imagine the outcome, but when I think about how much I need to build, and all the steps required, inertia starts to seep in. Therefore, the less time spent in setup, the better.

Thankfully I created a ReactJS template in VS Code last month. It includes:

• All the modules/libraries (helper code) I need
• The CSS style sheets that all projects should have
• Basic font, size, and colour variables, along with six pre-set responsive sizes for mobile-first development
• Basic jsx and html files so that I can instantly publish a page that says “Hello World”, some Lorem Ipsum, and a button

Unfortunately, I can’t share the actual template as it’s a mix of code and best practices from courses by Bruno Simon (3JS Journey) and Ramzi Bach (Slaying the Dragon), both of which I paid for. What I can share are the steps after the template is made: 

1. Create a copy of the template folder in the correct directory
2. Open the folder in VS code
3. Initialize Git to track changes 
4. Connect my GitHub account so I can host the project repository in the cloud
5. Publish the site to Vercel, a “developer cloud to build and deploy web applications”
6. Check the blank project’s performance using Lighthouse and PageSpeed

I created documentation with screenshots for myself, so if you'd like to see detailed instructions, please check: React Website Master Doc.

From start to finish, I made 136 commits. Every time I pushed a change, I checked Lighthouse for mobile and desktop performance. I learned a lot doing this, including why WateryTrees, my main sabbatical project keeps crashing or lagging despite not having much content.

GitHub has a nifty data viz that lets you know how much of each language you used in your project. My "About Me" page, for example, uses 

• 76% JavaScript
• 23.5% CSS
• 0.5% HTML

The Hero section, or my profile picture and header line, is the first thing a person sees on the website. Finding the right picture was the biggest pain of this entire project. I managed to find one recent selfie that had the same colours I needed for my website. Then I found out how image types and sizes can mess up a website’s performance. Fun times.

After the Hero section is the Introduction. I wanted to make a good impression here and encourage the visitor to keep scrolling down the rest of the page. I also needed to start embedding the interactive, 3D pastries that I planned to scatter throughout the site.

So in addition to stating who I was, and what the visitor could expect to read about, I added a couple of food models. If the visitor taps on one of the models, it wobbles and gives them a short message, but does not explain anything else. It might, however, encourage them to keep scrolling and tap the rest of the models. They might not interact with the models though, so I also added a line at the end of the introduction: “...find out why there are bakery items floating about.” . 

ReactJS has multiple ways of making interactive data visualizations, including libraries like Victory Charts, or building the viz with native javascript. So far, D3.js, which is a JavaScript library for bespoke data visualizations, is my favourite. There’s lots of documentation and example code on observablehq.com and d3js.org, and with AI, I can quickly make the visualization that I want. 

For example, I was working on WateryTrees last month, I used ChatGPT4o and this public D3.js code for a radar chart  to create an interactive data viz for a radar web chart. Since I wanted to keep to round shapes for my "About me" page, this radar chart was perfect to show how I would rank my technical and power skills. To prevent over-crowding, I split my skills into three roles - visual analytics, team leader, and digital storyteller. The visitor can tap on the person icons to filter and update the chart. 

For readability, I labelled each data point. and used various opacities of one colour instead of different colours. We’re taught as visual analysts not to rely on colour for meaning, so I wanted to lean into this and impart meaning through size and animation instead. Lastly, I gave instructions on how to interact with the chart, which is also a hint that the chart is interactive and not static, and then I included a summary line of what the chart means and how I made it: "As per this Radar Chart, which was made with D3.js and ReactJS, I'm comfortable as a visual analyst and team leader, and want to grow more as a digital storyteller".

It’s been a long time since I’ve been in school, but not that long since I published a scientific article. It might seem strange to link to marine ecology articles when my current field is tech and finance. But, my PhD was where I picked up most of my 3D modelling, predictive modelling, advanced analytics, and data visualization skills. I made sure to emphasize these skills in this section. 

For the buttons leading to the articles, I wanted them to be related to “research” and keep the pastry theme and round shape language. I also didn’t want to make new models and break rule #2. So, I opened up Nomad, imported a few old cake and book models and arranged them into new scenes. Then I exported a PNG of each scene and put them in front of the same background: a simple orange circle. 

To help with performance, I used Irfan and https://cloudconvert.com/ to convert these images into WEBP images to save on memory, and then “lazy-loaded” the images so that they only load when the visitor is about to encounter them on the webpage.  

My main hobby is 3D modelling, and at first, I wanted to include a gallery of finished renders in the Hobby Sections. Renders are where I make a scene out of my 3D models with proper lighting, and then take a “photo” of the scene through a camera. However, I wasn’t sure this gallery would contribute to the main objective of this website, which is to emphasize my skills as a visual analyst and storyteller. 

Then I realized that I could combine the gallery with an interactive data viz. For the data, I counted the number of food models I had made in the last year or so, which turned out to be 85, and then divided these models into five food categories. I could easily show these categories as a bar chart to demonstrate that I tend to make food models related to desserts and shy away from modelling full meals. Since I wanted to keep to the round shape language, I decided that the bar chart should be a sunburst chart instead.

Like with the radar chart in the Work section, I already had the public code for a sunburst chart and had adjusted it with AI for the WateryTrees project. I continued using AI to help me add a preview thumbnail gallery to the bottom of the chart. 

The thumbnail gallery updates as the visitor clicks on different sections of the sunburst chart. If the visitor clicks on a thumbnail, they’ll see an enlarged image fill their screen. Having the images as previews when the page loads helped with performance, and meant that the focus was still on my visual analytics skills. 

The Sabbatical and Contact sections were just written content, a couple of models for the mini page, and three button links to WateryTrees, this blog post, and my LinkedIn profile page. Since I’ve been writing about the Sabbatical since May last year, the written content took very little time to put together. 

What took the most time to create were the button images; I took the same Nomad and Procreate files I had used to make the research article button images and created three new scenes. Again, I used other programs to turn the PNG images into WEBP to increase performance without losing resolution. 

Suffice to say, these sections were the easiest to put together.

As you can tell from the date range, I worked on this game for the entire two weeks.  When I created the outline for the game, I wrote down specific milestones. The result is actually what I had in mind from the very beginning, but if I only reached the first couple milestones, that was considered totally fine. Every other milestone was extra.

• Milestone 1: Select 10 3D pastry models and add them to the site as interactive components that wobble when the visitor taps on them
• Milestone 2: Create a radial chart in D3.js that tracks the number of pastry models the visitor taps and add it to the end of the page
• Milestone 3: Add a message to each model that is revealed when the visitor taps them, which should encourage them to look out for other models
• Milestone 4: Add a “tutorial model” near the radial chart
• Milestone 5: Add a list of untapped models for the visitor to view near the radial chart
• Milestone 6: Add a celebratory message when the visitor taps all 10 models

My hope with this game was that if the visitor hadn’t found all the models by the time they reach the radial chart, they might scroll back up to find the rest of the models. In so doing, their eyes would catch all the bold, orange words that emphasized my skills.  

Also, it was a fun way to show how 3D models and data viz could be combined effectively. Like the other two interactive data viz on my “About Me” page, I used public scripts and AI to help me manage my time. 

Since I published my site on Vercel at the very beginning, I sent my family and friends the web link and started tests early. At the same time, I continued to test performance using Lighthouse in Chrome’s developer tools and PageSpeed.

Both tools told me that my mobile (and desktop) performance was relatively good, and I never personally experienced lag or crashes myself. The same was true for most users on their phones and all who tested on a desktop. However, a few Android users did have issues loading some of the 3D models. Despite numerous attempts to fix this, they continued to experience load errors. For now, I can only leave a disclaimer for similar visitors.  

Otherwise, I mostly received very positive feedback, along with some surprises like how the bold, orange words looked clickable, which was unintended. For now, I’m leaving as is until I learn how to emphasize the important words differently. 

Photo by Tony Tran on Unsplash

I give myself an 8/10 on the webpage. Overall the “About Me” page performs well for almost all visitors, is responsive and accessible. It was also super fun and quick to build. 

I dock one point because I couldn’t get the three data viz to fit exactly as I wanted, half a point for Android user performance, and half a point for not figuring out how to emphasize certain words without making them look like links. 

As for the rules, I give myself a 5/5

1. I built the whole page in the first two weeks of January, from mockup to fully deployed and tested
2. I only used 3D models I had made previously and did not make any new ones
3. I included not one but three D3.js data visualizations
4. I only used AI (ChatGPT4o)  to help with the data visualizations and wobble mechanics on the model. Otherwise, I used old or public code. This helped me manage my time wisely
5. I used Git to track changes from the very beginning 

I feel like I’ve gained what I wanted from this sabbatical: a new playground where I can hone my skills in digital storytelling. In February, I want to continue WateryTrees as well as plan for life after this sabbatical.  

Thank you kindly and see you in a month, 

Saachi