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. https://youtu.be/KFPngmNt2Ow?embedable=true 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. 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. anmolbaranwal.com 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 . 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. Largest Contentful Paint (LCP) 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 Next.js v14 : as frontend framework (SEO-friendly) Next.js v14 : as frontend framework (SEO-friendly) Next.js v14 TypeScript : as the programming language TypeScript : as the programming language TypeScript Tailwind CSS : for styling Tailwind CSS : for styling Tailwind CSS Framer motion : for animation Framer motion : for animation Framer motion Forem v1 APIs : for fetching blogs Forem v1 APIs : for fetching blogs Forem v1 APIs GitHub APIs : for fetching projects GitHub APIs : for fetching projects GitHub APIs Cursor free version : as code editor (switched from VSCode) Cursor free version : as code editor (switched from VSCode) Cursor free version GitHub : for storing source code (it's private) GitHub : for storing source code (it's private) GitHub Vercel : for deployment and a live preview on every commit Vercel : for deployment and a live preview on every commit Vercel 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 embla-carousel : for testimonials embla-carousel : for testimonials embla-carousel lucide icons : for icons lucide icons : for icons lucide icons react-modern-drawer : for sidebar in mobile screens react-modern-drawer : for sidebar in mobile screens react-modern-drawer 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. Open_Sans Manrope 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 Home page Hero
Companies
My Story
Work Process
Testimonials
Contact
Footer Hero Companies My Story Work Process Testimonials Contact Footer Hero Companies My Story Work Process Testimonials Contact Footer About Work experience Projects Blog Links The most complex sections are Projects and Blogs. 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 . achievements tech stack Major Takeaways Instead of trying to design a perfect page or obsessing over every small detail, just get started . 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. Open graph image and metadata at a complex level. Optimization techniques especially about Largest Contentful Paint Optimization techniques especially about Largest Contentful Paint 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. https://youtu.be/KFPngmNt2Ow?embedable=true https://youtu.be/KFPngmNt2Ow?embedable=true 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 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 . GitHub Twitter LinkedIn

This post provides insights into new product. 

Agents 101: A Guide on How to Build Your First AI Agent in 30 Minutes!

Can You Make Your Portfolio in Just 4 Hours? It's Possible

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

100x Simpler - The Ultimate Open-Source Guide

How To Create a GitHub Portfolio

How To Embed Single Photos From Google Photos on Your Website and Notion Page

Real Feedback On My Portfolio That May Help You Improve Yours

Can You Make Your Portfolio in Just 4 Hours? It's Possible

How To Become a Web Developer in 2024

100x Simpler - The Ultimate Open-Source Guide

How To Create a GitHub Portfolio

How To Embed Single Photos From Google Photos on Your Website and Notion Page

Real Feedback On My Portfolio That May Help You Improve Yours

Can You Make Your Portfolio in Just 4 Hours? It's Possible

How To Become a Web Developer in 2024

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps