Autosave: 20260205-142110

assets/js/main.js

@@ -1,73 +1,168 @@
 document.addEventListener('DOMContentLoaded', () => {
-    
-    // Smooth scrolling for navigation links
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
-            e.preventDefault();
-            const targetId = this.getAttribute('href');
-            if (targetId === '#') return;
-            
-            const targetElement = document.querySelector(targetId);
-            if (targetElement) {
-                // Close mobile menu if open
-                const navbarToggler = document.querySelector('.navbar-toggler');
-                const navbarCollapse = document.querySelector('.navbar-collapse');
-                if (navbarCollapse.classList.contains('show')) {
-                    navbarToggler.click();
-                }
-
-                // Scroll with offset
-                const offset = 80;
-                const elementPosition = targetElement.getBoundingClientRect().top;
-                const offsetPosition = elementPosition + window.pageYOffset - offset;
-
-                window.scrollTo({
-                    top: offsetPosition,
-                    behavior: "smooth"
-                });
-            }
-        });
-    });
-
-    // Navbar scroll effect
+    // Navbar Scroll Effect
     const navbar = document.querySelector('.navbar');
     window.addEventListener('scroll', () => {
-        if (window.scrollY > 50) {
-            navbar.classList.add('scrolled', 'shadow-sm', 'bg-white');
-            navbar.classList.remove('bg-transparent');
-        } else {
-            navbar.classList.remove('scrolled', 'shadow-sm', 'bg-white');
-            navbar.classList.add('bg-transparent');
+        if (navbar) {
+            if (window.scrollY > 50) {
+                navbar.classList.add('scrolled');
+            } else {
+                navbar.classList.remove('scrolled');
+            }
         }
     });
 
-    // Intersection Observer for fade-up animations
-    const observerOptions = {
-        threshold: 0.1,
-        rootMargin: "0px 0px -50px 0px"
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('animate-up');
-                entry.target.style.opacity = "1";
-                observer.unobserve(entry.target); // Only animate once
+    // Mobile Menu Toggle
+    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+    const navLinks = document.querySelector('.nav-links');
+    
+    if (mobileMenuToggle) {
+        mobileMenuToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+            const icon = mobileMenuToggle.querySelector('i');
+            if (navLinks.classList.contains('active')) {
+                icon.classList.replace('fa-bars', 'fa-times');
+            } else {
+                icon.classList.replace('fa-times', 'fa-bars');
             }
         });
-    }, observerOptions);
+    }
 
-    // Select elements to animate (add a class 'reveal' to them in HTML if not already handled by CSS animation)
-    // For now, let's just make sure the hero animations run. 
-    // If we want scroll animations, we'd add opacity: 0 to elements in CSS and reveal them here.
-    // Given the request, the CSS animation I added runs on load for Hero. 
-    // Let's make the project cards animate in.
-    
-    const projectCards = document.querySelectorAll('.project-card');
-    projectCards.forEach((card, index) => {
-        card.style.opacity = "0";
-        card.style.animationDelay = `${index * 0.1}s`;
-        observer.observe(card);
+    // Hero Swiper
+    const heroSwiper = new Swiper('.hero-swiper', {
+        loop: true,
+        effect: 'fade',
+        fadeEffect: {
+            crossFade: true
+        },
+        autoplay: {
+            delay: 6000,
+            disableOnInteraction: false,
+        }
     });
 
-});
+    // Portfolio Filtering
+    const filterBtns = document.querySelectorAll('.filter-btn');
+    const portfolioItems = document.querySelectorAll('.portfolio-item');
+
+    filterBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            filterBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+
+            const filterValue = btn.getAttribute('data-filter');
+
+            portfolioItems.forEach(item => {
+                if (filterValue === 'all' || item.classList.contains(filterValue)) {
+                    item.style.display = 'block';
+                    item.style.animation = 'fadeIn 0.5s ease forwards';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        });
+    });
+
+    // Contact Form Submission
+    const contactForm = document.getElementById('contactForm');
+    const toast = document.getElementById('toast');
+
+    // Simple I18N for JS messages based on html lang attribute
+    const htmlLang = document.documentElement.lang || 'en';
+    const messages = {
+        en: { sending: 'Sending...', success: 'Message sent successfully!', error: 'Failed to send. Please try again.' },
+        zh: { sending: '发送中...', success: '消息已成功发送！', error: '发送失败，请稍后再试。' },
+        ja: { sending: '送信中...', success: '送信が完了しました！', error: '送信に失敗しました。' },
+        ko: { sending: '전송 중...', success: '메시지가 성공적으로 전송되었습니다!', error: '전송 실패. 다시 시도하십시오.' },
+        de: { sending: 'Senden...', success: 'Nachricht erfolgreich gesendet!', error: 'Fehler beim Senden.' },
+        fr: { sending: 'Envoi...', success: 'Message envoyé avec succès !', error: 'Échec de l\'envoi.' },
+        es: { sending: 'Enviando...', success: '¡Mensaje enviado con éxito!', error: 'Error al enviar.' },
+        ar: { sending: 'جاري الإرسال...', success: 'تم إرسال الرسالة بنجاح!', error: 'فشل الإرسال. يرجى المحاولة مرة أخرى.' }
+    };
+    const msg = messages[htmlLang] || messages['en'];
+
+    if (contactForm) {
+        contactForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const formData = new FormData(contactForm);
+            const submitBtn = contactForm.querySelector('.btn-submit');
+            const originalBtnContent = submitBtn.innerHTML;
+            
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = `<span>${msg.sending}</span> <i class="fas fa-spinner fa-spin"></i>`;
+
+            try {
+                const response = await fetch('contact.php', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    showToast(msg.success);
+                    contactForm.reset();
+                } else {
+                    showToast(msg.error + ' ' + (result.error || ''));
+                }
+            } catch (error) {
+                showToast(msg.error);
+            } finally {
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalBtnContent;
+            }
+        });
+    }
+
+    function showToast(message) {
+        if (!toast) return;
+        toast.innerText = message;
+        toast.style.display = 'block';
+        toast.style.animation = 'slideInUp 0.5s ease forwards';
+        
+        setTimeout(() => {
+            toast.style.animation = 'slideOutDown 0.5s ease forwards';
+            setTimeout(() => {
+                toast.style.display = 'none';
+            }, 500);
+        }, 5000);
+    }
+
+    // Smooth scroll for nav links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            if (this.hash !== "") {
+                e.preventDefault();
+                const target = document.querySelector(this.hash);
+                if (target) {
+                    if (navLinks && navLinks.classList.contains('active')) {
+                        navLinks.classList.remove('active');
+                        const icon = mobileMenuToggle.querySelector('i');
+                        icon.classList.replace('fa-times', 'fa-bars');
+                    }
+                    window.scrollTo({
+                        top: target.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                }
+            }
+        });
+    });
+});
+
+const animStyle = document.createElement('style');
+animStyle.textContent = "
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(20px); } 
+        to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes slideInUp {
+        from { transform: translateY(100%); opacity: 0; } 
+        to { transform: translateY(0); opacity: 1; }
+    }
+    @keyframes slideOutDown {
+        from { transform: translateY(0); opacity: 1; } 
+        to { transform: translateY(100%); opacity: 0; }
+    }
+";
+document.head.appendChild(animStyle);

