Portfolio Website

Background

It’s been a long time, since I wanted to make a portfolio webiste. Not just any portfolio website, but something that will just make the viewers go “Wow, that looks awesome” kinda. With some cool 3D effects, bunch of shaders and whatnot. But as usual, I procrastinated…, alot. Until finally, made this. Not so cool looking, eh? Well, stick along for now.

Here’s how it looks (in case you haven’t seen it yet)

1 2

Things I Learned

No JS/TS overhead

On my initial days, I picked web development just like most people out there, cuz its easy. But even though frontend is easy, I liked it. I liked to design and making good looking websites. Then I came across Three.js, and was blown off of the sites built on it. It did not feel like just a normal website, but t was an actual experience. I wanted to learn that, and hence I did, a bit. So I wanted to make a portfolio with lot of 3D stuffs in it or probably lot of shaders in it. But then, life happened… and my interests shifted.

Lately, I’ve been deep-diving into low-level systems, Linux, and thinking about performance and ofcourse performance all day long. That rabbit hole made me question every byte that hits the browser. Do I really need megabytes of JS for a simple portfolio? Why not just… remove all of that?

Let me put that statment in better words. I used Astro, and with that a lot of Typescript in it. But by no Javascript, I meant no Javascript shipped to whatever device you are currently reading this (excluding the part that’s used for analytics, that is injected on the page). In fact all of the publicly available pages on this domain are static sites.

So how all these effects are done? It’s all just HTML5 and CSS3 and nothing else, as simple as that.

HTML5 & CSS3

Yeah, I knew HTML5 with CSS3 is powerful, and so many things can be achieved with just CSS. But I did not know how much, until I finally tried to build a site with just that. Before this I knew just enough to center a div, and called it a day. But this project taught me alot of CSS, from advanced selectors, and pseudo-elements to some of the newer @-rules.

Recursion (Wait, What??)

This counts as my first ever recursion use case in real-world scenario - kind of. Not in JS, or some DSA question but in Astro itself. Hehe, I bet you did not expect that coming. If you do not believe me, then head out to this documentation of astro, and that’s exactly what I used to make skills section. Even I did not think I would be using recursion ever, in just another JS library, but here we are.

Why Does It All Matter?

Finally a site in my name!!! Apart from that, this is a weird mix of some of my interests, namely,

1. My obsession with performance
2. Some love that’s left to create nice UI
3. My curiosity for how far you can push “just CSS”

It is not the portfolio that I had been imaging, but this surely is something that I finally ended up building, I guess that’s just what’s a life is. Not much predictable.