admin/38211-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave: 20260205-142110

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-05 14:21:11 +00:00
parent ee218912b8
commit daaa9ca937
7 changed files with 1468 additions and 904 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1005
assets/css/custom.css
View File

File diff suppressed because it is too large Load Diff

123
assets/js/main.js
View File

@ -2,10 +2,12 @@ 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');
if (navbar) {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
}
});
@ -35,38 +37,7 @@ document.addEventListener('DOMContentLoaded', () => {
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
@ -75,7 +46,6 @@ document.addEventListener('DOMContentLoaded', () => {
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Update active button
filterBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
@ -96,16 +66,30 @@ document.addEventListener('DOMContentLoaded', () => {
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('button[type="submit"]');
const originalBtnText = submitBtn.innerHTML;
const submitBtn = contactForm.querySelector('.btn-submit');
const originalBtnContent = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 发送中...';
submitBtn.innerHTML = `<span>${msg.sending}</span> <i class="fas fa-spinner fa-spin"></i>`;
try {
const response = await fetch('contact.php', {
@ -116,21 +100,22 @@ document.addEventListener('DOMContentLoaded', () => {
const result = await response.json();
if (result.success) {
showToast('消息已成功发送！我会尽快给您回复。');
showToast(msg.success);
contactForm.reset();
} else {
showToast('发送失败: ' + (result.error || '请稍后再试'));
showToast(msg.error + ' ' + (result.error || ''));
}
} catch (error) {
showToast('无法连接到服务器，请检查网络。');
showToast(msg.error);
} finally {
submitBtn.disabled = false;
submitBtn.innerHTML = originalBtnText;
submitBtn.innerHTML = originalBtnContent;
}
});
}
function showToast(message) {
if (!toast) return;
toast.innerText = message;
toast.style.display = 'block';
toast.style.animation = 'slideInUp 0.5s ease forwards';
@ -146,46 +131,38 @@ document.addEventListener('DOMContentLoaded', () => {
// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
// 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');
}
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const offset = 80;
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'
});
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'
});
}
}
});
});
});
// Animation styles
const style = document.createElement('style');
style.textContent = `
const animStyle = document.createElement('style');
animStyle.textContent = "
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInUp {
from { transform: translateY(100%); opacity: 0; }
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slideOutDown {
from { transform: translateY(0); opacity: 1; }
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(100%); opacity: 0; }
}
`;
document.head.appendChild(style);
";
document.head.appendChild(animStyle);

36
assets/logo.svg
View File

@ -1,15 +1,29 @@
<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 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 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>
<!-- 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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 1.3 KiB

89
db/init.php
View File

@ -3,15 +3,100 @@ 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();
}

332
includes/i18n.php Normal file
View File

@ -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];
}

544
index.php
View File

