As a developer, having a personal portfolio website is essential—not just to showcase my work but also to demonstrate my technical skills in a real-world project. Rather than building everything from scratch, I decided to start with an existing open-source portfolio template and customize it to match my personal preferences.

Beyond just modifying the frontend, I also wanted to streamline deployment by setting up a CI/CD pipeline. My goal was to automate the build and deployment process so that any updates I pushed to my repository would be automatically deployed to an AWS VPS. This would not only save time but also ensure that my site remained up-to-date with minimal manual intervention.

In this post, I'll walk through my process—from finding a frontend template, forking and customizing it, to designing a CI/CD pipeline for seamless deployments. If you're looking to build your own portfolio or explore automation in web development, I hope this write-up provides valuable insights.

Inspiration

Before diving into the technical side of building my portfolio, I wanted to get a clear vision of what I wanted it to look like. Instead of designing from scratch, I explored different portfolio styles to find inspiration. One of the most helpful resources I came across was Portfolio Ideas, which showcases a variety of portfolio layouts.

Forking the repo

I was looking for portfolio projects built with modern frontend frameworks like React, Next.js, or Vue.js. My main criteria for selecting a template were:

• Clean and modern UI – A professional-looking design with good typography and spacing.
• Responsive layout – The site should work well on both desktop and mobile devices.
• Ease of customization – The codebase should be easy to modify so I could tailor it to my needs.

After evaluating a few options, I found a portfolio template that checked all the boxes. It had a simple yet elegant design, smooth animations, and a well-organized code structure.

Forking and Setting Up the Project

Once I settled on a template, I forked the repository on GitHub to create my own copy. This allowed me to make changes while still benefiting from the original project’s structure.

https://github.com/sharqX/portfolio.git

Setting up the project locally

git clone <https://github.com/username/portfolio.git>

Once I had the template running locally, the next step was to customize it to match my personal brand and showcase my work effectively. While the base design provided a solid foundation, I wanted to make it unique by tweaking the UI, adding my content, and implementing additional features.

Customizing the Portfolio