Yainel Garcia

Hello there

I design and build interfaces

I'm Yainel, a web designer and developer in Miami. This site is my playground: 25 live demos of motion, interface patterns and modern web features, all hand-coded, each with its source one click away.

Explore the playground Start a project
Years building for the web
0
Production releases shipped
0
Teammates supported daily
0
Live demos on this page
0

Ask about me

Quick answers
Pick a question below or type your own. Answers are written by me ahead of time.

Skills playground

25 live demos, grouped by skill. Every card has a View code button with its real source.

UI kit

The everyday building blocks of my design system: buttons, forms, feedback and data. Try everything.

Buttons States & feedback

Click to see a loading state.

Accent color Repaints this site

Every component uses design tokens, so one change updates the whole page.

Settings Switches

Dark mode
Easier on the eyes at night
Motion effects
Tilt and spotlight on cards
Sound on click
A soft tick for buttons

Pricing slider Range input

Example estimate$0

Toasts Notifications

Rating Interactive

Rate this showroom

Progress ring Animated SVG

0%
72
Project launch checklist

Tabs Content switching

Wireframes, a type scale and a color system in Figma, reviewed on desktop and mobile together.

Sortable list Drag to reorder

  • ⋮⋮Typography
  • ⋮⋮Spacing
  • ⋮⋮Color
  • ⋮⋮Motion

What matters most to you? Drag to rank.

File upload Drag and drop

    Loading state Skeleton

    FAQ Accordion

    Do you work with existing brands?

    Yes. I translate a brand's identity into a site that feels like it, and I can extend a brand where it has gaps.

    Can you build what you design?

    Yes, that's my favorite part. I code responsive front ends and set up WordPress when a team needs to edit content.

    Do you work in Spanish?

    Sí. I work comfortably in both Spanish and English.

    Data table Sort & filter

    Skill↕Area↕Used in↕
    FigmaDesignUI and layouts
    PhotoshopDesignImages and assets
    Adobe XDDesignPrototypes
    HTML & CSSFront-endEvery project
    JavaScriptFront-endInteractions
    ReactFront-endWeb apps
    WordPressCMSClient sites
    LaravelBack-endWeb apps

    Tooltips Hover or focus

    Tokens

    Selected work

    Concept projects I designed and built end to end. Click one for the story.

    Experience

    Where I've worked and what I've learned.

    Read a case study
    1. 2025 – Present

      IT Specialist / Internal Systems Developer, Dolls Plastic Surgery

      Design and build the internal web applications the team uses every day, from UX to production, shipped across 16+ releases.

    2. 2022 – 2025

      Project Manager, Técnica Systems

      Led setup and customization of sales software for clients, and trained teams to use it with confidence.

    3. 2010 – 2020

      PHP Developer, Freelance

      Built and maintained websites and web applications in PHP for clients, handling every project from the first meeting to launch.

    4. 2010

      Engineer's Degree in Computer Science, UCI Havana

      The engineering foundation behind everything I design.

    Toolkit

    Tap to highlight what you need.

    Start a project

    Four quick steps. Your message opens in your email app, ready to send.

    1. 1About you
    2. 2Project
    3. 3Budget
    4. 4Review

    About you

    So I know who I'm talking to.

    Enter your name
    Enter a valid email, like name@company.com