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, community management so it was getting hard for me to show everything using just one platform like GitHub, LinkedIn, 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 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 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! 💜
Top comments (34)
Great job! This website is very unique, and I love the choice of colors. The customized scrollbar is a fantastic touch - really well done! 🚀
Here are a few suggestions for improvement:
I also have a few questions:
You can check my new tool for analyzing dev.to posts here if you are interested. It is still in the draft phase.
Thank you for the detailed feedback, Nikola.
Yes, this was also flagged as an issue in PageSpeed Insights. I didn’t want them to be too big and distracting but I will adjust them as much as possible to make them more accessible.
I will work on other points as well.
It's not using a tool, simple css code. You can inspect it as well.
Again, pretty much a component, each box has a different design. The icon on the back is SVG as background (with the position adjusted).
I’ve decided not to make it open source for now since most people don't really follow the rules of license and moderating it as an individual is difficult. I might open source it later, but that won't happen for at least the next 2 or 3 months.
Thank you for checking it out. 💜
You're welcome!
Great job building this portfolio, Anmol. I really loved it. 👏
There's one small issue I noticed, the cursor is not working on Firefox-based browsers. I’m using Zen right now, and the custom cursor isn’t showing up. Everything else is flawless. 🔥
Thanks for checking it out, Shrijal! 🔥 Means a lot.
I only tested it on Chrome and Edge 😅, so I will look into the issue and fix it asap. Appreciate your feedback :)
Well done. The performance remains stable while still engaging and well suited for the audience you are delivering to. I agree with your statement "Just get started" - So true. Get the minimum requirements there so potential clients, customers and employers will see something - usually a good idea to have minimum of resume and an about section. Then focus on the big release while time permits. Great work Anmol!
Means a lot, Jeffrey! 💜
I wasted several months just trying to design perfect things, only to realize that later. There is an about section and will also add a
skills/tech stacksection later on. As for the resume, I haven’t updated it in a few months so I kinda avoided it, but I will think about it.Thank you for the advice. Appreciate it.
Looks nice 👏.
Can you some insights on Largest Contentful Paint optimization,
It check your site on pagespeed.web.dev/ and got below result i am not sure if pagespeed give different result each time.
PageSpeed Insights Result
Thanks for the feedback, Prince.
I’ve been optimizing it for the last two days, but the LCP issue on mobile screens is caused by the paragraph. I tried fixing it, but nothing really worked. And yeah, it was giving different results each time.. I checked it multiple times.
I even said this in the post as well, there are performance issues and I will work on it in a couple of weeks.
Still, thank you for taking the time to check it out.
Beautiful stuff!
Thanks Dilpreet! 💜
Great job mate, it requires lot of work to get a design like yours.
You and almost all programmers love the black theme.
Maybe in the future you consider adding different themes, for that i suggest using scss.
Keep with the good work.
Thanks Jose! 🔥 Almost every programmer loves dark mode haha. That’s why I put more effort into that theme (compared to light mode). I don’t think we need to add more themes, but I will definitely use scss if I ever consider it.
Awesome 😎
Thanks man. 🔥 Rohan pointed out a lot of bugs, it's your turn now haha.
Hi, if you 're fine with the feedback:
One of the best portfolios I have seen in a long time.
Thanks Aditya! Means a lot. 💜
Looking elegant and clean congratulations , I also have a portfolio site : prankurpandeyy.netlify.app please share your feedback
Thanks man. It looks good! You can also use tools like Framer if you want to explore the no-code side of things.