Drag-Note-Track

DragTrack is a simple Kanban board that allows you to drag and drop tasks between columns. USE CASE: I use this as a note tracking tool

ReactTypeScriptDnD-Kit(drag and drop kit for react)Tailwind CSSFramer MotionLucide Icons (for the icons)

Code To Image

Developed a tool enabling users to create visually appealing code snippets with customizable fonts, themes, and backgrounds.

React.jsStyled-ComponentsVercel

Scribble-Dribble

A draw clone with React and TypeScript. Rough.js is used for the sketchy, hand-drawn style. I built the side project for learning purposes. The app is not responsive. I mainly focused on the functionalities since I already have projects that are responsive.

ViteReactTypeScriptCSSRough.jsVitest

P-I-P

XA video player built with React and TypeScript that features Picture-in-Picture (PIP) mode with custom media controls. This project leverages media-chrome to handle player interactions and transitions between inline and floating video modes, making it user-friendly and interactive.

ViteReactTypeScriptTailwind CSSFramer Motion

Color Contrast Checker

I've created a color contrast checker using React and TypeScript for digital art study. The purpose of it was to understand how contrast ratios are calculated and to learn more about color luminance, which measures color brightness so that i can pick colors while doing my sketch. I followed the Venngage accessibility guidelines while building this project, and I got inspiration from the UI at coolors.co.The app is not responsive. I mainly focused on the functionalities since I already have plenty of projects that are responsive.

ViteReactTypeScriptCSS