김미소의 포트폴리오

Motion Gallery

Thu, 09 Oct 2025 00:00:00 +0000

I wanted to see firsthand how much impact animation has on user experience, so I created a collection of interaction experiments using the Framer Motion library and TailwindCSS.

I explored various ways components could appear, disappear, or respond to mouse hover in ways that feel the most natural and enjoyable. By combining properties like whileHover and whileTap, I made the cards move rhythmically as if they were alive, and through variants, I experimented with smooth fade, slide, and scale transitions between components.

Through these experiments, I realized that animation is not merely a visual element but a powerful tool that guides user attention and enhances engagement with content. Styling quickly with TailwindCSS while adding dynamic elements using Framer Motion was an enjoyable learning experience in itself.

Glassmorphism Test

Wed, 08 Oct 2025 00:00:00 +0000

I was curious about how the latest UI trend, Glassmorphism, is implemented, so I experimented with creating it using only TailwindCSS.

Instead of writing separate CSS code, I combined TailwindCSS utility classes such as backdrop-filter and blur, observing the visual changes in real time. By slightly adjusting the transparency and border thickness, I explored how to achieve the most natural glass-like depth that seems to float above the background.

I also added a simple hover animation to test how the design would feel when interactivity is introduced. Through this small experiment, I once again confirmed that even complex-looking UI designs can be built quickly and intuitively using only utility-based approaches.

Parallax Scroll Experiment

Tue, 07 Oct 2025 00:00:00 +0000

I was curious about how scrolling alone could bring depth and liveliness to a website, so I experimented with creating a parallax effect using only Vanilla JavaScript and CSS.

First, I retrieved the scroll position (scrollY) and adjusted the transform: translateY() values of background, middle, and foreground image layers at different rates. Observing how the sense of depth changed with varying speeds between layers was an interesting process.

I learned that relying solely on the scroll event can make animations appear choppy, so I improved it by using requestAnimationFrame to synchronize with the browser’s rendering cycle for smoother movement. I also explored performance optimization techniques such as using IntersectionObserver to trigger animations only when visible and applying the translateZ(0) trick to enable GPU acceleration.

Through this experiment, I was able to experience firsthand the fundamental principles of scroll-based animation and the importance of performance optimization.

Responsive Grid Layout

Mon, 06 Oct 2025 00:00:00 +0000

This experiment began from a question: how can we create a responsive grid layout for websites more efficiently?

At first, I approached it by manually specifying the number of columns at each breakpoint using TailwindCSS utilities like grid-cols-2 and md:grid-cols-3. However, while looking for a more flexible method, I discovered the pure CSS Grid property repeat(auto-fit, minmax()).

By applying this property, I found that the number of columns automatically adjusted according to the screen width while maintaining a minimum item size. It eliminated the need to define breakpoints one by one, making the code much simpler, and the layout aligned naturally across various screen sizes from mobile to desktop. I also experimented with Tailwind’s gap utility to consistently maintain spacing between items.

Through this experiment, I realized how flexible and efficient layouts can be when combining the convenience of TailwindCSS with the power of pure CSS Grid.

Button Variants

Sun, 05 Oct 2025 00:00:00 +0000

While working on projects, I often found that slight variations in button styles disrupted overall design consistency. To address this, I started an experiment to create reusable button components.

Using TailwindCSS’s @apply, I explored how to combine base styles, sizes, and state changes into a single component class. Based on this, I created several button “variants” such as Primary, Success, and Danger to suit different use cases.

I focused especially on providing consistent visual feedback for various states like hover, focus, and active. I also standardized details such as shadows and border-radius so that any button could fit seamlessly within the design system.

This experiment went beyond simple styling — it was about exploring how to manage UI components systematically and improve reusability. I believe this will serve as a solid foundation to accelerate development in future projects.

Modal Animation

Sat, 04 Oct 2025 00:00:00 +0000

