👈To All Project

🌐 Personal Portfolio Website


Overview

I designed and built this personal website as a platform to showcase my work, skills, design thinking, and personality. Every step was executed independently, from layout structure and visual style to interactive experience and live deployment.

The website features core sections, including About Me, Resume Preview, and Project Showcase. It also integrates interactive prototypes from my design projects, offering visitors a comprehensive view of my capabilities in both design and development.

Project Goals

Tools & Technologies

HTML, CSS, JS

Challenges

Page Structure Planning – One of the initial challenges was organizing content into a clear and logical layout that supports smooth navigation.

CSS Fine-Tuning – I spent a lot of time adjusting layout details such as overlay effects, consistent card heights, and image-text alignment.

Responsive Design – Ensuring a seamless experience across both desktop and mobile devices required learning media queries and flexible layout techniques.

Content Display Logic – Balancing visual richness with clarity meant experimenting with how project previews, text, and images should be arranged.

Visual Consistency – Creating a cohesive visual language helped train my aesthetic judgment and color system design.

GitHub Pages Setup – Hosting the site on GitHub Pages presented new challenges. I had to troubleshoot issues like file path handling, resource linking, default page loading, and URL refresh behavior, which deepened my understanding of deployment workflows and browser constraints.

GitHub

Growth & Takeaways

Throughout this project, I experienced the whole process from design concept to front-end implementation. Building the entire site independently strengthened my foundation in HTML and CSS, helping me bridge the gap between design and development. Every round of debugging and revision brought me closer to creating a clean and intuitive experience.

In refining layout elements like overlays, card consistency, and button interactions, I deeply appreciated how small visual choices shape user experience. I learned to view the interface from the user's perspective—what they expect to see, how they navigate, and what helps them stay focused. This shifted my mindset toward clarity, flow, and intentionality in every design decision.

I also learned how to deploy a web page, publish my website through GitHub Pages, and embed my own URL to access my website normally. This allowed me to learn practical page version control, update, and web page structure management capabilities.

Most importantly, I learned to iterate, seek feedback, and stay flexible throughout the creative process. This project strengthened my technical skills and helped shape my design thinking and user-centered development approach.

Reflection & Future Direction

This project has been more than just a technical exercise — it has been a way to organize my journey and showcase it through a living, evolving medium. It helped me visualize my past work, skills, and growth in a unified space, while clarifying the directions I want to explore further in the future.

Future Plan: I plan to continue improving this site by adding dynamic elements and multi-language support.



👈Back To All Project