[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" isEdit="true" import type React from "react" import "@/app/globals.css" import { Inter, Poppins } from "next/font/google" import type { Metadata } from "next" const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) const poppins = Poppins({ subsets: ["latin"], weight: ["400", "500", "600", "700"], display: "swap", variable: "--font-poppins", }) export const metadata: Metadata = { title: "Mehmet Gülhan | Mehmet", description: "Modern ve yaratıcı web çözümleri geliştiren tutkulu bir yazılım geliştiricisi.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescript:file="tailwind.config.js" isMerged="true" isEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-inter)"], poppins: ["var(--font-poppins)"], }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" isEdit="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" isEdit="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true" isMerged="true" isEdit="true" export default function Footer() { const currentYear = new Date().getFullYear() return ( ) } [V0_FILE]typescriptreact:file="components/ui/project.tsx" isMerged="true" isEdit="true" [V0_FILE]plaintext:file="public/images/linkhub.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/linkhub-euE075r7Yuhazo7PKeGw0ZqVhnGzrT.png" isMerged="true" [V0_FILE]typescriptreact:file="components/contact.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { Mail, Phone, MapPin, Linkedin, Github, Instagram, MessageCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent } from "@/components/ui/card" export default function Contact() { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Form gönderme işlemi burada yapılacak console.log(formData) // Form alanlarını temizle setFormData({ name: "", email: "", subject: "", message: "", }) // Başarı mesajı göster alert("Mesajınız gönderildi. Teşekkür ederiz!") } const contactInfo = [ { icon: , title: "E-posta", value: "mehmetirem305@gmail.com", link: "mailto:mehmetirem305@gmail.com", }, { icon: , title: "Telefon", value: "+90 545 696 2060", link: "tel:+905456962060", }, { icon: , title: "Konum", value: "İstanbul, Türkiye", link: "https://maps.google.com/?q=Istanbul", }, ] const socialLinks = [ { icon: , name: "LinkedIn", url: "https://www.linkedin.com/in/mehmet-g%C3%BClhan-973b86328/", color: "bg-[#0077B5] hover:bg-[#0077B5]/80", }, { icon: , name: "GitHub", url: "https://github.com/pagedownq", color: "bg-[#333] hover:bg-[#333]/80", }, { icon: , name: "Instagram", url: "https://www.instagram.com/mehmet__gulhan/?hl=tr", color: "bg-gradient-to-r from-[#833AB4] via-[#FD1D1D] to-[#FCAF45] hover:opacity-90", }, { icon: , name: "WhatsApp", url: "https://api.whatsapp.com/send/?phone=05456962060&text&type=phone_number&app_absent=0", color: "bg-[#25D366] hover:bg-[#25D366]/80", }, ] return (

İletişim

Projeleriniz veya iş birliği fırsatları hakkında konuşmak isterseniz, aşağıdaki iletişim bilgilerinden bana ulaşabilirsiniz.

Bana Ulaşın

{contactInfo.map((item, index) => (

{item.icon}

{item.title}

{item.value}

))}

Sosyal Medya

{socialLinks.map((social, index) => ( {social.icon} {social.name} ))}

Mesaj Gönderin

</div>
                  <Button
                    type="submit"
                    className="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700"
                  >
                    Gönder
                  </Button>
                </form>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/particles-background.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

interface Particle {
  x: number
  y: number
  size: number
  speedX: number
  speedY: number
}

export default function ParticlesBackground() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const mousePosition = useRef({ x: 0, y: 0 })
  const particles = useRef<Particle[]>([])
  const animationFrameId = useRef<number>()

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

const resizeCanvas = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
      initParticles()
    }

const initParticles = () => {
      particles.current = []
      const particleCount = Math.min(Math.floor(window.innerWidth * 0.03), 50) // Daha az nokta

for (let i = 0; i < particleCount; i++) {
        particles.current.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          size: Math.random() * 1.5 + 1, // Daha büyük noktalar
          speedX: (Math.random() - 0.5) * 0.2, // Daha yavaş hareket
          speedY: (Math.random() - 0.5) * 0.2,
        })
      }
    }

const drawParticles = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

// Mavi arka plan
      ctx.fillStyle = "#1a4cda" // Görseldeki mavi ton
      ctx.fillRect(0, 0, canvas.width, canvas.height)

// Noktaları ve bağlantıları çiz
      const maxDistance = 200 // Maksimum bağlantı mesafesi

// Önce bağlantıları çiz
      ctx.strokeStyle = "rgba(255, 255, 255, 0.15)" // Daha belirgin çizgiler
      ctx.lineWidth = 0.5

