Alfonso's Website
●6 min read time

Welcome to my new personal website

A few weeks ago, I decided to stop using Twitter temporarily, even though Twitter is by far my favorite social network for various reasons. Among them, I follow people I admire and who motivate me to do things. Also, as a developer, it is a great way to learn about new technologies and projects before anyone else and you always find something new to learn. Memes are fun, and in general, one always finds interesting things. Finally is a great place to connect with people with common interests worldwide.

So what is the problem? I think that Twitter has not done a great job of helping you avoid content that you do not want to see or that, in my case, gives me some degree of stress and anxiety. The war, the pandemic, and politics in my country, among others. In short, bomb of unwanted information do nothing but affect my mental state and therefore my well-being.

During the time I have been on this vacation from Twitter I have been trying to find an alternative to not disconnect me from the world. I thought that a blog could be a great way to achieve it. A couple of reasons:

  • A blog has the advantage of being a single-side way to create content, which means that you share some info, but you don't necessarily receive an immediate response, and you don't need to join the conversation.
  • It allows you to generate content that doesn't expire as quickly as other social networks, and can be helpful for more people for more time.
  • If you need it, It can be an excellent way to have some content to share on your social networks.
  • And finally (and maybe more important), I needed a personal site to share some of my work.

In addition, creating a blog was one of those projects I have had in mind for a long time (I think it's an SW developers thing πŸ˜…). I wanted to do something very personal and flexible in case I want to add more features.

Since I'm not a designer, but I expect to have a nice-designed and very personal website, I spend some time trying to find inspiration and develop ideas of how I wanted my blog to look. For example, one of the things I wanted was to be able to add some "easter eggs" just because I can πŸ€·β€β™‚οΈ. Anyway..., it seemed to me that adding memes would be a way to accomplish that, and everyone loves memes, right? Finally, I said hey! What if I'm the meme myself?

To do this I first had to create a character and since I like comic strips I tried to take inspiration from illustrators like Sarah Andersen, Quino, Fowls comics, The Oatmeal, and many more that I like.

So I got down to work and started making quick sketches of this "Alfonso" character that you can see everywhere on this site.

I used a mixture of patience, a Wacom tablet, and some Affinity Photo and Affinity Designer magic until I ended up with what would be my avatar (and, who knows, maybe a character from my webcomic in the future).

Regarding the design, my goal was to make a minimalist but fun site full of memes. These are some of the things I drew in my notebook:

The design evolved as I progressed with the website, I did not use all the elements I initially devised, and I added some new ones that ended with this website you are seeing.

Technology

Regarding technology, even though I consider myself a "Vue Boy," I opted to make my site in React + Next.js for this occasion. Some of the reasons:

  1. Because of the integration it has with Vercel
  2. Because I wanted to increase my portfolio with React
  3. I wanted to experience the static site technology of Next.js

Of course, I chose TailwindCSS for styling, which basically is the best thing that has happened to me as a web developer for a long time.

About the static site generation

I wanted this site to be fast with a 100% Lighthouse score, and the best way to achieve that was with a static site. The problem with static sites is that it is not easy to update the content because you have to recompile the site every time you adjust something. Also, the content is not exactly dynamic (as you would expect from a blog) since it does not make any calls to the server.

Here is a quick summary of what I did to solve the problem:

I created a content manager with Laravel Nova where I can add projects, blog posts and adjust my resume (which is also hosted on this site). I configured the various database models to mark the site as "expired" every time I modify something and added a cron job that checks when the content is expired and if so it calls a Vercel Deploy hook that indicates Vervel that it need to recompile.

Worst case scenario, the site will be out of sync for 2 minutes, but I'm not CNN either, so I don't care Β―_(ツ)_/Β―

The result? Hmm... I think my coffee cup pretty much sums it up:

What did you think of the site?

Could you find all the hidden memes?

I would love to read your comments. Write me via Twitter or use the contact form. I promise to add a way to comment directly on this site soon.

– Alfonso