Portfolio Design
Project Information
Project Overview
Personal Portfolio Website (UI/UX + Front-End)
Tools Used
Figma, Illustrator, Photoshop
UX Focus
Structured content hierarchy and intuitive navigation flow
Layout Architecture
Card-based modular grid system
Figma Mock-up
Project Overview
This project is a custom UI design for my personal portfolio website, created to reflect my skills in UX design and front-end development. The goal was to design a modern, visually engaging interface that communicates professionalism while maintaining strong usability and clarity.
I focused on typography, spacing, color hierarchy, and component consistency to build a cohesive design system. The interface follows a clean structure with emphasis on accessibility, readability, and responsive behavior across devices.
Key Features
Consistent CSS Grid System
Strategic 4-column layout architecture with 24px gaps creates visual rhythm and predictable browsing patterns. Enables scannable content organization with flexible responsive cells.
Layered Depth Through Opacity
Box shadows with purple glow, drop shadows on interactive elements, and semi-transparent overlays create depth perception. Guides eye movement toward key interactive elements.
Hover State Interactivity
Strategic 4-column layout architecture with 24px gaps creates visual rhythm and predictable browsing patterns. Enables scannable content organization with flexible responsive cells.
Icon + Text Pairing
Box shadows with purple glow, drop shadows on interactive elements, and semi-transparent overlays create depth perception. Guides eye movement toward key interactive elements.
