What Inspired Me to Build This Site

I’ve always been curious about pushing the limits of web, particularly focusing on performance and interactivity. Earlier I had built a blogging platform Letterpad, which is an open source project. The platform has got around 3000 users, so experimenting with the site was getting harder. I need a playground where I could hack things around and not think about stuff breaking. Something where I could experiment with design concepts/technologies without writing good code. So I decided to build this site.

I also wanted to try something different other than React, something like Astro, a static site generator. I knew about Solid JS and wanted a project to use it. So I decided to use these technologies to build this site.

The Vision Behind the Site

My primary goal was to explore and understand what constitutes “good design.” With a personal site, the sky’s the limit but so is the risk of spiraling into design madness. Prioritization really became my focus; I made sure every component has its own purpose, and I added animations to help express this hierarchy visually.

I also leveraged MDX for its versatility, especially in rendering interactive demos, an ideal feature for a project like this. How awesome it is to be able to demonstrate code snippets and interactive components without the need for a separate code editor or sandbox.

The Tech Stack

I used Astro, MDX, and Solid.js. Astro’s focus on performance, view transitions and static site generation felt perfect for what I had in mind. Solid.js added a layer of interactivity without the overhead that comes with React.

My Design Approach

Design was one of the most meaningful parts of the process for me. I fell in the trap of thinking a lot of things that didnt have a strong purpose. And so I questioned every component of this site. I wanted the content to flow naturally between pages, kind of like an app where everything feels seamless and intuitive. I found myself thinking over even the smallest design details, often connecting them to real-world analogies to give them a deeper sense of purpose.

Unique Features of the Site

Some standout features include dynamic filtering, fluid animations, and custom components that enhance the user experience. For example, the animations are meant to be not just decorative but functional, guiding the user’s focus to important elements. The site transitions smoothly from page to page, providing an “app-like” feel. I also incorporated MDX to allow for easy embedding of demos and interactive content, which adds a hands-on aspect to the site.

Challenges and Lessons Learned

The biggest challenge was realizing that my original design concept was far more complex than I could implement at this stage. However, I feel like what I ended up with is a strong starting point. Another challenge was learning how to balance aesthetics with performance, making sure animations didn’t slow the site down. GSAP is an amazing tool for animations. It has a lot to offer. The concepts are easy to understand and the documentation is great.

I am still trying to learn design and the deeper concepts behind it. I will take the route of questioning every design decision I make. I will also try to understand the psychology behind design. I hope this site serves a purpose for others as well who are in the same boat as me.