A Journey
The Artist
A lifelong passion for traditional mediums. Exploring form, color, and visual storytelling on canvas since childhood.
Visual Design
Transitioned to digital tools. Mastering typography, layout, and visual hierarchy.
Product Design
Focusing on the user. Learning psychology, wireframing, and building scalable systems.
Coding UIs
Bridging the gap. Understanding web logic and writing clean code to bring static designs to life.
tech/UI exploration
REST API's learning
Fittrack API
GitHubA comprehensive backend service built for fitness tracking. Features structured endpoints for logging workouts, tracking user exercise metrics, and managing data persistence.
crux.ai
crux.ai
Currently in building stageSummarizes any GitHub repository based on pasted GitHub repository links.
mini design works
AI Design Handbook
Hand-crafted GuideA comprehensive handbook built specifically for product designers navigating the age of artificial intelligence. It covers mental models for designing AI systems, UI guidelines for dynamic LLM response states, orchestrating latency with elegant feedback loops, and leveraging agentic models in product flows.
System Architecture
My Design to Development Loop
STEP_01
Goal Parsing & Deconstruction
Receiving prompt instructions and code objectives. Parsing semantic intent, mapping workspace boundaries, and programmatically defining success constraints.
STEP_02
Context Retrieval (RAG)
Performing dependency mapping and structural schema checks. Analyzing existing code designs, directory states, and active types to prevent redundant implementations.
STEP_03
Orchestrated Architecture Planning
Coordinating specialized execution paths (Planning, Structuring, Reasoning). Drafting technical specs, UI component layouts, and state management schemas before writing code.
STEP_04
Iterative Code Synthesis
Writing modular, semantic React & React Native code. Binding designs directly to unified theme tokens (spacing grids, OKLCH scales, Tailwind configurations) to build high-performance components.
STEP_05
Self-Reflection & Diagnostic Loop
Executing dry-runs, analyzing rendering diagnostics, and self-linting. Debugging state regressions, optimizing re-render loops, and securing smooth 60fps animations.
STEP_06
Rigorous Build Verification
Conducting local build checks and compilation tests. Verifying responsive flex structures across standard device viewports and checking styling alignment.
STEP_07
Production Release & Feedback
Deploying verified code, compiling changes, and logging metrics. Collecting real-world user logs and human-in-the-loop feedback to iterate on the next lifecycle cycle.
Tools & Stacks I am currently learning
A playground for learning and experimenting. Here are the tools, libraries, and frameworks I'm currently diving into.
