DEV Community

loading...

Minimalist Portfolio - Wrapping up

beyondtheinferno profile image Raagul N ・2 min read

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

Optimizations and Testing

  1. 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.
  2. 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
    Alt Text

  3. 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.

  4. 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.
    Alt Text

  5. 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.

Alt Text
Alt Text

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.

Discussion

pic
Editor guide