Steps to Create a Mind Blowing (🤯) Portfolio
Tags: webdev, ux, ui, portfolio
Published: 2021-06-13 03:46:34

If you have a desire to build your _personal brand_, then a website that can promote your work is a must. **Personal Portfolio** is the go-to place to list out your _experience_, _achievements_, and any other relevant information. This article will show you the steps to create an amazing portfolio that leaves the viewers spellbound. I would also be sharing the things I discovered along the way of building my own [portfolio](https://tapajyoti-bose.vercel.app/).

![Portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cr6ocq4videj46wyssr.PNG)

# 1. Design

It is definitely a good idea to keep a design (at least a rough one) handy. It is far easier to make changes to a design than revamping an entire website. [**Adobe XD**](https://www.adobe.com/in/products/xd.html) or [**Figma**](https://www.figma.com/) are the best tools for this purpose. **Figma** has a free tier for its services and **XD** is free for students.

Feel free to look at other people's portfolios and templates for inspiration, but don't copy them. Modify & improvise them to suit your own style.

![Rough Design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uduxcg14144x0ygzermc.PNG)

# 2. Things to List out on the Website

Your portfolio is the perfect place for some **shameless self-promotion**, so don't shy away from mentioning any project, _experience_, _achievements_, _blogs_ or any other relevant details about you.

If you are just starting out, it is a good idea to build out a couple of projects before diving into building a portfolio, or else it will definitely look empty just like my [first portfolio](https://tapajyoti-portfolio.herokuapp.com/) - which is just a template filled up with my details (looking at this website now makes me cringe).

# 3. What Technology should I use?

Everyone has their own choice of technology. So use any technology you are comfortable using. The target is _smooth_ and _engaging_ **end-user experience**, people using the website will not be bothered about the technology you build your application with.

But I definitely would give you a suggestion: if you want your website to be indexed by search engines and plan on building a **Single Page App** (`SPA`), it is a good idea to create a static site using frameworks like **Next.js**. Usually, `SPA` performs poorly at **Search Engine Optimizations** leading to poor ranking on **Google** & other search engines.

The last thing you want to do is having to revamp the complete website just because your site is not ranked well by **Google** like I did to bring my website to _page 1_ from _page 4_.

![Search Results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ust78g3fc9ibimbjxeru.png)

# 4. Developing the Website

Now it is finally the time to develop the website. This is the time to bring out your inner artistic persona and actually improvise and implement the design you made in _step 1_.

Bonus Tip: Add micro-interactions particularly _hover effects_ to make your website more engaging.

# 5. Hosting the app

There are hundreds of hosting service providers available, my personal recommendations are [**Firebase**](https://firebase.google.com/) or [**Vercel**](https://vercel.com/) for simplified hosting as well as getting a professional domain free of cost (`<app-name>.web.app` for **Firebase** and `<app-name>.vercel.app` for **Vercel**).

# 6. Search Optimizations

Now that the website is ready, it's time for it to be listed by Search Engines. Submit your website details at [**Google Search Console**](https://search.google.com/search-console). You can generate a `sitemap` for your website from sites like [**XML Sitemaps**](https://www.xml-sitemaps.com/) which will be required by **Google**.

You can skip this step if you don't want your website to be visible on **Google Search**.

# 7. Network with other developers

You might be wondering _"How will networking with other developers help me create a portfolio?"_ Let me enlighten you. 

I met this amazing guy, [Nitin Ranganath](https://dev.to/itsnitinr) from whom I took the idea for the circle in and out animation for the dark mode (only for desktop). He also helped me a lot in incorporating this feature.

![Dark Mode Toggle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2deev0i5ptgyuscj85km.gif)

Always ask for help if you need it and don't hold back from helping others in their journey as well :)

# Conclusion

Hopefully, this article gave you an idea of the steps involved in creating a portfolio website and streamline the things I had to learn through trial and error, and avoid some silly pitfalls.

Don't be discouraged if the first version of your portfolio doesn't turn out as you wanted it to. Keep making tiny tweaks and improvements and over time, you will develop a jaw-dropping portfolio.

Now it is your turn to stun the world with your outstanding portfolio website. Best of luck in your endeavor.

![Best of Luck](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn5ga5oud0109544mu1x.PNG)

Did I miss something? Share your thoughts in the comments below 👇

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Want to work together? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

I am a student & freelancer who will soon start off as a Digital Nomad as soon as I graduate. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Want to see what I am working on? Check out my [GitHub](https://github.com/ruppysuppy)

Follow my blogs for weekly new tidbits on [Dev](https://dev.to/ruppysuppy)

Connect to me on:

-   [Portfolio](https://tapajyoti-bose.vercel.app)
-   [GitHub](https://github.com/ruppysuppy)
-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose-429a601a0)
-   [Instagram](https://www.instagram.com/tapajyotib/)
-   [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)