Yay! I Created My First Portfolio! Here's How I Did It🎉

After months of hard work, I'm finally launching my portfolio to show the world.

I've always believed that social profiles are more than enough and you don't really need a portfolio (in most cases). But then it's hard to show your story and personality without a separate portfolio.

I've done UX designing, technical writing, open source development, and community management so it was getting hard for me to show everything using just one platform like GitHub, LinkedIn, and X. That is the main reason I decided to work on my portfolio.

Today, I deployed it on anmolbaranwal.com! There are still a lot of things and features I wish to add (like PWA, UI improvements...), but I think it's good enough to show the world.

Please provide your feedback, it would mean a lot! 🙏

Be careful out there, there is also the light mode (yeah, I know)!!

In this blog, you will find my approach to building, which part was the hardest for me, the tech stack I used, and the major takeaways from the project.

Which Part Was Hardest for Me?

Coding was tough for sure, at least for a few sections, but UI designing was tougher for me.

I wanted to create a wow factor and display all the necessary information in a way that's easy to understand. I struggled for a few months until I decided to ditch designing in AdobeXD and just start building.

In the end, I kept building stuff (with a basic structure in mind) and the design process became a lot easier.

For some sections, I've taken inspiration from a few websites (mainly in terms of UX) but I've coded everything myself.

In terms of performance, it's good on desktop screens but there is a problem of Largest Contentful Paint (LCP) on mobile screens. I improved as much as I could and thought of releasing it. I will improve it after a couple of weeks.

Everything Is Optimized and Automated.

I wanted a portfolio that required minimum effort to update, and that was my approach to building this.

Let's take the example of the projects section.

I've created a system that fetches projects from GitHub and shows only the allowed ones, with an easy way to arrange their order.

Then, if I want to update a specific field (and leave the rest), I can do that as well.

For instance, if I want to change only the description of the project and leave the rest of the information that is fetched. I could just add that in a data and it will be automatically used, keeping the other fields as same.

Coding this section with the timeline, recommended icon, and so many other things was really tough.

Almost all the other sections as well rely on just data, so it's easy to update everything.

Tech Stack

Let's briefly talk about the tech stack I used:

• Next.js v14 : as frontend framework (SEO-friendly)

• TypeScript : as the programming language

• Tailwind CSS : for styling

• Framer motion : for animation

• Forem v1 APIs : for fetching blogs

• GitHub APIs : for fetching projects

• Cursor free version : as code editor (switched from VSCode)

• GitHub : for storing source code (it's private)

• Vercel : for deployment and a live preview on every commit

  
  

I've also used different packages for different components:

• embla-carousel : for testimonials

• lucide icons : for icons

• react-modern-drawer : for sidebar in mobile screens

  
  

I created my own Icons component which made the work a lot easier with SVG files.

Fonts

I've used Open_Sans, Manrope from Google Fonts & a custom font for the heading of the links section.

Color

I'm a fan of dark modes, so I wanted to go with some dark tones as dominant ones.

I went along with Purple as a primary color. It represents loyalty so it suits me as a personality.

Sections in My Portfolio

All the sections that I've added:

• Home page
  • Hero
  • Companies
  • My Story
  • Work Process
  • Testimonials
  • Contact
  • Footer
• About
• Work experience
• Projects
• Blog
• Links

The most complex sections are Projects and Blogs.

I've used some open-source components as well, but it needed a lot of changes to get the final result I wanted. Most of the sections, I've done from scratch to keep the codebase clean.

In a few months, I'm also planning to add more sections like achievements and tech stack.

Major Takeaways

Instead of trying to design a perfect page or obsessing over every small detail, just get started.

Focus on creating a basic structure or wireframe, and then refine it as you go. The process becomes much easier once you take that first step.

I learned about a lot of things including:

• Open graph image and metadata at a complex level.

• Optimization techniques especially about Largest Contentful Paint

  
  

And so much more while building this. You will too!

Here is the demo video that I've used on the socials.

For now, I will be taking a break and will focus more on technical writing.

I understand it's not perfect, but I've spent a lot of effort coding it.

I've always enjoyed building projects to show the world, and this was really special for me. Thank you! 💜

You can connect with me on GitHub, Twitter, and LinkedIn.