Rejecting Template: The Making Of My Digital Home

This website is what happens when you help a friend

It all began with a discord call in the winter of 2024. My best friend needed help with a simple portfolio for a college assignment. Just simple HTML, CSS and some JavaScript but even that was optional.
Even though I'd been programming for years, I internally groaned.

I had tried web dev once, hated it, and vowed to never touch it again, but I reluctantly agreed to help, leaving my comfort zone of Python behind. But still, stubborn as I was, I always try and do my best when it comes to writing code. Unlike my friend who just wanted to get the assignment done, I went above and beyond to help him even though I knew it wasn't necessary. Somewhere during this process however, I realized that when I looked at what I had created (just some simple cards), I was very happy.

Looking at my creation, I felt proud and most importantly, how I designed it, it represented my own personality in a way. It felt impactful, often when I programmed in other things, the impact was never immediately tangible. But here, I felt it.

Almost a full year later now and well, what a ride it has been.

Humble Beginnings

I started the project sometime around March. Back then, I was looking for a way to showcase my portfolio in a visually appealing way. My first swing was with Electron, I wanted to make a desktop app that would work almost like a presentation where you could freely press buttons to move it along but I quickly scrapped the idea since I was still awful at CSS, I couldn't even get a single image to fit in the way I wanted.

But looking around in other languages, like C++ with Qt, I quickly realized that if you wanted to make good designs, Front-End with HTML, CSS, JS was the easiest and most reliable way.

Although I was still very bad, I decided to bite the bullet and started my first React project with no intention of actually finishing it, in all honesty, it was meant to be another thing on my resume.

That project quickly grew and was turning into this website.

The Snowball Effect

First Steps: Mastering the Fundamentals

I began learning the fundamentals of React. The functional structure, hooks, React's render cycle and much more. At first, I found it a bit needlessly complex, but as someone who loved writing functional code, it quickly grew on me because I no longer had to worry about Imperative code. I could just focus on each part of the page one step at a time, make it look good and move on to the next slowly improving each concept.

With the help of Vite's built-in support for CSS Modules (God Bless Vite), there was no need to worry about CSS class names either which made learning a hell of a lot less frustrating. But what really made me start to have some fun was the hooks, although complex at first (especially useEffect), I really loved their separation of concerns. Want a value that triggers rerenders? useState. Want a value that doesn't? useRef. It was simple in use but it allowed me to really map out the design of my project in my head. It allowed me to grasp the website in a tangible way and it even made the idea of JavaScript's Event Loop more sensible.

Not to mention, TypeScript. As someone who loves explicit types from other languages like C# or C++, being able to have explicit types not only made the mistakes less likely but it was another way to map out the structure of my website, it made it more clear and intentional.

All of this was extremely important because it allowed me to enjoy writing code and that's a big factor as to why the project grew so quickly. If I wasn't having fun, you wouldn't be here with me.

The Turning Point: No longer just a Portfolio

They say when you're having fun, work doesn't seem like work. And that's how I felt as I started making commits every day of the week, making hundreds of line changes per commit. My GitHub commit history quickly filled up with countless changes, sometimes multiple commits in a single day. By this point, I had gotten used to CSS and I was starting to like it. One interesting thing about Front-end development I learnt was how quickly your focus can shift. From creating component logic in React with props, hooks and control flow to structuring the layout of the page with CSS. I now understood flexbox, could finally get images right, knew how to use grid and could do responsive design.

My skills in TypeScript had also grown substantially, I could manage my data and structure my types accordingly. It all felt natural to me now. The friction had completely dissipated.

I now felt comfortable working in my project. This comfort gave me the confidence to take the next step and truly turn this into something bigger.

Growing Ambition: Feeling of making an impact

Impact. It's not something that's easy to grasp for the average non-techy person who doesn't understand programming. But Front-end development isn't like that. Everyone can appreciate a good design, something that wows them. And I had gotten good enough now that I could wow people. I would very often take feedback from people while working on my project, mostly family, and I realized how happy I felt making designs they liked.