I realized that when modal windows on websites appear or disappear too abruptly, they can disrupt the user experience. So I experimented with Framer Motion to see how to make them appear smoother and more natural.

First, I explored how Framer Motion’s AnimatePresence component works in order to implement the exit animation for the modal. Based on that, I combined two effects for the best result: a fading background (Fade) and a slightly enlarging window (Scale) when the modal appears.

Beyond animation, I also added usability improvements such as allowing the modal to close when pressing the ESC key or clicking outside the darkened background area. Through this experiment, I was reminded that animation is not merely decorative but an essential UX tool that helps guide interaction flow without interrupting user behavior.

Dashboard Card

Fri, 03 Oct 2025 00:00:00 +0000

When building dashboards that present data at a glance, I believe the most essential element is the “card” component. So I conducted a small experiment to create a clean, versatile card UI that fits well in any context.

Since simple borders alone couldn’t convey enough depth, I explored how to combine Tailwind’s shadow and ring utilities to achieve the cleanest, most balanced look. I also experimented with subtle hover effects—where the shadow and border color shift softly—to give users a sense of focus and interactivity.

Inside each card, I adjusted font size and weight to make the key metric stand out clearly, seeking the optimal visual hierarchy. Through this experiment, I was able to explore the small UI design details that naturally guide the user’s attention and improve data readability.

Dark Mode Toggle

Thu, 02 Oct 2025 00:00:00 +0000

I wanted to understand how the now-essential dark mode feature on modern websites actually works, so I implemented it myself from scratch.

I started by using React’s useState to manage the ’light’ and ‘dark’ themes and explored how TailwindCSS’s dark: class operates. Beyond just toggling the state, I also experimented with persisting the user’s theme preference using localStorage so that it remains even after a page refresh.

After implementing the functionality, I focused on enhancing the visual polish. I applied transition-colors for smooth background transitions when switching themes and used Framer Motion to make the toggle switch move in a more playful and engaging way.

Through this seemingly simple toggle, I was able to explore various aspects of state management, data persistence, and visual details that enhance the overall user experience.

Implementing a TodoList Using Pure Web Languages

Thu, 25 Sep 2025 00:00:00 +0000

A simple TodoList was created using only pure web languages — HTML, CSS, and JavaScript — without any frameworks or libraries.

Time Capsule App Development

Fri, 20 Dec 2024 00:00:00 +0000

A team project for the Mobile Programming course at Jeonbuk National University, developed by three members.
The project was based on the concept of a digital time capsule that allows users to store photos, videos, and notes for their future selves and open them again on a chosen date.

Sorting Algorithm Performance Comparison

Tue, 03 Dec 2024 00:00:00 +0000

A team project conducted by two members for the Algorithm course at Jeonbuk National University.
We compared the performance of various sorting algorithms by sorting large-scale datasets.
Using the MovieLens 1M dataset (1,000,209 ratings, 3,883 movies), we implemented sorting and recommendation algorithms and visualized the performance results for comparison.

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.

Cloud Note — Cloud-Based Note App Planning

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

A web-based cloud note service concept that allows users to synchronize their notes in real time across devices.
Based on a structure similar to Google Drive, the UI scenario includes folder organization, tagging, and search features.
The login screen and editor interface were implemented as Figma prototypes.

🛠️ Figma · React (Prototype)

※ This project is a sample learning project, focusing on UX structure design and interface planning rather than implementing real-time synchronization features.

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.

AWS Cloud Portfolio Deploy

Thu, 03 Nov 2022 00:00:00 +0000

An example of a cloud deployment workflow using AWS S3 and CloudFront to host a static website.
Configured an automated build-and-deploy pipeline with GitHub Actions and documented the process of applying a custom domain and SSL certificate.

🛠️ AWS S3 · CloudFront · GitHub Actions

※ This project is a sample deployment pipeline created for academic purposes,
focusing on understanding and documenting the cloud deployment process rather than operating actual infrastructure.

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.