assets/logo.svg

@@ -0,0 +1,29 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="mainGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00c6ff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#0072ff;stop-opacity:1" />
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
+      <feOffset dx="1" dy="2" result="offsetblur" />
+      <feComponentTransfer>
+        <feFuncA type="linear" slope="0.3" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+  <!-- Background Circle with Soft Gradient -->
+  <circle cx="50" cy="50" r="45" fill="#f8fafc" stroke="url(#mainGradient)" stroke-width="2" />
+  
+  <!-- Stylized Z that looks like a growth chart/path -->
+  <path d="M30 35 L70 35 L35 70 L75 70" fill="none" stroke="url(#mainGradient)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" filter="url(#shadow)" />
+  
+  <!-- Abstract Nodes representing tech/finance -->
+  <circle cx="70" cy="35" r="5" fill="#10b981" />
+  <circle cx="35" cy="70" r="5" fill="#f59e0b" />
+  <path d="M52 52 L58 52" stroke="#6366f1" stroke-width="4" stroke-linecap="round" />
+</svg>

contact.php

@@ -0,0 +1,35 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__ . '/db/config.php';
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    echo json_encode(['success' => false, 'error' => 'Invalid request method.']);
+    exit;
+}
+
+$name = trim($_POST['name'] ?? '');
+$email = trim($_POST['email'] ?? '');
+$type = trim($_POST['type'] ?? '');
+$message = trim($_POST['message'] ?? '');
+
+if (empty($name) || empty($email) || empty($message)) {
+    echo json_encode(['success' => false, 'error' => 'All fields are required.']);
+    exit;
+}
+
+// Basic validation for type if provided
+$allowedTypes = ['fintech', 'web', 'app', 'consult', 'other'];
+if (!empty($type) && !in_array($type, $allowedTypes)) {
+    $type = 'other';
+}
+
+try {
+    $pdo = db();
+    $stmt = $pdo->prepare("INSERT INTO contact_requests (name, email, type, message) VALUES (?, ?, ?, ?)");
+    $stmt->execute([$name, $email, $type, $message]);
+
+    echo json_encode(['success' => true]);
+} catch (PDOException $e) {
+    error_log("Database error: " . $e->getMessage());
+    echo json_encode(['success' => false, 'error' => 'Could not save your request. Please try again later.']);
+}

db/init.php

@@ -0,0 +1,102 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+try {
+    $pdo = db();
+    
+    // Contact requests table
+    $sql = "CREATE TABLE IF NOT EXISTS contact_requests (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        name VARCHAR(255) NOT NULL,
+        email VARCHAR(255) NOT NULL,
+        type VARCHAR(50) DEFAULT NULL,
+        message TEXT NOT NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;";
+    $pdo->exec($sql);
+
+    // Projects table for rich content
+    $sql = "CREATE TABLE IF NOT EXISTS projects (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        title VARCHAR(255) NOT NULL,
+        slug VARCHAR(255) NOT NULL UNIQUE,
+        category VARCHAR(100) NOT NULL,
+        short_description TEXT NOT NULL,
+        full_content LONGTEXT NOT NULL,
+        image_url VARCHAR(255) NOT NULL,
+        client_name VARCHAR(255) DEFAULT NULL,
+        project_date VARCHAR(50) DEFAULT NULL,
+        tech_stack TEXT DEFAULT NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;";
+    $pdo->exec($sql);
+
+    // Clear existing projects to ensure we have exactly what we want
+    $pdo->exec("TRUNCATE TABLE projects");
+
+    $categories = ['fintech', 'web', 'app'];
+    $images = [
+        'fintech' => [
+            'https://images.pexels.com/photos/6770610/pexels-photo-6770610.jpeg',
+            'https://images.pexels.com/photos/6801874/pexels-photo-6801874.jpeg',
+            'https://images.pexels.com/photos/7567443/pexels-photo-7567443.jpeg',
+            'https://images.pexels.com/photos/8370752/pexels-photo-8370752.jpeg',
+            'https://images.pexels.com/photos/6771664/pexels-photo-6771664.jpeg'
+        ],
+        'web' => [
+            'https://images.pexels.com/photos/251225/pexels-photo-251225.jpeg',
+            'https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg',
+            'https://images.pexels.com/photos/326503/pexels-photo-326503.jpeg',
+            'https://images.pexels.com/photos/1092644/pexels-photo-1092644.jpeg',
+            'https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg'
+        ],
+        'app' => [
+            'https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg',
+            'https://images.pexels.com/photos/1181671/pexels-photo-1181671.jpeg',
+            'https://images.pexels.com/photos/1181263/pexels-photo-1181263.jpeg',
+            'https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg',
+            'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg'
+        ]
+    ];
+
+    $titles = [
+        'fintech' => [
+            'Global Payments Gateway', 'Crypto Asset Manager', 'Algo Trading Terminal', 'Risk Assessment Engine', 
+            'DeFi Liquidity Pool', 'Real-time Clearing House', 'Credit Scoring AI', 'Wealth Management Hub',
+            'Mobile Banking Core', 'Institutional Trading API'
+        ],
+        'web' => [
+            'Luxury Real Estate Portal', 'High-end Fashion Boutique', 'Architectural Showcase', 'Global Consulting Landing',
+            'Art Gallery Digital Experience', 'Premium Car Configurator', 'Exclusive Travel Concierge', 'Modern Media Platform',
+            'Corporate Governance Site', 'Creative Portfolio Engine'
+        ],
+        'app' => [
+            'Supply Chain ERP', 'Telemedicine Platform', 'Smart City Dashboard', 'Enterprise HR Portal',
+            'IoT Monitoring System', 'Cloud Infrastructure Manager', 'Retail Logistics App', 'AI Customer Service Hub',
+            'Project Management Suite', 'Real-time Collaboration Tool'
+        ]
+    ];
+
+    $stmt = $pdo->prepare("INSERT INTO projects (title, slug, category, short_description, full_content, image_url, client_name, project_date, tech_stack) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)");
+
+    for ($i = 1; $i <= 30; $i++) {
+        $cat = $categories[($i - 1) % 3];
+        $titleIndex = floor(($i - 1) / 3);
+        $title = $titles[$cat][$titleIndex];
+        $slug = strtolower(str_replace(' ', '-', $title)) . '-' . $i;
+        $desc = "Advanced $cat solution designed for high-performance and scalability in the modern digital landscape.";
+        $content = "<h3>Overview</h3><p>This project represents a milestone in $cat development, focusing on delivering exceptional value through technical excellence.</p><h3>Key Features</h3><ul><li>High availability architecture</li><li>Secure data processing</li><li>Seamless third-party integrations</li><li>Intuitive user experience</li></ul>";
+        $img = $images[$cat][rand(0, 4)];
+        $client = "Global " . ucfirst($cat) . " Corp";
+        $date = "2023." . str_pad((string)rand(1, 12), 2, '0', STR_PAD_LEFT);
+        $stack = "PHP, React, Cloud, SQL";
+
+        $stmt->execute([$title, $slug, $cat, $desc, $content, $img, $client, $date, $stack]);
+    }
+
+    echo "Successfully seeded 30 projects.";
+
+} catch (PDOException $e) {
+    error_log("Database initialization error: " . $e->getMessage());
+    echo "Error: " . $e->getMessage();
+}

