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 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.

Bonnie website overview.mp4

Bonnie - Daily mood board.mp4

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.

1.  Activity status with a real-time clock

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.

Bonnie button hover state

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. 

Bonnie's website is the perfect choice for anyone who wants a technologically advanced and user-friendly experience. Built using JAMStack, the website is responsive and adjusts to any screen size. You won't find a better website out there, so be sure to check it out today!

TypeScript

Tailwind CSS

Prismic Slices

Bonnie Website Development | Case Study

The aim was to make sure that the web contents would be managed and updated effortlessly without requiring any code writing once it is completed. I then added Tailwind CSS framework, and I set up a Eslint stricked mode that allows:

Aezthetics is a fitness company based in Australia that gives customized training programs and monitoring tools like food diaries and fasting, allowing people to achieve the ideal lifestyle and body they have longed for.

Aezthetics wanted to get started attracting users while the product is still being developed, so I built the website where users may learn more about the product and sign up for the waitlist before the app's release.

Aezthetics - website.mp4

When the design was completed and given to me, I was able to start building the site by laying down the groundwork - installing NextJS application, then adding Prismic CMS. The aim was to make sure that the web contents would be managed and updated effortlessly without requiring any code writing once it is completed. I then added Tailwind CSS framework, and I set up a Eslint stricked mode that allows:


To eliminate some of javascript silent errors by changing them to throw errors.

To ensure that mistakes don't cause JavaScript engines to have a hard time optimizing your code. Using strict mode code can sometimes speed up code faster than identical code that's not strict mode.

To prevent certain syntax from being defined in future ECMAScript versions.


Starting with the basic HTML and CSS, I began to construct user interface components such as buttons, navigation, footer, and more. After that, I developed the core pages including Home, Pricing and Contact pages.

The primary goal of a beginning-stage business like Aezthetics is to learn more about the target audience and the market. Aezthetics wanted to engage their clients by allowing customers to sign up for the app's waitlist in order to discover a great opportunity to know more about their users' needs and wants. It also helped to reach out to people for interviews and validate their product ideas. I went with Mailchimp, the email marketing platform for Aezthetics to collect and manage email addresses and send newsletters.

Finding opportunity by building a waitlist for potential users

Aezthetics - waitlist.mp4

While Aezthetics is still in the development phases, I wanted to be sure that the procedure would not be time-consuming or difficult for anybody who wants to reach out to Aezthetics through the website. I used Nodemailer to allow the server send emails to Aezthetics when someone contacts them. These are the advantages of using Nodemailer: 


Heavy focus on security. No one likes RCE vulnerabilities.

Unicode support to use any characters, including emojis 💪.

Secure email delivery using TLS/STARTTLS.

Embedded image attachments for HTML content.

Aezthetics website was built with advanced technologies, such as JAMStack. I used NextJs for the front-end framework, Prismic for the headless CMS, and Vercel for the hosting platform to improve website performance.

With Aezthetics, fitness doesn't have to be complicated or uninteresting any longer. So stay tuned - We're currently working on Aezthetics app for iOS and Android. When it's done, I'll go through everything step by step to talk about how we have brought the brilliant idea to life.

Jamstack

Typescript

TailwindCss

Aezthetics website development | Case Study

One of Priffle's primary business goals was to increase site traffic and, eventually, convert them into potential clients. For Priffle to succeed, it was a must to have blogs. I used Google Search Console in order to help them discover what sort of content would be required to attract the visitors.

Priffle is a Sydney-based Digital Design and Development agency, with the mission of harnessing the power of brands and making them stand out in the crowd. 

Priffle needed a website that would allow them to showcase their stunning work, attract new clients and promote their business through the website by delivering exceptional user experience. In order to achieve the goals, I needed to create custom UI components and layouts, as well as complex pages including case studies, blogs, and contact pages.

Website development from the start to finish

The primary goal of Priffle's website was to make it fully content manageable, reusable, secure, and quick while also handling a large quantity of information effectively and high-resolution pictures and videos.

I chose Prismic to develop content management website since it's superior than any other platform such as Wordpress in terms of building custom website development with beautiful design and modern technologies. This is ideal for running a big and complex website like Priffle as any adjustments are very simple to deploy or modify.

To begin, I created page sections, set their model, modified settings, deployed them, and provided a visual interface with Prismic SliceMachine. I wanted to make sure I could construct web pages dynamically from a collection of pre-defined components while adhering to Priffle's design system. This way I was able to get everything in place and cut the waste, which allowed me to ship the product ahead of schedule. 

I built Priffle's website with Next.js 12, ESLint conformance and Webpack 6 compatibility, writing in Typescript and using Vercel and Prismic to build great digital experience across the site with blogs, case studies, and other contents. 

Developing fast, flexible and scalable website

One of Priffle's primary business goals was to increase site traffic and, eventually, convert them into potential clients. For Priffle to succeed, it was a must to have blogs. I used Google Search Console in order to help them discover what sort of content would be required to attract the visitors.


Those features are necessary for Priffle's blogs:


Search bar to allow users to find relevant articles quickly and easily.

Category to allow users to browse certain topics easily. 

Recommending 2 relevant articles by algorithm at the conclusion of an article to keep visitors engaged and stay longer on the site.

Priffle - blog search.mp4

I used Fuse.js, which is a JavaScript library that provides fuzzy search capabilities for applications and websites to create those features in blogs. It's because It's simple to get started and requires minimal effort, but it also has configuration options that allow me to customize and create sophisticated solutions, which was perfect for building Priffle's blogs.

To make the website more vibrant and engaging, I replaced the native cursor with a custom animated cursor, consisting of an inner and outer dot that change inversely as the mouse hovers or clicks. 

I also implemented Post CSS to ensure that the text is highlighted with Priffle's brand color when users select it to improve the appearance and elevate the experience. 

Priffle - cursor.mp4

It was critical to develop a quick and responsive website for Priffle, not only to provide a great experience to users, but also to improve its SEO ranks.

According to Google, the site speed is a key ranking factor, so I focused on ensuring the site was performant and the Lighthouse score was high. I utilized HTML Elements correctly in order to make sure it will increase the speed of server processing a request from users' browsers and rank well in Google search results. 

Prismic

Nextjs

Priffle website development | Case Study

See what it's like to work with me. I build custom websites and mobile apps for companies around the world. Check out my case studies, where you can find out more about how I built the digital products from the scratch using advanced technologies.

My Work

Bonnie Hong

Aezthetics

Priffle