My personal website - from zero to hero in 5 years

Personal websites are useful, offer complete creative freedom and they are a cool way of showcasing your work and testing your current skills. There is no client, no one to answer to but yourself. You decide the content, direction, tech stack, design, UX, browser support... the codebase is your oyster!

Why do people put so much time into crafting personal sites that are incredibly creative, have so much love and passion behind them and everything else that makes them stand out among the (generally) formulaic blandness of the Internet?

"Having my own website says I care about what I do beyond clocking in and out and cashing a paycheck. It shows I’m proud of what I create. If my taste or my work or the industry evolves, I have the power to reflect that on my portfolio."

- A love letter to my website

In this article, I want to take you on a journey through the 5-year history of my personal website (codeadrian.github.io), its evolution throughout 4 major redesigns and show you what I've learned while working on it.

Version 1 - Humble beginnings (2015. - 2017.)

I've created my very first version of a personal website back in 2015, during my last year in college. I figured it would be a fun project and it would help me to showcase my skills and portfolio.

Alt Text — I've featured my grade average? What was I thinking?

The first thing I've noticed is how much info and details I provide in every single section: skills, info, portfolio... I wanted my initial website to look like an online CV. Looking at it today, there is too much information and the website reads more like an autobiography than a CV. You really need to put some time and patience to go through it and find the info you need.

The info didn't have any summary or hierarchy. You simply couldn't have got an overview of my work or skills without scrolling through the entire pages of information.

But what I do like is the style I was going for - the vibrant colors, the mash of 8-bit fonts for headings, contrasting blue and gray containers, basic jQuery animation. I admit, even at this basic state, it did have a charm and it did serve a purpose at the time.

What I found kinda funny is how I displayed my skills. Even 5 years ago, I wasn't a fan of quantifying or grading my skills in a way that's even popular today (stars, percentages, colored circles, progress bars, etc.). Even though I've quantified it, I've still wanted to have text in front of it to avoid confusion.

Tech stack

Static HTML
Bootstrap CSS
Responsive design
jQuery

At the time, knowing how to make a responsive website was a big plus. But it was lacking image optimization, code minification, lazy loading and other crucial optimizations that I wasn't aware of at the time.

What does it showcase?

Not a lot on the surface. That I know web development basics and I have some minor aesthetics and design skills, I guess. But it also shows that even with zero industry experience, I was enthusiastic to learn and that I do not shy away from a challenge. And that is very valuable information for an employer who plans to invest in a junior developer.

So, basically, the first iteration of my website was intended for my potential employer and it said:

This is what I did in my free time, with zero experience and basic knowledge. Imagine what I could do for your company with direction and mentorship.

Version 2 - getting a hang of it (2017. - 2018.)

After my first personal website helped me land a frontend job and after I got some experience working on various projects, I've felt like I've needed to redesign and revamp my personal website.

I've immediately wanted to simplify the content on the website since now I've had professional projects under my belt. I could let my work speak for my skills. I've also wanted to establish a sharper, more professional design, utilize various fonts and use the latest tech to create it. I was still off with font choice and some aspects of design and implementation, but I've felt I was getting closer to something awesome.

I went with a single-page website. When it's first loaded you're greeted with a hero element with the image of myself and some basic info. This is a high-level overview that even someone who is not all that familiar with development might understand.

Even the way I've displayed my skills changed. It was replaced with icons for my main skills at the time. I kinda made it confusing because users needed to be familiar with the logos to understand what is going on. I think that this looked confusing even to the people familiar with the logos. I remember not being really happy with this section, but at the time, I haven't had enough skills to format and group this type of content in a more meaningful way.

But what I liked was the way I was representing my work. The stylish cards with websites displayed on a laptop screen. A basic description would be displayed when hovered on the cards and the links would lead to the project websites. I was really proud of this section.

Also, I was focused on removing vanilla JS instead of jQuery because I've noticed that at the company I've worked at the time relied a lot on this massive jQuery script for simple cases (like selecting elements and toggling class names). I wanted to avoid unnecessary library scripts and reduce page loading time.

In the end, I've had to use only one library script. I've ended up using modernizr because I wanted to use flexbox and still wanted to support older browsers (IE8 and newer). At the time, we still needed to support those due to Windows XP still being widely used.

Tech stack

Static HTML
SASS / CSS
Minified static assets (HTML, CSS, JS, images)
Vanilla JS
Modernizr.js

What does it showcase?

It was a big step for me professionally: I've learned new skills like SASS and advanced JS and I've worked on some awesome projects. The website really reflected that step both technically and aesthetically. Unlike the site before, it didn't serve any higher purpose than simply a hub for all my projects, skills, and social media links.

Some of the elements that I've established here (hero section, portfolio section) would persist in future iterations of the site and would improve over time.

Version 3 - almost there (2018. - 2019.)

