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.

Modals & Dialogs

Focused popup windows that require user attention or interaction.

Default Modal

Modal.tsxLanguage: tsx

import { useState } from 'react';

export function DefaultModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)} className="px-5 py-2.5 rounded-xl bg-accent text-background font-semibold">
        Open Default Modal
      </button>

      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm">
          <div className="bg-popover border border-border rounded-2xl p-8 max-w-md w-full shadow-2xl relative">
            <h3 className="text-2xl font-bold mb-3">Action Required</h3>
            <p className="text-muted leading-relaxed mb-8">
              Are you sure you want to perform this action? This cannot be undone and will permanently delete your data.
            </p>
            <div className="flex justify-end gap-3 rounded-b-2xl">
              <button onClick={() => setIsOpen(false)} className="px-4 py-2 rounded-xl text-foreground font-medium hover:bg-black/5 transition-colors">
                Cancel
              </button>
              <button onClick={() => setIsOpen(false)} className="px-4 py-2 rounded-xl bg-red-500 text-white font-medium hover:bg-red-600 transition-colors shadow-lg shadow-red-500/20">
                Confirm Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Animated Dialog

Modal.tsxLanguage: tsx

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

export function AnimatedModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)} className="px-5 py-2.5 rounded-xl bg-popover border border-border text-foreground font-semibold hover:border-accent transition-colors">
        Open Animated Modal
      </button>

      <AnimatePresence>
        {isOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setIsOpen(false)}
              className="absolute inset-0 bg-background/80 backdrop-blur-md"
            />
            <motion.div
              initial={{ scale: 0.95, opacity: 0, y: 20 }}
              animate={{ scale: 1, opacity: 1, y: 0 }}
              exit={{ scale: 0.95, opacity: 0, y: 20 }}
              transition={{ type: "spring", duration: 0.5, bounce: 0.3 }}
              className="bg-popover border border-border rounded-2xl p-8 max-w-sm w-full shadow-2xl relative z-10"
            >
              <div className="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center mb-6 text-3xl">
                ✨
              </div>
              <h3 className="text-2xl font-bold mb-3">Premium Feature</h3>
              <p className="text-muted leading-relaxed mb-8">
                Unlock exclusive tools and animations to supercharge your workflow today!
              </p>
              <button onClick={() => setIsOpen(false)} className="w-full py-3 rounded-xl bg-accent text-background font-bold transition-transform active:scale-95">
                Upgrade Now
              </button>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  );
}