Personal Portfolio Website

OVERVIEW

This project originated after seeing other well-designed portfolio websites and wanting to understand how they were built, while constructing something similar for myself. This year, I have gained a deeper interest in conducting hardware and software engineering projects, so a portfolio site is the perfect way to document all of those creations: past and present. I designed this site from scratch, learning more about frontend engineering, react’s framework, and application deployment. This site became both a technical learning experience, and hopefully will serve as a record of all my future creations.

WHAT I DID

• Built the site in React and TypeScript, which forced me to think carefully about reusability, layout consistency, and how different parts of the site should scale as more projects are added.
• Structured the site using Next.js’s file-based routing system, making it easy to add new project and research pages without needing to rewrite or overconfigure anything.
• Used Git and the terminal to push changes, debug broken builds, and resolve deployment issues between local and production.
• Managed version control and iterative development through Git/Github.
• Deployed the site through Vercel and learned how repository updates, build processes, and live deployments interact, which helped me understand how real web projects are maintained beyond just writing code.

RESULTS / IMPACT

• This project deepened my understanding of production-level web architecture using React and Next.js, particularly component-based design, the App Router, and static asset handling. Debugging routing issues, image loading failures, and deployment behavior clarified how framework-level decisions propagate through the build and CI/CD pipeline. The site now serves as an extensible Next.js codebase that I can iteratively expand as my projects and technical scope grow.
• Successfully created a strong front-end project portfolio website to display future engineering and research based creations and insights.

NEXT STEPS

• Add more purposeful animations and transitions using tools like Framer Motion, focusing on improving flow and making interactions feel more intuitive rather than purely decorative.
• Experiment with hero videos in place of static images for certain projects, exploring video optimization and playback handling in Next.js to keep performance reasonable.
• Explore adding interactive elements or small browser-based games, starting with client-side logic in React, and gradually learning lightweight backend approaches (e.g., Next.js API routes or serverless functions) if persistence or scoring becomes necessary.