includes/i18n.php

@@ -0,0 +1,332 @@
+<?php
+session_start();
+
+$languages = [
+    'en' => ['name' => 'English', 'flag' => '🇺🇸'],
+    'zh' => ['name' => '简体中文', 'flag' => '🇨🇳'],
+    'ja' => ['name' => '日本語', 'flag' => '🇯🇵'],
+    'ko' => ['name' => '한국어', 'flag' => '🇰🇷'],
+    'de' => ['name' => 'Deutsch', 'flag' => '🇩🇪'],
+    'fr' => ['name' => 'Français', 'flag' => '🇫🇷'],
+    'es' => ['name' => 'Español', 'flag' => '🇪🇸'],
+    'ar' => ['name' => 'العربية', 'flag' => '🇸🇦']
+];
+
+$default_lang = 'en';
+
+if (isset($_GET['lang']) && array_key_exists($_GET['lang'], $languages)) {
+    $_SESSION['lang'] = $_GET['lang'];
+    setcookie('lang', $_GET['lang'], time() + (86400 * 30), "/");
+}
+
+$lang = $_SESSION['lang'] ?? $_COOKIE['lang'] ?? $default_lang;
+
+$translations = [
+    'en' => [
+        'nav_home' => 'Home',
+        'nav_services' => 'Services',
+        'nav_portfolio' => 'Portfolio',
+        'nav_about' => 'About',
+        'nav_process' => 'Process',
+        'nav_testimonials' => 'Clients',
+        'nav_contact' => 'Consult Now',
+        'hero_badge_1' => 'FINTECH EXPERT',
+        'hero_title_1' => 'Defining the Future of Fintech',
+        'hero_desc_1' => 'Combining deep industry insights with cutting-edge development to build a robust, efficient, and scalable digital foundation for your business.',
+        'hero_btn_consult' => 'Expert Consultation',
+        'hero_btn_explore' => 'Explore Cases',
+        'stats_years' => 'Years Experience',
+        'stats_cases' => 'Successful Cases',
+        'stats_trust' => 'Client Trust',
+        'stats_load' => 'System Capacity',
+        'services_title' => 'Full-Stack Ecosystem',
+        'services_subtitle' => 'One-stop technical solutions from consulting to maintenance.',
+        'portfolio_title' => 'Featured Projects',
+        'portfolio_subtitle' => 'Explore how we transform complex requirements into elegant solutions.',
+        'filter_all' => 'All Works',
+        'filter_fintech' => 'Fintech',
+        'filter_web' => 'Brand Web',
+        'filter_app' => 'App Systems',
+        'about_subtitle' => 'ABOUT ME',
+        'about_title' => 'Full-Stack Vision, Empowering Business Growth',
+        'contact_title' => 'Customize Your Digital Future',
+        'contact_form_title' => 'Project Inquiry',
+        'form_name' => 'Your Name',
+        'form_contact' => 'Contact Info (Email/TG)',
+        'form_type' => 'Inquiry Type',
+        'form_message' => 'Brief Requirements',
+        'form_submit' => 'Submit Inquiry',
+        'footer_desc' => 'Building extraordinary value with exquisite code. Global technology expert portal.',
+        'view_details' => 'View Details'
+    ],
+    'zh' => [
+        'nav_home' => '首页',
+        'nav_services' => '核心服务',
+        'nav_portfolio' => '精选案例',
+        'nav_about' => '关于我',
+        'nav_process' => '合作流程',
+        'nav_testimonials' => '客户评价',
+        'nav_contact' => '立即咨询',
+        'hero_badge_1' => '金融科技专家',
+        'hero_title_1' => '定义金融科技的新高度',
+        'hero_desc_1' => '融合深厚行业洞察与前沿开发技术，为您的业务构建稳健、高效、可扩展的数字化基石。',
+        'hero_btn_consult' => '开启专家咨询',
+        'hero_btn_explore' => '探索精选案例',
+        'stats_years' => '行业深耕 (年)',
+        'stats_cases' => '卓越交付案例',
+        'stats_trust' => '客户长期信赖',
+        'stats_load' => '系统负载能力',
+        'services_title' => '全链路技术生态',
+        'services_subtitle' => '提供从咨询设计、研发交付到安全运维的一站式技术闭环方案。',
+        'portfolio_title' => '精选项目案例',
+        'portfolio_subtitle' => '探索我们如何将复杂的需求转化为简洁、高效且美观的技术方案。',
+        'filter_all' => '全部作品',
+        'filter_fintech' => '金融科技',
+        'filter_web' => '品牌网页',
+        'filter_app' => '应用系统',
+        'about_subtitle' => '关于我',
+        'about_title' => '全栈视野，深度赋能业务增长',
+        'contact_title' => '定制您的数字化未来',
+        'contact_form_title' => '项目咨询表',
+        'form_name' => '您的称呼',
+        'form_contact' => '联系方式 (Email/微信/TG)',
+        'form_type' => '咨询类型',
+        'form_message' => '需求简述',
+        'form_submit' => '提交咨询申请',
+        'footer_desc' => '用极致的代码构建非凡的价值。专注于金融科技与高端全栈开发的全球化技术专家门户。',
+        'view_details' => '深入探索'
+    ],
+    'ja' => [
+        'nav_home' => 'ホーム',
+        'nav_services' => 'サービス',
+        'nav_portfolio' => 'ポートフォリオ',
+        'nav_about' => '私について',
+        'nav_process' => 'プロセス',
+        'nav_testimonials' => 'お客様の声',
+        'nav_contact' => '今すぐ相談',
+        'hero_badge_1' => 'フィンテック専門家',
+        'hero_title_1' => 'フィンテックの未来を定義する',
+        'hero_desc_1' => '深い業界の洞察と最先端の開発を組み合わせ、ビジネスのための堅牢で効率的なデジタル基盤を構築します。',
+        'hero_btn_consult' => '専門家に相談',
+        'hero_btn_explore' => '事例を見る',
+        'stats_years' => '経験年数',
+        'stats_cases' => '成功事例',
+        'stats_trust' => '顧客の信頼',
+        'stats_load' => 'システム容量',
+        'services_title' => 'フルスタックエコシステム',
+        'services_subtitle' => 'コンサルティングからメンテナンスまでのワンストップソリューション。',
+        'portfolio_title' => '注目のプロジェクト',
+        'portfolio_subtitle' => '複雑な要件をいかにエレガントなソリューションに変えるかをご覧ください。',
+        'filter_all' => 'すべて',
+        'filter_fintech' => 'フィンテック',
+        'filter_web' => 'ブランドウェブ',
+        'filter_app' => 'アプリシステム',
+        'about_subtitle' => '私について',
+        'about_title' => 'フルスタックのビジョンでビジネスの成長を支援',
+        'contact_title' => 'あなたのデジタルの未来をカスタマイズ',
+        'contact_form_title' => 'プロジェクトのお問い合わせ',
+        'form_name' => 'お名前',
+        'form_contact' => '連絡先 (Email/TG)',
+        'form_type' => 'お問い合わせの種類',
+        'form_message' => '要件の概要',
+        'form_submit' => 'お問い合わせを送信',
+        'footer_desc' => '洗練されたコードで並外れた価値を創造。グローバル技術専門家ポータル。',
+        'view_details' => '詳細を見る'
+    ],
+    'ko' => [
+        'nav_home' => '홈',
+        'nav_services' => '서비스',
+        'nav_portfolio' => '포트폴리오',
+        'nav_about' => '자기소개',
+        'nav_process' => '프로세스',
+        'nav_testimonials' => '고객 후기',
+        'nav_contact' => '지금 상담하기',
+        'hero_badge_1' => '핀테크 전문가',
+        'hero_title_1' => '핀테크의 미래를 정의하다',
+        'hero_desc_1' => '심도 있는 산업 통찰력과 최첨단 개발 기술을 결합하여 비즈니스를 위한 강력하고 효율적인 디지털 기반을 구축합니다.',
+        'hero_btn_consult' => '전문가 상담',
+        'hero_btn_explore' => '사례 탐색',
+        'stats_years' => '경력 연수',
+        'stats_cases' => '성공적인 사례',
+        'stats_trust' => '고객 신뢰',
+        'stats_load' => '시스템 용량',
+        'services_title' => '풀스택 생태계',
+        'services_subtitle' => '컨설팅부터 유지보수까지 원스톱 기술 솔루션 제공.',
+        'portfolio_title' => '주요 프로젝트',
+        'portfolio_subtitle' => '복잡한 요구 사항을 우아한 솔루션으로 전환하는 방법을 확인하세요.',
+        'filter_all' => '전체 보기',
+        'filter_fintech' => '핀테크',
+        'filter_web' => '브랜드 웹',
+        'filter_app' => '앱 시스템',
+        'about_subtitle' => '자기소개',
+        'about_title' => '풀스택 비전, 비즈니스 성장 강화',
+        'contact_title' => '귀하의 디지털 미래를 맞춤화하십시오',
+        'contact_form_title' => '프로젝트 문의',
+        'form_name' => '성함',
+        'form_contact' => '연락처 (Email/TG)',
+        'form_type' => '문의 유형',
+        'form_message' => '요구 사항 요약',
+        'form_submit' => '문의 제출',
+        'footer_desc' => '정교한 코드로 탁월한 가치를 창출합니다. 글로벌 기술 전문가 포털.',
+        'view_details' => '자세히 보기'
+    ],
+    'de' => [
+        'nav_home' => 'Startseite',
+        'nav_services' => 'Dienstleistungen',
+        'nav_portfolio' => 'Portfolio',
+        'nav_about' => 'Über mich',
+        'nav_process' => 'Prozess',
+        'nav_testimonials' => 'Kunden',
+        'nav_contact' => 'Jetzt beraten',
+        'hero_badge_1' => 'FINTECH EXPERTE',
+        'hero_title_1' => 'Die Zukunft von Fintech definieren',
+        'hero_desc_1' => 'Kombination aus tiefen Brancheneinblicken und modernster Entwicklung für ein robustes digitales Fundament.',
+        'hero_btn_consult' => 'Expertenberatung',
+        'hero_btn_explore' => 'Projekte entdecken',
+        'stats_years' => 'Jahre Erfahrung',
+        'stats_cases' => 'Erfolgreiche Projekte',
+        'stats_trust' => 'Kundenvertrauen',
+        'stats_load' => 'Systemkapazität',
+        'services_title' => 'Full-Stack Ökosystem',
+        'services_subtitle' => 'Technische Komplettlösungen von der Beratung bis zur Wartung.',
+        'portfolio_title' => 'Ausgewählte Projekte',
+        'portfolio_subtitle' => 'Wie wir komplexe Anforderungen in elegante Lösungen verwandeln.',
+        'filter_all' => 'Alle Werke',
+        'filter_fintech' => 'Fintech',
+        'filter_web' => 'Marken-Web',
+        'filter_app' => 'App-Systeme',
+        'about_subtitle' => 'ÜBER MICH',
+        'about_title' => 'Full-Stack Vision für Geschäftswachstum',
+        'contact_title' => 'Gestalten Sie Ihre digitale Zukunft',
+        'contact_form_title' => 'Projektanfrage',
+        'form_name' => 'Ihr Name',
+        'form_contact' => 'Kontakt (E-Mail/TG)',
+        'form_type' => 'Anfragetyp',
+        'form_message' => 'Kurze Beschreibung',
+        'form_submit' => 'Anfrage senden',
+        'footer_desc' => 'Außergewöhnliche Werte durch exquisiten Code schaffen. Globales Expertenportal.',
+        'view_details' => 'Details anzeigen'
+    ],
+    'fr' => [
+        'nav_home' => 'Accueil',
+        'nav_services' => 'Services',
+        'nav_portfolio' => 'Portfolio',
+        'nav_about' => 'À propos',
+        'nav_process' => 'Processus',
+        'nav_testimonials' => 'Clients',
+        'nav_contact' => 'Consulter',
+        'hero_badge_1' => 'EXPERT FINTECH',
+        'hero_title_1' => 'Définir l\'avenir de la Fintech',
+        'hero_desc_1' => 'Allier expertise sectorielle et développement de pointe pour bâtir des fondations digitales robustes.',
+        'hero_btn_consult' => 'Consultation d\'expert',
+        'hero_btn_explore' => 'Explorer les cas',
+        'stats_years' => 'Années d\'expérience',
+        'stats_cases' => 'Cas réussis',
+        'stats_trust' => 'Confiance client',
+        'stats_load' => 'Capacité système',
+        'services_title' => 'Écosystème Full-Stack',
+        'services_subtitle' => 'Solutions techniques de bout en bout, du conseil à la maintenance.',
+        'portfolio_title' => 'Projets vedettes',
+        'portfolio_subtitle' => 'Découvrez comment nous transformons des besoins complexes en solutions élégantes.',
+        'filter_all' => 'Tous les travaux',
+        'filter_fintech' => 'Fintech',
+        'filter_web' => 'Web de marque',
+        'filter_app' => 'Systèmes App',
+        'about_subtitle' => 'À PROPOS',
+        'about_title' => 'Vision Full-Stack pour la croissance des entreprises',
+        'contact_title' => 'Personnalisez votre avenir numérique',
+        'contact_form_title' => 'Demande de projet',
+        'form_name' => 'Votre nom',
+        'form_contact' => 'Contact (Email/TG)',
+        'form_type' => 'Type de demande',
+        'form_message' => 'Brève description',
+        'form_submit' => 'Envoyer la demande',
+        'footer_desc' => 'Créer une valeur extraordinaire avec un code exquis. Portail d\'experts mondiaux.',
+        'view_details' => 'Voir les détails'
+    ],
+    'es' => [
+        'nav_home' => 'Inicio',
+        'nav_services' => 'Servicios',
+        'nav_portfolio' => 'Portafolio',
+        'nav_about' => 'Sobre mí',
+        'nav_process' => 'Proceso',
+        'nav_testimonials' => 'Clientes',
+        'nav_contact' => 'Consultar ahora',
+        'hero_badge_1' => 'EXPERTO FINTECH',
+        'hero_title_1' => 'Definiendo el futuro de Fintech',
+        'hero_desc_1' => 'Combinando visión industrial con desarrollo de vanguardia para bases digitales sólidas.',
+        'hero_btn_consult' => 'Consulta experta',
+        'hero_btn_explore' => 'Explorar casos',
+        'stats_years' => 'Años de experiencia',
+        'stats_cases' => 'Casos exitosos',
+        'stats_trust' => 'Confianza del cliente',
+        'stats_load' => 'Capacidad del sistema',
+        'services_title' => 'Ecosistema Full-Stack',
+        'services_subtitle' => 'Soluciones técnicas integrales desde consultoría hasta mantenimiento.',
+        'portfolio_title' => 'Proyectos destacados',
+        'portfolio_subtitle' => 'Vea cómo transformamos requisitos complejos en soluciones elegantes.',
+        'filter_all' => 'Todos los trabajos',
+        'filter_fintech' => 'Fintech',
+        'filter_web' => 'Web de marca',
+        'filter_app' => 'Sistemas App',
+        'about_subtitle' => 'SOBRE MÍ',
+        'about_title' => 'Visión Full-Stack para el crecimiento empresarial',
+        'contact_title' => 'Personalice su futuro digital',
+        'contact_form_title' => 'Consulta de proyecto',
+        'form_name' => 'Su nombre',
+        'form_contact' => 'Contacto (Email/TG)',
+        'form_type' => 'Tipo de consulta',
+        'form_message' => 'Breve descripción',
+        'form_submit' => 'Enviar consulta',
+        'footer_desc' => 'Creando un valor extraordinario con un código exquisito. Portal de expertos globales.',
+        'view_details' => 'Ver detalles'
+    ],
+    'ar' => [
+        'nav_home' => 'الرئيسية',
+        'nav_services' => 'الخدمات',
+        'nav_portfolio' => 'الأعمال',
+        'nav_about' => 'عني',
+        'nav_process' => 'العملية',
+        'nav_testimonials' => 'العملاء',
+        'nav_contact' => 'استشر الآن',
+        'hero_badge_1' => 'خبير فينتاك',
+        'hero_title_1' => 'تحديد مستقبل التكنولوجيا المالية',
+        'hero_desc_1' => 'الجمع بين رؤى الصناعة والتطوير المتطور لبناء أساس رقمي قوي وفعال.',
+        'hero_btn_consult' => 'استشارة خبير',
+        'hero_btn_explore' => 'استكشاف الحالات',
+        'stats_years' => 'سنوات الخبرة',
+        'stats_cases' => 'حالات ناجحة',
+        'stats_trust' => 'ثقة العملاء',
+        'stats_load' => 'سعة النظام',
+        'services_title' => 'منظومة التطوير الشامل',
+        'services_subtitle' => 'حلول تقنية متكاملة من الاستشارة إلى الصيانة.',
+        'portfolio_title' => 'المشاريع المختارة',
+        'portfolio_subtitle' => 'اكتشف كيف نحول المتطلبات المعقدة إلى حلول أنيقة.',
+        'filter_all' => 'كل الأعمال',
+        'filter_fintech' => 'فينتاك',
+        'filter_web' => 'مواقع الماركات',
+        'filter_app' => 'أنظمة التطبيقات',
+        'about_subtitle' => 'عني',
+        'about_title' => 'رؤية شاملة لتمكين نمو الأعمال',
+        'contact_title' => 'خصص مستقبلك الرقمي',
+        'contact_form_title' => 'طلب مشروع',
+        'form_name' => 'اسمك',
+        'form_contact' => 'معلومات التواصل (إيميل/تليجرام)',
+        'form_type' => 'نوع الطلب',
+        'form_message' => 'وصف المتطلبات',
+        'form_submit' => 'إرسال الطلب',
+        'footer_desc' => 'بناء قيمة استثنائية بكود رائع. بوابة خبراء التكنولوجيا العالمية.',
+        'view_details' => 'عرض التفاصيل'
+    ]
+];
+
+function t($key) {
+    global $translations, $lang;
+    return $translations[$lang][$key] ?? $translations['en'][$key] ?? $key;
+}
+
+function get_current_lang_info() {
+    global $languages, $lang;
+    return $languages[$lang];
+}
+

