I Got a Perfect Lighthouse Score on My First Portfolio Website!

#react #javascript #webdev #beginners

I recently finished building and hosting my personal website. My goal was to keep the website static, clean, and fast. In order to make sure that I was following the best practices, I was also trying to achieve that perfect Lighthouse score.

Here are a few details about the technologies I used:

Next.js

I knew that selecting the right tools to build a website can be a key to optimizing SEO performance. Since I was building a personal website, I knew I had to use a static site generator. I also wanted to add a blog section that used the DEV.to as a CMS to retrieve my blog-posts. So I knew there was a dynamic aspect to my website as well.
Using Next.js was a no-brainer since it was the perfect solution for my problem and an added bonus was that I was already comfortable with it.

Tailwind

As much as I hated using Tailwind on my first project and thought that I'd never continue using this utility framework for any of my further projects, I'm pleasantly surprised to say that this is my third project with Tailwind, and I cannot imagine doing any design work without it.
I have already made a post about my favorite component libraries using Tailwind and used some of the components from Kutty for this project as well.

Typescript

This was a pain to learn. For someone who's self-taught and has only worked with JavaScript, I could not see why anyone would spend so much time defining types for every single element or component. However, as soon as I started importing data from DEV.to APIs, I got it. I did not face a single cannot read property of undefined errors and just for that, I am willing to learn and improve my TS skills.

Things I like:

Having a good Lighthouse Score was of prime importance to me, given that this website is an online representation of me as a developer and will potentially be seen by recruiters and fellow developers alike. I am planning to make a separate post about how I achieved the score, but it's fair to say that I am pretty happy with the result.
I also like the minimalist and clean design. I was planning to add some animations using Framer-Motion but then decided against it, since I wanted to deploy rather than spend another week learning a new technology that I didn't plan on implementing in the first place.
Google Analytics helps me monitor the web traffic
Dark Mode only!😎

Things I wish to improve upon:

Add a custom domain name
I need to add my resume
Fix some minor bugs in my projects
Add a copy e-mail functionality to my 'Say Hello' button instead of opening a new blank window
Add Canonical URLs to my blog page
Add a comment section at the bottom of every blog page that redirects the user to the specific article on DEV.to.
Syntax highlight the markdown blogs

Feel free to visit the website. I'd love to hear your thoughts on how I can improve it and I'm very much open to constructive criticism!

Oldest comments (67)

Pawan Pawar • Mar 23 '21

Good one!

Pranav Birajdar • Mar 23 '21

Thank you Pawan!

Hiren Sakhiya • Mar 23 '21

Good Start!

Pranav Birajdar • Mar 23 '21

Thank you! 🙏

Supportic • Mar 23 '21

You could improve on accessibility what lighthouse could not catch.
e.g. your menu toggle button is not toggeling aria-expanded
or you have tabindex=0 on a div around your logo link. The link itself has by default tabindex=0. Use p (block) or span (inline) tags for text elements.

Pranav Birajdar • Mar 23 '21

Thank you for the feedback. I totally forgot about the menu toggle accessibility. Nice catch!

Pankaj Patel • Mar 23 '21

This is some good looking website.

For Blog page, I would recommend to make the Post card bit bigger with more excerpt. and publish date below title (as it is not the important info here)

For Projects, I would recommend to align the project image to right side (alternate end of the text content)

For domains, checkout Bigrock (.com for INR 399 via affiliate bigrock-in.sjv.io/c/1658967/101690...) guessing that you can buy domain in India

Otherwise google, namechap, netlify, cloudflre offer good price on domain names.

Let me know if you need some help setting up.