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.

Backgrounds

Advanced interactive backgrounds and patterns.

Animated Faded Grid

Modern Grid

Perfect for hero sections

AnimatedGrid.tsxLanguage: tsx

export function AnimatedGridBackground() {
  return (
    <div className="relative w-full h-[400px] bg-black overflow-hidden flex items-center justify-center">
      {/* Dynamic Grid */}
      <div 
        className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"
      />
      {/* Glowing Orb */}
      <div className="absolute top-0 w-full h-full bg-accent/20 blur-[100px] rounded-full scale-150 transform -translate-y-1/2 opacity-50" />
      
      <div className="relative z-10 text-center">
        <h2 className="text-4xl font-bold text-white tracking-tight mb-2">Modern Grid</h2>
        <p className="text-gray-400">Perfect for hero sections</p>
      </div>
    </div>
  );
}

Subtle Dot Pattern

Subtle Pattern

Clean & Professional

DotPattern.tsxLanguage: tsx

export function DotPatternBackground() {
  return (
    <div className="relative w-full h-[300px] bg-surface overflow-hidden flex flex-col items-center justify-center border border-border rounded-xl">
      <div className="absolute h-full w-full bg-[radial-gradient(var(--color-border)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-50" />
      
      <div className="relative z-10 space-y-4 text-center">
         <span className="px-3 py-1 rounded-full border border-border bg-surface/80 text-xs font-semibold backdrop-blur-sm shadow-sm inline-block">
            Subtle Pattern
         </span>
         <h3 className="text-2xl font-semibold text-foreground">Clean & Professional</h3>
      </div>
    </div>
  );
}

Aurora Glow

Beautiful soft gradients for premium interfaces.

AuroraBackground.tsxLanguage: tsx

export function AuroraBackground() {
  return (
    <div className="relative w-full h-[350px] overflow-hidden flex items-center justify-center rounded-2xl bg-black">
      <div className="absolute -top-[50%] -left-[10%] w-[50%] h-[100%] rounded-[100%] bg-blue-500/30 blur-[80px] mix-blend-screen" />
      <div className="absolute -bottom-[20%] -right-[10%] w-[60%] h-[120%] rounded-[100%] bg-purple-500/30 blur-[80px] mix-blend-screen" />
      <div className="absolute top-[20%] left-[20%] w-[30%] h-[30%] rounded-[100%] bg-accent/40 blur-[80px] mix-blend-screen" />
      
      <div className="relative z-10 backdrop-blur-md bg-white/5 border border-white/10 p-8 rounded-2xl shadow-2xl">
        <h2 className="text-3xl font-bold text-white">Aurora Glow</h2>
        <p className="text-white/70 mt-2 max-w-xs">Beautiful soft gradients for premium interfaces.</p>
      </div>
    </div>
  );
}