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 like to believe that the people and the things that inspire me help shape everything that I do, and it was no different with this website.

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

It doesn’t require much for someone to inspire me, and it can have very little do to with what they have accomplished in their lives. Most of the time it’s about attitude and carrying a smile.

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,” she continued. “I always tell them, ‘you can go anywhere from anywhere.

Anni Albers

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

Nothing is a mistake. There is no win and no fail. There is only make.

Corita Kent

I believe in constraints as a compound for creativity, this helps my thinking process where I like to set strict rules and think like an engineer. 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. Maintainability is key. This is one of the reasons why I’ve opted to use Astro. It is lightweight, and provides structure while being scalable.

## Astro or React?

Astro
└── unless it can't work without JavaScript → React island
├── Above the fold → client:load
├── Below the fold → client:visible
└── Non-urgent → 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 layered polish needs React. React was the right way for this.

Another good example is my listening badge. Astro wouldn’t be enough. React lets me have a bit more fun with the level of polish I want for an interaction.

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.

To keep a history and track of my now entries I created a simple claude skill to archive an existing entry on my repo as a markdown file before updating it. I also keep them on my Obsidian vault. This way I can always look back to what I had been up to previously.

The tools

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 renders the page. React only shows up for the parts 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.

Most of the JavaScript exists where it earns its keep. The theme toggles. The clock ticks. Everywhere else I’d rather ship plain HTML and let the browser do its job.

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.

A few small defaults do the rest. The styles live inside the page, so it shows up right away. Links you hover are quietly fetched in the background, so the next page is mostly there by the time you click. Together they compound.

Small patches I made for myself

There are corners of the site that exist mostly because I wanted them to. A page for the music I’m listening to. A page for the films I keep returning to. A page for what I’m working on right now. A footer that shows the local time where I live, so the site knows where I am even when I don’t say it.

None of these are essential. None of them need to scale. They are small acts of decoration with a function: they make the site feel like a place rather than a brochure. They’re also where I let myself try things, and where most of the small experiments end up first.

What can I remove

A site like this grows in the wrong direction if I’m not careful. Every new section, every new component, every new flourish carries a small ongoing cost. I try to ask, often, what could come out.

Subtraction is the most underrated skill.¹

Sometimes the answer is a paragraph. Sometimes a component I was proud of last year. Sometimes a whole page that no longer reflects how I think.

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.

For me, first

I make this for me, first. To play, to learn, to think out loud, to leave a trail. To be wrong in public and quietly correct it later².

If someone passes through and finds something useful, I’m glad. If a few of those people stay long enough for a conversation, that’s the part I love most. But the energy I put into this place is mostly its own reward³.