index.php

@@ -1,150 +1,325 @@
 <?php
 declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/includes/i18n.php';
+require_once __DIR__ . '/db/config.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+@ini_set('display_errors', '0');
+@error_reporting(E_ALL);
+
+$projectName = $_SERVER['PROJECT_NAME'] ?? 'Zhang Portfolio';
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? t('footer_desc');
+$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+
+// Fetch projects from DB
+$pdo = db();
+$projects = $pdo->query("SELECT * FROM projects ORDER BY id DESC")->fetchAll();
+
+$currentLang = get_current_lang_info();
 ?>
 <!doctype html>
-<html lang="en">
+<html lang="<?= $lang ?>" dir="<?= ($lang === 'ar' ? 'rtl' : 'ltr') ?>">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
+  <title><?= htmlspecialchars($projectName) ?> | <?= t('hero_badge_1') ?></title>
+  
+  <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
+  <meta property="og:title" content="<?= htmlspecialchars($projectName) ?>" />
   <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
+  <?php if ($projectImageUrl): ?>
   <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
   <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
+  <?php endif; ?>
+
+  <link rel="icon" type="image/svg+xml" href="assets/logo.svg">
+  
+  <!-- Fonts -->
   <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=Inter:wght@400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
+  
+  <!-- Icons & Libraries -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
+  
+  <link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
   <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
