React but WHY? Portfolio Website Redesign & some Trade-offs
How I saved myself from over-engineering a simple project
Hey everyone! I am writing this after a long period of 6 months and the project of redesigning my website was in my mind for quite some time due to constant updates in my resume or any new project or any blog had to be hard-coded in the existing website. This blog is not just about the website redesign but also how I prevented over-engineering and why sometimes not using the coolest tech is okay :)
Hey wait before moving ahead, have you read my journey working as a Product Manager for an early stage HR-Tech startup, would love to know your views on this one too!
So let’s start…
Portfolio Website Earlier
I believe every professional whether you’re an Artist or a Software Developer or a Student must have your digital identity. Now this necessarily doesn’t mean you should know how to code your website. You can definitely take help from Wordpress, Blogspot, Wixsite and the list goes on… Btw I had my first website-sorta on Medium, yep the blogging platform - here is the link.
If you’re wondering why Medium? Never doubt it’s SEO power!
So I created my portfolio website as a medium for showcasing my projects and technical blogs. Tech stack I used was very basic - HTML, Halfmoon CSS(with it’s inbuilt dark mode) and AJAX. You can find the old one here.
So before we move onto redesigning process, it’s important you understand the pain-points and why I didn’t opt for any pre-designed website templates?
The Dhairya Ostwal MindSet for Portfolio Website
So I would like and I firmly believe in these qualities for a solid portfolio-website:
Decent Sober Color Schema: You can’t always have dracula like color scheme for your blog website. Something looks good in light theme and it’s true.
Minimal Scroll: I faced this issue while checking different templates. Many have good animations, color but unfortunately too much scroll. Why can’t you provide just required information at first or with minimal scroll. To check a person’s projects you have to scroll all the way to the bottom, wait for it to load - “oh my patience”.
Speed: Very Very important, you can deploy all kind of animations use icon-packs, CDNs, frameworks but please care about the speed. Did you even open inspect window and check the network load time with respect to Slow 3G and cache disabled. Trust me it matters!
I genuinely believe if an external person is viewing your portfolio website he/she must get the knowledge about you and your work within seconds or a few minutes if you provide the information at the right place and if your website is not fancy enough to not care about slow networks
New New!
So what did I change in the new design of my website? Just the color scheme or the looks? Nahi baba :D
Here are the changes:
Yes the looks, UI improvements with respect to 2 color combinations and font usage and font-weight. Did I mention responsive to iPads also :D
Removal of Halfmoon CSS and pure self coded CSS :)
Large improvement in speed reducing load time by 80% This was achieved by replacing font-awesome CDN and import with images and SVG usage. Currently on relying on Google Fonts CDN which further on if we wish we could store in
assets/
font awesome stats of 10s load when Slow 3G and Cache Disabled Also while testing on the website, since we have icons on the landing page and if they take a lot of time to load the user loses the interest, hence icons on the landing page had to be stored in.
As we can see square boxes instead of icons during initial load of font awesome icon CDN usage Removal of AJAX. AJAX was earlier used since AJAX provides quick loading and gives an experience of Single Page Application(SPA) but only works but with static templates. So here on things become interesting…
In our scenario:
In this website instead of manually updating links everywhere for blogs and projects I am using JSON which via controllers I am displaying the contents using Fetch API in JavaScript, hence DOM Manipulation. Thereby your HTML contains ideally a<div>element.
Proceeding with AJAX would ultimately result in loading of a HTML webpage where JavaScript is disabled thereby none of our JSON data gets displayed.
Hence AJAX was out of the picture moving forward.
Tough Decisions here?
Yes there were certainly many of them but I would like to highlight on the important one -
Instead of relying on existing Single Page Application I opted to go with multiple HTML pages.
But could you have used React JS or any other framework?
Certainly yes but this is a very simple project intended to display user’s information and his/her work and achievements. Why overcomplicate it with packages and component structures. Overall we have only 3 pages right and very little task of DOM Manipulation.
React JS is good if you want to build a scalable systems and have multiple screens where components would be reused. Here we are reusing our bottom navbar only.
Main focus here was on the SPEED ⚡️both in terms of human effort and accessibility ease.
Trade-off to highlight: Only trade-off which I feel is the missing presence of AJAX no refresh loading and single page experience. Though for the first time one could be highlighted of page loading but over a period of time as it gets cached thereby smooth experience of switching among multiple HTML pages.
Explore the update portfolio website & GitHub link.
Why nothing like Jekyll or Hugo for Blogs?
I have seen multiple personal blogs on Jekyll or on Hugo. Prior moving onto Substack I started with Gatsby but as a writer you want to communicate with your audience at ease and so should be the experience with your audience. Sure you could deploy Disqus and carry on communication but SEO and newsletter mailing are several features which Substack and Medium do amazingly well! Hence I will be continuing my blog here and on Medium.
Hope this article creates a part of value in your life. If you liked reading about my journey please consider sharing this article 🌻.
Happy to connect on LinkedIn.