<!--

        ⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⢄⣲⣶⣶⣶⣶⣦⣤⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀                    ⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣶⣿⣿⡿⠿⠷⣶⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⢀⣴⣾⣿⠟⣥⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄⡀⠀⠀⠀⠀⠀                    ⠀⠀⠀⠀⠀⠀⢀⣴⣾⣿⣿⣿⣿⣿⣿⣿⣇⠀⠀⢸⣿⣿⣿⣦⡀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⢀⣶⣿⣿⣿⣫⣾⣿⣿⣿⣿⣿⣿⣿⣿⣽⣷⣷⣾⣾⣿⣦⠀⠀⠀⠀                    ⠀⠀⠀⠀⢀⣴⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⡀⠀⠀⠀⠀
        ⠀⠀⣠⣿⣿⣿⡿⣟⣽⣿⣿⠿⠟⠛⠛⠛⠿⠿⣿⣿⣿⣿⣿⣼⣿⣷⡄⠀⠀                    ⠀⠀⠀⢠⣿⡟⠁⠀⠀⢹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⡀⠀⠀⠀
        ⠀⣰⣿⣿⣿⣿⡧⣽⡿⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⣿⣆⠀                    ⠀⠀⢠⣿⣿⣿⣦⣄⣠⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢿⣿⣿⣿⣷⠀⠀⠀
        ⢰⣿⣿⣿⣿⣟⣿⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣿⣿⣿⣿⢿⣿⡄                    ⠀⠀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⠀⠀⢹⣿⣿⣿⡇⠀⠀
        ⢸⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣆⣻⡇                    ⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣶⣿⣿⣿⣿⣿⠀⠀
        ⢿⣿⣽⢿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⡿⣷⣿⡇                    ⠀⠀⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠀⠀
        ⢹⣿⣿⣷⣿⣿⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⣿⣿⣿⣿⠁                    ⠀⠀⠈⢿⣿⣿⣿⣿⠟⠻⣿⣿⠋⠀⠉⣿⣿⣿⣿⣿⣿⣿⣿⡏⠀⢙⣿⠃⠀⠀
        ⠀⢿⣿⣿⣿⣿⣿⣷⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⣿⢿⣿⣿⣿⡿⠁                    ⠀⠀⠀⠈⢿⣿⣿⠁⠀⠀⠘⣿⣆⠀⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀
        ⠀⠈⣿⣿⣿⣿⣿⣿⣿⣦⣄⡀⠀⠀⠀⠀⠀⣀⣠⣾⣿⣿⣿⣯⣿⣿⡿⠁⠀                    ⠀⠀⠀⠀⠀⠙⢿⣦⣤⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⠀⠀⠀
        ⠀⠀⠈⠻⣝⡿⣿⣿⣿⣿⣿⣿⣿⣶⣶⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠁⠀⠀                    ⠀⠀⠀⠀⠀⠀⠀⠙⠿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠉⢹⣿⣿⡿⠟⠁⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠘⠿⣶⣬⣽⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣽⠟⠉⠀⠀⠀⠀                    ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠿⠿⣿⣿⣿⣷⡤⠾⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⠈⠛⠿⣿⣿⣿⣿⣿⣽⣿⣿⣿⣿⡿⠟⠛⠁⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠙⠛⠋⠋⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

$$\                                    $$\       $$\                                                                
$$ |                                   $$ |      \__|                                                               
$$ |  $$\ $$\   $$\  $$$$$$\  $$$$$$\  $$$$$$$\  $$\ $$\   $$\  $$$$$$\        $$\    $$\ $$$$$$\   $$$$$$\         
$$ | $$  |$$ |  $$ |$$  __$$\ \____$$\ $$  __$$\ $$ |$$ |  $$ |$$  __$$\       \$$\  $$  |\____$$\ $$  __$$\        
$$$$$$  / $$ |  $$ |$$ |  \__|$$$$$$$ |$$ |  $$ |$$ |$$ |  $$ |$$$$$$$$ |       \$$\$$  / $$$$$$$ |$$ |  \__|       
$$  _$$<  $$ |  $$ |$$ |     $$  __$$ |$$ |  $$ |$$ |$$ |  $$ |$$   ____|        \$$$  / $$  __$$ |$$ |             
$$ | \$$\ \$$$$$$  |$$ |     \$$$$$$$ |$$$$$$$  |$$ |\$$$$$$$ |\$$$$$$$\          \$  /  \$$$$$$$ |$$ |             
\__|  \__| \______/ \__|      \_______|\_______/ \__| \____$$ | \_______|          \_/    \_______|\__|             
                                                     $$\   $$ |                                                     
                                                     \$$$$$$  |                                                     
                                                      \______/                                                      
          $$\               $$\   $$\                                               $$\                             
          \__|              \__|  $$ |                                              $$ |                            
 $$$$$$$\ $$\ $$$$$$\$$$$\  $$\ $$$$$$\         $$\    $$\ $$$$$$\   $$$$$$\        $$ | $$$$$$\  $$$$$$$\          
