Just a moment...
In September 2024, Version 4.4 was launched, and in February 2025, Version 4.4 was rolled out, which included the introduction of Dark Mode, along with other features of the website.
In actuality, the actual website development has since continued on since then. I noticed the degradation of Website performance recently and I realized some of the elements implemented were not efficient enough, hence I pressed on and continued development. Initially, I wanted to launch a small update to address these issues, but I figured, why not I bump the Website Version to Version 5 instead. Of course, bumping up the numbers meant a lot of changes will be done to justify the bump. Well, yes, but actually no.
Home Page in Version 4.4 - Light Mode
Home Page in Version 4.4 - Dark Mode
Coincidentally, I was only offered Github Copilot at around end December. Since AI was and still is a trend as of the time of writing, I decided on utilizing it for Version 5.0. It might have been the best decision of my life! More that later. Let me take you through the whole process of the update, from Code Rewrites all the way to the Changes & Improvements!
The Stylesheets in particular, got a rewrite. Previously, everything was lumped into one CSS file, and work to separate them according to the ones shown below, only started in Version 4.4. Version 5 aims to complete the full transition to these Stylesheets.
Style.css - The core Stylesheet
Style-breakpoints.css - To control the Responsiveness on different devices
Dark-mode.css - Core Stylesheet for Dark Mode
The Breakpoints' Stylesheet is the most significant change, with the ability to cater to every dimensions, from Mobile, all the way to the Desktop. It is still not perfect but I feel like I am getting there.
AI in website development is gaining traction because it streamlines processes, enhances efficiency, and improves user experiences. Developers are leveraging AI-powered tools like GitHub Copilot to automate coding, optimize performance, and generate smarter design solutions. As websites evolve to be more dynamic and user-centric, AI helps by personalizing content, improving accessibility, and even predicting user behavior.
Its ability to assist with coding rewrites and performance enhancements makes it an indispensable asset for modern web development, fueling its rising popularity.
HAHAHA, that paragraph is written by AI, using Microsoft's Copilot. Recently, it was made available in GitHub and Visual Studio Code (VSCode) as well. For Version 5, I have decided to use it as a, well, a Copilot to my Website Development, and to be honest, it helped me ALOT.
Previously, I had to rely on W3Schools or Stackoverflow for assistance, now its just a button away.
GitHub Copilot
GitHub Copilot in VSCode
GitHub Copilot in VSCode Button
You might think "Wah can just copy and paste, so easy!" NO, not at all. Sometimes the result is not what you wanted it to be, sometimes it straight up does not work (the code works, but not with the context of my actual project file.)
For me, I prefer to use AI to simply assist me with my codings, while 95% of the work is still being done by me. That's how I'd properly and ethically use AI anyways.
Elements in which AI has helped me to develop includes:
- Collapsible Toggle for Filtering
- Sorting functionality
- New redesigned Breadcrumb Navigation Area
- Consistent Container Sizing
- Overall Website Responsiveness
I wanted a dedicated area to house the Filtering, Sorting and the Jump To Section buttons. In Version 4, the Filtering Buttons are laid out in the page itself, but if I wanted to add other buttons, it might make the page cluttered, especially on Mobile Devices.
Hence, I wanted a Collapsible area where those buttons can be accessed when needed, but hidden when not needed. These make the page much more neater and cleaner, and more consistent when these elements get applied across all pages.
Old Design (V4.4)
New Design (V5)
The Experimenting Improvements of Current Wayfinding or EICW was first released as a PDF handbook, then an actual website. In Version 4.4, these are hosted on another website. Jumping to and fro could make the experience less seamless.
For Version 5, I aim to enhance the user experience by integrating the external website, making it more searchable in Google (eventually). Jump Lists have also been introduced so that you can jump to a particular section instantly, without having to scroll.
Old Design (V4.4)
New Design (V5)
Previously implemented in Version 4.4, it was located below the Navigation Bar. The new implementation now has the scroll indicators located at the top instead. This helps improve visibility and user interaction, making it easier for users to navigate through blog posts.
Additionally, the scroll indicator now features smoother animations and better responsiveness across devices, enhancing the overall user experience.
Old Placement (V4.4)
New Placement (V5)
The Navigation Bar was last reworked in Version 4.4, but the Mobile Version's component was last reworked back in Version 3. For Version 5, I have decided to rewrite the entire codes for BOTH Desktop/Mobile Versions of it.
I felt that having the Menus drop from top to bottom made more sense than it being at the side, for Mobile View.
Menu Design (V4.4)
Menu Design (V5)