During this time my frontend skills grew rapidly. I was studying UX in my spare time, working on projects with challenging design solutions, improving my frontend and design skills. And, yet again, I felt like it was the right time to redesign my website. I was also looking into changing jobs, so I wanted to create a site that would both serve as my online CV and my portfolio.

First, I've created a better color scheme. I wanted it to look professional but also have a vibrant primary color and accent color.

I've felt good about the hero section so I've decided to keep it, but streamline it a bit.

In my previous iteration, I was not happy with the skills section of my page. I've only featured logos of tech I was working with, but not much else. In this iteration, I've paid special attention to it and combined every previous attempt in a more sensible way. We have icons to draw attention, a title for hierarchy and a short description. It gives a nice overview and provides details for those who are interested.

I've also improved my portfolio section. The cards looked awesome, but they've taken a lot of space and could be overwhelming (especially on mobile). So I've decided to experiment with a slider and see what I can come up with. Results were really awesome, I've created this nice sliding and scaling animation and made the portfolio look more impressive.

It goes to show how creative you can get with sliders when you think outside of the box.

Tech stack

Static HTML
SASS
Slick slider
Smooth scrolling / smooth wheel
Image lazy loading
Static assets minification (HTML, CSS, JS, Images)
Gulp task runner
jQuery
Slick slider

What does it showcase?

In this iteration, I think I've finally nailed the balance between the website that can be used as CV and a hub for my projects and links. It looked great, it had a nice UX, it performed great and, at the time, I thought that this is it and that I wouldn't ever need to make significant changes to it.

Version 4 - Swiss knife (2019. - present)

During 2019. I got really into the PWA concept. I liked the possibility of caching pages and assets for offline use and having native app-like experience in websites. Naturally, I turned to my website and wanted to make it run offline. And then, I was flooded with more ideas:

I also want to write articles and publish them on my website
I want to expand on my personal projects
I could revamp CSS and include vertical rhythm, improved typography, and additional constraints
I would also like to have a contact form

And then, I found Jekyll, a powerful static site generator that could help me achieve everything I wanted for my website. And so I've set out to recreate my website from scratch using Jekyll and a generic template as a start.

I've made the whole website more visually appealing by having a consistent vertical and horizontal spacing using vertical rhythm. I've also added a typography scale and a very versatile and customizable PostCSS variable template that I use on my projects to this day.

Jekyll makes creating pages with the same general structure really easy. This is why I've felt comfortable expanding more on my projects. I would simply write content and Jekyll would generate the HTML using a template I created. Any changes I've made to the template would immediately apply to all pages using the template.

Last year, I've decided to write more articles, and I've chosen DEV because I really liked the concept, the quality of content and how welcoming the community is. DEV also has a nice API that allows me to pull articles and other content, so I took advantage of it and connected it with my website. The blog links take point to the article on DEV.

I've also wanted all pages to have a hero element, but I wanted the image style to be consistent across the website, so I've chosen this ink hand-drawn style of images. I really like how well they fit with the rest of the website and content.

Tech stack

Jekyll - static website generator
PostCSS - postcss-preset-env, CSSnano, etc.
Cloudinary CDN - optimized WEBP, JPG, PNG images
PWA - Web app manifest & Service worker
DEV API
Formspree.io - serverless contact forms
Static content minification (HTML, CSS, JS)
Vanilla JS
Image & video lazy loading
Glide.js slider

What does it showcase?

It showcases my work, my articles, my skills and a general overview of all of the above. I think I've finally struck a balance of both having a general high-level overview and a detailed view of every section (portfolio, skills, articles, etc.). Thanks to the service worker, it works incredibly fast and it has some basic offline features. When installed as an app, it performs well and has a nice app-like UX.

Just as the last time, I'm at the point where I wouldn't change anything about it and I don't see what other improvements I could make. But as new technology emerges, new design trends appear and I get more ideas and knowledge, I will most definitely improve my website. Just as the quote I've put on the introduction says:

If my taste or my work or the industry evolves, I have the power to reflect that on my portfolio.

Conclusion

Thank you for joining me on this journey. Hopefully, it was useful to you and you've got some ideas for your own projects or ideas on how to improve your workflow.

What inspired me to write this article is that several people contacted me via my new contact form and ask me how I've managed to make my website so fast. Even though it took me a few minutes to answer the emails, it took me years to get to this point (and tech to get there, too).

What I'm trying to say is - do not get discouraged by tech or your knowledge when working on a personal website (or any project in general). Always work with what you know and what you've got, and aim a level higher. Your website doesn't have to be a work of art, something revolutionary or unique. It only has to reflect you, your skills and accomplishments at some point in time, and that's more than enough.

Here are some of the articles I wrote that are related to the technologies and best practices mentioned in this article. Feel free to read them if you are interested in learning more about a particular topic.