Bonnie Personal Website Development

Bonnie is a Product Designer and Multimedia Specialist living in Sydney, Australia. She enjoys solving problems through simplifying the complexity and combining insightful research with intuitive design.

Bonnie's website was designed to promote her skills as a product designer and get connected with potential clients. The focus was on creating a great user experience that would encourage users to interact with the site further.

According to a research by Truelist, 23% of users who had a positive experience on the website would talk about it at least to 10 people. This was why ensuring to deliver great user experience to increase traffic and grow connection was the key priority.

The 4 main features of the site were:

• Activity status with a real-time clock
• Glassmorphism navigation bar
• Animated button’s hover state
• Customizable case study page layout

As Bonnie is based in Sydney, Australia, I made sure that the current time of the ACT time zone is shown on the real-time clock in the activity status UI component. I utilized date-fns javascript library as it provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

Bonnie wanted to share with her site users what her usual days look like by showing her activity according to her daily schedule. In order to track Bonnie’s activity based on specific time of a day, I set the logic by using useState and if/else statements to define the current activity status.

To apply the backdrop-blur-md utility classes to the navigation bar, I utilized the tailwind css framework. You can learn more about how to utilize it on my Navbar with Tailwind CSS background-blur blog article to read through the steps in detail.

Bonnie designed a retro custom button style and animated hover state to make the retro button pop up even more, giving the whole website a distinct appearance and feel. I used Tailwind CSS with a customized Tailwind settings to animate the buttons and make sure the states were functioning correctly. Currently, the primary button has four different states including active, hover, pressed and disabled.

I wanted to allow Bonnie to make each case study differently instead of having to use only one style of page layout on Prismic. Building case study page using Prismic Slice Zone feature was the perfect choice to solve the problem. It took longer time to set all the possible options on Prismic in the beginning, but it gave her flexibility in creating unique and dynamic pages for each project without asking me to change the code every time.