$$  _____|$$ |$$  _$$  _$$\ $$ |\_$$  _|        \$$\  $$  |\____$$\ $$  __$$\       $$ | \____$$\ $$  __$$\         
\$$$$$$\  $$ |$$ / $$ / $$ |$$ |  $$ |           \$$\$$  / $$$$$$$ |$$ |  \__|      $$ | $$$$$$$ |$$ |  $$ |        
 \____$$\ $$ |$$ | $$ | $$ |$$ |  $$ |$$\         \$$$  / $$  __$$ |$$ |            $$ |$$  __$$ |$$ |  $$ |        
$$$$$$$  |$$ |$$ | $$ | $$ |$$ |  \$$$$  |         \$  /  \$$$$$$$ |$$ |            $$ |\$$$$$$$ |$$ |  $$ |        
\_______/ \__|\__| \__| \__|\__|   \____/           \_/    \_______|\__|            \__| \_______|\__|  \__|        
                                                                                                                    
                                                                                                                    
                                              $$\                 $$\                                        $$$$\  
                                              $$ |                $$ |                                      $$  $$\ 
$$$$$$$\   $$$$$$\  $$\   $$\  $$$$$$\        $$$$$$$\   $$$$$$\  $$ |  $$\ $$\ $$\   $$\  $$$$$$\  $$$$$$$\\__/$$ |
$$  __$$\ $$  __$$\ $$ |  $$ |$$  __$$\       $$  __$$\  \____$$\ $$ | $$  |$$ |$$ |  $$ |$$  __$$\ $$  __$$\  $$  |
$$ |  $$ |$$$$$$$$ |$$ |  $$ |$$$$$$$$ |      $$ |  $$ | $$$$$$$ |$$$$$$  / $$ |$$ |  $$ |$$ /  $$ |$$ |  $$ |$$  / 
$$ |  $$ |$$   ____|$$ |  $$ |$$   ____|      $$ |  $$ |$$  __$$ |$$  _$$<  $$ |$$ |  $$ |$$ |  $$ |$$ |  $$ |\__/  
$$ |  $$ |\$$$$$$$\ \$$$$$$$ |\$$$$$$$\       $$$$$$$  |\$$$$$$$ |$$ | \$$\ $$ |\$$$$$$$ |\$$$$$$  |$$ |  $$ |$$\   
\__|  \__| \_______| \____$$ | \_______|      \_______/  \_______|\__|  \__|\__| \____$$ | \______/ \__|  \__|\__|  
                    $$\   $$ |                                                  $$\   $$ |                          
                    \$$$$$$  |                                                  \$$$$$$  |                          
                     \______/                                                    \______/                           


