The evolution of the design of my site
As any self-respected developer, I redesigned my site many times. To be more precise, there were 6 significant redesigns. I thought it would be fun to document all these designs and see the evolution. In this review, I will focus mainly on the homepage.
If you want to see all the screenshots of my site, you could visit the following links:
- Google Drive (about 10Mb)
- Figma (about 100Mb)
Tech stacks
I created this site back in 2016. The first site was built on my custom PHP-based CMS. After that, I moved to WordPress. At that time, static site generators became popular, and I was lucky to jump on that train. In 2017, I decided to switch to Hexo and Netlify. Hexo provided what I needed, but this year I moved my site (quite seamlessly) to Eleventy as I was reading about the excellent developer experience of the platform. I got to tell you, I could achieve so much more with Eleventy than with Hexo.
The background
Unfortunately, I don't have any versions of the initial design. Since my site was relatively small, even the Wayback Machine site didn't record it. The only thing I remember was that I wanted to develop my PHP-based drag-n-drop CMS. How young and optimistic was I, right?
In 2017, I moved to WordPress briefly. I dropped out of the idea of making my own CMS and moved to the most famous player out there. However, I was never happy with it as I found it hard to develop and deploy new features.
Sometime in the summer of 2017, I moved to Hexo. I loved the simplicity of it, the structure, the commands, and the output.
But the biggest game-changer for me was Netlify. It was free, it got everything I needed, it was easy to use and, more importantly, it was easy to understand.
Netlify offers so many features. I even wrote a blog post about my favorite parts of Netlify. One of the features I find pretty convenient is Deploy Preview.
Every deploy also has a permalink that starts with the deploy ID number. For example: 1234abcd12acde000111cdef--yoursitename.netlify.app. The contents of this URL never change, even after you redeploy your site.
Every deployment has a permalink that works forever. That means that you could see the version of my site from July 2017 until today. This feature allowed me to find all design updates. Let go over each one.
The first design
The first design of the homepage was straightforward. I have listed all articles and showed featured images, titles, dates, and excerpts.
The header had gradients, and the rounded logo was in the center. One feature that was removed later was breadcrumbs.
I always liked the pink color, but there were some occurrences of the orange color. I used these colors for the header and footer, links, buttons, titles, and even image overlays.
Cover images for blog posts contained title and the photo of a bird because I like nature and birds especially.
The site was responsive. There is no need to emphasize that today, but it was a thing back then.
At that time, I coined my first tagline, which I am using today.
Fearless web developer.
I used a single font family: Exo 2.
The second redesign
In 2018, I released the second redesign. The homepage consisted of pink and gray tiles with personal info and links.
The header and footer were pink. In addition, the social links in the footer were in the color of the brand. So, for example, the Twitter link was Twitter blue, and so on.
The mobile navigation collapsed under the hamburger menu.
I used a couple of font families: Playfair Display and Vollkorn.
The third redesign
Soon after the second redesign, I released the next one. This time I was providing more information about myself. I kept the tiles, but this time they were light gray with pink borders. I was using an outlined logo for a background.
The logo in the header wasn't rounded anymore, and I added a tagline to the footer.
In May, I decided to use frames to display every project on desktop, tablet, and mobile view in my Portfolio page. This will be the default style for portfolio and side project items from now on.
I used a couple of font families: Playfair Display and Barlow. I am using this combination ever since.
The fourth redesign
The first iteration
In August of 2018, I released another major redesign. This time my homepage contained short info about me, featured articles and projects, and some helpful links. There was also a little info icon that showed basic information and links on hover.
I made a drop-shadow effect on images using CSS filter. I think it looks great, especially on transparent PNGs, like the project images, and I still use this effect.
This is the first time I used green alongside pink color. I made the header and some decorations green.
I redesigned my logo, too. I was using it to indicate the current page in the header. It was displayed in the footer, too.
The hamburger menu was gone, and I listed all navigation links on every device.
The second iteration
In September, I introduced testimonials on my homepage.
The third iteration
In October, I introduced call-to-action boxes with contact links. I wanted to engage potential clients to hire me more quickly. I also displayed the earliest available date to help them decide if my availability suits them.
Later, these call-to-action boxes were used to engage visitors to go to my Hugo course, to explore my side projects, and so on. I still use them and find them convenient.
The fourth iteration
In January of 2019, I fixed the contrast of the green color by making it a bit darker. I also featured my image on the homepage. I wanted to make the site more personal.
The fifth iteration
This new darker green color never felt right to me. So I decided to make my header dark. I made the buttons dark, too.
The sixth iteration
In June, I introduced a new section on the homepage: publications. I thought it would be nice to inform my visitors that I wrote some pieces for other sites, too.
I also added a dot above the link in the header to inform visitors about the current page.
The seventh iteration
In August, I decided to feature my side projects on the homepage. I thought it would be interesting to show what I am working on in my free time.
The fifth design
The first iteration
In February of 2020, I made another major redesign. This time I introduced cards to the homepage:
- profile cards,
- article cards, and
- testimonial cards.
The profile card contained my new profile picture, name, taglines, tags, and links. The article card contained a cover image, title, date, tags, and a link to read more. I added company logos to testimonial cards to make them more trustworthy. Portfolio and side project items were updated with tags, too. Each section had a description to inform visitors what does it represent.
I decided to remove the logo from the header entirely. Not sure why, but I did. I didn't make any significant changes to the header and footer this time, only minor color updates to meet the contrast criteria.
One other significant change was the light gray background throughout the site. This was used to emphasize cards and call-to-action boxes, which were plain white.
The second iteration
In March, I introduced the Code Line Daily widget on my homepage. Code Line Daily was a project of mine where I highlighted a single line of codes every day. The project is still alive, but I am not adding new content anymore.
The second iteration
In April, I made a slight adjustment to the homepage. I made the profile card smaller, and I have updated the intro text.
The sixth design
The first iteration
At the start of this year, I decided to switch to Eleventy. Of course, that meant a new version of the design. I switched back to white background. Instead of using pink, I used green color for branding. I redesigned all aspects of my site, including my logo. I was aiming for a cleaner and more polished look.
I put a bunch of links in the header as I wanted to show my visitors that there are more pages on my site than just Blog, Portfolio, About, and Contact pages. This was listed on the mobile version, too.
I decided I don't need article cover images in article cards. Instead, I made titles and buttons more noticeable.
At each section, there was a new way of engaging the visitors. Instead of displaying the last card or item, I decided to add call-to-action widgets.
Call-to-action boxes were redesigned, too. This time I wanted to inform my visitors about my activities, like giving an interview about remote working or featuring my newsletter.
This update wasn't only visual. It was textual, too. So I updated the text throughout the site. This was the biggest challenge, as always, when editing or adding new content.
The second iteration
In April, I have updated the sections on my homepage based on the smashing Vitaly Friedman comments in one of his auditing events. Vitaly asked what do I want to achieve when a visitor comes to my homepage. So I figured I wanted to land a client rather than making someone read my blog posts (which I don't publish that often anymore). That's why I put the Portfolio section first and then Testimonials. Testimonials should convince potential clients about the quality of my work. That is something I learned from the legendary Paul Boag.
Vitaly also pointed that my name isn't showing anywhere on the homepage. So I fixed that, too.
I made other updates, like adding gray background on cards and different colors on tags.
The third iteration
In May, I added my logo as a repeating image throughout the site because I think the plain white background was too bright. This way, I highlighted the brand and fixed the brightness.
I also updated testimonial items. This time I added photos of persons, and I shrank the text. If a visitor wants to Read the testimonial, there is a separate dedicated page for doing that.
One other significant change was that tags were actually linked to tag pages. I decided to create these pages to connect the content. For example, the SPG tag page holds all articles and portfolio items tagged as SPG. SPG stands for Static Page Generators, btw.
The next update
The next update won't be visual. Instead, it will be about making this site more accessible. I already got some quality feedback from accessibility professionals.
I should update the images as they are not the right size.
Conclusion
Like any other project, a personal site requires a lot of thinking, planning, and testing. I always thought of my site as an example of what I am capable of doing. It was never about the design. It was about how to communicate my ideas and how to present my work to the audience.
As I am getting older, I am trying to use my computer as little as possible. That is affecting my side projects and my site, too. I don't think I'll be doing any major redesigns any time soon. I think I am finally at the point where I want to be.