History

It all began in 2019 when I was given an assignment in my Poly module to develop a Portfolio Website. Bear in mind, my website coding experience was close to nothing, back then.

But why do a Personal Portfolio Website of all things?

I came across one Personal Portfolio website randomly and I was heavily inspired to use it as my main idea for my Assignment. I also believe making my own website is a good platform to showcase my works and tell others about myself. Treat it as though it is a Namecard, but a glorified one. For the actual submission, I went with a Blog section, instead of putting my works there, as a start.

With what you have seen above, I had to re-create my website again, as I could not use whatever I have created in the Assignment previously, hence it took me a few months to actually re-learn and to code the website from scratch again (but this time, I can use many fancier elements online, as I have my own space and time to develop this website). Now that you have known the actual history and rationale of this website, let me take you through the different interfaces I have toyed around over the years!

---

Personal Website - Version 1 (2019 - 2020)

For the first version, I went ahead with the same concept in mind, but this time, I replaced the Blog section, with the Portfolio section, showcasing my works over the years.

Keeping it simple for the Landing Page, it only has 3 components - Hero Section, About Me Landing Section and My Portfolio Section. This was also the time I based off the colour scheme of the website to the outfit colour I was wearing - Pinkish Maroon (#815060)

Landing Page (Version 1)

---

About Page (Version 2)

The About Page included the use of Timelines, as well as the section where I put my photos of the achievements. I did not bring this idea over to the next version, cos I don't have photos for most of the Achevements. The Timelines however, remained.

---

Personal Website - Version 2 (2020 - 2021)

For the second version, I went with another major design change, and "embraced the dark side." I de-emphasized my profile picture as being the main focus, and it only appeared on the About Me landing section. The Hero Descriptions was now smacked in the middle.

I got adventurous with the second version, with the inclusion of the Skills Progress Bar, and a more compact Education & Experiences Timeline. Those are pretty hard to implement to say the least, as I have to take into account how it looks and scales on mobile devices. The second version also marks a first in being a truly responsive website. (Responsive Website design means that the elements on your website like texts, images, videos automatically adjust according to what device it is being visited from.)

I also included a new Connect Landing section to include my Email Address, as well as my Social Media and LinkedIn.

This Version was pretty short-lived, as the Responsiveness and how it looked on Mobile did not meet my expectations. Hence I began developing Version 3 super early.

Landing Page (Version 2)

The second version eliminated the About Page, as I wanted everything to be in a single page.

---

Personal Website - Version 3 (2021 - 2024)

For the third version, I wanted this version to be highly experimental - navigation bar was now on the left, a hero image with my profile picture (made a comeback), description and links now smacked in the middle. Most elements were carried over from Version 2, but refined. You could say it's an iterative update, but code-wise, no, not really. The About Landing Section has also gotten a redesign - it now shows up in a Summary format. Skills now has a section of its own as well.

I chose blue as my colour scheme back then because, why not?

I also decided to rebrand my Portfolio Section, to a new name, called "Works By NRFZ" (I guess it sounded cool to me idk.), and also changed the layout to be a little bit more playful. Those viewing on Desktop will see animations - these were newly introduced in this version.

This version also brought back the Blog section, which I axed during the development of Version 2 - because hey, I need a platform to yap.

Landing Page (Version 3)

Blog Page (Version 3)

---

What's Next?

I thought my Website Design peaked, and that was the best, so Version 4 was the most challenging to work on. But hopefully this design can last longer, cos I cannot keep updating it - it take a loooot of time to plan and execute. Head over to the 'Changes & Improvements' section to see what Version 4 has in store (if you came from the main page you would've seen it already haha.)

---

Personal Website - Version 4 (2024 - Present)

For the fourth version, I wanted something new. I've decided to go back to using a light themed colour, and the navigation menus are back on the top-right. This change was done out of preference - most websites I browsed on Desktops have their Navigation Menus located on the top-right. If you recall, in Version 1, I based off the colour scheme on what I wore for my profile picture. This time, I based off the colour scheme for Version 4 on items I wear/have worn - my Smartwatch Band and my Army Admin T-Shirt. (Random, I know.)

The changes are pretty extensive, so I made it a page of its own.

---