Building your Next(.js) Portfolio Website

Intro

After taking a month-long break, I worked on my portfolio to add my recent projects. That’s when I thought my portfolio needed a revamp. In this article, I will share the process of working on my portfolio and give tips to build your next portfolio.

Photo by Fotis Fotopoulos on Unsplash

Process

My portfolio used to contain a lot of trivial information. This time, I adopted two new principles for my portfolio website:

1. “Keep it simple, stupid.”
2. “The less, the better.”

It turns out that keeping your portfolio simple works, wonder why? I just thought who might visit my portfolio. The number is probably around 1–5 people per week, as I have linked my portfolio website on my LinkedIn and my resume (I’m actively applying for internships).

A portfolio is meant to show your accomplishments. My target audience would be from the tech industry. Hence, I felt keeping the info light and having fewer animations would help me. I felt that having fewer animations was better because of JavaScript (Ooof!). The less JS, the better. Animation requires a lot of JS code, depending on the kind. This increases the page load and impacts the performance . Another reason is the target audience wants to see your accomplishments on your portfolio website rather than fancy animations. So yes, “Keep it old school, Mr. Smarty Pants.”

The color palette I went with are:

1. Schiava Blue
2. Snow White

The reason I chose blue is:

• Blue is favored by so many people, it is often viewed as a non-threatening color that can seem conservative and traditional. [1]
• Blue calls to mind feelings of calmness and relaxation.3 It is often described as peaceful, tranquil, secure, and orderly. [1]
• Blue is seen as a sign of stability and reliability. Businesses that want to project an image of security often utilize blue in their advertising and marketing efforts. [1]

The reason I chose white is:

• White often symbolizes cleanliness, purity, and safety in Western culture. (For example, American brides typically wear white to represent innocence before starting their marriage.) [2]
• The color can also represent neutrality or space. In fact, white creates “breathing room” between two or more elements. [2]
• In recent years, we’ve even seen tech, artistic, and fashion brands keeping their design clean and simple with white logos. [2]

I chose Poppins as my primary font for the website as it is open-source and can be used for both title and body texts. Then, it was time to decide on the content to showcase. I planned to showcase projects and blogs, along with an ‘about me’ section and a contact form.

You may ask why a contact form is necessary. The answer is that it shows that you’re interested in a future collaboration or even connecting with someone who shares your interests: “Always keep the door open for new opportunities!”.

Tech Stack

If you wonder why I didn’t discuss this at the start of this article, the reason is that the tech stack doesn’t matter until we decide on the “What?” and “Why?” (in my opinion — thanks to my team manager, I had the opportunity to learn this from him). And yes, think of your portfolio as a product. You are using this to advertise yourself.

• “What?” — A portfolio website showcasing my (a robotics graduate student) small info about me for first-time visitors, works, blogs, and a contact form to connect with me.
• “Why?” — Show my projects and how I have solved a problem with an image; blogs can attract the audience to view/read them and know about my work in much better detail. A contact form to connect with new people. (professional space)

I prefer my sections and other stuff to be a component, so I went with Next.js. As I plan to work on more projects, I must keep it as dynamic data. So, I planned to store it on Firebase Firestore. The reasons that made me choose Firestore:

• Scalable NoSQL real-time database
• Flexibility in data storage
• Collections and document-based storage
• Provides offline support

These reasons persuaded me to use Firestore, and I also used Google’s Firebase Storage to store and serve a few of my static data on my portfolio website. I always style using TailwindCSS, so there is no compromise (I’m a Tailwind fanboy).

Firebase seems to have improved its documentation, instantly becoming my favorite.

Design made on Figma

Made using Next.js, TailwindCSS, and some help from StackOverflow ;)

Challenges

Medium Public API

• Medium doesn’t seem to have a proper public API to fetch a user’s data.
• Though it has an RSS feed API, it wasn’t helpful. I saw many people using third-party tools to convert it into a JSON object, which didn’t seem to work either.
• At last, I planned to store my blog data manually on Firebase.

NEXT_PUBLIC as the prefix for my environment variables

• If you haven’t heard about this before, take a look at this: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
• TL;DR: Environment variables without this prefix will not run on the browser but only on the client side.

Lazy Loading the images

• Well, it’s easy, right? However, using Tailwind, I had difficulty hiding the loading bar when the image loaded completely.
• The Fix: I used the style attribute. (nothing better than going old school)

My Do’s and Don’ts

Do’s

1. Keep your portfolio precise to the point: “Sell what’s needed for your customer”
2. Include a contact form
3. Use the right color palette for your portfolio
4. Link your social IDs and other contact info to reach you out

Don’ts

1. Using flashy or dark colors in your portfolio, which seem to contrast poorly with the color palette
2. Adding trivial information
3. Using inappropriate language
4. Too much JS! (Please don’t commit this sin)

Metrics from Google Lighthouse

After deploying on Vercel, I used Google’s Lighthouse tool to check my portfolio’s performance.

Desktop navigation results

These results prove that Next.js is indeed great for SEO and other factors.

Future Scopes

1. A Content management system (CMS) to read and write the data to showcase on my portfolio
2. An interactive site to customize or build the components from scratch for the portfolio.

Final Thoughts

Thanks for taking the time to read my article. I hope you enjoyed reading it. Click here to check out my portfolio website. Feel free to share your suggestions in the comment box.

References

1. Verywellmind — The Color Blue: Meaning and Color Psychology | https://www.verywellmind.com/the-color-psychology-of-blue-2795815#:~:text=Because blue is favored by,sign of stability and reliability.
2. treefog — Color Psychology: White | https://treefrogmarketing.com/color-psychology-white/#:~:text=White often symbolizes cleanliness%2C purity,between two or more elements.https://treefrogmarketing.com/color-psychology-white/#:~:text=White often symbolizes cleanliness%2C purity,between two or more elements.