A picture describing the tile of the blog (how i build my portfolio website from scratch).

How I built my design portfolio website from scratch using Tailwind and Nextjs?

By Dan M. Kazimoto
Created on January 12, 2022

7 minutes read

Outline
  • Introduction
  • Timeline
  • Workflow and Tips
    • -Planning
    • -Designing
    • -Feedback
    • -Developing
    • -Deploying
  • Resources (tools i used)
  • Conclusion

Introduction

I used my twitter account @khazifire to document the process of my portfolio design and development progress. And a few people reached out to me regarding the design (how I came up with the user interface), technicalities (what tools I used to make and build the portfolio), as well as the timeline (process) of my portfolio.

In this blog, I will briefly explain my design process: starting with the planning (gathering information and brainstorming), the designing (creating user interface designs), the development (implementing the designs), and finally the deployment (publishing the website). In addition, I have also included some design tips which saved my life while I was building my portfolio 😂

Timeline

A popular Swahili proverb says “Haraka haraka haina baraka”, meaning we should always be patient because rushing things may lead to major problems and complications. I was not in a rush while creating the website. I started designing my portfolio website in November 2021 but ended up realizing it was not coming up as I had previously expected. In December 2021, I discarded all that I had done and started from scratch with a clear and fresh mindset.

I would spend a few hours each day working on my portfolio website since I was a bit free during my Christmas break. It took me 3 weeks to complete the entire project; 1 week was required to gather inspiration from other people's portfolio websites, and 2 weeks were spent designing and developing the project, where coding was done.

That being said, let's now talk about how I developed my portfolio and the checklist I made for myself. I believe these steps will help you understand how I approached the entire project. Regardless of how you choose to build your portfolio, these steps and checklists should be applicable.

Workflow (Process)

The Planning

My first step in building my website was on the information I wanted to include on it. This included information found on various pages. The next step involved designing the navigation and Information Architecture (IA). Information Architecture is the process of bringing together different elements to create something understandable (how information is presented).

I spent a couple of days gathering inspiration which prompted me to design a minimal website. Moreover, believe it or not, the reference for the home page was taken from the menu of old video games. After I decided on what to do, I made some rough sketches in Figma, and went on improving them.

old screen from a video game
Inspiration: Video Game Menu

The Designing

Typeface:

From my experience, typography is the most important element in designing, and choosing the typeface was the most important aspect while designing my portfolio website. I was looking for a monospace font which can easily be rendered, as well as used for listing code snippets. In addition, I also considered a typeface which has some old vibe feeling and brings us back to the past. After playing around with a few fonts, I ended up choosing Inconsolata.

Color:

For most web designers and front-end developers, choosing color is one of the hardest aspects of designing. But it's not always that complicated, you can decide on colors to use after going through some color inspirations on websites like Coolors, ColorHunt, and many others. For my portfolio website, I chose a minimal design; As a result, all I had to do was find a color that goes well with black. (Design tip: don't use pure black in your design, use shades of black.) I choose to work with yellow, dark grey, greyish white, and a shade of black.

Icons and Images:

Icons can be used to add more details to information and actions on a website. I aimed to use icons with a style that merges seamlessly with the typography I used on the website. All the icons used in this project were from Fontawesome. (Design tip: if you create your own icons, make sure they are exported as SVG. When developing it's easier to work with SVG than png,jpeg icons).

In addition, if you include pictures, consider using high quality images in your design, you can use some of the tools such as Unsplash and Pexels to find free, non copyrighted images.

User Interface Design (Putting everything together):

Once I decided on the typeface and color, I started working on the final design which was based on the sketches made while gathering inspirations. (design tip: don't finalize your design after making it, finalize it the day after. Doing this helps you avoid making biased decisions).

The Feedback:

The web design I made was minimal and simple. I did not want to design something trendy for my website but rather classic and easy to use. After everything was done, I shared my designs on twitter and forwarded them to a few friends; so that they could look at it and share their thoughts on it. (Design tip: you can do this in any way that you are comfortable) .

The Development:

The tools and technologies

Ideally, you should choose development tools before designing; because in some cases you may not be able to implement certain designs with some tools. You can either use No-Code tools, such as Webflow, Wix,Weebly; or go the hard and challenging way and build your portfolio website from scratch.

Being a web designer with some interests in frontend development and backend development, I accepted the challenge of developing everything from nothing. Creating the website from scratch was a challenging process yet remarkable and fun. I'm not saying it was easy, but it helped me learn the pain developers face when web designers make complicated designs (user interface).

For the portfolio website, I used NextJs, a Javascript framework, TailwindCss, a utility first CSS framework, and Github, a version control system. NextJs was new to me, it took me a few hours and some research work to get the basics. So why did I use Nextjs: it has good features such as server-side rendering (renders pages on the server), has good documentation, lots of amazing YouTube tutorials (e.g Nextjs tutorial by The Net Ninja). Anyways, enough technical terms, I'm not a backend developer, so make sure to check the official site @Nextjs for a better explanation.

Designing the website took me longer than implementing the design. (Design tip: designing (planning) before developing (coding) makes life so much easier since you end up coding while having a clear picture in mind).

After the coding was done, I spent a few hours working on adding content, optimizing the SEO (search engine optimization which helps rank your website on search engines), meta description, and finally uploaded the favicon (the small icon that shows next to a website name)

The deployment

I implemented all the necessary elements and fixed some minor errors. I finally hosted my website on Vercel (a platform that can be used to host static websites) and connected it with my custom domain name. Deploying the website was pretty interesting. I drowned in errors but learned my lesson. Before deployment, make sure you have no errors hanging around somewhere in your code.

The Resources (tools and technologies)

I used the following tools in the implementation of this website, and they are all free to use.

Conclusion

Thank you for spending your time reading this article. If you find this article useful, please consider sharing it on your social networks. I will be publishing more articles in the upcoming days. Please consider following me on Twitter @khazifire for updates. If you have any questions feel free to contact me.

Better late than never, Happy New Year.