Minimalist Portfolio - tl;dr section

TBH I was pretty pleased with myself after the landing page came out so good. It was clean, to the point, and the user's focus was right where I needed it to be - on my name and on the icons.

But I realised I wanted to do more than just create a portal for users to go to other sites. So came the idea of tl;dr section.

Ideation and inspiration

I was always fascinated by fancy typography and the lyrics music videos that made use of kinetic typography.

• This website had a collection of good examples, had them as my source
• Who could forget Apple's Don't Blink? I knew from the start I was going to keep it simple and clean like this

So, I decided to make one, but not as a video, but in a website format with actual DOM elements. Why? Because I am a web developer, and also because I can :)

Some mental notes I made to myself before development -

1. Time the words in a bit relaxed fashion so that even people who don't speak English as their first language could follow and read.
2. It needed to be short, it was after all a tl;dr
3. Syncing the text to music would be impossible, so no background music

Pre-development

react-spring was the perfect choice for animation as the spring based animation would make it more realistic and like the entire thing is a video without audio. The hooks and the docs made it easy to stop the animation at any time, chain animations together and configure each animation separately without any hassles.

The story I wanted to tell -

1. Intro section
2. What I do (with proof)
3. A quick overview of technologies I knew
4. Conclusion

Major Hurdle

Figuring out how to make the text appear smoothly and glide over to the left while also not disturbing the centering was tough.

My initial idea was to render an invisible node and let it render the (n+1)th step while the real node was rendering the (n)th step and I could use the width of the invisible node to calculate the position of the real node and transform: translate() it. But I soon realized that making that calculation and updating the value in the state from which the real node could use it before the next animation in the chain of animation happens, was difficult.

I ended up trading a bit of horizontal alignment for the smooth glide to the left. After all, it was just a couple of pixels, and it didn't seem to look skewed to the left / right in any device.

Desktop version

Mobile version

And with this section ready, it was time to put up a tl;dr button right next to dark mode toggle in the landing page.