Behind this website

It’s been a while since I started to dislike the idea of major redesigns for my portfolio. I started to embrace and want my website to feel unfinished. Editability is actually a good thing. So here I want to talk about how I built my website to better enable incremental changes and for it to be continuously evolving with me.

The goal is for this website to be a space for myself. I see that in two main ways.

The first about input, and the second about output. Input in the sense that this is a space for me to learn more about myself and the things that interest me, a space for research, and to turn ideas into something that I can look at and come back later. I also like to learn by doing, this is where output comes in. Output because it is a space for me to explore, tinker with the material, better understand software by practicing it and lastly, to share my work.

There is something around the process of making something for yourself and it making you feel more connected to it in return.

Keeping my inspirations close

With so much changing every day in our industry, it can be overwhelming and easy to lose focus. This is why I always try to remember my heroes and keep them close. Conscious that everything around me is someone’s lifework.

I often ask myself: “What inspires the people I’m inspired by?”

“You don’t get to pick your family, but you can pick your teachers and you can pick your friends and you can pick the music you listen to and you can pick the books you read and you can pick the movies you see. You are, in fact, a mashup of what you choose to let into your life. You are the sum of your influences. The German writer Goethe said, “We are shaped and fashioned by what we love.”

Austin Kleon

Some moments in my life different heroes and different people will carry different weights, and with time I might have a different perspective about them too.

Making decisions

Sometimes, starting can be the hardest part, picking the right tools for the job and having a good picture of which path you want to follow.

Students worry about choosing their way, I always tell them, ‘you can go anywhere from anywhere.‘

Anni Albers

In the end, the best decision is often to just start.

So one of the first things I did was to set up some principles and rules for myself, for this website, and of course for the agent. Everything cycles around maintainability.

My website is mostly content with small amounts of interactivity. This is one of the reasons why I’ve opted to use Astro. It is lightweight, and provides structure while being scalable.

                    Astro ◀  ─  ─  ─  ─  ─╮
                      ╷                   ╷
                      ▼                   ╷
              Needs JavaScript? ─ no  ─  ─╯
                      ╷
                     yes
                      ╷
                      ▼
                React islands
                      ╷
      ╭─  ─  ─  ─  ─  ─  ─  ─  ─  ─  ─╮
      ╷               ╷               ╷
      ▼               ▼               ▼
Above the fold  Below the fold    Non-urgent
 client:load    client:visible   client:idle

React islands have to earn their place. The tooltip I use for users to copy my email is one example.

I’ve always found it annoying when I accidentally click someone’s email and my mail app opens. Clicking to copy feels more intuitive. I wanted the tooltip to feel its best, so it has a TextMorph from “Copy” to “Copied”, an AnimatePresence swap on the icon, an eased entrance, and success haptics on mobile. That’s where React comes in.

You can find more explorations and components like this on my lab.

In this website there is nothing final, so I order the thoughts I publish here by when they were last meaningfully updated. There are a few reasons to why I write, and this decision helps influence myself to keep writing more, and writing in public.

I’ve always liked the idea of having visibility to what I’m consuming and how that might be influencing my daily life. It made sense to dedicate a space with a preview of my recent listening and watching activity on my now page. I often come back to this.

I create skills for actions I notice I’m doing frequently or that I simply don’t want to be bothered doing. I have a skill that archives an existing entry in my repo before updating my Now page. It’s all Markdown, so I also keep them in my Obsidian vault.

The tools

A bit more on the tools themselves, and why each one is here.

One of the goals was to choose the right tools and create rules that favoured this website to be fast. Every decision or new idea carries weight so I try to be conscious of what I add in and why.

Astro is the core, it renders the page. React is always a conscious choice for specific ideas, often the ones that need to move. Tailwind handles the styling, CSS and Motion for animation. I love Markdown, so for writing and most content-first pages I use MDX.

There is very little JavaScript. I try to keep it to a minimum, but I don’t stop an idea from growing into new shapes if I have to use it to my advantage.

I intentionally try to keep the number of my dependencies very small. I use Dependabot to automate the process of managing them. I’m always looking for ways to automate and delegate processes that require more management to the agent, so I have more space for incremental changes, more time for exploring ideas and continue to reduce conscious effort in maintaining the website.

I deploy and host on Vercel.

For typography I’m using DieGrotesk from Klim Type with a few alternates as a personal preference. I fell in love with it. Kris Sowersby wrote a good essay about this typeface and what makes it so sublime.

I see tools as choices, it’s not a matter of right or wrong, they are just decisions that might suit me and my needs for a moment in time. I revisit this list and rules from time to time.

What can I remove

Ideas often evolve in the path of addition, I try to have a conscious mindset and often ask myself what can I remove. The bias is always to add. The harder, quieter work is in choosing what doesn’t stay.

Systems want to grow and grow, but without pruning, they collapse. Slowly, then spectacularly.

Steph Ango

Removing is harder than adding. It rarely shows up in a changelog. But the site I want to keep is one where the things that remain are the things I still mean.

An ambitious, collective web

The intent is for this website to complement what I already do, to augment and compound rather than compete with it. It’s supposed to make me question things, sometimes try to answer them, and have fun along the way.

Tim Berners-Lee, who invented the world wide web, asked us to expect more from it than what we’ve made of it so far.

I want to challenge us all to have greater ambitions for the web. I want the web to reflect our hopes and fulfil our dreams, rather than magnify our fears and deepen our divisions.

Tim Berners-Lee

As I mentioned at the start, this is a space for me and, by sharing it, it may perhaps become a space for others too.

A website lets ideas, identities and dreams expand, it is a place where curiosity can be nourished. In the grand scheme of things I believe we all share a responsibility to build a better web. This is perhaps my ambitious attempt to contribute to that.