What's your typical project timeline?

It depends on the scope, but most projects take between 4-8 weeks from kickoff to launch. I'll give you a detailed timeline during our initial consultation so there are no surprises.

How much does a project cost?

Every project is unique, so I provide custom quotes based on your specific needs. I'm always upfront about costs and will work with you to find a solution that fits your budget without compromising quality.

Do you work with clients outside your country?

Absolutely! I work with clients worldwide. Modern tools make remote collaboration seamless — you'll feel like we're in the same room.

What if I need changes after the project is delivered?

I offer ongoing maintenance and support packages. Small tweaks are often included in the initial project scope, and for larger updates, we'll discuss the best approach together.

Can you work with my existing brand guidelines?

Of course. I'm great at working within established brand systems while still bringing fresh ideas and creative solutions to the table.

What technologies do you use?

I primarily work with Next.js, React, TypeScript, and Tailwind CSS for web development, along with Figma for design. But I choose the right tools for each project — the technology should serve the goal, not the other way around.

🎨

UI Library

A collection of beautiful, reusable React components and CSS snippets built with Tailwind CSS and Framer Motion.

Badges & Pills

Small visual indicators for status, counting, or categorization.

Status Badges

Active Pending Failed Offline

BadgeStatus.tsxLanguage: tsx

export function StatusBadges() {
  return (
    <div className="flex gap-4 flex-wrap">
      <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold bg-green-500/10 text-green-500 border border-green-500/20">
        <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span> Active
      </span>
      <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold bg-yellow-500/10 text-yellow-500 border border-yellow-500/20">
        <span className="w-1.5 h-1.5 rounded-full bg-yellow-500"></span> Pending
      </span>
      <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold bg-red-500/10 text-red-500 border border-red-500/20">
        <span className="w-1.5 h-1.5 rounded-full bg-red-500"></span> Failed
      </span>
      <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold bg-surface border border-border text-muted">
        <span className="w-1.5 h-1.5 rounded-full bg-muted"></span> Offline
      </span>
    </div>
  );
}

Pill Indicators

New ReleaseFeatured

BadgePills.tsxLanguage: tsx

export function PillBadges() {
  return (
    <div className="flex gap-6 flex-wrap items-center">
      {/* Number Pill inside a button */}
      <button className="relative px-4 py-2 bg-surface border border-border rounded-xl font-medium hover:bg-black/5 transition-colors">
        Notifications
        <span className="absolute -top-2 -right-2 w-6 h-6 flex items-center justify-center bg-accent text-background text-xs font-bold rounded-full border-2 border-background">
          3
        </span>
      </button>

      {/* Basic Pill */}
      <span className="inline-flex items-center px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-accent text-background">
        New Release
      </span>

      {/* Pill with Icon */}
      <span className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-sm font-medium bg-blue-500/10 text-blue-500 border border-blue-500/20">
        <svg fill="currentColor" viewBox="0 0 20 20" className="w-4 h-4">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
        Featured
      </span>
    </div>
  );
}

Status Dots

System Operational

Degraded Performance

BadgeDots.tsxLanguage: tsx

export function StatusDots() {
  return (
    <div className="flex gap-6 items-center">
      <div className="flex items-center gap-2">
        <span className="relative flex h-3 w-3">
          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
          <span className="relative inline-flex rounded-full h-3 w-3 bg-accent"></span>
        </span>
        <span className="text-sm font-medium">System Operational</span>
      </div>

      <div className="flex items-center gap-2">
        <span className="relative flex h-3 w-3">
          <span className="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span>
        </span>
        <span className="text-sm text-muted">Degraded Performance</span>
      </div>
    </div>
  );
}

Dismissible Badge

Beta Feature

BadgeDismissible.tsxLanguage: tsx

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

export function DismissibleBadge() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.span
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8, filter: "blur(4px)" }}
          className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-medium bg-surface border border-border"
        >
          Beta Feature
          <button 
            onClick={() => setIsVisible(false)}
            className="w-4 h-4 ml-1 rounded-full flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10 text-muted hover:text-foreground transition-colors"
          >
            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </motion.span>
      )}
    </AnimatePresence>
  );
}