for (let i = 0; i < particles.current.length; i++) {
        const particle1 = particles.current[i]

// Diğer noktalarla bağlantıları çiz
        for (let j = i + 1; j < particles.current.length; j++) {
          const particle2 = particles.current[j]
          const dx = particle1.x - particle2.x
          const dy = particle1.y - particle2.y
          const distance = Math.sqrt(dx * dx + dy * dy)

if (distance < maxDistance) {
            ctx.beginPath()
            ctx.moveTo(particle1.x, particle1.y)
            ctx.lineTo(particle2.x, particle2.y)
            ctx.stroke()
          }
        }

// Fare ile bağlantıları çiz
        const mouseX = mousePosition.current.x
        const mouseY = mousePosition.current.y
        const dxMouse = particle1.x - mouseX
        const dyMouse = particle1.y - mouseY
        const distanceMouse = Math.sqrt(dxMouse * dxMouse + dyMouse * dyMouse)

if (distanceMouse < maxDistance) {
          ctx.beginPath()
          ctx.strokeStyle = `rgba(255, 255, 255, ${0.3 - (distanceMouse / maxDistance) * 0.3})` // Mesafeye göre opaklık
          ctx.moveTo(particle1.x, particle1.y)
          ctx.lineTo(mouseX, mouseY)
          ctx.stroke()
          ctx.strokeStyle = "rgba(255, 255, 255, 0.15)" // Diğer çizgiler için stili geri al
        }
      }

// Sonra noktaları çiz
      for (const particle of particles.current) {
        // Parlak nokta efekti
        const gradient = ctx.createRadialGradient(particle.x, particle.y, 0, particle.x, particle.y, particle.size * 2)
        gradient.addColorStop(0, "rgba(255, 255, 255, 0.8)")
        gradient.addColorStop(1, "rgba(255, 255, 255, 0)")

ctx.fillStyle = gradient
        ctx.beginPath()
        ctx.arc(particle.x, particle.y, particle.size * 2, 0, Math.PI * 2)
        ctx.fill()

// Nokta merkezi
        ctx.fillStyle = "rgba(255, 255, 255, 1)"
        ctx.beginPath()
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
        ctx.fill()

// Pozisyonu güncelle
        particle.x += particle.speedX
        particle.y += particle.speedY

// Kenarlardan sekme
        if (particle.x > canvas.width) {
          particle.x = 0
        } else if (particle.x < 0) {
          particle.x = canvas.width
        }

if (particle.y > canvas.height) {
          particle.y = 0
        } else if (particle.y < 0) {
          particle.y = canvas.height
        }
      }

animationFrameId.current = requestAnimationFrame(drawParticles)
    }

const handleMouseMove = (e: MouseEvent) => {
      mousePosition.current = { x: e.clientX, y: e.clientY }
    }

window.addEventListener("resize", resizeCanvas)
    window.addEventListener("mousemove", handleMouseMove)

resizeCanvas()
    drawParticles()

return () => {
      window.removeEventListener("resize", resizeCanvas)
      window.removeEventListener("mousemove", handleMouseMove)
      if (animationFrameId.current) {
        cancelAnimationFrame(animationFrameId.current)
      }
    }
  }, [])

return <canvas ref={canvasRef} className="fixed inset-0 -z-10 h-full w-full" style={{ opacity: 1 }} />
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import Hero from "@/components/hero"
import About from "@/components/about"
import Projects from "@/components/projects"
import Contact from "@/components/contact"
import Footer from "@/components/footer"
import ParticlesBackground from "@/components/particles-background"

export default function Home() {
  return (
    <main className="relative min-h-screen">
      <ParticlesBackground />
      <Hero />
      <About />
      <Projects />
      <Contact />
      <Footer />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { motion } from "framer-motion"
import { ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import Navbar from "@/components/navbar"

export default function Hero() {
  const [scrollY, setScrollY] = useState(0)

useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

return (
    <div id="hero" className="relative h-screen w-full overflow-hidden">
      {/* Arka plan görüntüsünü kaldırdık, çünkü artık particles-background kullanıyoruz */}
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#1a4cda]/30 to-slate-950" />

<div className="relative z-10 flex h-[calc(100vh-80px)] flex-col items-center justify-center px-4 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="mb-6"
        >
          <h1 className="mb-2 font-heading text-4xl font-bold tracking-tight text-white md:text-6xl lg:text-7xl">
            <span className="relative">
              <span className="relative z-10">Mehmet Gülhan</span>
              <span className="absolute -inset-1 z-0 block animate-pulse blur-xl filter">
                <span className="absolute inset-0 bg-gradient-to-r from-purple-600 via-blue-500 to-pink-500 opacity-70" />
              </span>
            </span>
          </h1>
          <h2 className="text-xl text-slate-300 md:text-2xl">
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400">
              Web Geliştirici & Tasarımcı
            </span>
          </h2>
        </motion.div>

<motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.4, duration: 0.8 }}
          className="mb-8 max-w-lg text-slate-300"
        >
          Modern ve yaratıcı web çözümleri geliştiren tutkulu bir yazılım geliştiricisi. Kullanıcı deneyimini ön planda
          tutan, yenilikçi projeler üretiyorum.
        </motion.p>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6, duration: 0.8 }}
        >
          <Button
            variant="outline"
            className="border-purple-500 bg-transparent text-white hover:bg-purple-500/20"
            onClick={() => {
              document.getElementById("about")?.scrollIntoView({ behavior: "smooth" })
            }}
          >
            Keşfedin
          </Button>
        </motion.div>
      </div>

<motion.div
        className="absolute bottom-8 left-1/2 z-10 -translate-x-1/2"
        animate={{ y: [0, 10, 0] }}
        transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5 }}
      >
        <ChevronDown className="h-8 w-8 text-purple-400 opacity-70" />
      </motion.div>
    </div>
  )
}
[V0_FILE]plaintext:file="public/images/yakinda.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yak%C4%B1n.png-OJ0nPaUaxbY26vSgmsZXIPgcQsZcdJ.jpeg" isMerged="true"
[V0_FILE]plaintext:file="public/images/whatsapp-analiz.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/whats-82SFjnoArWROr85HFvoKo9NN2a5Xgk.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/zip-cikarici.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/foto-4OiOZDxg4uTZjC1b1gErw5jPjWL5YO.png" isMerged="true"
[V0_FILE]plaintext:file="public/images/dijital-portfolyo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/portfolyo_jpeg-330c0-KkfFCLCcaksoXldL42qwQx6toIPv4r.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Menu, X } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const navLinks = [
    { name: "Ana Sayfa", href: "#hero" },
    { name: "Hakkımda", href: "#about" },
    { name: "Projeler", href: "#projects" },
    { name: "İletişim", href: "#contact" },
  ]

