Throughout my engineering journey, I’ve built several portfolios to showcase my work and academic achievements. Over the years, I’ve redesigned and rebuilt these portfolios to add new features, experiment with different designs, explore new frameworks, or simplify maintenance. In this article, I’ll walk through the various portfolios I’ve developed, starting from middle school to the present, discussing the reasoning behind each update and what made the process engaging.

Portfolio V1 (2015)

My very first portfolio was built on Khan Academy ↗ back when I was just starting to experiment with programming. I thought it would be a fun way to stay engaged while creating something useful. A lot of the discussions on the site revolved around the fact that you couldn’t integrate JavaScript with their HTML projects, so I couldn’t make the site interactive. In the end, the portfolio didn’t have much content, but it was a great way to learn HTML and CSS, which helped me with future projects.

Portfolio V2 (2019)

Between my last portfolio and 2019, I worked on several backend-focused applications and realized I needed to improve my frontend skills if I wanted to properly showcase my work. To get a better understanding of web development, I watched CS50’s web development course, which was super helpful. I built a new portfolio as I was learning, so while it wasn’t perfect, the styling was better and it allowed me to effectively display my projects. I included a few of my Amazon Alexa applications, some math animations I made using Manim, and a few automation tools I developed with AutoIT.

Portfolio V3 (2021)

After completing the course, building a few more websites, and working at Caltech , I finally felt confident enough to create a more engaging portfolio that better showcased my work. Although it was still built using just HTML, CSS, and JavaScript—so I could use Github Pages’ free hosting—the design was much more polished. This was the point where I felt proficient enough in web development to create media that was both mobile-friendly and easily accessible. This portfolio holds a special place for me because it marked the beginning of my university journey, and it was when I truly started to grasp the vastness of software engineering.

Portfolio V4 (2022)

After Fall 2022, while working on GopherGrades V2 , I got my first exposure to React-based technologies like Next.js. I realized that tools like Vercel offered free hosting, which I could use to showcase my portfolio. At this point, most of my backend experience had been with Django, Flask, and other Python-based web technologies, so this felt like a perfect opportunity to dive into a new framework and expand my skills.

While working on this new website, my main priority was achieving feature parity with my previous portfolio. However, I also wanted to create individual pages for my work, similar to what you’re reading now or for my experience , projects , and blog posts . In previous approaches, this would have been tough since managing so many files would quickly become a nightmare. Using a tool like React allowed me to build reusable components, which made my code much easier to work with.

Overall I was very content with this portfolio and it lasted me a while. Unfortunately, I realized that writing these individual webpages—even when using reusable components—was a hassle. Simply put, it’s just not a good user experience to scroll through tags to find the content, change it, notice if the page layout has modified significantly or not, and update accordingly.

As I became more experienced with React and other similar tools I noticed ways I could better structure my code to be more user friendly and optimized. Firstly, I grew distasteful of the Material UI that I had used, it was nice for prototyping but limited the styles I could use in the final product. Additionally, I also found out about MDX which allowed me to generate webpages from Markdown files which would make editing these individual pages substantially easier. Lastly, I discovered web-metrics like First Contentful Paint, Cumulative Layout Shift, and First Input Delay to name a few. I decided that in my next portfolio I would account for these in my development.

Portfolio V5 (2023)

With these goals, I set out to create a new portfolio with MDX as a priority, focusing on using proper components and minimizing overhead through static rendering. The design remained similar to the previous one but with fewer colors to give it a more cohesive, themed look. I also learned to be more intentional about what to include and what to leave out on my web pages. The final result was a highly optimized site with all the features I needed for easy maintenance. Forks of this framework are now used in the DCSG ↗ and Social Coding ↗ websites which are designed with ease of maintenance as their highest priority.

In the end I was very excited about the results. Metrics were always in the green and I did not have to hassle with react components or other code in order to update the website, it was all automatic!

Portfolio V6 (Present)

All of this has led to the portfolio you’re viewing today. Even though V5 had all the optimizations I could ask for, with every performance metric in the green, I realized there was still room for improvement. While Next.js is a fantastic framework, it comes with more overhead than needed for the type of application I’m developing. That’s when I came across Astro, which offers static rendering with minimal overhead and allows for the integration of various frameworks like React, Vue, and Angular. Its lightweight infrastructure and support for extensions like MDX made it the most optimal choice for my new portfolio.

Everything you’re reading is all written in markdown, not a single line of HTML was written in this document. Everything from lists, checklists, quotes, $\LaTeX$, to entire codeblocks are all written using markdown. Overall the process works as follows:

Overall, by utilizing Astro I’ve been able to reduce my build time substantially. Not having the overhead Next.js brings is incredibly powerful to the end product. Moreover, Astro has made it easy to incorporate MDX and Vue which has made the code more readable and has allowed me to still have fancy features like the 3D models you can view on some pages if you’re on a desktop or laptop.

The Future

At the moment, I’m not entirely sure what the future holds for my portfolio. I’m really happy with where it stands—it offers everything I need for maintainability, fast rendering, and even some nice 3D models. As frameworks continue to evolve, it’s possible that I’ll eventually develop V7, but for now, that feels like a distant possibility.