Designing and Developing My Personal Portfolio Website (Archived)
Web Design • HTML/CSS/JS • REACT • Tailwind CSS
Project Overview
I designed and developed a personal portfolio website to showcase my design work and support my job search efforts. This project was self-initiated and independently executed between December 2023 and February 2024, combining both UI/UX design and frontend development.
Despite having only basic knowledge of HTML/CSS/JavaScript from university courses, I challenged myself to build the site from scratch using React. I learned as I built—researching online, leveraging open-source code, and using AI tools to fill gaps in my knowledge.
The result was a fully functioning, custom-built portfolio that helped me land multiple interviews, including at Canva, and ultimately contributed to securing a UX & Product Design internship and my first industry role.
Although I paused the site later due to performance issues and deployment limitations, this project laid the foundation for my growth as a designer who understands code—and led me to rebuild a more efficient site in Framer.
Role
UX & Product Designer + Frontend Developer
Design, Frontend Development (React), Deployment, Self-learning
Team
Independently Project
Duration
2 weeks
Source Code
Tools
Figma, Visual Studio Code, GitHub
Motivation & Goal
Why I build this website
I built this portfolio website to showcase my work and help with job applications. I had learned some basic web development in school, so I wanted to challenge myself to design and code a complete site on my own. This project was also a way to practice combining my design skills with frontend development, and to create something I could be proud to share with others.
Design & Development
Design & Development
🧊 Interactive Homepage with Three.js
To make the homepage visually engaging, I experimented with Three.js to display an interactive 3D model. I learned how to convert a GLTF file into React Three Fiber, allowing the model to be easily embedded and animated within the site. This helped create a unique, eye-catching first impression.
Design & Development
🧩 Modular Components for Clean Structure
For layout and structure, I focused on building a few reusable components to keep the code simple and efficient. These included a project card, a skills display (with app icons), and a vertical timeline using a third-party React component. These elements made the content modular and easy to manage.
✦ Work Project Card
Highlighting each project with a clean, consistent layout.
Helps visitors quickly scan project visuals and key details.
✦ Skills Display
Visually showcases my toolset with familiar icons. Designed to be lightweight, responsive, and easy to update.
✦ Vertical Timeline
Summarizes my educational background and experiences. Uses a third-party React component with custom styling.
Card component
React Vertical Timeline component resource
The Results & Impact
The portfolio site was successfully launched and helped me secure multiple interviews, including one at Canva, and eventually led to both a UX/Product Design internship and a full-time role.
Beyond job hunting, this project allowed me to apply design and development in a real-world context, strengthen my self-learning skills, and gain confidence in building and presenting my work independently.
Reflection & Next Steps
Through this project, I realized that while I enjoyed coding, maintaining and optimizing a custom-built site alone was time-consuming and technically demanding, especially with performance and deployment issues.
As a result, I decided to rebuild my portfolio using Framer, which allowed for faster iteration and easier content management—letting me focus more on design and storytelling.
This shift helped me find a better balance between creativity and efficiency as I continue growing as a designer.
For more details about the code and structure, view the source on GitHub.
