- Front End -
Click the Time Machine button to see CSS/React magic applied to all components!
How It Works
This demonstration showcases the separation of structure and presentation in modern web development.
All components share the same HTML structure but conditionally apply different Tailwind CSS classes based on a global Zustand store state.
The isOldSchool boolean propagates through React context, triggering a complete visual transformation without any structural changes.
Button Components
Click the buttons below to trigger different toast notifications!
Form Components
Input fields, dropdowns, and checkboxes with dual-mode styling.
Loading Indicators
Various loading states and progress indicators.
Spinner
Loader
Progress bar
Slider Control
Drag the slider to see the value update in real-time.
Skills Table
Hover over the Level and Years columns for tooltips.
| Skill | Level | Description |
|---|---|---|
| React | Expert | Modular |
| TypeScript | Advanced | Typed |
| Next.js | Advanced | Fullstack |
| Node.js | Advanced | Runtime |
| Python | Expert | Versatile |
| PostgreSQL | Proficient | Relational |
| Docker | Proficient | Containerized |
| AWS | Proficient | Scalable |
| Git | Expert | Versioned |
| REST/GraphQL | Advanced | API-Driven |
| CSS/Tailwind | Expert | Styled |
| Testing | Expert | Reliable |