661 lines
30 KiB
PHP
661 lines
30 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
@ini_set('display_errors', '0');
|
||
@error_reporting(E_ALL);
|
||
|
||
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Zhang Portfolio';
|
||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '专业金融科技与全栈开发专家个人门户，为您提供全方位的数字化转型方案。';
|
||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||
?>
|
||
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title><?= htmlspecialchars($projectName) ?> | 金融科技与全栈开发专家 | 全球化技术咨询</title>
|
||
|
||
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||
<meta property="og:title" content="<?= htmlspecialchars($projectName) ?>" />
|
||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||
<?php if ($projectImageUrl): ?>
|
||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||
<?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=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>
|
||
|
||
<!-- 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>
|
||
</div>
|
||
</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>
|
||
<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>© <?= 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>
|