开发

assets/js/main.js

@@ -1,73 +1,191 @@
 document.addEventListener('DOMContentLoaded', () => {
+    // Navbar Scroll Effect
+    const navbar = document.querySelector('.navbar');
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 50) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
+
+    // Mobile Menu Toggle
+    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+    const navLinks = document.querySelector('.nav-links');
     
-    // Smooth scrolling for navigation 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');
+            }
+        });
+    }
+
+    // Hero Swiper
+    const heroSwiper = new Swiper('.hero-swiper', {
+        loop: true,
+        effect: 'fade',
+        fadeEffect: {
+            crossFade: true
+        },
+        autoplay: {
+            delay: 6000,
+            disableOnInteraction: false,
+        },
+        pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+        },
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        },
+    });
+
+    // Testimonials Swiper
+    const testimonialsSwiper = new Swiper('.testimonials-swiper', {
+        slidesPerView: 1,
+        spaceBetween: 30,
+        loop: true,
+        autoplay: {
+            delay: 5000,
+            disableOnInteraction: false,
+        },
+        pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+        },
+        breakpoints: {
+            768: {
+                slidesPerView: 2,
+            },
+            1024: {
+                slidesPerView: 3,
+            },
+        },
+    });
+
+    // Portfolio Filtering
+    const filterBtns = document.querySelectorAll('.filter-btn');
+    const portfolioItems = document.querySelectorAll('.portfolio-item');
+
+    filterBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            // Update active button
+            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');
+
+    if (contactForm) {
+        contactForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const formData = new FormData(contactForm);
+            const submitBtn = contactForm.querySelector('button[type="submit"]');
+            const originalBtnText = submitBtn.innerHTML;
+            
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = '<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('消息已成功发送！我会尽快给您回复。');
+                    contactForm.reset();
+                } else {
+                    showToast('发送失败: ' + (result.error || '请稍后再试'));
+                }
+            } catch (error) {
+                showToast('无法连接到服务器，请检查网络。');
+            } finally {
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalBtnText;
+            }
+        });
+    }
+
+    function showToast(message) {
+        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) {
             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();
-                }
+            // Close mobile menu if open
+            if (navLinks.classList.contains('active')) {
+                navLinks.classList.remove('active');
+                const icon = mobileMenuToggle.querySelector('i');
+                icon.classList.replace('fa-times', 'fa-bars');
+            }
 
-                // Scroll with offset
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
                 const offset = 80;
-                const elementPosition = targetElement.getBoundingClientRect().top;
-                const offsetPosition = elementPosition + window.pageYOffset - offset;
+                const bodyRect = document.body.getBoundingClientRect().top;
+                const elementRect = target.getBoundingClientRect().top;
+                const elementPosition = elementRect - bodyRect;
+                const offsetPosition = elementPosition - offset;
 
                 window.scrollTo({
                     top: offsetPosition,
-                    behavior: "smooth"
+                    behavior: 'smooth'
                 });
             }
         });
     });
+});
 
-    // 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');
-        }
-    });
-
-    // 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
-            }
-        });
-    }, 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);
-    });
-
-});
+// Animation styles
+const style = document.createElement('style');
+style.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(style);

assets/logo.svg

@@ -0,0 +1,15 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0062ff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#004dc7;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Background Shape -->
+  <rect x="10" y="10" width="80" height="80" rx="20" fill="url(#logoGradient)" />
+  <!-- Stylized Z and Chart -->
+  <path d="M30 30 H70 L30 70 H70" fill="none" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" />
+  <!-- Tech Node / Dot -->
+  <circle cx="70" cy="30" r="6" fill="#10b981" />
+  <circle cx="30" cy="70" r="6" fill="#10b981" />
+</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,17 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+try {
+    $pdo = db();
+    $sql = "CREATE TABLE IF NOT EXISTS contact_requests (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        name VARCHAR(255) NOT NULL,
+        email VARCHAR(255) NOT NULL,
+        message TEXT NOT NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;";
+    
+    $pdo->exec($sql);
+} catch (PDOException $e) {
+    error_log("Database initialization error: " . $e->getMessage());
+}

index.php

@@ -1,150 +1,661 @@
 <?php
 declare(strict_types=1);