@ -1,18 +1,27 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/includes/i18n.php';
require_once __DIR__ . '/db/config.php';
@ini_set('display_errors', '0');
@error_reporting(E_ALL);
$projectName = $_SERVER['PROJECT_NAME'] ?? 'Zhang Portfolio';
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '专业金融科技与全栈开发专家个人门户，为您提供全方位的数字化转型方案。';
$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="zh-CN">
<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($projectName) ?> | 金融科技与全栈开发专家 | 全球化技术咨询</title>
<title><?= htmlspecialchars($projectName) ?> | <?= t('hero_badge_1') ?></title>
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
<meta property="og:title" content="<?= htmlspecialchars($projectName) ?>" />
@ -27,13 +36,20 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<!-- 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">
<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>
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>
@ -41,17 +57,32 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<nav class="navbar">
<div class="container">
<a href="#" class="logo">
<img src="assets/logo.svg" alt="Logo" width="40" height="40">
<img src="assets/logo.svg" alt="Logo" width="50" height="50">
<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>
<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>
@ -64,53 +95,22 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<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="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">金融科技专家</span>
<h1>数字化转型的领航者</h1>
<p>结合深厚的金融行业洞察与前沿开发技术，为您的业务构建稳健、高效的数字化基石。从架构设计到最终落地，全方位赋能。</p>
<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> 立即沟通
<i class="fab fa-telegram"></i> <?= t('hero_btn_consult') ?>
</a>
<a href="#portfolio" class="btn btn-glass">
探索案例 <i class="fas fa-arrow-right"></i>
<?= t('hero_btn_explore') ?> <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>
@ -120,19 +120,19 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<div class="stats-grid">
<div class="stat-item">
<h3>8+</h3>
<p>行业经验 (年)</p>
<p><?= t('stats_years') ?></p>
</div>
<div class="stat-item">
<h3>150+</h3>
<p>成功交付项目</p>
<h3>30+</h3>
<p><?= t('stats_cases') ?></p>
</div>
<div class="stat-item">
<h3>98%</h3>
<p>客户好评率</p>
<h3>99%</h3>
<p><?= t('stats_trust') ?></p>
</div>
<div class="stat-item">
<h3>1M+</h3>
<p>支撑用户量级</p>
<h3>5M+</h3>
<p><?= t('stats_load') ?></p>
</div>
</div>
</div>
@ -142,70 +142,25 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<section id="services" class="services-section">
<div class="container">
<div class="section-header">
<h2>全方位技术服务</h2>
<h2><?= t('services_title') ?></h2>
<div class="line"></div>
<p>深耕技术领域，为您解决从 0 到 1 的开发痛点与从 1 到 N 的增长瓶颈</p>
<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>全栈应用定制</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>
<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)</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>
<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>安全与运维托管</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>
<h3>Security & Operations</h3>
<p>Financial-grade security audits, automated CI/CD pipelines, and cloud scaling.</p>
</div>
</div>
</div>
@ -215,170 +170,35 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<section id="portfolio" class="portfolio-section">
<div class="container">
<div class="section-header">
<h2>精选项目案例</h2>
<h2><?= t('portfolio_title') ?></h2>
<div class="line"></div>
<p>每一个项目都是技术与创意的结晶</p>
<p><?= t('portfolio_subtitle') ?></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>
<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">
<!-- Item 1 -->
<div class="portfolio-item fintech" data-title="智能理财投顾平台">
<?php foreach ($projects as $project): ?>
<div class="portfolio-item <?= htmlspecialchars($project['category']) ?>">
<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">
<img src="<?= htmlspecialchars($project['image_url']) ?>" alt="<?= htmlspecialchars($project['title']) ?>" loading="lazy">
<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>
<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>智能理财投顾平台</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>
<h4><?= htmlspecialchars($project['title']) ?></h4>
<span><?= htmlspecialchars(strtoupper($project['category'])) ?></span>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
@ -391,188 +211,44 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<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>
<span><?= t('stats_years') ?></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>
<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 / 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 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>
<!-- 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>
<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>
<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>
@ -580,37 +256,34 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<div class="contact-form-container">
<form id="contactForm" class="modern-form">
<div class="form-title">
<h3>项目咨询表</h3>
<p>我们将保护您的隐私信息</p>
<h3><?= t('contact_form_title') ?></h3>
</div>
<div class="input-group">
<input type="text" name="name" id="name" required>
<label for="name">您的尊称</label>
<label for="name"><?= t('form_name') ?></label>
</div>
<div class="input-group">
<input type="text" name="email" id="email" required>
<label for="email">联系方式 (Email/微信/TG)</label>
<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">金融科技定制</option>
<option value="web">品牌官网建设</option>
<option value="app">全栈系统开发</option>
<option value="consult">技术咨询/外包</option>
<option value="other">其他合作</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" class="select-label">咨询类型</label>
<label for="type"><?= t('form_type') ?></label>
</div>
<div class="input-group">
<textarea name="message" id="message" required rows="3"></textarea>
<label for="message">需求简述 (您想解决什么问题？)</label>
<label for="message"><?= t('form_message') ?></label>
</div>
<button type="submit" class="btn-submit">
<span>发送咨询申请</span>
<span><?= t('form_submit') ?></span>
<i class="fas fa-paper-plane"></i>
</button>
<div class="form-status"></div>
</form>
</div>
</div>
@ -623,31 +296,22 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<div class="footer-top">
<div class="footer-brand">
<a href="#" class="logo">
<img src="assets/logo.svg" alt="Logo" width="40" height="40">
<img src="assets/logo.svg" alt="Logo" width="60" height="60">
<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>
<p><?= t('footer_desc') ?></p>
</div>
<div class="footer-social">
<h4>社交媒体</h4>
<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>
<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>
<p>&copy; <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. All Rights Reserved.</p>
</div>
</div>
</footer>

243
project-detail.php Normal file
View File

@ -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>