What was changed?

The last time I launched the revamped version for both my Personal Website and the Train Delays Checker (TDC) was in September 2024. Since then, many under the hood changes have been made. This includes multiple code cleanups and optimizations to make the website work better. Let's dive in on all of the changes, shall we?

Changes & Improvements

Introducing Dark Theme!

This was a long awaited feature for me to implement. As a fan of the Dark Theme myself, I was already dreading the decision to switch my Websites back to the Light Theme. But that decision was made as I needed some time to figure out how to implement the Dark Theme toggle that works across the whole website, and will remember the chosen theme upon next visit. That is now possible!

Hero Image/Description Section

Home Page in Dark Mode

Hero Image/Description Section

About Page in Dark Mode


Introducing the new Font Typeface - Onest

In this update, I have retired the use of the good 'ol Poppins font. I wanted a more modern design that looks good on any devices - be it Computers, Tablets or even Mobile Devices. I have decided to settle down on the Onest font.

Hero Image/Description Section

Photo Credits: Fontke


Support for Wide-Screen Displays

Previously, while the website has been made responsive for Wide-Screen displays as part of the revamp, more under the hood changes have been made to support this. Elements like the Navigation Bar and overall contents have been expanded to fill in more spaces. The Hero Section's Image size has been reduced slightly as during testing, I found that the Profile Picture were too big for Viewpoints like the Laptop Screens.

The Featured Work's image also have been aligned properly so that it will look more neat and consistent.

Home Page

Hero Image/Description Section

Home Page - Version 4.0

Featured Works Landing Section

Home Page - Version 4.3


The Timelines Section have been widened, and the Years' Caplet's design have been changed so that it will scale more consistently in any devices.

About Page

Summary Section

Timelines Section - Personal Version 4.0

Skills & Software Landing Page

Timelines Section Version 4.3


Cleaning up of Stylesheets (CSS)

With changes coming and going, the Compact Style Sheet (CSS) page became overly cluttered and messy, hence in the September Revamp, I introduced another stylesheet extension to accomodate the new codes for the redesign. However, recently I went and took a look at those CSS pages and I figured it is time for some spring cleaning. Both the Style and the Style-extension CSS contents have been merged, while the Viewpoints now have their own CSS pages.

Summary Section

Style (Main CSS)

Skills & Software Landing Page

Style-breakpoints (Viewpoints CSS)


Works By NRFZ Individual Pages

The most significant page design change went into the Individual Pages (aka Portfolio). I made the page design to look more professional and scale better for various Viewpoints. I also introduced the new Share Buttons for the ability to sahre each of my works to the various Socials, or also to be able to copy the URL link with a click of a button.

Works By NRFZ Page

Works By NRFZ Individual Page - Version 4.0

Works By NRFZ Page

Works By NRFZ Individual Page - Version 4.3


Conclusion

I am still very happy with how the website currently looks. Hence, future updates will be more incremental than ever. The changes mentioned above will be rolled out to my Train Delays Checker website in the coming days. Sticking with my vision of continuous improvements, perhaps I can explore different things I can implement in future updates. We shall see 😁.


profile

Nurafian Zulkifli

Passionate about Technology and Designs - mainly UI Designs, Wayfinding and Signage Designs.

I also enjoy replicating stuffs that interests me.