Building this new portfolio was more than just stacking screenshots; it was an exercise in integrating design principles with efficient development practices. Here’s a look at the experience of creating this high-performance, filterable project showcase.

1. Defining the Core Experience

My first challenge was moving beyond standard templates. I wanted a site that wasn’t just aesthetic, but highly functional. The goal was twofold: speed and usability.

• Design Choice (Dark Mode & Font): I chose a Dark Mode foundation because it’s easy on the eyes and provides incredible contrast, making the project images truly stand out. Pairing this with the bold, modern Rajdhani font family gave the entire site a strong, professional voice.

• The Grid Dilemma: I decided on a two-column grid to maintain consistency. To avoid the problem of uneven layouts, I implemented a fixed $\texttt{300px}$ height for all image previews. This ensures the grid always looks clean and uniform, regardless of the original project screenshot’s aspect ratio.

2. The Power of JavaScript Data

The biggest decision was how to handle content management. Instead of relying on a complex external database, I chose a simplified, fast approach: a JavaScript Data Array ($\texttt{projectData}$).

• The Short-cut: This method makes adding new projects incredibly fast. I just input the $\texttt{name}$, $\texttt{url}$, $\texttt{categories}$, and $\texttt{previewImage}$ into the array. The code handles the rest—no database logins required.

• Dynamic Filtering: This array fuels the dynamic filtering logic. The $\texttt{renderTabs}$ function scans the array, calculates the project counts for categories like ‘eCommerce’ and ‘Agency,’ and instantly displays or hides the tab.

3. Mastering Filtering and Flow

A key challenge was managing content overload. With many projects, displaying everything at once is overwhelming.

• The Limit: I implemented a strict limit, showing only the top 4 projects per category initially. This keeps the initial view clean and focused.

• The ‘See More’ Toggle: The dynamic ‘See All (X)’ / ‘See Less’ button ensures users can load the remaining projects instantly, improving initial page performance while retaining full access to the portfolio.

4. What I Learned

This project was a reminder that performance and aesthetics go hand-in-hand:

• Design Dictates Code: Ensuring the category sidebar’s height adjusts perfectly to the number of visible tabs required implementing $\texttt{align-self: flex-start;}$—a subtle CSS fix that was crucial for the overall layout quality.

• Efficiency Wins: Choosing an efficient structure (JS array over heavy DB) drastically improved load times and simplified my maintenance workflow.

I’m incredibly proud of how this new showcase reflects my commitment to clean design and robust front-end development.

I invite you to explore the finished product and let me know your favorite feature!