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.

Breadcrumbs

Navigation trails that show the current page location within a hierarchy.

Slash Separator

Breadcrumb.tsxLanguage: tsx

import Link from 'next/link';

export function SlashBreadcrumb() {
  return (
    <nav className="flex" aria-label="Breadcrumb">
      <ol className="flex items-center space-x-2 sm:space-x-3 text-sm font-medium">
        <li>
          <Link href="#" className="text-muted hover:text-foreground transition-colors">
            Home
          </Link>
        </li>
        <li className="text-muted/50">/</li>
        <li>
          <Link href="#" className="text-muted hover:text-foreground transition-colors">
            Products
          </Link>
        </li>
        <li className="text-muted/50">/</li>
        <li aria-current="page" className="text-foreground">
          Shoes
        </li>
      </ol>
    </nav>
  );
}

Chevron Separator

Breadcrumb.tsxLanguage: tsx

import Link from 'next/link';

export function ChevronBreadcrumb() {
  return (
    <nav className="flex px-5 py-3 text-sm font-medium text-foreground bg-surface border border-border rounded-xl w-max" aria-label="Breadcrumb">
      <ol className="flex items-center space-x-2">
        <li>
          <Link href="#" className="flex items-center text-muted hover:text-accent transition-colors">
            <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
            </svg>
            Home
          </Link>
        </li>
        <li>
          <div className="flex items-center">
            <svg className="w-5 h-5 text-muted/50" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd"></path>
            </svg>
            <Link href="#" className="ml-2 pr-1 text-muted hover:text-accent transition-colors">Projects</Link>
          </div>
        </li>
        <li aria-current="page">
          <div className="flex items-center">
            <svg className="w-5 h-5 text-muted/50" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd"></path>
            </svg>
            <span className="ml-2 font-bold text-foreground">Dashboard</span>
          </div>
        </li>
      </ol>
    </nav>
  );
}