DEV Community: Raagul N

Minimalist Porfolio - Submission

Raagul N — Mon, 11 Jan 2021 07:29:37 +0000

What I built

Here is my clutter free, minimal portfolio as a part of the DO Hackathon. No distractions in the background by some fancy graphics, no unnecessary interactions required. Click on tl;dr section to get to know me in a couple of minutes.

Category Submission:

Personal Portfolio

App Link

Custom domain - https://beyondtheinferno.me

DO domain - https://beyondtheinferno-v-2-7czxf.ondigitalocean.app

Screenshots

Description

The landing page needs all the details you need to get to know me in the professional formats - LinkedIn, Github etc.
tldr; section - an elevator pitch of myself, using kinetic typography using DOM nodes
Fully responsive animations with fluid typography

Link to Source Code

GitHub repo

Permissive License

MIT license

Background

Summary can be found in previous posts

How I built it

Summary can be found in previous posts

Minimalist Portfolio - Wrapping up

Raagul N — Mon, 11 Jan 2021 07:12:27 +0000

So, development was done. Time to submit? Not yet.

Optimizations and Testing

The major issue was that everything was powered by react-spring, so JS was handling all the animation. Which was causing the fans to go crazy. So, I switched the circles animation on landing page to plain CSS animations, and performance increased by a lot.
All the elements on the landing page need to be clearly visible in both the modes. I ended up switching the icons in dark mode and changed the hover color for GitHub as it was not very easily distinguished from the dark mode's background
Using react-spring to switch between the two routes / and /summary, I noticed that each time, there was a varied difference in different browsers and different devices. So, I added a play button and removed the auto start so that irrespective of load time, users can view the tldr; when they are ready and not miss a thing.
While testing across different browsers / different devices, I realised I had missed to put a overflow on the parent container for the Languages section in summary, which had resulted in a really big container being rendered in mobile views. Testing is important indeed.
Found this beautiful website that handles all meta tags for the major social media sites for the link preview. Also added a dynamic favicon that will change color when the OS' preferred color scheme changes.

Finally, Deployment

What better way to check if DO really were true to their word about quick account creation and quicker deployments than to start the entire process the night of the deadline? 😂 But super hassle free deployment and a really good experience overall. Coming from a role where you are constantly filtering out old StackOverflow solutions from 2010 so that you don't end up using outdated solutions, it was a welcome sight to not have to go beyond the one DO article page that helped me get all my doubts clarified.

And that's a wrap, submission in the next post.

Minimalist Portfolio - tl;dr section

Raagul N — Mon, 11 Jan 2021 06:51:32 +0000

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 -

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.
It needed to be short, it was after all a tl;dr
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 -

Intro section
What I do (with proof)
A quick overview of technologies I knew
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.

Minimalist Portfolio - Landing Page

Raagul N — Mon, 11 Jan 2021 06:15:39 +0000

So, ideation and brainstorming phase was done, requirements for the site were ready. Next step would be designing right?

Well...

I decided to go straight to development with the idea I had without trying it out in a designing tool like Figma first. It's almost never a good move, but in my case it helped me discover mix-blend-mode and background-blend-mode in CSS.

The main attraction in the landing page

The idea from the start was to have an SVG text element of my name with a clipPath & gentle gradient at the center of the page. Social media icons below the text and a dark mode toggle at the top right corner. But because of the discovery of blend mode and some cool examples like this and this, I decided to remove the gradient and put in small circles in a packed layout that would be masked by the clip path.

Changes I ended up making -

Made the circle radius to vary between 1 to 7 randomly to increase the effect on blend mode
Used mix-blend-mode screen and knew I would be using multiply for the dark mode

Without blend mode

With blend mode

The icons

Development of icons section was pretty straighforward, a responsive SVG image to depict the social media / website it stood for, and a hover state to help users know that it was an interactible element with action.

Icons with the hover state

Dark mode

Even before researching, from a user's perspective, I already knew all the necessities to create a good dark mode toggle by using them in other websites -

Should respect OS' color scheme
User should be able to toggle the mode
User should not have to re-assign his preference after quitting the website and re-opening it the next time (local storage)

I had started implementation using Theme Context when I discovered use-dark-mode. They had all my requirements in a single hook, so why re-invent the wheel?

Preview

Light mode

Dark mode

With that, my portfolio was a wrap.

Wait, that's it? Find out in the next post :)

Minimalist Portfolio - Preface

Raagul N — Sun, 10 Jan 2021 22:34:29 +0000

Last time I worked on my personal portfolio, I was working from a not-so-color-perfect display, with very less knowledge on web development and responsiveness.

This one's different, way different.

The Plan

My Layout Preferences

An ideal website in my opinion would be a no clutter, clean and minimal layout. I also loved presenting data in the form of beautiful visualizations, and realised I could somehow bring these two concepts into my portfolio.

Initial Ideation

I already had a vague idea that I would be majorly having a single focus point on the landing page, either my name in some fancy font / visualisation integration or a well edited image of me with some cool blend / mix effects. Latter was ruled out pretty quickly as I realized these two points -

I did not want the viewers of the website to be fascinated by my object-fit: contain skills
My photoshop skills were very basic

So cool + minimal visualisation with my name was decided.

Design Inspirations

Notion
Super - which had a amazing showcase section with super minimal but effective layouts
Covid-19 Tracker

Planned Functionalities

Dark mode toggle (a necessity in all websites in 2021 in my opinion)
Buttons to redirect to social media

Planned Tech Stack

React - been using it for more than a year now, loving it
d3.js - didn't go for any charting / visualisation libraries as this gave me more power to customise everything
react-spring - spring based animations felt so much more natural than timing based animation
CSS modules - needed scoping so that I didn't have to worry about naming conventions, but didn't want to go for JS styling libraries as I didn't want any unneseccary overhead.

With all that decided, I started developing the landing page.