-@ini_set('display_errors', '1');
+@ini_set('display_errors', '0');
 @error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+$projectName = $_SERVER['PROJECT_NAME'] ?? 'Zhang Portfolio';
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '专业金融科技与全栈开发专家个人门户，为您提供全方位的数字化转型方案。';
+$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
 ?>
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
 <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) ?> | 金融科技与全栈开发专家 | 全球化技术咨询</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">
-  <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;
-    }
-  </style>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+SC: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() ?>">
 </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="40" height="40">
+        <span><?= htmlspecialchars($projectName) ?></span>
+      </a>
+      <div class="nav-links">
+        <a href="#hero">首页</a>
+        <a href="#services">核心服务</a>
+        <a href="#portfolio">项目案例</a>
+        <a href="#about">关于我</a>
+        <a href="#process">服务流程</a>
+        <a href="#testimonials">客户评价</a>
+        <a href="#contact" class="nav-cta">立即咨询</a>
+      </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.6), rgba(0,0,0,0.6)), 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">金融科技专家</span>
+            <h1>数字化转型的领航者</h1>
+            <p>结合深厚的金融行业洞察与前沿开发技术，为您的业务构建稳健、高效的数字化基石。从架构设计到最终落地，全方位赋能。</p>
+            <div class="hero-btns">
+              <a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
+                <i class="fab fa-telegram"></i> 立即沟通
+              </a>
+              <a href="#portfolio" class="btn btn-glass">
+                探索案例 <i class="fas fa-arrow-right"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+        <!-- Slide 2 -->
+        <div class="swiper-slide" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.pexels.com/photos/7567443/pexels-photo-7567443.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
+          <div class="hero-content">
+            <span class="badge">全栈开发</span>
+            <h1>极致体验，艺术级交互</h1>
+            <p>我们不仅仅在写代码，更在塑造用户的感知。每一个动效、每一行逻辑，都旨在为您的用户提供最顺畅、最直观的交互体验。</p>
+            <div class="hero-btns">
+              <a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
+                <i class="fab fa-telegram"></i> 预约视频会议
+              </a>
+              <a href="#contact" class="btn btn-glass">获取定制方案</a>
+            </div>
+          </div>
+        </div>
+        <!-- Slide 3 -->
+        <div class="swiper-slide" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
+          <div class="hero-content">
+            <span class="badge">全球视野</span>
+            <h1>驱动未来的创新技术</h1>
+            <p>从区块链应用到 AI 驱动的分析平台，我们紧跟时代浪潮，将最先进的技术转化为您的商业竞争优势。</p>
+            <div class="hero-btns">
+              <a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
+                <i class="fab fa-telegram"></i> TG 详细咨询
+              </a>
+              <a href="#about" class="btn btn-glass">了解更多</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="swiper-pagination"></div>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"></div>
+    </div>
+  </section>
+
+  <!-- Stats Section -->
+  <section class="stats-section">
+    <div class="container">
+      <div class="stats-grid">
+        <div class="stat-item">
+          <h3>8+</h3>
+          <p>行业经验 (年)</p>
+        </div>
+        <div class="stat-item">
+          <h3>150+</h3>
+          <p>成功交付项目</p>
+        </div>
+        <div class="stat-item">
+          <h3>98%</h3>
+          <p>客户好评率</p>
+        </div>
+        <div class="stat-item">
+          <h3>1M+</h3>
+          <p>支撑用户量级</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Services Section -->
+  <section id="services" class="services-section">
+    <div class="container">
+      <div class="section-header">
+        <h2>全方位技术服务</h2>
+        <div class="line"></div>
+        <p>深耕技术领域，为您解决从 0 到 1 的开发痛点与从 1 到 N 的增长瓶颈</p>
+      </div>
+      <div class="services-grid">
+        <div class="service-card">
+          <div class="icon-box"><i class="fas fa-laptop-code"></i></div>
+          <h3>全栈应用定制</h3>
+          <p>涵盖 Web、移动端及桌面端。使用 PHP (Laravel), Node.js, React, Vue, Flutter 等主流框架，确保系统高性能与跨平台兼容性。</p>
+          <ul class="service-list">
+            <li><i class="fas fa-check"></i> 响应式 Web 开发</li>
+            <li><i class="fas fa-check"></i> 跨平台移动 App</li>
+            <li><i class="fas fa-check"></i> 复杂系统架构设计</li>
+          </ul>
+        </div>
+        <div class="service-card">
+          <div class="icon-box"><i class="fas fa-vault"></i></div>
+          <h3>金融科技 (Fintech)</h3>
+          <p>专注金融级别的安全与性能。提供支付网关集成、加密资产管理、量化交易终端及实时风控系统的深度定制。</p>
+          <ul class="service-list">
+            <li><i class="fas fa-check"></i> 高频交易系统界面</li>
+            <li><i class="fas fa-check"></i> 支付通道合规对接</li>
+            <li><i class="fas fa-check"></i> 量化策略展示引擎</li>
+          </ul>
+        </div>
+        <div class="service-card">
+          <div class="icon-box"><i class="fas fa-paint-brush"></i></div>
+          <h3>UI/UX 品牌视觉</h3>
+          <p>不仅仅是美观。通过深入的用户研究与交互设计，打造具有极高品牌辨识度与卓越易用性的产品视觉体验。</p>
+          <ul class="service-list">
+            <li><i class="fas fa-check"></i> UI 系统规范建立</li>
+            <li><i class="fas fa-check"></i> 动效与交互微调</li>
+            <li><i class="fas fa-check"></i> 品牌视觉策略咨询</li>
+          </ul>
+        </div>
+        <div class="service-card">
+          <div class="icon-box"><i class="fas fa-shield-halved"></i></div>
+          <h3>安全与运维托管</h3>
+          <p>为您的业务保驾护航。提供金融级安全审计、DDoS 防护方案、云基础设施 (AWS/GCP/Aliyun) 自动化部署。 </p>
+          <ul class="service-list">
+            <li><i class="fas fa-check"></i> 渗透测试与加固</li>
+            <li><i class="fas fa-check"></i> CI/CD 流程优化</li>
+            <li><i class="fas fa-check"></i> 24/7 监控与响应</li>
+          </ul>
+        </div>
+        <div class="service-card">
+          <div class="icon-box"><i class="fas fa-brain"></i></div>
+          <h3>AI 智能化集成</h3>
+          <p>将人工智能注入您的业务。集成 LLM (大语言模型)、图像识别、预测性分析模型，助力业务实现智能化跨越。</p>
+          <ul class="service-list">
+            <li><i class="fas fa-check"></i> AI 聊天机器人集成</li>
+            <li><i class="fas fa-check"></i> 自动化内容生产</li>
+            <li><i class="fas fa-check"></i> 数据挖掘与预测</li>
+          </ul>
+        </div>
+        <div class="service-card">
+          <div class="icon-box"><i class="fas fa-rocket"></i></div>
+          <h3>出海与全球化</h3>
+          <p>协助中国企业走向全球。提供多语言适配、多国支付集成、全球加速节点部署以及合规性技术咨询。</p>
+          <ul class="service-list">
+            <li><i class="fas fa-check"></i> i18n 多语言方案</li>
+            <li><i class="fas fa-check"></i> 全球 CDN 分发加速</li>
+            <li><i class="fas fa-check"></i> 海外云平台合规部署</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Portfolio Section -->
+  <section id="portfolio" class="portfolio-section">
+    <div class="container">
+      <div class="section-header">
+        <h2>精选项目案例</h2>
+        <div class="line"></div>
+        <p>每一个项目都是技术与创意的结晶</p>
+      </div>
+      <div class="portfolio-filters">
+        <button class="filter-btn active" data-filter="all">全部作品</button>
+        <button class="filter-btn" data-filter="fintech">金融科技</button>
+        <button class="filter-btn" data-filter="web">品牌网页</button>
+        <button class="filter-btn" data-filter="app">应用系统</button>
+      </div>
+      <div class="portfolio-grid">
+        <!-- Item 1 -->
+        <div class="portfolio-item fintech" data-title="智能理财投顾平台">
+          <div class="portfolio-img-wrapper">
+            <img src="https://images.pexels.com/photos/6770610/pexels-photo-6770610.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Fintech Project">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3>智能理财投顾平台</h3>
+                <p>AI 驱动的资产配置与收益分析系统，支撑 10W+ 日活用户。</p>
+                <a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4>智能理财投顾平台</h4>
+            <span>金融科技 / AI 驱动</span>
+          </div>
+        </div>
+        <!-- Item 2 -->
+        <div class="portfolio-item web" data-title="奢华酒店品牌站">
+          <div class="portfolio-img-wrapper">
+            <img src="https://images.pexels.com/photos/2507007/pexels-photo-2507007.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Web Project">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3>奢华酒店品牌站</h3>
+                <p>沉浸式视觉体验与全球预订系统深度集成。</p>
+                <a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4>奢华酒店品牌站</h4>
+            <span>品牌网页 / 高级视觉设计</span>
+          </div>
+        </div>
+        <!-- Item 3 -->
+        <div class="portfolio-item app" data-title="企业级 ERP 办公系统">
+          <div class="portfolio-img-wrapper">
+            <img src="https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=800" alt="App Project">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3>企业级 ERP 办公系统</h3>
+                <p>模块化资源管理，大幅提升跨部门协同效率 40%。</p>
+                <a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4>企业级 ERP 办公系统</h4>
+            <span>应用系统 / 业务流优化</span>
+          </div>
+        </div>
+        <!-- Item 4 -->
+        <div class="portfolio-item fintech" data-title="量化交易终端仪表盘">
+          <div class="portfolio-img-wrapper">
+            <img src="https://images.pexels.com/photos/844124/pexels-photo-844124.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Fintech Project">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3>量化交易终端仪表盘</h3>
+                <p>毫秒级行情刷新与复杂策略一键执行面板。</p>
+                <a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4>量化交易终端仪表盘</h4>
+            <span>金融科技 / 实时数据可视化</span>
+          </div>
+        </div>
+        <!-- Item 5 -->
+        <div class="portfolio-item web" data-title="创意设计工作室官方网站">
+          <div class="portfolio-img-wrapper">
+            <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Web Project">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3>创意设计工作室</h3>
+                <p>极简主义风格，完美展现作品集质感与团队魅力。</p>
+                <a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4>创意设计工作室</h4>
+            <span>品牌网页 / 极简主义设计</span>
+          </div>
+        </div>
+        <!-- Item 6 -->
+        <div class="portfolio-item app" data-title="跨境供应链管理平台">
+          <div class="portfolio-img-wrapper">
+            <img src="https://images.pexels.com/photos/6169668/pexels-photo-6169668.jpeg?auto=compress&cs=tinysrgb&w=800" alt="App Project">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3>跨境供应链管理平台</h3>
+                <p>集成多国物流接口与自动关税计算引擎。</p>
+                <a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4>跨境供应链管理平台</h4>
+            <span>应用系统 / 跨境电商解决方案</span>
+          </div>
+        </div>
+        <!-- Item 7 -->
+        <div class="portfolio-item fintech" data-title="去中心化钱包系统">
+          <div class="portfolio-img-wrapper">
+            <img src="https://images.pexels.com/photos/844124/pexels-photo-844124.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Fintech Project">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3>去中心化钱包系统</h3>
+                <p>高强度加密安全方案，支持多链资产管理。</p>
+                <a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4>去中心化钱包系统</h4>
+            <span>金融科技 / Web3</span>
+          </div>
+        </div>
+        <!-- Item 8 -->
+        <div class="portfolio-item web" data-title="高端地产虚拟看房平台">
+          <div class="portfolio-img-wrapper">
+            <img src="https://images.pexels.com/photos/323705/pexels-photo-323705.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Web Project">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3>高端地产虚拟看房</h3>
+                <p>360度全景展示与实时预约看房系统。</p>
+                <a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4>高端地产虚拟看房</h4>
+            <span>品牌网页 / 3D展示</span>
+          </div>
+        </div>
+        <!-- Item 9 -->
+        <div class="portfolio-item app" data-title="智能健康管理 App">
+          <div class="portfolio-img-wrapper">
+            <img src="https://images.pexels.com/photos/4386466/pexels-photo-4386466.jpeg?auto=compress&cs=tinysrgb&w=800" alt="App Project">
+            <div class="portfolio-overlay">
+              <div class="overlay-content">
+                <h3>智能健康管理 App</h3>
+                <p>硬件数据实时对接，提供个性化健康建议。</p>
+                <a href="#" class="view-details">查看详情 <i class="fas fa-plus"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="portfolio-info">
+            <h4>智能健康管理 App</h4>
+            <span>应用系统 / 物联网</span>
+          </div>
+        </div>
+      </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>行业资深经验</span>
+          </div>
+        </div>
+        <div class="about-text">
+          <span class="subtitle">关于我</span>
+          <h2>全栈视野，深度赋能业务增长</h2>
+          <p>您好，我是 <strong>Zhang</strong>。我是一名深耕金融科技与全栈开发领域的资深工程师及技术顾问。在超过 8 年的职业生涯中，我曾服务于多家领先的金融机构与初创科技公司。</p>
+          <p>我坚信：<strong>技术是解决商业问题的手段，而非目的。</strong> 我的核心优势在于能够快速理解业务逻辑，并将其转化为高性能、可维护的代码架构。无论是追求极致体验的 C 端产品，还是要求严苛的 B 端金融系统，我都能提供从咨询、设计到交付的全流程专家服务。</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 / Vue3 / Flutter</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 / 云原生</div>
+          </div>
+
+          <div class="milestones">
+            <h3>职业里程碑</h3>
+            <div class="milestone-item">
+              <span class="year">2023 - 至今</span>
+              <p>担任独立技术顾问，助力 20+ 企业完成数字化转型与全球化布局。</p>
+            </div>
+            <div class="milestone-item">
+              <span class="year">2019 - 2022</span>
+              <p>某头部 Fintech 公司技术负责人，主导重构了日处理金额过亿的支付清算系统。</p>
+            </div>
+            <div class="milestone-item">
+              <span class="year">2016 - 2019</span>
+              <p>全栈工程师，负责多款金融理财类 App 从 0 到 1 的研发与迭代。</p>
+            </div>
+          </div>
+
+          <div class="about-btns">
+            <a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
+              <i class="fab fa-telegram"></i> TG 立即咨询
+            </a>
+            <a href="#portfolio" class="btn btn-outline">查看作品集</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Process Section -->
+  <section id="process" class="process-section">
+    <div class="container">
+      <div class="section-header">
+        <h2>服务流程</h2>
+        <div class="line"></div>
+        <p>标准化、透明化的合作流程，确保项目高品质交付</p>
+      </div>
+      <div class="process-steps">
+        <div class="step-card">
+          <div class="step-num">01</div>
+          <h3>需求挖掘</h3>
+          <p>深入沟通您的业务目标、目标用户及痛点，明确核心需求与项目边界。</p>
+        </div>
+        <div class="step-card">
+          <div class="step-num">02</div>
+          <h3>方案设计</h3>
+          <p>输出原型设计与技术架构方案，确保每一步都有据可依，规避技术风险。</p>
+        </div>
+        <div class="step-card">
+          <div class="step-num">03</div>
+          <h3>高效研发</h3>
+          <p>敏捷开发模式，定期同步进展，让您随时掌控项目动态，快速迭代反馈。</p>
+        </div>
+        <div class="step-card">
+          <div class="step-num">04</div>
+          <h3>质量管控</h3>
+          <p>覆盖压力测试、安全审计与多端适配，确保产品在任何环境下都表现卓越。</p>
+        </div>
+        <div class="step-card">
+          <div class="step-num">05</div>
+          <h3>部署交付</h3>
+          <p>一键自动化部署与全方位技术培训，提供长期可靠的技术支持与运维指导。</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Testimonials Section -->
+  <section id="testimonials" class="testimonials-section">
+    <div class="container">
+      <div class="section-header">
+        <h2>来自全球客户的真实评价</h2>
+        <div class="line"></div>
+      </div>
+      <div class="swiper testimonials-swiper">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <div class="testimonial-card">
+              <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
+              <p>“我们在开发复杂的量化展示工具时遇到了很大的性能挑战，直到遇到了 Zhang。专业的态度和高效的代码实现让我们的产品提前上线，这种对业务的深刻理解在技术圈非常罕见。”</p>
+              <div class="client-info">
+                <img src="https://i.pravatar.cc/60?u=1" alt="Client">
+                <div>
+                  <h4>李伟</h4>
+                  <span>某金融机构 技术总监</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="testimonial-card">
+              <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
+              <p>“网站的设计不仅美观，而且在移动端的体验极其流畅。Telegram 响应非常及时，交流过程非常愉快，能够精准捕捉到我们品牌想要传达的高级感。”</p>
+              <div class="client-info">
+                <img src="https://i.pravatar.cc/60?u=2" alt="Client">
+                <div>
+                  <h4>王曼迪</h4>
+                  <span>创意工作室 创始人</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="testimonial-card">
+              <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
+              <p>“我们需要一个极具个性且能承载大量内容的着陆页，他完全超出了我们的预期。视觉效果震撼，功能逻辑严密，真正做到了技术与艺术的结合。”</p>
+              <div class="client-info">
+                <img src="https://i.pravatar.cc/60?u=3" alt="Client">
+                <div>
+                  <h4>陈杰</h4>
+                  <span>电商初创企业 CEO</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="testimonial-card">
+              <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
+              <p>“Zhang 帮我们重构了核心支付逻辑，稳定性提升了显著，再也没有出现过掉单情况。他不仅仅是开发者，更是我们值得信赖的技术合伙人。”</p>
+              <div class="client-info">
+                <img src="https://i.pravatar.cc/60?u=4" alt="Client">
+                <div>
+                  <h4>Sarah Thompson</h4>
+                  <span>Global Fintech Ltd. CTO</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="testimonial-card">
+              <div class="quote-icon"><i class="fas fa-quote-left"></i></div>
+              <p>“从最初的简单想法到最终的复杂系统落地，Zhang 全程表现出了极高的专业素养。交付物质量极高，文档齐全，后续交接非常顺畅。”</p>
+              <div class="client-info">
+                <img src="https://i.pravatar.cc/60?u=5" alt="Client">
+                <div>
+                  <h4>刘洋</h4>
+                  <span>智能硬件创业者</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="swiper-pagination"></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">立即咨询</span>
+            <h2>定制您的数字化未来</h2>
+            <p>拒绝千篇一律的方案。填写下方表单，我们将为您提供针对性的一对一技术咨询。</p>
+          </div>
+          <div class="contact-methods">
+            <div class="method-card">
+              <i class="fab fa-telegram"></i>
+              <h3>Telegram</h3>
+              <p>实时在线，极速反馈</p>
+              <a href="https://t.me/zhangshihao818" target="_blank">@zhangshihao818</a>
+            </div>
+            <div class="method-card">
+              <i class="fas fa-envelope"></i>
+              <h3>Email</h3>
+              <p>正式商务沟通</p>
+              <span>contact@yourdomain.com</span>
+            </div>
+          </div>
+        </div>
+        <div class="contact-form-container">
+          <form id="contactForm" class="modern-form">
+            <div class="form-title">
+              <h3>项目咨询表</h3>
+              <p>我们将保护您的隐私信息</p>
+            </div>
+            <div class="input-group">
+              <input type="text" name="name" id="name" required>
+              <label for="name">您的尊称</label>
+            </div>
+            <div class="input-group">
+              <input type="text" name="email" id="email" required>
+              <label for="email">联系方式 (Email/微信/TG)</label>
+            </div>
+            <div class="input-group">
+              <select name="type" id="type" required>
+                <option value="" disabled selected hidden></option>
+                <option value="fintech">金融科技定制</option>
+                <option value="web">品牌官网建设</option>
+                <option value="app">全栈系统开发</option>
+                <option value="consult">技术咨询/外包</option>
+                <option value="other">其他合作</option>
+              </select>
+              <label for="type" class="select-label">咨询类型</label>
+            </div>
+            <div class="input-group">
+              <textarea name="message" id="message" required rows="3"></textarea>
+              <label for="message">需求简述 (您想解决什么问题？)</label>
+            </div>
+            <button type="submit" class="btn-submit">
+              <span>发送咨询申请</span>
+              <i class="fas fa-paper-plane"></i>
+            </button>
+            <div class="form-status"></div>
+          </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="40" height="40">
+            <span><?= htmlspecialchars($projectName) ?></span>
+          </a>
+          <p>用代码构建价值，以专业赢得信任。专注于金融科技与全栈开发的高级专家门户。</p>
+        </div>
+        <div class="footer-nav">
+          <h4>快速导航</h4>
+          <a href="#hero">首页</a>
+          <a href="#services">核心服务</a>
+          <a href="#portfolio">项目案例</a>
+          <a href="#about">关于我</a>
+        </div>
+        <div class="footer-social">
+          <h4>社交媒体</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>
+            <a href="#"><i class="fab fa-twitter"></i></a>
+          </div>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. All Rights Reserved. </p>
+        <p class="tech-stack">Powered by PHP 8.x | React | Swiper.js | FontAwesome</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>