325 lines
13 KiB
PHP
325 lines
13 KiB
PHP
<?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'] ?? 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="<?= $lang ?>" dir="<?= ($lang === 'ar' ? 'rtl' : 'ltr') ?>">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title><?= htmlspecialchars($projectName) ?> | <?= t('hero_badge_1') ?></title>
|
|
|
|
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<meta property="og:title" content="<?= htmlspecialchars($projectName) ?>" />
|
|
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
<?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&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>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<a href="#" class="logo">
|
|
<img src="assets/logo.svg" alt="Logo" width="50" height="50">
|
|
<span><?= htmlspecialchars($projectName) ?></span>
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="#hero"><?= t('nav_home') ?></a>
|
|
<a href="#services"><?= t('nav_services') ?></a>
|
|
<a href="#portfolio"><?= t('nav_portfolio') ?></a>
|
|
<a href="#about"><?= t('nav_about') ?></a>
|
|
<a href="#contact" class="nav-cta"><?= t('nav_contact') ?></a>
|
|
|
|
<!-- Language Switcher -->
|
|
<div class="lang-switcher">
|
|
<div class="lang-btn">
|
|
<span class="flag"><?= $currentLang['flag'] ?></span>
|
|
<span><?= $currentLang['name'] ?></span>
|
|
<i class="fas fa-chevron-down"></i>
|
|
</div>
|
|
<div class="lang-dropdown">
|
|
<?php foreach ($languages as $code => $info): ?>
|
|
<a href="?lang=<?= $code ?>" class="lang-item">
|
|
<span class="flag"><?= $info['flag'] ?></span>
|
|
<span><?= $info['name'] ?></span>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mobile-menu-toggle">
|
|
<i class="fas fa-bars"></i>
|
|
</div>
|
|
</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.5), rgba(0,0,0,0.7)), url('https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="hero-content">
|
|
<span class="badge"><?= t('hero_badge_1') ?></span>
|
|
<h1><?= t('hero_title_1') ?></h1>
|
|
<p><?= t('hero_desc_1') ?></p>
|
|
<div class="hero-btns">
|
|
<a href="https://t.me/zhangshihao818" class="btn btn-primary" target="_blank">
|
|
<i class="fab fa-telegram"></i> <?= t('hero_btn_consult') ?>
|
|
</a>
|
|
<a href="#portfolio" class="btn btn-glass">
|
|
<?= t('hero_btn_explore') ?> <i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="stats-section">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<h3>8+</h3>
|
|
<p><?= t('stats_years') ?></p>
|
|
</div>
|
|
<div class="stat-item">
|
|
<h3>30+</h3>
|
|
<p><?= t('stats_cases') ?></p>
|
|
</div>
|
|
<div class="stat-item">
|
|
<h3>99%</h3>
|
|
<p><?= t('stats_trust') ?></p>
|
|
</div>
|
|
<div class="stat-item">
|
|
<h3>5M+</h3>
|
|
<p><?= t('stats_load') ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="services-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2><?= t('services_title') ?></h2>
|
|
<div class="line"></div>
|
|
<p><?= t('services_subtitle') ?></p>
|
|
</div>
|
|
<div class="services-grid">
|
|
<div class="service-card">
|
|
<div class="icon-box"><i class="fas fa-laptop-code"></i></div>
|
|
<h3>Full-Stack Customization</h3>
|
|
<p>End-to-end development using React, Vue 3, Node.js, and Go for high-performance systems.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="icon-box"><i class="fas fa-vault"></i></div>
|
|
<h3>Fintech Solutions</h3>
|
|
<p>Secure payment gateways, asset management, and high-frequency trading engines.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="icon-box"><i class="fas fa-shield-halved"></i></div>
|
|
<h3>Security & Operations</h3>
|
|
<p>Financial-grade security audits, automated CI/CD pipelines, and cloud scaling.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Portfolio Section -->
|
|
<section id="portfolio" class="portfolio-section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2><?= t('portfolio_title') ?></h2>
|
|
<div class="line"></div>
|
|
<p><?= t('portfolio_subtitle') ?></p>
|
|
</div>
|
|
<div class="portfolio-filters">
|
|
<button class="filter-btn active" data-filter="all"><?= t('filter_all') ?></button>
|
|
<button class="filter-btn" data-filter="fintech"><?= t('filter_fintech') ?></button>
|
|
<button class="filter-btn" data-filter="web"><?= t('filter_web') ?></button>
|
|
<button class="filter-btn" data-filter="app"><?= t('filter_app') ?></button>
|
|
</div>
|
|
<div class="portfolio-grid">
|
|
<?php foreach ($projects as $project): ?>
|
|
<div class="portfolio-item <?= htmlspecialchars($project['category']) ?>">
|
|
<div class="portfolio-img-wrapper">
|
|
<img src="<?= htmlspecialchars($project['image_url']) ?>" alt="<?= htmlspecialchars($project['title']) ?>" loading="lazy">
|
|
<div class="portfolio-overlay">
|
|
<div class="overlay-content">
|
|
<h3><?= htmlspecialchars($project['title']) ?></h3>
|
|
<p><?= htmlspecialchars($project['short_description']) ?></p>
|
|
<a href="project-detail.php?slug=<?= $project['slug'] ?>" class="view-details"><?= t('view_details') ?> <i class="fas fa-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-info">
|
|
<h4><?= htmlspecialchars($project['title']) ?></h4>
|
|
<span><?= htmlspecialchars(strtoupper($project['category'])) ?></span>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="about-section">
|
|
<div class="container">
|
|
<div class="about-flex">
|
|
<div class="about-image">
|
|
<img src="https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Profile">
|
|
<div class="experience-tag">
|
|
<strong>8+</strong>
|
|
<span><?= t('stats_years') ?></span>
|
|
</div>
|
|
</div>
|
|
<div class="about-text">
|
|
<span class="subtitle"><?= t('about_subtitle') ?></span>
|
|
<h2><?= t('about_title') ?></h2>
|
|
<p>I am <strong>Zhang</strong>, a senior engineer specializing in Fintech and full-stack development. With 8 years of experience, I've built mission-critical systems for global clients.</p>
|
|
|
|
<div class="skills-grid">
|
|
<div class="skill-item"><i class="fab fa-php"></i> PHP (Laravel) / Go / Node.js</div>
|
|
<div class="skill-item"><i class="fab fa-js"></i> React / Vue 3 / TypeScript</div>
|
|
<div class="skill-item"><i class="fas fa-database"></i> MySQL / PostgreSQL / Redis</div>
|
|
<div class="skill-item"><i class="fas fa-server"></i> AWS / K8s / Cloud Native</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="contact-section">
|
|
<div class="container">
|
|
<div class="contact-wrapper">
|
|
<div class="contact-visual">
|
|
<div class="contact-header">
|
|
<span class="badge">READY TO START?</span>
|
|
<h2><?= t('contact_title') ?></h2>
|
|
<p>We protection your business secrets. Fill the form for a customized assessment.</p>
|
|
</div>
|
|
<div class="contact-methods">
|
|
<div class="method-card">
|
|
<i class="fab fa-telegram"></i>
|
|
<h3>Telegram</h3>
|
|
<a href="https://t.me/zhangshihao818" target="_blank">@zhangshihao818</a>
|
|
</div>
|
|
<div class="method-card">
|
|
<i class="fas fa-envelope"></i>
|
|
<h3>Email</h3>
|
|
<span>contact@yourdomain.com</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contact-form-container">
|
|
<form id="contactForm" class="modern-form">
|
|
<div class="form-title">
|
|
<h3><?= t('contact_form_title') ?></h3>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" name="name" id="name" required>
|
|
<label for="name"><?= t('form_name') ?></label>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" name="email" id="email" required>
|
|
<label for="email"><?= t('form_contact') ?></label>
|
|
</div>
|
|
<div class="input-group">
|
|
<select name="type" id="type" required>
|
|
<option value="" disabled selected hidden></option>
|
|
<option value="fintech">Fintech Solution</option>
|
|
<option value="web">Luxury Web</option>
|
|
<option value="app">App System</option>
|
|
<option value="consult">Consulting</option>
|
|
</select>
|
|
<label for="type"><?= t('form_type') ?></label>
|
|
</div>
|
|
<div class="input-group">
|
|
<textarea name="message" id="message" required rows="3"></textarea>
|
|
<label for="message"><?= t('form_message') ?></label>
|
|
</div>
|
|
<button type="submit" class="btn-submit">
|
|
<span><?= t('form_submit') ?></span>
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-top">
|
|
<div class="footer-brand">
|
|
<a href="#" class="logo">
|
|
<img src="assets/logo.svg" alt="Logo" width="60" height="60">
|
|
<span><?= htmlspecialchars($projectName) ?></span>
|
|
</a>
|
|
<p><?= t('footer_desc') ?></p>
|
|
</div>
|
|
<div class="footer-social">
|
|
<h4>SOCIAL</h4>
|
|
<div class="social-icons">
|
|
<a href="https://t.me/zhangshihao818" target="_blank"><i class="fab fa-telegram"></i></a>
|
|
<a href="#"><i class="fab fa-github"></i></a>
|
|
<a href="#"><i class="fab fa-linkedin"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© <?= date('Y') ?> <?= htmlspecialchars($projectName) ?>. All Rights Reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?= time() ?>"></script>
|
|
</body>
|
|
</html>
|