My Website | Personal Portfolio
A Personal Digital Creation of My Work
Project Overview
This project represents my journey of creating a personal portfolio website to showcase my work in UX design, art, and other professional endeavors. The goal was to create an authentic, user-friendly platform that effectively communicates my skills, experiences, and personality while providing an enjoyable artistic navigation experience.
Role
UX Designer
& Developer
Tool
Figma
Cursor AI
GitHub
Tailwind CSS
Date
February 2025
Research & Design Process
The design process for my portfolio website began with research into effective and accessible UX portfolio designs, learning about the design of a case study, and determining the most authentic way to present my work. An important part of the designing was self-reflection and integrating my artistic flow into this digital medium. Creating the User Persona, Storyboards, and iterations of the Information Architecture helped polish and articulate my vision of the kind of user flow I wanted to create.
User Persona
Storyboard
Information Architecture
Platform
To ensure maximum accessibility across devices and to demonstrate my web development skills, I used responsive web design, incorporating two design types, one for desktop screens (MacBook Air 13 inch) and one for mobile screens (iPhone 14 & 15 Pro). My designs continued from paper wireframes into digital wireframes, low-fidelity prototypes, and high-fidelity prototypes.
Usability Testing
To ensure the website was accessible, authentic, and effective, I asked my friends, family, and other UX designers to navigate my website throughout iterations of my designs. Feedback was collected on navigation intuitiveness, content clarity, overall user experience, and aesthetic appeal. The testing revealed insights that led to several refinements in the navigation and content organization.
Implementation & Development
I had been curious about the software developing side of UX Design so I decided to learn how to build and develop this site. This was also motivated by the desire to cultivate future personal projecst and collaborations with web developers. By using Cursor AI, I learned some functionalities of Next.js and Tailwind CSS, and was able to create a responsive and accessible experience. The development process involved learning these technologies while implementing the design, testing and iterating designs, through the local host, resulting in both technical growth and an authentic revisable personal website. :)
Key Features
Personally Designed Iconography
I was able to use personal artistic designs as icons for the different sections of the website.
Interactive Elements
Engaging hover states, animations, and image popups that enhance the user experience. The 3D butterfly animation on the homepage was a fun addition to the website that was also a fun surprise learning experience for three.js.
Responsive Design
A fully responsive layout that adapts to various screen sizes from mobile phones to large desktop displays.
Lessons Learned
This project taught me valuable lessons about balancing artistic aesthetics with functionality, the importance of iterative design, and the technical aspects of modern web development. I gained insights into creating a cohesive user experience across different sections of a website while maintaining a consistent theme and navigation structure.
Conclusion
Creating my portfolio website was both a creative and technical challenge that allowed me to showcase my work while also demonstrating my design and development skills. The process of building this site has given me a deeper appreciation for UX design in digital spaces and has provided me with a platform that I can continue to evolve as my career grows.