Redesigning my personal website
I always believe that it is more amazing to see your code come to life in a visual form as compared to looking at “HTTP 200 OK” responses in Postman. Unfortunately, fate decided that I should start my career in Backend development, so the only way for me to improve on my designing and frontend development skills is to work on pet projects in my free time.
Let’s see how I evolved my personal website from 2020–2023. 😁
Before I continue, do take a look at the different versions:
version 1: marcusleeeugene-v1.vercel.app (2020)
version 2: marcusleeeugene-v2.vercel.app (2021)
version 3: https://marcusleeeugene.github.io/ (2023)
Version 1
In December of 2020, I learnt about Twitter’s Bootstrap library, and made myself a static personal website. Basic as I am, I chose to start off with a black background because of my love for dark-mode.
Back then, I was very into travel videography and it happened that one of my favourite videographer was using the Surfing Capital font. Naturally, I decided to use the same font for my site. As you can tell, the font was stupidly hard to read, and I for some reason decided make the texts in the top navigation bar super small.
The contact section looks rather plain. I also faced difficulties in deciding the size of elements that are displayed on the page. For example, the vector icons in the project section are way too big, resulting in lots of wasted space. However, given that it was my first complete website I coded, I was really proud of my work. 😎
Version 2
2021 was a very tough year for me... Additionally, the lock-down due to Covid-19 made it worst. I wanted to keep myself occupied after working hours during my internship. So, I worked on the first revamp of my personal site.
My focus this time was to improve the typography, word clarity and make the site look cleaner than before. I decided to go with a purple background (no reason, just stepping out of my comfort colours) 😂
At first glance, it looks way better than in Version 1. I chose a more readable font: Fira Sans and decided to have my resume shown immediately instead of having visitors click into it. I wanted them to stay on my site from the beginning till the end of the page.
I fixed the element sizing issues, and it looks as though everything is in a higher definition than before. I also introduced a “Before vs After” pop up modal to show off some of my photography edits.
However, one thing I wasn’t happy about is that the top navigation bar still looks odd in comparison to other texts on the site.
This time, I also brought in server rendering using FireBase to render the contents on my page dynamically through an Admin Panel. Reason being, I found it quite tedious to always have to manually edit the source code and having to manually redeploy the changes whenever I wanted to update the website, especially during a new internship recruiting season.
Although bringing in the Admin panel was important, I decided to keep the design simple as no one else will be using it other than me, to update my information. This feature landed me a spot in NUS’s Google Developer Students club as a Software Engineer and seemed to impress interviewers during my internship interviews.
Version 3
After my 2 months of self-ban from coding (graduation gift for myself and to recover from burning out), I am back with a new idea. This time around, I wanted to make my site minimalistic and to have it more oriented for professional use especially for networking and job application. For this, I built the responsive site using Next.js and Material-UI.
I learnt from my mistakes and did a prototype on Figma before I translated the design into code. This really sped up my coding process and it gave me lots of room to draft out my desired design.
I searched for some ideas and came across two portfolio sites that really stood out to me:
I love TamalSen’s way of showing his professional experience, where each experience card could be expanded/collapsed to show/hide information, allowing visitors to focus on one experience at a time.
I used his design as inspiration and changed up the color scheme of the experience cards to my all-time favourite color, blue after hours of playing with the color palette on Figma.
Next, the project showcase section. MattFarley’s design was straight to the point. It showed me all his projects at a glance and even summarized the descriptions of the projects I hovered my cursor on.
I thought that it was pretty neat and decided to do the same in my website. I enhanced it with a zoom effect whenever you hover above a project, for some extra swag. 😝
Also, take note of the contact section that I removed, and placed at the bottom of the page. It looks so much cleaner now and the links are evenly spaced out.
Although I reverted back to a static site, it looks way better than the past 2 iterations. I also made my code more compartmentalized and introduced a CI/CD pipeline using GitHub Actions to deploy my Next.js code changes, enabling me to update my site content much easier than before.
Some improvements I would like to make in the future:
- Add a button that resets the site to the landing page
- Make the site more responsive for smaller screens (Currently bit buggy)
- Make a collapsible navigation bar when on mobile sized screens
- Choose a better color scheme (Not really a fan of the white background)
- Add an Admin control (Questionable, still thinking if its worth the effort)
For now, I am really happy with how it turned out. I will continue to improve on my design skills and make my next site even better! 😁 Feel free to share comments about what you think!
Interested in learning more about me? Check out the following!
My Portfolio site: https://marcusleeeugene.github.io/
