How and Why I Over-Engineered My Developer Blog

Many developer blogs and portfolios feel like they were created from the same template. As if they were coded in an afternoon as part of a passionless box-ticking exercise required to secure the next gig. This one wasn’t. Here’s the story of how I spent months obsessing over Bauhaus-inspired design and sweating over small details that many users might never notice. All in an effort to make my corner of the internet feel different and authentically me.

Why?

An Overdue Update To My Professional Presence Online

Having been happy with my career growth at my first company, I hadn’t needed to polish my online professional presence for job applications. As a result, it was long overdue for an update. I didn’t just want to update bullet points on my resume or learn to master the art of writing sufficiently weird posts on LinkedIn just to feel relevant. Instead, I wanted to create something I was proud of that would show what I’ve learned these past few years and allow me to do the telling on a platform I fully control.

The Joy Of Working With Fewer Constraints

As developers, most of our time spent programming and designing at work is constrained by what’s economically viable. For side projects and developing skills outside of work, energy is my biggest constraint. To dedicate myself to a project that’s challenging enough to effectively grow my skills, working on it has to be something that energizes me.

At work, I can’t justify choosing a design that’s fun or interesting over one that’s familiar and therefore more likely to convert. In this project, I set out with the goal of seizing every opportunity to do things differently. You can see an example of this in the menu above. It’s proudly not a hamburger icon and it changes constantly.

Non-Algorithmic Digital Connection

Moving across continents to Brazil, working remotely, and having many friends with international backgrounds, I have to rely on digital communication to maintain and cultivate many of my most meaningful personal relationships. For a variety of reasons, I don’t use social media. I keep in touch with friends and family mostly through semi-regular or sporadic video calls, but I’m a horrible texter. I wanted my website and blog to be a place friends can go to see what I’ve been up to and where I can share things that start conversations.

How?

Translating Design From Bauhaus to Browser

Minimalist, functional, German - all these characteristics led me to choose the Bauhaus aesthetic as the foundation for my design. This Bauhaus-inspired print I purchased while decorating my living room became my north star inspiration for what I wanted to bring to the web. I collaborated closely with João Generoso to translate my north star inspiration into a design system for the project. After defining the foundations together, I iterated on the rest independently.

Picking a Fun Stack

Without any commercial restrictions, I chose Svelte as my front-end framework. I love how well it integrates a small number of great abstractions with web standards. Additionally, I used the GSAP library for animations and transitions, and TypeScript to preserve my sanity.

For writing and publishing blog posts, I chose to go with a statically generated SvelteKit site using mdsvex. I love writing using Vim motions in Markdown and mdsvex also makes it super easy to integrate that experience with custom Svelte components. Having new blog posts be a git commit allows me to build any publishing workflows with GitHub actions.

Sweating Details And Pushing Through Challenges

Although the desktop is the primary target for most developer portfolios, I invested a lot of time in the mobile experience. The constraints of a smaller screen size really forced me to get creative and led me to creating my favorite version of the homepage on mobile.

The two challenging parts of my website that I almost gave up on were incorporating the Sunrise visual from my inspiration and the home page transitions. To translate my design inspiration into something that works on the web, it needed to be able to scale down well to a smaller size. I accomplished this by re-creating the sunset’s “landscape” using fewer and larger shapes. This also allowed me to have the visual draw less attention when in a secondary context, such as the header, by hiding more of the “sun“‘s color behind the bigger “landscape”. To get the home page transitions working properly, I needed to refactor to structure and position all elements included in the transition similarly. After running into issues transitioning from different scroll positions, I decided to force an upwards scroll as part of the transition to ensure consistency.

Now What?

This is my first blog post, so if you’re reading this, that means that after months of work, I’ve finally launched. I want to celebrate and move on to other projects next. Going forward, my focus here will be on improving my writing skills and seeing if I can build the habit of creating and sharing things consistently.

Of course, there’s still a list of things I can see myself adding in the future which includes:

• An RSS feed or email newsletter to let people subscribe to see new posts.
• More interactive elements and visuals in my CV page to highlight my skills and key results acquired during my career.
• A publishing workflow to automatically push new posts to Medium, Substack, and LinkedIn if I decide to go full influencer.

For now, however, I’m proud to look back on what I’ve built.