I was making an impact, something that was extremely rare in my years of programming. This impact made me realize that this project didn't need to be restricted by some professional standards. Until now, I had been following the template one would when making a portfolio site. But now, it wasn't about what I should do. It was what I wanted to do. My project wasn't just another in the list, it needed to be something truly better. Greater than all my others, the pinnacle of my portfolio.

This was no longer a project or even a website but a reflection of my personality and passion. Sounds dramatic, maybe even cheesy and I am probably overselling it quite a bit here but that is how I felt.

Feeling your impact is addictive.

The birth of VasuVerse

It was time to actually turn vision into reality. To fulfill my ambition. It was time to put my skills to the test.

Technical Deep Dive: The How's, The Why's

Laying the foundation: Reusability and Type Safety

I implemented Framer Motion into my project with npm to allow for smooth animation handling through declarative code in React. I also decided to use React Router to structure routes in the website to give way for blog posts with dynamic URLs.

I would often follow a pattern of defining an interface with a react component, ensuring strict type safety. I would always go and make my components as reusable as possible with several props to change its behavior.
That extended to the json handling too which would be kept separate and under different types.

Making it fast: Optimization

I then shifted focus to optimization. I started using async functions to prevent blocking the main thread and implementing caching strategies like IDB and localstorage to reduce network requests and processing. That extended to the CSS too where will-change was used to elevate animations to the compositing layer of the Web Rendering Engine. Hooks like useMemo and wrapping components in React.memo became essential in preventing needless rerenders and improved performance dramatically. I re-evaluated every useEffect and eliminated any useState that could be a useRef instead.

Accessible for everyone: Accessibility and Semantics

I wanted VasuVerse to be welcoming to everyone, so I dove straight into HTML semantics and accessibility.

All my cards now considered aria-labels, all my images had to have descriptive alt text and all my interactions needed to be fully usable using only a keyboard. I synced my React state updates with the onFocus and onBlur handlers so the keyboard experience isn't ignored.

I made my JSX more semantic, using section for distinct areas with their own headings, using article for blog posts. I even used the time tag and had UTC compliant dates specifically in the date-time property to help search engines with understanding my content.

The Content Engine: MDX

Finally, for the blog itself, I used MDX. With the help of the mdx parser plugin with Vite as well as gray-matter for frontmatter parsing, I created a smooth pipeline to convert my MDX content into a valid React component.

All of this took a lot of effort and although at times it was tough, it was all very much worth doing.

I had built a fast, structured and accessible website. One I could proudly call my home.

My Favorite React Component

My favorite is most certainly the sidebar menu, specifically the button itself. See, when I was making the sidebar, I was considering options on how to animate the hamburger menu itself so my brother told me to visit the McLaren website. Even right now, if you visit it, you'll notice that my button animates very similarly to their button. I looked at that button and I was confident enough that I thought, 'I could do that.'

I made the button the very next day.

This button served proof of my growth that I could just look at something and replicate it in my own way. People often joke about designers making things tough for developers (which isn't even true) but for me, design was being translated straight into code. I would think of a design and the code would write itself.

The Future of VasuVerse

The purpose of this website is to serve as a one-stop gateway into the world of Programming, Gaming and 3D art. I will continue to improve the design as time goes on, make further optimizations and work on refactoring code.

I will be posting weekly blogs so if you liked this piece of writing, check out my other blogs and tune in once a week for some teen's rambling. I'll target every Friday (Indian Time) for a new post.

If you have any feedback, feel free to contact me directly. There's a lot of things on this website so I can't cover all of them and come up with improvements.

Let's make this the best place for everyone interested in Programming, Gaming or 3D.

Conclusion: Was it worth it?

Hell yeah, if you've read this far, it's already worth it. I am gonna keep writing posts so long as there's even a single person reading them. I enjoy programming, playing games and creating new models in Blender, being able to share that passion with anyone else is good enough for me.

Learning so many different things, it has helped me grow as a person and I will do my best to ignite that same passion in anyone who needs it.

Thanks for reading! I really appreciate it.