return (
    <motion.nav
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.5 }}
      className={`fixed left-0 top-0 z-50 w-full transition-all duration-300 ${
        scrolled ? "bg-slate-950/80 backdrop-blur-md" : "bg-transparent"
      }`}
    >
      <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-4 md:px-8">
        <a href="#hero" className="text-2xl font-bold text-white">
          <span className="relative">
            <span className="relative z-10">Mehmet Gülhan</span>
            <span className="absolute -inset-1 z-0 hidden animate-pulse blur-md filter sm:block">
              <span className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-70" />
            </span>
          </span>
        </a>

{/* Desktop Navigation */}
        <div className="hidden md:block">
          <ul className="flex space-x-8">
            {navLinks.map((link) => (
              <li key={link.name}>
                <a
                  href={link.href}
                  className="text-slate-300 transition-colors hover:text-purple-400"
                  onClick={(e) => {
                    e.preventDefault()
                    document.querySelector(link.href)?.scrollIntoView({
                      behavior: "smooth",
                    })
                  }}
                >
                  {link.name}
                </a>
              </li>
            ))}
          </ul>
        </div>

{/* Mobile Navigation Toggle */}
        <div className="md:hidden">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setIsOpen(!isOpen)}
            className="text-white hover:bg-slate-800/50"
          >
            {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </Button>
        </div>
      </div>

{/* Mobile Navigation Menu */}
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: "auto" }}
          exit={{ opacity: 0, height: 0 }}
          transition={{ duration: 0.3 }}
          className="bg-slate-950/95 backdrop-blur-md md:hidden"
        >
          <div className="mx-auto max-w-7xl px-4 py-4">
            <ul className="flex flex-col space-y-4">
              {navLinks.map((link) => (
                <li key={link.name}>
                  <a
                    href={link.href}
                    className="block py-2 text-slate-300 transition-colors hover:text-purple-400"
                    onClick={(e) => {
                      e.preventDefault()
                      document.querySelector(link.href)?.scrollIntoView({
                        behavior: "smooth",
                      })
                      setIsOpen(false)
                    }}
                  >
                    {link.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </motion.div>
      )}
    </motion.nav>
  )
}
[V0_FILE]typescriptreact:file="components/about.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { Code, Palette, Lightbulb, Rocket } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"