+    body { font-family: 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif; }
+    <?php if ($lang === 'ar'): ?>
+    body { font-family: 'Montserrat', sans-serif; }
+    .nav-links { gap: 20px; }
+    <?php endif; ?>
   </style>
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
+
+  <!-- Navigation -->
+  <nav class="navbar">
+    <div class="container">
+      <a href="#" class="logo">
+        <img src="assets/logo.svg" alt="Logo" width="50" height="50">
+        <span><?= htmlspecialchars($projectName) ?></span>
+      </a>
+      <div class="nav-links">
+        <a href="#hero"><?= t('nav_home') ?></a>
+        <a href="#services"><?= t('nav_services') ?></a>
+        <a href="#portfolio"><?= t('nav_portfolio') ?></a>
+        <a href="#about"><?= t('nav_about') ?></a>
+        <a href="#contact" class="nav-cta"><?= t('nav_contact') ?></a>
+        
+        <!-- Language Switcher -->
+        <div class="lang-switcher">
+          <div class="lang-btn">
+            <span class="flag"><?= $currentLang['flag'] ?></span>
+            <span><?= $currentLang['name'] ?></span>
+            <i class="fas fa-chevron-down"></i>
+          </div>
+          <div class="lang-dropdown">
+            <?php foreach ($languages as $code => $info): ?>
+            <a href="?lang=<?= $code ?>" class="lang-item">
+              <span class="flag"><?= $info['flag'] ?></span>
+              <span><?= $info['name'] ?></span>
+            </a>
+            <?php endforeach; ?>
+          </div>
+        </div>
+      </div>
+      <div class="mobile-menu-toggle">
+        <i class="fas fa-bars"></i>
       </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
     </div>
