It's about time!
Today, I am proud to announce the launch of Personal Version 6.0! It has been almost a year since the launch of Personal Version 5.0, and I felt that it was about time for another update. But why so soon? Well, let me explain.
With Version 6.0, this marks the 7th year since I started my Personal Website in 2019. Over the years, I’ve made several updates, each improving on the last. Early versions saw big changes as I experimented with what worked. By Version 4.0 (2021), I found a good balance, but performance and mobile experience still needed work.
In 2024, I rebuilt the website with mobile responsiveness as a priority. Feedback from others highlighted areas for improvement, so I decided to launch another major update, resulting in Version 6.0.
From Concept to Reality
The journey from the initial concept to the final implementation of Version 6.0 involved several key stages:
- 1. Research & Inspiration: I explored various design trends and gathered inspiration from leading tech companies.
- 2. Prototyping: Created wireframes and prototypes to visualize the new layout and features.
- 3. Development: Implemented the design using modern web technologies, ensuring responsiveness and performance.
- 4. Testing: Conducted thorough testing across devices to identify and fix any issues.
- 5. Launch: Released Version 6.0 to Production (January 2026)
Design trends constantly evolve, and it's essential to stay ahead of the curve. With the launch of Version 5.0, I aimed to bring a fresh and modern look to my personal website. Heavily inspired by Apple's Liquid Glass design language in iOS 26 and Samsung's One UI 8.0 Mobile Operating System, I incorporated some translucent elements and a sleek aesthetic throughout the site.
iOS 26's Quick Settings (via Apple Magazine)
One UI 8.0's Quick Settings
Version 5.0's Wireframe
Version 6.0's Wireframe
Utilizing the Device Emulation for Foldable Screens
Utilizing the Device Emulation for Mobile Screens
This structured approach allowed me to effectively manage the complexities of the redesign and deliver a polished final product.
Logo Colours
Colour Schemes
The flat colour palettes have been replaced with a more gradient-based ones, adding depth and visual interest to the design. The gradients are subtle yet effective, creating a sense of dimension without overwhelming the user.
Changes & Improvements
Refreshed Navigation Bar Design
To align with the design trends and inspirations mentioned above, I wanted to create a more streamlined and user-friendly navigation experience.
The Navigation Bar has been redesigned to be more intuitive and accessible, with a focus on improving the overall user experience. The new design incorporates a cleaner layout, enhanced responsiveness for mobile devices, and a more visually appealing aesthetic that complements the overall look and feel of the website.
Old Design (V5)
New Design (V6)
Reworked Filtering/Sorting; Jump To Section
In Version 5.0, this section was introduced as a Collapsible Header. However, feedbacks and from my own personal usage, I found it to be too clunky, as users will have to keep expanding the header to access the Filters or Jump Lists. Version 6.0 addressed these issues by going back to the basics and making it always visible when the page loads. For the Portfolio Showcase (Works By NRFZ), a new Search Function has been implemented for easier searching of works.
Old Design (V5)
New Design (V6)
Improved Mobile Navigation Design & Behaviours
Carrying over the Design Principles from Version 5.0, the mobile navigation has been refined for a more seamless user experience. Theme toggles are placed at a more distinctive position, making them easier to access.
If you were already deep into a webpage and needed to expand the Navigation Bar, you can now do so without losing track of where you last stopped scrolling.
Old & New Design (L - V5, R - V6)
Improved Mobile Navigation Behaviour
Under the hood performance improvements
In Version 5.0, if the images are still loading, the whole webpage will show a loading screen till all the images have been loaded. In Version 6.0, this has been improved by enabling the user to browse through the website, while images are still being loaded in the background. Expect some time for the image to finish loading as most of the assets' resolutions are of the higher quality.
As such, the loading preloaders have been deprecated in this version. No more spinning loaders!
Other Notable Improvements
- Font Awesome Version has been updated to the latest version.
- Improved Breadcrumb Navigation
- Improved Scroll Indicator Performance
- Improved Dark/Light Mode Toggle Performance
- Deprecated the use in FadeInUp Animations on Scroll for better performance
- Easter Eggs! In Rethinking CCL6 Signages, click on the CCL6 text to hear the CCL Chimes.
Click once for Chime A, and thrice for Chime B!
Summary
In summary, Version 6.0 focused on enhancing user experience through improved design, performance optimizations, and the integration of advanced technologies.
Special thanks to my testers for their time in helping to test and identify issues throughout the development of this website. It might just be a Portfolio Website, but it is also a platform where I'm able to test out my capabilities in coding a website on my own, with some help from Github Copilot.