export default function About() {
  const skills = [
    {
      icon: <Code className="h-6 w-6 text-blue-400" />,
      title: "Web Geliştirme",
      description: "Modern web teknolojileri ile kullanıcı dostu ve performanslı web uygulamaları geliştiriyorum.",
    },
    {
      icon: <Palette className="h-6 w-6 text-purple-400" />,
      title: "UI/UX Tasarım",
      description: "Kullanıcı deneyimini ön planda tutan, estetik ve işlevsel arayüzler tasarlıyorum.",
    },
    {
      icon: <Lightbulb className="h-6 w-6 text-pink-400" />,
      title: "Problem Çözme",
      description: "Karmaşık problemleri analitik düşünce ve yaratıcı çözümlerle ele alıyorum.",
    },
    {
      icon: <Rocket className="h-6 w-6 text-indigo-400" />,
      title: "Sürekli Öğrenme",
      description: "Teknoloji dünyasındaki yenilikleri takip ediyor ve kendimi sürekli geliştiriyorum.",
    },
  ]

return (
    <section id="about" className="relative py-20">
      <div className="absolute inset-0 bg-gradient-to-b from-slate-950 via-[#1a4cda]/10 to-slate-950" />

<div className="container relative z-10 mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-12 text-center"
        >
          <h2 className="mb-4 font-heading text-3xl font-bold text-white md:text-4xl">
            <span className="relative">
              <span className="relative z-10">Hakkımda</span>
              <span className="absolute -bottom-1 left-0 z-0 h-1 w-full bg-gradient-to-r from-purple-500 to-blue-500" />
            </span>
          </h2>
          <p className="mx-auto max-w-2xl text-slate-300">
            Merhaba! Ben Mehmet Gülhan, web geliştirme ve tasarım alanında çalışan bir yazılım geliştiricisiyim. Gazı
            Ortaokulu'nda bilgisayarla tanıştım, Seydişehir Meslek Lisesi'nde bilgisayar programcılığı eğitimi aldım ve
            şu anda Akdeniz Üniversitesi Manavgat Meslek Yüksekokulu'nda bilgisayar programcılığı okuyorum. Modern
            teknolojileri kullanarak kullanıcı odaklı, yaratıcı ve performanslı web çözümleri üretiyorum.
          </p>
        </motion.div>

{/* Diğer içerik aynı kalacak */}
        <div className="mb-16 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          {skills.map((skill, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
            >
              <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm transition-all duration-300 hover:border-purple-500/50 hover:shadow-lg hover:shadow-purple-500/10">
                <CardContent className="p-6">
                  <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-slate-800">
                    {skill.icon}
                  </div>
                  <h3 className="mb-2 text-xl font-semibold text-white">{skill.title}</h3>
                  <p className="text-slate-400">{skill.description}</p>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>

<div className="grid gap-8 md:grid-cols-2">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="flex flex-col justify-center"
          >
            <h3 className="mb-4 text-2xl font-bold text-white">Eğitim & Deneyim</h3>
            <div className="space-y-4">
              <div className="relative border-l border-pink-500/50 pl-6">
                <div className="absolute -left-1.5 top-1.5 h-3 w-3 rounded-full bg-pink-500" />
                <h4 className="text-lg font-semibold text-white">Bilgisayar Programcılığı</h4>
                <p className="text-pink-400">Akdeniz Üniversitesi, Manavgat Meslek Yüksekokulu | Günümüz</p>
                <p className="text-slate-400">Bilgisayar programcılığı alanında eğitim almaktayım.</p>
              </div>
              <div className="relative border-l border-blue-500/50 pl-6">
                <div className="absolute -left-1.5 top-1.5 h-3 w-3 rounded-full bg-blue-500" />
                <h4 className="text-lg font-semibold text-white">Stajyer</h4>
                <p className="text-blue-400">Eti Alüminyum| 2023 - 2024</p>
                <p className="text-slate-400">
                  İnsan Kaynakları Stajyeri Olarak stajımı yaptım.Deneyim Ve Bilgiler Edindim.Toplum içi etkinkinlikler
                  ile zenginlikler kazandım.
                </p>
              </div>
              <div className="relative border-l border-indigo-500/50 pl-6">
                <div className="absolute -left-1.5 top-1.5 h-3 w-3 rounded-full bg-indigo-500" />
                <h4 className="text-lg font-semibold text-white">Bilgisayar Programcılığı</h4>
                <p className="text-indigo-400">Seydişehir Meslek Lisesi</p>
                <p className="text-slate-400">
                  Bilgisayar programcılığı alanında lise eğitimimi tamamladım.{" "}
                  <span className="font-semibold text-indigo-300">Okul birincisi olarak mezun oldum.</span>
                </p>
              </div>
              <div className="relative border-l border-green-500/50 pl-6">
                <div className="absolute -left-1.5 top-1.5 h-3 w-3 rounded-full bg-green-500" />
                <h4 className="text-lg font-semibold text-white">İlk Bilgisayar Deneyimi</h4>
                <p className="text-green-400">Gazı Ortaokulu</p>
                <p className="text-slate-400">Bilgisayar ile ilk tanışmam ve temel bilgisayar eğitimimi aldım.</p>
              </div>
            </div>

<h3 className="mb-4 mt-8 text-2xl font-bold text-white">Sertifikalar</h3>
            <div className="space-y-4">
              <div className="relative border-l border-yellow-500/50 pl-6">
                <div className="absolute -left-1.5 top-1.5 h-3 w-3 rounded-full bg-yellow-500" />
                <h4 className="text-lg font-semibold text-white">Bilgisayar Teknisyeni Belgesi</h4>
                <p className="text-yellow-400">Milli Eğitim Bakanlığı</p>
                <p className="text-slate-400">Bilgisayar donanım ve yazılım konularında teknik servis yetkinliği.</p>
              </div>
              <div className="relative border-l border-orange-500/50 pl-6">
                <div className="absolute -left-1.5 top-1.5 h-3 w-3 rounded-full bg-orange-500" />
                <h4 className="text-lg font-semibold text-white">İş Yeri Açma Belgesi</h4>
                <p className="text-orange-400">Ticaret ve Sanayi Odası</p>
                <p className="text-slate-400">Bilişim sektöründe iş yeri açma ve işletme yetkinliği.</p>
              </div>
            </div>
          </motion.div>

<motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
          >
            <h3 className="mb-4 text-2xl font-bold text-white">Yeteneklerim</h3>

<div className="mb-4">
              <div className="mb-2 flex justify-between">
                <span className="text-slate-300">Frontend Geliştirme</span>
                <span className="text-purple-400">75%</span>
              </div>
              <div className="h-2 w-full overflow-hidden rounded-full bg-slate-800">
                <div className="h-full w-[75%] rounded-full bg-gradient-to-r from-purple-500 to-blue-500" />
              </div>
            </div>

<div className="mb-4">
              <div className="mb-2 flex justify-between">
                <span className="text-slate-300">Python</span>
                <span className="text-purple-400">60%</span>
              </div>
              <div className="h-2 w-full overflow-hidden rounded-full bg-slate-800">
                <div className="h-full w-[60%] rounded-full bg-gradient-to-r from-purple-500 to-blue-500" />
              </div>
            </div>

<div className="mb-4">
              <div className="mb-2 flex justify-between">
                <span className="text-slate-300">Backend Geliştirme</span>
                <span className="text-purple-400">15%</span>
              </div>
              <div className="h-2 w-full overflow-hidden rounded-full bg-slate-800">
                <div className="h-full w-[15%] rounded-full bg-gradient-to-r from-purple-500 to-blue-500" />
              </div>
            </div>

<div className="mb-4">
              <div className="mb-2 flex justify-between">
                <span className="text-slate-300">Mobil Uygulama Geliştirme</span>
                <span className="text-purple-400">70%</span>
              </div>
              <div className="h-2 w-full overflow-hidden rounded-full bg-slate-800">
                <div className="h-full w-[70%] rounded-full bg-gradient-to-r from-purple-500 to-blue-500" />
              </div>
            </div>

<div>
              <h4 className="mb-3 text-lg font-semibold text-white">Teknolojiler</h4>
              <div className="flex flex-wrap gap-4 items-center">
                {[
                  {
                    name: "Python",
                    logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
                  },
                  {
                    name: "Next.js",
                    logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg",
                  },
                  {
                    name: "TypeScript",
                    logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
                  },
                  {
                    name: "Node.js",
                    logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
                  },
                  {
                    name: "Adobe",
                    logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/photoshop/photoshop-plain.svg",
                  },
                  { name: "HTML", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" },
                  { name: "PHP", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" },
                ].map((tech) => (
                  <div key={tech.name} className="flex flex-col items-center">
                    <div className="group relative h-12 w-12 overflow-hidden rounded-md bg-slate-800 p-2 transition-all duration-300 hover:bg-slate-700">
                      <img
                        src={tech.logo || "/placeholder.svg"}
                        alt={tech.name}
                        className="h-full w-full object-contain transition-all duration-300 filter grayscale group-hover:filter-none"
                      />
                    </div>
                    <span className="mt-1 text-xs text-slate-400">{tech.name}</span>
                  </div>
                ))}
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]png:file="public/images/butceailem.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/googleplay-wtTNYoPAcdg0adorOiV01vJzCq4LH8.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Gizlilik Politikası | Mehmet Gülhan",
  description: "BütçeAilem uygulaması gizlilik politikası",
}

export default function PrivacyPolicy() {
  return (
    <main className="bg-slate-950 min-h-screen">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto bg-slate-900/50 backdrop-blur-sm p-8 rounded-lg border border-slate-800">
          <h1 className="text-3xl font-bold text-white mb-6">Gizlilik Politikası</h1>

<div className="prose prose-invert max-w-none">
            <p>
              BütçeAilem uygulamasını kullanarak verilerinizin işlenmesini kabul etmiş olursunuz. Güvenliğiniz bizim
              için önemlidir. Paylaştığınız tüm kişisel veriler, yasal mevzuata ve gizlilik prensiplerine uygun şekilde
              korunur.
            </p>

<h2 className="text-xl font-semibold mt-6 mb-3">Veri Sorumlusu</h2>
            <p>
              Ben, Mehmet, veri sorumlusu olarak, bu gizlilik ve kişisel verilerin korunması politikası ile uygulama
              kapsamında hangi kişisel verilerinizin hangi amaçlarla işleneceği, işlenen verilerin kimlerle ve hangi
              sebeplerle paylaşılabileceği, veri işleme yöntemimiz ve hukuki sebepleri ile; işlenen verilerinize ilişkin
              haklarınızın neler olduğu hususunda siz kullanıcılarımızı aydınlatmayı amaçlıyorum.
            </p>

<h2 className="text-xl font-semibold mt-6 mb-3">Toplanan ve Veritabanında Saklanan Kişisel Veriler</h2>
            <p>
              BütçeAilem uygulaması aşağıdaki kişisel verilerinizi toplar ve güvenli bir şekilde veritabanında saklar:
            </p>
            <ul className="list-disc pl-6 mt-2 mb-4">
              <li>Ad ve soyad</li>
              <li>Telefon numarası</li>
              <li>Destek mesajları (yardım ve destek formu üzerinden iletilen mesajlar)</li>
              <li>Finansal işlemleriniz (gelir, gider, kategori, tutar, açıklama, tarih vb.)</li>
              <li>Uygulama kullanım verileri (oturum, tema tercihi, dil tercihi vb.)</li>
              <li>Cihaz bilgileri ve teknik veriler (sadece uygulamanın çalışması için gerekli olanlar)</li>
            </ul>

<h2 className="text-xl font-semibold mt-6 mb-3">Verilerin İşlenme Amaçları</h2>
            <p>
              Kişisel verileriniz, uygulamanın temel işlevlerini yerine getirmek, finansal kayıtlarınızı tutmak, destek
              taleplerinizi yanıtlamak, uygulama deneyimini iyileştirmek, yasal yükümlülükleri yerine getirmek ve
              güvenliği sağlamak amacıyla işlenir. Verileriniz, bu amaçlar dışında kullanılmaz.
            </p>

<h2 className="text-xl font-semibold mt-6 mb-3">Verilerin Saklanması ve Korunması</h2>
            <p>
              Tüm verileriniz güvenli sunucularda ve Supabase altyapısında saklanır. Verilere yalnızca yetkili kişiler
              erişebilir. Verileriniz, yalnızca gerekli olduğu süre boyunca saklanır ve yasal zorunluluklar dışında
              silinir veya anonimleştirilir.
            </p>

<h2 className="text-xl font-semibold mt-6 mb-3">Verilerin Aktarılması</h2>
            <p>
              Kişisel verileriniz, yasal zorunluluklar haricinde, açık rızanız olmadan üçüncü kişilerle paylaşılmaz.
              Ancak hizmet sağlayıcılarımız, iş ortaklarımız ve yasal merciler ile, hizmetin sağlanması ve yasal
              yükümlülüklerin yerine getirilmesi amaçlarıyla gerekli olduğu ölçüde paylaşılabilir.
            </p>

<h2 className="text-xl font-semibold mt-6 mb-3">Kullanılan Servisler ve Çerezler</h2>
            <p>
              Uygulama, kullanıcı deneyimini iyileştirmek ve bildirim göndermek için bazı üçüncü parti servisler (ör.
              Firebase Cloud Messaging) ve çerez benzeri teknolojiler kullanabilir. Bu servisler, uygulama kullanımına
              dair anonim veriler toplayabilir.
            </p>

<h2 className="text-xl font-semibold mt-6 mb-3">Yasal Haklarınız (KVKK ve GDPR Kapsamında)</h2>
            <p>
              6698 sayılı KVKK ve Avrupa Birliği Genel Veri Koruma Tüzüğü (GDPR) kapsamında, aşağıdaki haklara
              sahipsiniz:
            </p>
            <ul className="list-disc pl-6 mt-2 mb-4">
              <li>Kişisel verilerinizin işlenip işlenmediğini öğrenme</li>
              <li>Kişisel verileriniz işlenmişse buna ilişkin bilgi talep etme</li>
              <li>Kişisel verilerin işlenme amacını ve bunların amacına uygun kullanılıp kullanılmadığını öğrenme</li>
              <li>Yurt içinde veya yurt dışında kişisel verilerin aktarıldığı üçüncü kişileri bilme</li>
              <li>Kişisel verilerin eksik veya yanlış işlenmiş olması hâlinde bunların düzeltilmesini isteme</li>
              <li>Kişisel verilerin silinmesini veya yok edilmesini isteme</li>
              <li>
                İşlenen verilerin münhasıran otomatik sistemler vasıtasıyla analiz edilmesi suretiyle kişinin kendisi
                aleyhine bir sonucun ortaya çıkmasına itiraz etme
              </li>
              <li>
                Kişisel verilerin kanuna aykırı olarak işlenmesi sebebiyle zarara uğraması hâlinde zararın giderilmesini
                talep etme
              </li>
            </ul>

<h2 className="text-xl font-semibold mt-6 mb-3">Veri Silme ve Düzeltme Talepleri</h2>
            <p>
              Kişisel verilerinizin silinmesini, düzeltilmesini veya anonimleştirilmesini talep edebilirsiniz. Bu tür
              talepler için uygulama içinden veya aşağıdaki iletişim adresinden başvuru yapabilirsiniz.
            </p>

<h2 className="text-xl font-semibold mt-6 mb-3">İletişim</h2>
            <p>
              Kişisel verilerinizle ilgili haklarınızı kullanmak veya Gizlilik Politikası hakkında daha fazla bilgi
              almak için mehmetirem305@gmail.com adresinden bizimle iletişime geçebilirsiniz.
            </p>

<h2 className="text-xl font-semibold mt-6 mb-3">Onay ve Yürürlük</h2>
            <p>
              BütçeAilem uygulamasını kullanmaya devam ettiğiniz takdirde, bu Gizlilik Politikası'nı kabul etmiş
              sayılırsınız. Politika, 1 Mayıs 2025 tarihinde yürürlüğe girmiş olup, gerektiğinde güncellenir.
            </p>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]png:file="public/images/butceailem-new.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sonc%C4%B1kanfoto-MVk7vVDRYY8hD0AEhm6GpD7bUk9bTg.png" isMerged="true"
[V0_FILE]png:file="public/modern-personal-website-design-with-purple-and-blu.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-personal-website-design-with-purple-and-blu-iBe6fzX6HAkU5bOwgMlBgRc4FW2F4Z.png" isMerged="true"
[V0_FILE]png:file="public/images/mg-crm.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-rrK0RLaqPhR905sQ0viS8oN6FhizTn.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/projects.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { ExternalLink, Github, Clock, Download } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

export default function Projects() {
  const [activeFilter, setActiveFilter] = useState("all")

const projects = [
    {
      id: 1,
      title: "LinkHub",
      description: "MGverse Tarafından Tasarlanmış Ve Üretilen Linkleri Sunan Bir Topluluk Uygulaması",
      image: "/images/linkhub.png",
      category: "web",
      technologies: ["Next.js", "Tailwind CSS", "React"],
      visitUrl: "https://mehmetgulhan.online",
    },
    {
      id: 2,
      title: "WhatsApp Analiz",
      description: "WhatsApp sohbet verilerinizi analiz eden ve istatistikler sunan web uygulaması",
      image: "/images/whatsapp-analiz.png",
      category: "web",
      technologies: ["JavaScript", "HTML", "CSS", "Chart.js"],
      visitUrl: "https://analizore.netlify.app/",
    },
    {
      id: 3,
      title: "Zip Çıkartıcı",
      description: "ZIP dosyalarından TXT dosyalarını çıkarmak için kullanılan basit ve kullanışlı bir web aracı",
      image: "/images/zip-cikarici.png",
      category: "web",
      technologies: ["HTML", "CSS", "JavaScript"],
      visitUrl: "https://pagedownq.github.io/zipcikarici/",
    },
    {
      id: 4,
      title: "Dijital Portfolyo Oluşturucu",
      description: "Profesyonel ve etkileyici bir portfolyo oluşturmak için kullanıcı dostu web uygulaması",
      image: "/images/dijital-portfolyo.jpeg",
      category: "web",
      technologies: ["Next.js", "React", "Tailwind CSS", "Vercel"],
      visitUrl: "https://v0-digital-portfolyo-olustur-bhgreb.vercel.app/",
    },
    {
      id: 7,
      title: "Kişisel Web Sitesi",
      description: "Modern tasarım ve kullanıcı dostu arayüz ile hazırlanmış kişisel web sitesi",
      image: "/modern-personal-website-design-with-purple-and-blu.png",
      category: "web",
      technologies: ["HTML", "CSS", "JavaScript", "Responsive Design"],
      visitUrl: "https://mehmetgulhan.xyz",
    },
    {
      id: 8,
      title: "MG-CRM",
      description: "Müşteri takip ve yönetim için geliştirilmiş profesyonel masaüstü CRM sistemi",
      image: "/images/mg-crm.png",
      category: "desktop",
      technologies: ["Electron", "JavaScript", "Node.js", "SQLite"],
      downloadUrl: "https://dosya.co/tyy9cytwjb83/MG-CRM_Setup_1.0.0.exe.html",
    },
    {
      id: 6,
      title: "BütçeAilem",
      description: "Aile bütçesi yönetimi için geliştirilen kullanıcı dostu mobil uygulama",
      image: "/images/butceailem-new.png",
      category: "mobile",
      technologies: ["React Native", "Expo", "JavaScript"],
      visitUrl: "https://play.google.com/store/apps/details?id=com.MGverse.butceailem.app",
    },
    {
      id: 5,
      title: "Çok Yakında",
      description: "Heyecan verici yeni bir proje üzerinde çalışıyorum. Çok yakında burada olacak!",
      image: "/images/yakinda.jpeg",
      category: "web",
      technologies: ["Next.js", "React", "Node.js"],
      comingSoon: true,
    },
  ]

const filters = [
    { id: "all", name: "Tümü" },
    { id: "web", name: "Web" },
    { id: "mobile", name: "Mobil" },
    { id: "desktop", name: "Masaüstü" },
    { id: "design", name: "Tasarım" },
    { id: "ai", name: "Yapay Zeka" },
  ]

const filteredProjects =
    activeFilter === "all" ? projects : projects.filter((project) => project.category === activeFilter)

return (
    <section id="projects" className="relative py-20">
      <div className="absolute inset-0 bg-gradient-to-b from-slate-950 via-indigo-950/30 to-slate-950" />

<div className="container relative z-10 mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="mb-12 text-center"
        >
          <h2 className="mb-4 font-heading text-3xl font-bold text-white md:text-4xl">
            <span className="relative">
              <span className="relative z-10">Projelerim</span>
              <span className="absolute -bottom-1 left-0 z-0 h-1 w-full bg-gradient-to-r from-purple-500 to-blue-500" />
            </span>
          </h2>
          <p className="mx-auto max-w-2xl text-slate-300">
            Geliştirdiğim projelerden bazıları. Her bir proje, farklı teknolojiler ve yaklaşımlar kullanılarak özenle
            tasarlanmıştır.
          </p>
        </motion.div>

<div className="mb-8 flex flex-wrap justify-center gap-2">
          {filters.map((filter) => (
            <Button
              key={filter.id}
              variant={activeFilter === filter.id ? "default" : "outline"}
              className={`
                ${
                  activeFilter === filter.id
                    ? "bg-purple-600 text-white hover:bg-purple-700"
                    : "border-slate-700 bg-transparent text-slate-300 hover:border-purple-500 hover:bg-purple-500/10 hover:text-white"
                }
              `}
              onClick={() => setActiveFilter(filter.id)}
            >
              {filter.name}
            </Button>
          ))}
        </div>

<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {filteredProjects.map((project, index) => (
            <motion.div
              key={project.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
            >
              <Card className="group overflow-hidden border-slate-800 bg-slate-900/50 backdrop-blur-sm transition-all duration-300 hover:border-purple-500/50 hover:shadow-lg hover:shadow-purple-500/10">
                <div className="relative aspect-video overflow-hidden">
                  <img
                    src={project.image || "/placeholder.svg?height=600&width=800"}
                    alt={project.title}
                    className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
                  <div className="absolute bottom-0 left-0 right-0 flex justify-center gap-2 p-4 opacity-0 transition-all duration-300 group-hover:bottom-4 group-hover:opacity-100">
                    {project.comingSoon ? (
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-white/20 bg-slate-900/80 text-white backdrop-blur-sm hover:bg-white/20"
                        disabled
                      >
                        <Clock className="mr-2 h-4 w-4" />
                        Çok Yakında
                      </Button>
                    ) : project.downloadUrl ? (
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-white/20 bg-slate-900/80 text-white backdrop-blur-sm hover:bg-white/20"
                        onClick={() => window.open(project.downloadUrl, "_blank")}
                      >
                        <Download className="mr-2 h-4 w-4" />
                        İndir
                      </Button>
                    ) : (
                      project.visitUrl && (
                        <Button
                          size="sm"
                          variant="outline"
                          className="border-white/20 bg-slate-900/80 text-white backdrop-blur-sm hover:bg-white/20"
                          onClick={() => window.open(project.visitUrl, "_blank")}
                        >
                          <ExternalLink className="mr-2 h-4 w-4" />
                          {project.category === "mobile" ? "Google Play" : "Ziyaret Et"}
                        </Button>
                      )
                    )}
                    {project.demoUrl && (
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-white/20 bg-slate-900/80 text-white backdrop-blur-sm hover:bg-white/20"
                      >
                        <ExternalLink className="mr-2 h-4 w-4" />
                        Demo
                      </Button>
                    )}
                    {project.githubUrl && (
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-white/20 bg-slate-900/80 text-white backdrop-blur-sm hover:bg-white/20"
                      >
                        <Github className="mr-2 h-4 w-4" />
                        Kod
                      </Button>
                    )}
                  </div>
                </div>
                <CardContent className="p-6">
                  <div className="mb-2 flex flex-wrap gap-1">
                    {project.technologies.map((tech) => (
                      <Badge
                        key={tech}
                        variant="outline"
                        className="border-purple-500/30 bg-purple-500/10 text-purple-300"
                      >
                        {tech}
                      </Badge>
                    ))}
                  </div>
                  <h3 className="mb-2 text-xl font-bold text-white">{project.title}</h3>
                  <p className="text-slate-400">{project.description}</p>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.4",
    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.1.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.67",
    "framer-motion": "12.23.22"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  }
}

@layer utilities {
  .font-heading {
    font-family: var(--font-poppins), ui-sans-serif, system-ui, sans-serif;
  }
}

/* Neon efektleri için özel sınıflar */
.neon-text {
  text-shadow: 0 0 5px rgba(138, 43, 226, 0.5), 0 0 10px rgba(138, 43, 226, 0.3), 0 0 15px rgba(138, 43, 226, 0.2);
}

.neon-border {
  box-shadow: 0 0 5px rgba(138, 43, 226, 0.5), 0 0 10px rgba(138, 43, 226, 0.3);
}

/* Kaydırma çubuğu stilleri */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1e1e2e;
}

::-webkit-scrollbar-thumb {
  background: #3b3b5a;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4b4b6a;
}</article></body></html>