-  </main>
+  </nav>
+
+  <!-- Hero Slider -->
+  <section id="hero" class="hero-section">
+    <div class="swiper hero-swiper">
+      <div class="swiper-wrapper">
+        <!-- Slide 1 -->
+        <div class="swiper-slide" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
+          <div class="hero-content">
+            <span class="badge"><?= t('hero_badge_1') ?></span>
+            <h1><?= t('hero_title_1') ?></h1>
+            <p><?= t('hero_desc_1') ?></p>
+            <div class="hero-btns">
+              <a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
+                <i class="fab fa-telegram"></i> <?= t('hero_btn_consult') ?>
+              </a>
+              <a href="#portfolio" class="btn btn-glass">
+                <?= t('hero_btn_explore') ?> <i class="fas fa-arrow-right"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Stats Section -->
+  <section class="stats-section">
+    <div class="container">
+      <div class="stats-grid">
+        <div class="stat-item">
+          <h3>8+</h3>
+          <p><?= t('stats_years') ?></p>
+        </div>
+        <div class="stat-item">
+          <h3>30+</h3>
+          <p><?= t('stats_cases') ?></p>
+        </div>
+        <div class="stat-item">
+          <h3>99%</h3>
+          <p><?= t('stats_trust') ?></p>
+        </div>
+        <div class="stat-item">
+          <h3>5M+</h3>
+          <p><?= t('stats_load') ?></p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Services Section -->
+  <section id="services" class="services-section">
+    <div class="container">
+      <div class="section-header">
+        <h2><?= t('services_title') ?></h2>
+        <div class="line"></div>
+        <p><?= t('services_subtitle') ?></p>
+      </div>
+      <div class="services-grid">
+        <div class="service-card">
+          <div class="icon-box"><i class="fas fa-laptop-code"></i></div>
+          <h3>Full-Stack Customization</h3>
+          <p>End-to-end development using React, Vue 3, Node.js, and Go for high-performance systems.</p>
+        </div>
+        <div class="service-card">
+          <div class="icon-box"><i class="fas fa-vault"></i></div>
+          <h3>Fintech Solutions</h3>
+          <p>Secure payment gateways, asset management, and high-frequency trading engines.</p>
+        </div>
+        <div class="service-card">
+          <div class="icon-box"><i class="fas fa-shield-halved"></i></div>
+          <h3>Security & Operations</h3>
+          <p>Financial-grade security audits, automated CI/CD pipelines, and cloud scaling.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Portfolio Section -->
+  <section id="portfolio" class="portfolio-section">
+    <div class="container">
+      <div class="section-header">
+        <h2><?= t('portfolio_title') ?></h2>
+        <div class="line"></div>
+        <p><?= t('portfolio_subtitle') ?></p>
+      </div>
+      <div class="portfolio-filters">
+        <button class="filter-btn active" data-filter="all"><?= t('filter_all') ?></button>
+        <button class="filter-btn" data-filter="fintech"><?= t('filter_fintech') ?></button>
+        <button class="filter-btn" data-filter="web"><?= t('filter_web') ?></button>
+        <button class="filter-btn" data-filter="app"><?= t('filter_app') ?></button>
+      </div>
+      <div class="portfolio-grid">
+        <?php foreach ($projects as $project): ?>
+        <div class="portfolio-item <?= htmlspecialchars($project['category']) ?>">
+          <div class="portfolio-img-wrapper">
+            <img src="<?= htmlspecialchars($project['image_url']) ?>" alt="<?= htmlspecialchars($project['title']) ?>" loading="lazy">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3><?= htmlspecialchars($project['title']) ?></h3>
+                <p><?= htmlspecialchars($project['short_description']) ?></p>
+                <a href="project-detail.php?slug=<?= $project['slug'] ?>" class="view-details"><?= t('view_details') ?> <i class="fas fa-arrow-right"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4><?= htmlspecialchars($project['title']) ?></h4>
+            <span><?= htmlspecialchars(strtoupper($project['category'])) ?></span>
+          </div>
+        </div>
+        <?php endforeach; ?>
+      </div>
+    </div>
+  </section>
+
+  <!-- About Section -->
+  <section id="about" class="about-section">
+    <div class="container">
+      <div class="about-flex">
+        <div class="about-image">
+          <img src="https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Profile">
+          <div class="experience-tag">
+            <strong>8+</strong>
+            <span><?= t('stats_years') ?></span>
+          </div>
+        </div>
+        <div class="about-text">
+          <span class="subtitle"><?= t('about_subtitle') ?></span>
+          <h2><?= t('about_title') ?></h2>
+          <p>I am <strong>Zhang</strong>, a senior engineer specializing in Fintech and full-stack development. With 8 years of experience, I've built mission-critical systems for global clients.</p>
+          
+          <div class="skills-grid">
+            <div class="skill-item"><i class="fab fa-php"></i> PHP (Laravel) / Go / Node.js</div>
+            <div class="skill-item"><i class="fab fa-js"></i> React / Vue 3 / TypeScript</div>
+            <div class="skill-item"><i class="fas fa-database"></i> MySQL / PostgreSQL / Redis</div>
+            <div class="skill-item"><i class="fas fa-server"></i> AWS / K8s / Cloud Native</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Contact Section -->
+  <section id="contact" class="contact-section">
+    <div class="container">
+      <div class="contact-wrapper">
+        <div class="contact-visual">
+          <div class="contact-header">
+            <span class="badge">READY TO START?</span>
+            <h2><?= t('contact_title') ?></h2>
+            <p>We protection your business secrets. Fill the form for a customized assessment.</p>
+          </div>
+          <div class="contact-methods">
+            <div class="method-card">
+              <i class="fab fa-telegram"></i>
+              <h3>Telegram</h3>
+              <a href="https://t.me/zhangshihao818" target="_blank">@zhangshihao818</a>
+            </div>
+            <div class="method-card">
+              <i class="fas fa-envelope"></i>
+              <h3>Email</h3>
+              <span>contact@yourdomain.com</span>
+            </div>
+          </div>
+        </div>
+        <div class="contact-form-container">
+          <form id="contactForm" class="modern-form">
+            <div class="form-title">
+              <h3><?= t('contact_form_title') ?></h3>
+            </div>
+            <div class="input-group">
+              <input type="text" name="name" id="name" required>
+              <label for="name"><?= t('form_name') ?></label>
+            </div>
+            <div class="input-group">
+              <input type="text" name="email" id="email" required>
+              <label for="email"><?= t('form_contact') ?></label>
+            </div>
+            <div class="input-group">
+              <select name="type" id="type" required>
+                <option value="" disabled selected hidden></option>
+                <option value="fintech">Fintech Solution</option>
+                <option value="web">Luxury Web</option>
+                <option value="app">App System</option>
+                <option value="consult">Consulting</option>
+              </select>
+              <label for="type"><?= t('form_type') ?></label>
+            </div>
+            <div class="input-group">
+              <textarea name="message" id="message" required rows="3"></textarea>
+              <label for="message"><?= t('form_message') ?></label>
+            </div>
+            <button type="submit" class="btn-submit">
+              <span><?= t('form_submit') ?></span>
+              <i class="fas fa-paper-plane"></i>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
   <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+    <div class="container">
