Building a personal website

For over twenty-five years now, I've loved to tinker with computers and write pieces of code that draw things on the screen. There's something magical in writing something and have a machine interpret that into something useful, pretty or interesting.

My first personal website was an atrocity of iframes and flashy colours hosted on MultiMania (in French), a long-gone French web hosting service. It was rather impressive for teenage me that I could just host my website for free, on the internet, for everyone to see. They even supported PHP!

Since then, I've built countless other websites, either for myself or for professional reasons. To keep with the tradition, I have decided to make a new personal website again.

Choosing technologies

Frontend

One of the main reasons to build this website was to learn and experiment with new technologies. I decided to use TypeScript for this project, as I saw many people around me taking the plunge and chatting about it on social media.

Since I had some expertise with Vue from a sample application I did at AWS, I decided to keep using that, but with a twist. I had used just plain vanilla Vue before, but I was very tempted to learn more about frameworks that leveraged it. Looking around, I discovered that Nuxt had lots of interesting functionalities, such as generating a static (and non-SPA) website.

My previous website was made with Hugo and I liked the fact that it generated plain HTML, but it was rather clunky if I wanted to add any kind of interactivity. Here, I want to be able to do both. If I want to add a backend API in the future, I felt that a static content generator would drag me down.

So I went ahead with Nuxt and TypeScript. It was an interesting experience and the fact that TypeScript looks like JavaScript with a few quirks threw me off more than once.

Hosting and deployment

Many things have changed since my first website. While I used to upload a new version using FTP, this won't cut it anymore. There are lots of tools that integrate a build, test and deploy workflow and will then make your website available around the world through the use of a content delivery network.

Since I work for AWS, I knew about the AWS Amplify Console and have used it in the past. However, I didn't want to limit myself to what I was comfortable with. While I was prototyping, I decided to deploy to Netlify, Vercel and Amplify at the same time.

In the end, I decided to go with AWS Amplify. To be fair, the other solutions were excellent too, but I ultimately ended up making my choice for two main reasons:

  • I like having a file describing my infrastructure, how it works and what steps should be run in my workflow. I felt that Netlify and Vercel fell a bit short on that side compared to amplify.yml.
  • I found that Amplify has a bit more configurability, notably around subdomain naming and workflow commands. Once again, I like the amplify.yml file structure.

However, this is not a one-way door decision and I might change where I deploy this website in the future, as long as this has support for Nuxt and Cypress.

Designing the interface

I'm not much of a graphics designer. Most of the websites I have built would probably upset any respectable person in this field, and that might include this one. I always marvel at the beauty of what people can produce, but fail to reproduce it when I try.

Here, I started by smashing the space bar on Coolors.co until I got a base colour palette that looked good to me. I liked designs focused on a single tone and wanted something rather dark as it's easier on my eyes.

I used Sketch for my previous personal website. But, keeping with the spirit of learning new things (and because Sketch only runs on Mac), I decided to go with Figma. It's really impressive how these tools can help a design newbie like me make something that I find pretty. I even ended up switching InkScape for Figma for making the SVG images you see on this page when I realised I could just select, copy and paste as SVG.


What you will find here

I enjoy building all kind of things using all kind of technologies, be it just for the sake of learning or because it's something genuinely helpful to me. If you don't want to simmer through all my GitHub repositories and curious about the things I've built, you'll find a list of curated projects here.

I will also write about my software development experiments and on Cloud computing.