Frontend | 김미소의 포트폴리오

Design System Guidebook

Mon, 13 May 2024 00:00:00 +0000

An internal design system guidebook that standardizes common components such as buttons, forms, and cards.
Documented component structure, color and grid rules, and typography scales.
Applied the Atomic Design concept to ensure consistency and reusability.

🛠️ Storybook · React · SCSS

※ This is a sample design system project created for learning and portfolio purposes,
focused on organizing UI principles and visual rules rather than actual service application.

Smart Travel Dashboard

Sun, 03 Dec 2023 00:00:00 +0000

A smart travel dashboard UI that allows users to view travel destinations, weather, and accommodation information at a glance.
It uses a card-style interface and map-based interactions to visually present complex information intuitively.
A responsive layout and user-friendly color token system were also applied.

🛠️ React · TailwindCSS · OpenWeather API (Mock)

※ This project is composed as a sample example for learning and portfolio purposes,
focusing on UI design and UX visualization ideas rather than full service implementation.

Motion Landing Page

Thu, 03 Aug 2023 00:00:00 +0000

An interactive landing page design concept created using Framer Motion.
Applied parallax scrolling and subtle entrance animations to the hero section
to explore how motion design can enhance visual completeness on the web.

🛠️ React · Framer Motion · TailwindCSS

※ This project is a sample experiment for learning UI and motion design,
focused on exploring web interaction design rather than building a full service.

UI Accessibility Audit Tool

Sun, 03 Jul 2022 00:00:00 +0000

A frontend tool concept designed for web accessibility evaluation.
It features a UI that automatically detects color contrast, font size, and the presence of alt text.
The dashboard visualizes accessibility scores based on WCAG 2.1 standards.

🛠️ React · TypeScript · Chart.js

※ This project is a sample UI accessibility tool created for learning and portfolio purposes,
focused on UI/UX flow and information structure design rather than implementing the actual detection algorithm.