+      <div class="footer-top">
+        <div class="footer-brand">
+          <a href="#" class="logo">
+            <img src="assets/logo.svg" alt="Logo" width="60" height="60">
+            <span><?= htmlspecialchars($projectName) ?></span>
+          </a>
+          <p><?= t('footer_desc') ?></p>
+        </div>
+        <div class="footer-social">
+          <h4>SOCIAL</h4>
+          <div class="social-icons">
+            <a href="https://t.me/zhangshihao818" target="_blank"><i class="fab fa-telegram"></i></a>
+            <a href="#"><i class="fab fa-github"></i></a>
+            <a href="#"><i class="fab fa-linkedin"></i></a>
+          </div>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. All Rights Reserved.</p>
+      </div>
+    </div>
   </footer>
+
+  <div id="toast" class="toast"></div>
+
+  <!-- Scripts -->
+  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
+  <script src="assets/js/main.js?v=<?= time() ?>"></script>
 </body>
-</html>
+</html>

project-detail.php

@@ -0,0 +1,243 @@
+<?php
+declare(strict_types=1);
+require_once __DIR__ . '/includes/i18n.php';
+require_once __DIR__ . '/db/config.php';
+
+$slug = $_GET['slug'] ?? '';
+$pdo = db();
+$stmt = $pdo->prepare("SELECT * FROM projects WHERE slug = ?");
+$stmt->execute([$slug]);
+$project = $stmt->fetch();
+
+if (!$project) {
+    header("Location: index.php");
+    exit;
+}
+
+$projectName = $_SERVER['PROJECT_NAME'] ?? 'Zhang Portfolio';
+?>
+<!doctype html>
+<html lang="<?= $lang ?>" dir="<?= ($lang === 'ar' ? 'rtl' : 'ltr') ?>">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title><?= htmlspecialchars($project['title']) ?> | <?= htmlspecialchars($projectName) ?></title>
+  
+  <link rel="icon" type="image/svg+xml" href="assets/logo.svg">
+  
+  <!-- Fonts -->
+  <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=Montserrat:wght@400;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
+  
+  <!-- Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  
+  <link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
+  <style>
+    body { font-family: 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif; }
+    .project-hero {
+      height: 60vh;
+      background-size: cover;
+      background-position: center;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      text-align: center;
+    }
+    .project-hero::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; width: 100%; height: 100%;
+      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7));
+    }
+    .project-hero-content {
+      position: relative;
+      z-index: 1;
+      max-width: 800px;
+      padding: 0 20px;
+    }
+    .project-hero h1 {
+      font-size: 3.5rem;
+      color: white;
+      margin-bottom: 20px;
+    }
+    .project-meta-top {
+      display: flex;
+      justify-content: center;
+      gap: 30px;
+      font-weight: 600;
+      opacity: 0.9;
+    }
+    .project-main {
+      padding: 80px 0;
+    }
+    .project-layout {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 60px;
+    }
+    .project-content {
+      background: white;
+      padding: 40px;
+      border-radius: 20px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+    }
+    .project-content h3 {
+      font-size: 1.8rem;
+      margin: 30px 0 20px;
+      color: var(--primary);
+    }
+    .project-content p {
+      font-size: 1.1rem;
+      margin-bottom: 20px;
+      color: var(--gray-dark);
+      line-height: 1.8;
+    }
+    .project-content ul {
+      margin-bottom: 30px;
+    }
+    .project-content li {
+      margin-bottom: 12px;
+      padding-left: 25px;
+      position: relative;
+    }
+    .project-content li::before {
+      content: '\f00c';
+      font-family: 'Font Awesome 6 Free';
+      font-weight: 900;
+      position: absolute;
+      left: 0;
+      color: var(--secondary);
+    }
+    .project-sidebar {
+      display: flex;
+      flex-direction: column;
+      gap: 30px;
+    }
+    .sidebar-widget {
+      background: #f8fafc;
+      padding: 30px;
+      border-radius: 20px;
+      border: 1px solid var(--gray-light);
+    }
+    .sidebar-widget h4 {
+      font-size: 1.2rem;
+      margin-bottom: 20px;
+      border-bottom: 2px solid var(--primary);
+      display: inline-block;
+      padding-bottom: 5px;
+    }
+    .info-list li {
+      margin-bottom: 15px;
+      display: flex;
+      flex-direction: column;
+    }
+    .info-list span {
+      font-size: 0.85rem;
+      color: var(--gray);
+      text-transform: uppercase;
+      font-weight: 700;
+      margin-bottom: 3px;
+    }
+    .info-list strong {
+      color: var(--dark);
+      font-size: 1.05rem;
+    }
+    .back-nav {
+      position: absolute;
+      top: 30px;
+      left: 30px;
+      z-index: 10;
+    }
+    .back-btn {
+      background: rgba(255, 255, 255, 0.2);
+      backdrop-filter: blur(10px);
+      color: white;
+      padding: 10px 20px;
+      border-radius: 50px;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      font-weight: 600;
+    }
+    .back-btn:hover {
+      background: white;
+      color: var(--primary);
+    }
+    @media (max-width: 992px) {
+      .project-layout { grid-template-columns: 1fr; }
+      .project-hero h1 { font-size: 2.5rem; }
+    }
+  </style>
+</head>
+<body>
+
+  <header class="project-hero" style="background-image: url('<?= htmlspecialchars($project['image_url']) ?>');">
+    <div class="back-nav">
+      <a href="index.php#portfolio" class="back-btn"><i class="fas fa-arrow-left"></i> <?= t('filter_all') ?></a>
+    </div>
+    <div class="project-hero-content">
+      <span class="badge"><?= htmlspecialchars($project['category']) ?></span>
+      <h1><?= htmlspecialchars($project['title']) ?></h1>
+      <div class="project-meta-top">
+        <span><i class="far fa-calendar-alt"></i> <?= htmlspecialchars($project['project_date']) ?></span>
+        <span><i class="far fa-user"></i> <?= htmlspecialchars($project['client_name']) ?></span>
+      </div>
+    </div>
+  </header>
+
+  <main class="project-main">
+    <div class="container">
+      <div class="project-layout">
+        <div class="project-content">
+          <?= $project['full_content'] ?>
+          
+          <div class="project-actions" style="margin-top: 50px; border-top: 1px solid #eee; padding-top: 30px;">
+            <a href="index.php#contact" class="btn btn-primary"><?= t('nav_contact') ?></a>
+          </div>
+        </div>
+        
+        <aside class="project-sidebar">
+          <div class="sidebar-widget">
+            <h4>Overview</h4>
+            <ul class="info-list">
+              <li>
+                <span>Client</span>
+                <strong><?= htmlspecialchars($project['client_name']) ?></strong>
+              </li>
+              <li>
+                <span>Date</span>
+                <strong><?= htmlspecialchars($project['project_date']) ?></strong>
+              </li>
+              <li>
+                <span>Stack</span>
+                <strong><?= htmlspecialchars($project['tech_stack']) ?></strong>
+              </li>
+              <li>
+                <span>Category</span>
+                <strong><?= htmlspecialchars(strtoupper($project['category'])) ?></strong>
+              </li>
+            </ul>
+          </div>
+          
+          <div class="sidebar-widget">
+            <h4>Expert Advice</h4>
+            <p style="margin-bottom: 20px; font-size: 0.95rem;">Interested in this case? We can provide a professional technical assessment.</p>
+            <a href="https://t.me/zhangshihao818" class="btn btn-primary btn-block" target="_blank">
+              <i class="fab fa-telegram"></i> Telegram
+            </a>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </main>
+
+  <footer style="padding: 60px 0;">
+    <div class="container" style="text-align: center;">
+      <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. All Rights Reserved.</p>
+    </div>
+  </footer>
+
+</body>
+</html>