Crafted a visually engaging UI concept for a chess training platform inspired by Chessable, using Vue.js and Tailwind CSS. The project focused on designing a seamless, distraction-free learning experience tailored to chess players of all levels—from casual learners to competitive enthusiasts.

Key highlights:

• Designed a modular component system using Vue 3 Composition API, enabling scalable and maintainable UI architecture.

• Implemented interactive lesson cards, move playback timelines, and spaced repetition indicators to mimic real-world learning patterns.

• Built responsive layouts with Tailwind CSS to ensure accessibility across mobile, tablet, and desktop.

• Integrated animations for smooth transitions between chapters, exercises, and user progress screens using Vue transitions and Tailwind utilities.

• Created theming support (light/dark mode) and a focus-enhancing “study mode” for immersive learning.

This project emphasized user-centric design, pixel-perfect precision, and frontend best practices, serving as a case study in designing educational tools that are both elegant and functional.