-->


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="title">Portfolio</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body class="light-theme">
    <!-- Cursor Animation -->
    <div class="cursor"></div>
    <div class="cursor-follower"></div>

    <!-- Background Animation -->
    <div class="bg-animation">
        <div class="blob"></div>
        <div class="blob"></div>
        <div class="blob"></div>
    </div>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg fixed-top glass-nav">
        <div class="container-fluid px-4">
            <a class="navbar-brand" href="#">
                <div class="logo">
                    <span class="logo-text">aliyapici.dev</span>
                    <span class="logo-dot"></span>
                </div>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home" data-i18n="nav.home">Ana Sayfa</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#projects" data-i18n="nav.projects">Projeler</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#skills" data-i18n="nav.skills">Yetenekler</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact" data-i18n="nav.contact">İletişim</a>
                    </li>
                </ul>
                <div class="nav-actions d-flex align-items-center gap-3">
                    <div class="theme-switch">
                        <input type="checkbox" class="theme-toggle" id="theme-toggle">
                        <label for="theme-toggle" class="theme-label">
                            <i class="fas fa-sun"></i>
                            <i class="fas fa-moon"></i>
                            <span class="theme-ball"></span>
                        </label>
                    </div>
                    <div class="language-switch">
                        <button class="lang-btn active" data-lang="tr">TR</button>
                        <button class="lang-btn" data-lang="en">EN</button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero-section">
        <div class="container">
            <div class="row align-items-center min-vh-100">
                <div class="col-lg-8 mx-auto" data-aos="fade-up">
                    <div class="hero-content text-center">
                        <div class="hero-subtitle" data-i18n="hero.greeting">Merhaba, Ben</div>
                        <h1 class="hero-title">
                            <span class="gradient-text">Ali</span>
                            <div class="hero-description">
                                <span class="typed-text"></span>
                            </div>
                        </h1>
                        <p class="hero-text" data-i18n="hero.description">Full Stack Developer olarak web ve mobil uygulamalar geliştiriyorum.</p>
                        <div class="hero-btns">
                            <a href="#projects" class="btn btn-gradient" data-i18n="hero.projectsBtn">
                                <span>Projelerimi Keşfet</span>
                                <i class="fas fa-arrow-right"></i>
                            </a>
                            <a href="#contact" class="btn btn-outline" data-i18n="hero.contactBtn">
                                <span>İletişime Geç</span>
                                <i class="fas fa-paper-plane"></i>
                            </a>
                        </div>
                        <div class="hero-stats">
                            <div class="stat-item">
                                <div class="stat-number">
                                    <span class="counter">5</span>+
                                </div>
                                <span class="stat-text" data-i18n="hero.stats.experience">Yıl Deneyim</span>
                            </div>
                            <div class="stat-divider"></div>
                            <div class="stat-item">
                                <div class="stat-number">
                                    <span class="counter">50</span>+
                                </div>
                                <span class="stat-text" data-i18n="hero.stats.projects">Proje</span>
                            </div>
                            <div class="stat-divider"></div>
                            <div class="stat-item">
                                <div class="stat-number">
                                    <span class="counter">100</span>+
                                </div>
                                <span class="stat-text" data-i18n="hero.stats.clients">Mutlu Müşteri</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="section-padding">
        <div class="container">
            <div class="section-header text-center" data-aos="fade-up">
                <h2 class="section-title text-gradient" data-i18n="projects.title">Öne Çıkan Projeler</h2>
                <p class="section-subtitle" data-i18n="projects.subtitle">Son dönemde geliştirdiğim uygulamalar</p>
            </div>
            <div class="project-filters" data-aos="fade-up">
                <button class="filter-btn active" data-filter="all" data-i18n="projects.filters.all">Tümü</button>
                <button class="filter-btn" data-filter="mobile" data-i18n="projects.filters.mobile">Mobil</button>
                <button class="filter-btn" data-filter="web" data-i18n="projects.filters.web">Web</button>
                <button class="filter-btn" data-filter="other" data-i18n="projects.filters.other">Diğer</button>
            </div>
            <div class="swiper-container project-slider" data-aos="fade-up">
                <div class="swiper-wrapper">
                    <!-- ReWear -->
                    <div class="swiper-slide" data-category="mobile">
                        <div class="project-card glass-card" data-project-key="rewear">
                            <div class="project-image">
                                <img src="assets/rewear.webp" alt="BiRandevu App">
                                <div class="project-overlay">
                                    <div class="store-links">
                                        <a href="https://play.google.com/store/apps/details?id=dev.aliyapici.ReWear" class="store-link" target="_blank">
                                            <i class="fab fa-google-play"></i>
                                            <span data-i18n="projects.buttons.playstore">Play Store</span>
                                        </a>
                                        <a href="https://apps.apple.com/app/ai-clothes-changer-rewear/id6740744747" class="store-link" target="_blank">
                                            <i class="fab fa-app-store-ios"></i>
                                            <span data-i18n="projects.buttons.appstore">App Store</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="project-content">
                                <h3 data-i18n="projects.items.rewear.title">ReWear</h3>
                                <p data-i18n="projects.items.rewear.description">Yapay zeka ile sanal kıyafet deneme uygulaması. Kullanıcılar, kendi fotoğraflarını yükleyerek model üzerindeki kıyafetleri veya kendi seçtikleri kıyafet görsellerini gerçekçi bir şekilde deneyimleyebilir.</p>
                                <div class="tech-stack">
                                    <span class="tech-badge">React Native</span>
                                    <span class="tech-badge">MySQL</span>
                                    <span class="tech-badge">Node.js</span>
                                    <span class="tech-badge">Express.js</span>
                                </div>
                            </div>
                        </div>
                    </div>                    

                    <!-- Pictora -->
                    <div class="swiper-slide" data-category="mobile">
                        <div class="project-card glass-card" data-project-key="pictora">
                            <div class="project-image">
                                <img src="assets/pictora.webp" alt="Pictora App">
                                <div class="project-overlay">
                                    <div class="store-links">
                                        <a href="https://play.google.com/store/apps/details?id=dev.aliyapici.Pictora" class="store-link" target="_blank">
                                            <i class="fab fa-google-play"></i>
                                            <span data-i18n="projects.buttons.playstore">Play Store</span>
                                        </a>
                                        <a href="https://apps.apple.com/app/pictora/id6742661137" class="store-link" target="_blank">
                                            <i class="fab fa-app-store-ios"></i>
                                            <span data-i18n="projects.buttons.appstore">App Store</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="project-content">
                                <h3 data-i18n="projects.items.pictora.title">Pictora</h3>
                                <p data-i18n="projects.items.pictora.description">Yapay zeka ile metinden görsel üretme uygulaması. Kullanıcılar, metin açıklamaları girerek yüksek kaliteli, özgün görseller oluşturabilir ve bu görselleri sosyal medyada paylaşabilir veya kişisel projelerinde kullanabilir.</p>
                                <div class="tech-stack">
                                    <span class="tech-badge">React Native</span>
                                    <span class="tech-badge">MySQL</span>
                                    <span class="tech-badge">Node.js</span>
                                    <span class="tech-badge">Express.js</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Alya -->
                    <div class="swiper-slide" data-category="mobile">
                        <div class="project-card glass-card" data-project-key="alya">
                            <div class="project-image">
                                <img src="assets/alya.webp" alt="Alya App">
                                <div class="project-overlay">
                                    <div class="store-links">
                                        <a href="https://play.google.com/store/apps/details?id=com.aliyapici.AlyaTherapist" class="store-link" target="_blank">
                                            <i class="fab fa-google-play"></i>
                                            <span data-i18n="projects.buttons.playstore">Play Store</span>
                                        </a>
                                        <a href="https://apps.apple.com/us/app/ai-therapist-therapy-alya/id6736765528" class="store-link" target="_blank">
                                            <i class="fab fa-app-store-ios"></i>
                                            <span data-i18n="projects.buttons.appstore">App Store</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="project-content">
                                <h3 data-i18n="projects.items.alya.title">Alya</h3>
                                <p data-i18n="projects.items.alya.description">Yapay zeka tabanlı mental sağlık destek uygulaması. Kullanıcıların kişisel gelişim ve mental sağlık süreçlerini destekleyen bir dijital terapi platformu.</p>
                                <div class="tech-stack">
                                    <span class="tech-badge">React Native</span>
                                    <span class="tech-badge">MySQL</span>
                                    <span class="tech-badge">Node.js</span>
                                    <span class="tech-badge">Express.js</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Glowify -->
                    <div class="swiper-slide" data-category="mobile">
                        <div class="project-card glass-card" data-project-key="glowify">
                            <div class="project-image">
                                <img src="assets/glowify.webp" alt="Glowify App">
                                <div class="project-overlay">
                                    <div class="store-links">
                                        <a href="https://play.google.com/store/apps/details?id=dev.aliyapici.glowify" class="store-link" target="_blank">
                                            <i class="fab fa-google-play"></i>
                                            <span data-i18n="projects.buttons.playstore">Play Store</span>
                                        </a>
                                        <a href="https://apps.apple.com/us/app/ai-skin-scanner-glowify/id6739266675" class="store-link" target="_blank">
                                            <i class="fab fa-app-store-ios"></i>
                                            <span data-i18n="projects.buttons.appstore">App Store</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="project-content">
                                <h3 data-i18n="projects.items.glowify.title">Glowify</h3>
                                <p data-i18n="projects.items.glowify.description">Yapay zeka teknolojisi ile kişiselleştirilmiş cilt analizi ve bakım önerileri sunan uygulama. Kullanıcılara özel cilt bakım rutinleri oluşturur.</p>
                                <div class="tech-stack">
                                    <span class="tech-badge">React Native</span>
                                    <span class="tech-badge">MySQL</span>
                                    <span class="tech-badge">Node.js</span>
                                    <span class="tech-badge">Express.js</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Nöbetçi Eczaneler -->
                    <div class="swiper-slide" data-category="mobile">
                        <div class="project-card glass-card" data-project-key="eczane">
                            <div class="project-image">
                                <img src="assets/eczane.webp" alt="Nöbetçi Eczaneler App">
                                <div class="project-overlay">
                                    <div class="store-links">
                                        <a href="https://play.google.com/store/apps/details?id=dev.aliyapici.NobetciEczaneler" class="store-link" target="_blank">
                                            <i class="fab fa-google-play"></i>
                                            <span data-i18n="projects.buttons.playstore">Play Store</span>
                                        </a>
                                        <a href="https://apps.apple.com/us/app/n%C3%B6bet%C3%A7i-eczaneler-t%C3%BCm-i-ller/id6742257616" class="store-link" target="_blank">
                                            <i class="fab fa-app-store-ios"></i>
                                            <span data-i18n="projects.buttons.appstore">App Store</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="project-content">
                                <h3 data-i18n="projects.items.eczane.title">Nöbetçi Eczaneler</h3>
                                <p data-i18n="projects.items.eczane.description">Türkiye genelindeki nöbetçi eczanelerin güncel bilgilerini ve konumlarını gösteren mobil uygulama.</p>
                                <div class="tech-stack">
                                    <span class="tech-badge">React Native</span>
                                    <span class="tech-badge">MySQL</span>
                                    <span class="tech-badge">PHP</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- All Video Saver -->
                    <div class="swiper-slide" data-category="mobile">
                        <div class="project-card glass-card" data-project-key="videoSaver">
                            <div class="project-image">
                                <img src="assets/all-video-saver.webp" alt="All Video Saver App">
                                <div class="project-overlay">
                                    <div class="store-links">
                                        <a href="#" class="store-link" target="_blank">
                                            <i class="fab fa-google-play"></i>
                                            <span data-i18n="projects.buttons.playstore">Play Store</span>
                                        </a>
                                        <a href="#" class="store-link" target="_blank">
                                            <i class="fab fa-app-store-ios"></i>
                                            <span data-i18n="projects.buttons.appstore">App Store</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="project-content">
                                <h3 data-i18n="projects.items.videoSaver.title">All Video Saver</h3>
                                <p data-i18n="projects.items.videoSaver.description">Sosyal medya platformlarından medya içeriklerini indirme imkanı sunan uygulama. Video, fotoğraf ve ses dosyalarını yerel depolamaya kaydetme özelliği.</p>
                                <div class="tech-stack">
                                    <span class="tech-badge">React Native</span>
                                    <span class="tech-badge">MySQL</span>
                                    <span class="tech-badge">Node.js</span>
                                    <span class="tech-badge">Express.js</span>
                                </div>
                            </div>
                        </div>
                    </div>

                     <!-- BiRandevu -->
                     <div class="swiper-slide" data-category="mobile">
                        <div class="project-card glass-card" data-project-key="birandevu">
                            <div class="project-image">
                                <img src="assets/birandevu.webp" alt="BiRandevu App">
                                <div class="project-overlay">
                                    <div class="store-links">
                                        <a href="https://play.google.com/store/apps/details?id=com.aliyapici.BiRandevu" class="store-link" target="_blank">
                                            <i class="fab fa-google-play"></i>
                                            <span data-i18n="projects.buttons.playstore">Play Store</span>
                                        </a>
                                        <a href="https://apps.apple.com/us/app/kolay-randevu-birandevu/id6472727359" class="store-link" target="_blank">
                                            <i class="fab fa-app-store-ios"></i>
                                            <span data-i18n="projects.buttons.appstore">App Store</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="project-content">
                                <h3 data-i18n="projects.items.birandevu.title">BiRandevu</h3>
                                <p data-i18n="projects.items.birandevu.description">İşletme, çalışan ve müşteriler için randevu yönetim sistemi. Randevu takibi, bildirim sistemi ve SMS sistemi içeren mobil uygulama.</p>
                                <div class="tech-stack">
                                    <span class="tech-badge">React Native</span>
                                    <span class="tech-badge">MySQL</span>
                                    <span class="tech-badge">Node.js</span>
                                    <span class="tech-badge">Express.js</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Fenomeno QR Menu -->
                    <div class="swiper-slide" data-category="web">
                        <div class="project-card glass-card" data-project-key="fenomeno">
                            <div class="project-image">
                                <img src="assets/fenomeno.webp" alt="Fenomeno QR Menu">
                                <div class="project-overlay">
                                    <div class="store-links">
                                        <a href="https://fenomeno.dk/menu" class="store-link" target="_blank">
                                            <i class="fas fa-globe"></i>
                                            <span data-i18n="projects.buttons.visit">Ziyaret Et</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="project-content">
                                <h3 data-i18n="projects.items.fenomeno.title">Fenomeno QR Menu</h3>
                                <p data-i18n="projects.items.fenomeno.description">Modern web teknolojileri ile geliştirilen dijital menü sistemi. QR kod entegrasyonu, dinamik içerik yönetimi ve çoklu dil desteği sunan restoran menü platformu.</p>
                                <div class="tech-stack">
                                    <span class="tech-badge">PHP</span>
                                    <span class="tech-badge">MySQL</span>
                                    <span class="tech-badge">HTML/CSS</span>
                                    <span class="tech-badge">JavaScript</span>
                                </div>
                            </div>
                        </div>
                    </div>

                   
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </section>

    <!-- Skills Section -->
    <section id="skills" class="section-padding">
        <div class="container">
            <div class="section-header text-center" data-aos="fade-up">
                <h2 class="section-title text-gradient" data-i18n="skills.title">Tech Stack</h2>
                <p class="section-subtitle" data-i18n="skills.subtitle">Technologies I Specialize In</p>
            </div>
            <div class="skills-container">
                <div class="skills-grid">
                    <!-- Core Technologies -->
                    <div class="skill-category glass-card" data-aos="zoom-in">
                        <h3 class="category-title">Core Technologies</h3>
                        <div class="skill-items">
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fab fa-js"></i></div>
                                <div class="skill-info">
                                    <h4>JavaScript</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="90"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fab fa-html5"></i></div>
                                <div class="skill-info">
                                    <h4>HTML5/CSS3</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="95"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fab fa-php"></i></div>
                                <div class="skill-info">
                                    <h4>PHP</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="85"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fas fa-database"></i></div>
                                <div class="skill-info">
                                    <h4>MySQL</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="85"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Frameworks & Libraries -->
                    <div class="skill-category glass-card" data-aos="zoom-in" data-aos-delay="100">
                        <h3 class="category-title">Frameworks & Libraries</h3>
                        <div class="skill-items">
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fab fa-react"></i></div>
                                <div class="skill-info">
                                    <h4>React Native</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="90"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fab fa-flutter"></i></div>
                                <div class="skill-info">
                                    <h4>Flutter</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="85"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fab fa-node-js"></i></div>
                                <div class="skill-info">
                                    <h4>Node.js/Express.js</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="88"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fab fa-bootstrap"></i></div>
                                <div class="skill-info">
                                    <h4>Bootstrap</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="90"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Development Tools -->
                    <div class="skill-category glass-card" data-aos="zoom-in" data-aos-delay="200">
                        <h3 class="category-title">Development Tools</h3>
                        <div class="skill-items">
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fab fa-github"></i></div>
                                <div class="skill-info">
                                    <h4>Git/GitHub</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="90"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fas fa-server"></i></div>
                                <div class="skill-info">
                                    <h4>Firebase</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="82"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fas fa-code-branch"></i></div>
                                <div class="skill-info">
                                    <h4>REST APIs</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="85"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-icon"><i class="fas fa-terminal"></i></div>
                                <div class="skill-info">
                                    <h4>Debugging Tools</h4>
                                    <div class="skill-level">
                                        <div class="progress-bar" data-progress="88"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="section-padding">
        <div class="container">
            <div class="section-header text-center" data-aos="fade-up">
                <h2 class="section-title text-gradient" data-i18n="contact.title">İletişime Geç</h2>
                <p class="section-subtitle" data-i18n="contact.subtitle">Projeleriniz için benimle iletişime geçebilirsiniz</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <form class="contact-form glass-card" data-aos="fade-up">
                        <div class="form-group">
                            <input type="text" class="form-control glass-input" placeholder="Adınız" data-i18n-placeholder="contact.form.name" required>
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control glass-input" placeholder="E-posta" data-i18n-placeholder="contact.form.email" required>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control glass-input" placeholder="Konu" data-i18n-placeholder="contact.form.subject" required>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control glass-input" rows="5" placeholder="Mesajınız" data-i18n-placeholder="contact.form.message" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-gradient">
                            <span data-i18n="contact.form.send">Gönder</span>
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer glass-footer">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="social-links">
                        <a href="https://github.com/aliyapici" class="social-link glass-card" target="_blank">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="https://www.linkedin.com/in/ali-yapici/" class="social-link glass-card" target="_blank">
                            <i class="fab fa-linkedin"></i>
                        </a>
                    </div>
                    <p class="copyright" data-i18n="footer.copyright">© 2025 Tüm hakları saklıdır.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="translations.js"></script>
    <script src="script.js"></script>
</body>
</html>