Website logo
Pablo Porto
Author photo

Redesign and new stack: Version 5.0

Once in a while, I get tired of the design of my website or its technical stack and start tinkering around. Having a personal website as a pet project has helped me to stay up to date with modern front-end development.

Version 5.0 of the website

Over the last year, I have been working on a full redesign and rewrite of this website. What is now version 5 started as an attempt to learn new technologies, Next.js and TaildwindCSS. I thought this milestone would be a good opportunity to reflect on the different rewrites and redesigns I have done over the years. Thus, I decided to jump into the Wayback Machine and write what I like to call a retrospective changelog. Here it goes.


Version 1.0 - 2008

Version 1.0 of the website

In the mid 2000s blogging was already very popular. I wanted a quick way to start writing and sharing my ideas so I decided to build a blog.

The setup I went for was quite simple. I choose one of the most known CMS, WordPress, and I hosted the site in one of the popular VPS-based hosting providers of the time. I tried to find a more representative screenshoot of the site using Wayback Machine but I failed.

Purpose Tool
Core Wordpress
Content Wordpress
Styles Plain CSS
Hosting VPS
Features Blog

Version 2.0 - October 2013

Version 2.0 of the website

In September 2013, I finished my master's in Networks and distributed systems. I took a few months to prepare for job interviews and look for my first job as a software engineer. I had quite a lot of free time so I decided to create a portfolio from scratch to share my CV.

Inspired by this post by Amazon CTO Werner Vogels. I choose Cactus as a Python static site generator. I used AWS S3 for serverless hosting as I was starting to learn about cloud technologies back then.

Purpose Tool
Core Cactus, Python
Content HTML, Django template system
Styles Bootstrap, Fontawesome
Hosting AWS S3
Features Portfolio, Online CV

Version 3.0 - December 2014

For version 3, I decided to migrate the tech stack to host the website for free on GitHub Pages. I replaced Cactus for Jekyll as a static site generator. The fact that I was working with Ruby at work at the time influenced my choice.

I also migrated the content from HTML to YAML. I honestly don't remember why I didn't choose another more text-friendly format like Markdown.

Purpose Tool
Core Jekyll, Ruby
Content YAML files
Styles Bootstrap, Fontawesome
Hosting Github Pages
Features Portfolio, Online CV

Version 4.0 - July 2017

Version 4 was another tech stack migration. The most time-consuming and complex to date. I was learning React and Redux and I wanted to have a pet project to practice those technologies. I started by creating a web application that offered the same functionality as the Jekyll site.

I managed to learn a lot about creating single-page applications or SPA. I was reading the book Atomic Design and working with Storybook at work so I also used this version of the website to learn how to create my own design system and a component library. This is another example of how using the site as playground helped me to stay up to date and develop new skills.

From an SEO perspective, it was a terrible decision. Moving from a Jamstack architecture to SPA made it hard for the SEO crawlers to index my content.

Purpose Tool
Core React, Redux, Storybook
Content JSON
Styles Bootstrap, Fontawesome
Hosting Github Pages
Features Portfolio, Online CV

Version 5.0 - March 2021

Version 5.0 of the website: Making page

Version 5 is the one you are probably seeing right now. I decided to go back to the Jamstack architectural style of versions 2 and 3 but keeping React and JavaScript as the core technologies.

I choose NextJS as a static site generator and React framework. I was curious about modern react frameworks so I decided to get some experience with them. The same happened with TailwindCSS. The design was a bit old so I took the opportunity to do a complete re-design and learn about utility-first CSS frameworks.

One of the goals of this version was to build a site that allowed me to go back to blogging. I wanted a workflow that allowed me to quickly create blog posts or notes and share them on the site. I migrate the content to Markdown so I can write and edit the content in minimalist tools like Obsidian and easily copy and paste it into the codebase.

I also change the infrastructure. From GitHub Pages to Vercel. I was quite impressed by the developer experience of Vercel as a platform. I really recommend to give a try to anyone looking for a simple hosting solution.

I didn't move away from GitHub completely. When I started doing this rewrite, I was quite excited about GitHub Actions. I went to create a continuous deployment pipeline for the blog based on a trunk-based development workflow. I don't create pull requests for new changes (except for the ones created by Dependabot). I push directly to master and I trust the automated quality gates I created in the pipeline to do their job. You can checkout the pipeline in action here.

Purpose Tool
Core NextJS, React, TypeScript
Content Markdown
Styles TailwindCSS
Hosting Vercel
CI/CD Github Actions
Features Blog, Portfolio, Online CV, Travel tracker

Take aways

As you can see, this website has changed quite a lot over the years. Writing this post allowed me to reflect on how much time I put into making these changes both in the design and the code. Was it worth it? Could I spend that time on something more productive like writing more or building an app? Maybe.

I still think the main ROI of these efforts has been the ability to have a playground to learn and develop new front-end skills that I could apply in my day-to-day job. I have many examples of technologies I was able to understand better after applying them to my website: CSS, SaSS, TypeScript, Storybook, and Next.js. TailwindCSS, Atomic Design. GitHub Actions...

I am always checking other people's websites to get inspiration. Do you have one you want to share? Reach out to me on Twitter. Finally, I want to share some of the personal websites that inspired me to improve mine and write this.