413 lines
18 KiB
HTML
413 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>张三 - 个人作品展示</title>
|
||
<meta name="description" content="张三的个人作品展示网站，展示前端开发技能和项目经验">
|
||
<meta name="keywords" content="前端开发, 个人作品, 网页设计, 响应式网站">
|
||
<meta name="author" content="张三">
|
||
|
||
<!-- Open Graph 标签 -->
|
||
<meta property="og:title" content="张三 - 个人作品展示">
|
||
<meta property="og:description" content="专业前端开发工程师的个人作品展示">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://zhangsan-portfolio.com">
|
||
|
||
<!-- 字体 -->
|
||
<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;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||
|
||
<!-- 图标 -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
||
<!-- 样式 -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/responsive.css">
|
||
|
||
<!-- 网站图标 -->
|
||
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="container">
|
||
<a href="#" class="logo">张三<span class="highlight">.</span></a>
|
||
|
||
<button class="menu-toggle" aria-label="切换菜单">
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
</button>
|
||
|
||
<ul class="nav-links">
|
||
<li><a href="#home" class="nav-link active">首页</a></li>
|
||
<li><a href="#about" class="nav-link">关于</a></li>
|
||
<li><a href="#skills" class="nav-link">技能</a></li>
|
||
<li><a href="#projects" class="nav-link">项目</a></li>
|
||
<li><a href="#contact" class="nav-link">联系</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero 部分 -->
|
||
<section id="home" class="hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">你好，我是 <span class="highlight">张三</span></h1>
|
||
<h2 class="hero-subtitle">前端开发工程师 & UI设计师</h2>
|
||
<p class="hero-description">
|
||
我专注于创建美观、高效、用户友好的网页应用。
|
||
拥有5年+的前端开发经验，擅长React、Vue和现代CSS技术。
|
||
</p>
|
||
<div class="hero-buttons">
|
||
<a href="#projects" class="btn btn-primary">查看作品</a>
|
||
<a href="#contact" class="btn btn-secondary">联系我</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-image">
|
||
<div class="image-placeholder">
|
||
<i class="fas fa-user-circle"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 关于部分 -->
|
||
<section id="about" class="about">
|
||
<div class="container">
|
||
<h2 class="section-title">关于我</h2>
|
||
<div class="about-content">
|
||
<div class="about-image">
|
||
<div class="avatar-placeholder">
|
||
<i class="fas fa-user-tie"></i>
|
||
</div>
|
||
</div>
|
||
<div class="about-text">
|
||
<h3>热情的前端开发者</h3>
|
||
<p>
|
||
我是一名充满热情的前端开发工程师，专注于创建优秀的用户体验。
|
||
我相信好的设计不仅仅是美观，更重要的是功能性和易用性。
|
||
</p>
|
||
<p>
|
||
在过去的5年里，我参与了多个大型项目，从企业级应用到创意个人项目。
|
||
我热爱学习新技术，并享受将想法转化为现实的过程。
|
||
</p>
|
||
|
||
<div class="experience">
|
||
<div class="exp-item">
|
||
<h4>5+ 年</h4>
|
||
<p>开发经验</p>
|
||
</div>
|
||
<div class="exp-item">
|
||
<h4>50+ 项目</h4>
|
||
<p>成功交付</p>
|
||
</div>
|
||
<div class="exp-item">
|
||
<h4>100%</h4>
|
||
<p>客户满意度</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技能部分 -->
|
||
<section id="skills" class="skills">
|
||
<div class="container">
|
||
<h2 class="section-title">我的技能</h2>
|
||
|
||
<div class="skills-grid">
|
||
<!-- 前端技能 -->
|
||
<div class="skill-category">
|
||
<h3><i class="fas fa-code"></i> 前端开发</h3>
|
||
<div class="skill-list">
|
||
<div class="skill-item">
|
||
<span class="skill-name">HTML5/CSS3</span>
|
||
<div class="skill-bar">
|
||
<div class="skill-level" style="width: 95%"></div>
|
||
</div>
|
||
<span class="skill-percent">95%</span>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">JavaScript</span>
|
||
<div class="skill-bar">
|
||
<div class="skill-level" style="width: 90%"></div>
|
||
</div>
|
||
<span class="skill-percent">90%</span>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">React</span>
|
||
<div class="skill-bar">
|
||
<div class="skill-level" style="width: 85%"></div>
|
||
</div>
|
||
<span class="skill-percent">85%</span>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">Vue.js</span>
|
||
<div class="skill-bar">
|
||
<div class="skill-level" style="width: 80%"></div>
|
||
</div>
|
||
<span class="skill-percent">80%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设计技能 -->
|
||
<div class="skill-category">
|
||
<h3><i class="fas fa-paint-brush"></i> 设计</h3>
|
||
<div class="skill-list">
|
||
<div class="skill-item">
|
||
<span class="skill-name">UI/UX设计</span>
|
||
<div class="skill-bar">
|
||
<div class="skill-level" style="width: 85%"></div>
|
||
</div>
|
||
<span class="skill-percent">85%</span>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">响应式设计</span>
|
||
<div class="skill-bar">
|
||
<div class="skill-level" style="width: 90%"></div>
|
||
</div>
|
||
<span class="skill-percent">90%</span>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">Figma</span>
|
||
<div class="skill-bar">
|
||
<div class="skill-level" style="width: 80%"></div>
|
||
</div>
|
||
<span class="skill-percent">80%</span>
|
||
</div>
|
||
<div class="skill-item">
|
||
<span class="skill-name">Adobe Creative Suite</span>
|
||
<div class="skill-bar">
|
||
<div class="skill-level" style="width: 75%"></div>
|
||
</div>
|
||
<span class="skill-percent">75%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 其他技能 -->
|
||
<div class="skill-category">
|
||
<h3><i class="fas fa-tools"></i> 其他技能</h3>
|
||
<div class="skill-tags">
|
||
<span class="skill-tag">Git</span>
|
||
<span class="skill-tag">Webpack</span>
|
||
<span class="skill-tag">REST API</span>
|
||
<span class="skill-tag">性能优化</span>
|
||
<span class="skill-tag">SEO</span>
|
||
<span class="skill-tag">团队协作</span>
|
||
<span class="skill-tag">项目管理</span>
|
||
<span class="skill-tag">问题解决</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 项目部分 -->
|
||
<section id="projects" class="projects">
|
||
<div class="container">
|
||
<h2 class="section-title">精选项目</h2>
|
||
|
||
<div class="projects-grid">
|
||
<!-- 项目1 -->
|
||
<div class="project-card">
|
||
<div class="project-image">
|
||
<div class="image-placeholder">
|
||
<i class="fas fa-shopping-cart"></i>
|
||
</div>
|
||
</div>
|
||
<div class="project-content">
|
||
<h3>电商平台</h3>
|
||
<p>一个完整的响应式电商网站，包含商品展示、购物车、支付流程等功能。</p>
|
||
<div class="project-tech">
|
||
<span class="tech-tag">React</span>
|
||
<span class="tech-tag">Node.js</span>
|
||
<span class="tech-tag">MongoDB</span>
|
||
<span class="tech-tag">Stripe</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="#" class="project-link"><i class="fab fa-github"></i> 代码</a>
|
||
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目2 -->
|
||
<div class="project-card">
|
||
<div class="project-image">
|
||
<div class="image-placeholder">
|
||
<i class="fas fa-tasks"></i>
|
||
</div>
|
||
</div>
|
||
<div class="project-content">
|
||
<h3>任务管理应用</h3>
|
||
<p>一个现代化的任务管理工具，支持看板视图、团队协作和实时更新。</p>
|
||
<div class="project-tech">
|
||
<span class="tech-tag">Vue.js</span>
|
||
<span class="tech-tag">Firebase</span>
|
||
<span class="tech-tag">Vuex</span>
|
||
<span class="tech-tag">Vuetify</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="#" class="project-link"><i class="fab fa-github"></i> 代码</a>
|
||
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目3 -->
|
||
<div class="project-card">
|
||
<div class="project-image">
|
||
<div class="image-placeholder">
|
||
<i class="fas fa-chart-line"></i>
|
||
</div>
|
||
</div>
|
||
<div class="project-content">
|
||
<h3>数据分析仪表板</h3>
|
||
<p>交互式数据可视化仪表板，支持多种图表类型和数据源连接。</p>
|
||
<div class="project-tech">
|
||
<span class="tech-tag">D3.js</span>
|
||
<span class="tech-tag">Express</span>
|
||
<span class="tech-tag">PostgreSQL</span>
|
||
<span class="tech-tag">Chart.js</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="#" class="project-link"><i class="fab fa-github"></i> 代码</a>
|
||
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系部分 -->
|
||
<section id="contact" class="contact">
|
||
<div class="container">
|
||
<h2 class="section-title">联系我</h2>
|
||
|
||
<div class="contact-content">
|
||
<div class="contact-info">
|
||
<h3>让我们合作</h3>
|
||
<p>如果您有项目想法或需要帮助，请随时联系我。我通常会在24小时内回复。</p>
|
||
|
||
<div class="contact-details">
|
||
<div class="contact-item">
|
||
<i class="fas fa-envelope"></i>
|
||
<div>
|
||
<h4>邮箱</h4>
|
||
<p>zhangsan@example.com</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="fas fa-phone"></i>
|
||
<div>
|
||
<h4>电话</h4>
|
||
<p>+86 138 0013 8000</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-item">
|
||
<i class="fas fa-map-marker-alt"></i>
|
||
<div>
|
||
<h4>位置</h4>
|
||
<p>中国，北京</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="social-links">
|
||
<a href="#" class="social-link" aria-label="GitHub">
|
||
<i class="fab fa-github"></i>
|
||
</a>
|
||
<a href="#" class="social-link" aria-label="LinkedIn">
|
||
<i class="fab fa-linkedin"></i>
|
||
</a>
|
||
<a href="#" class="social-link" aria-label="Twitter">
|
||
<i class="fab fa-twitter"></i>
|
||
</a>
|
||
<a href="#" class="social-link" aria-label="Codepen">
|
||
<i class="fab fa-codepen"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-form">
|
||
<form id="contactForm">
|
||
<div class="form-group">
|
||
<label for="name">姓名</label>
|
||
<input type="text" id="name" name="name" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email">邮箱</label>
|
||
<input type="email" id="email" name="email" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="subject">主题</label>
|
||
<input type="text" id="subject" name="subject" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="message">消息</label>
|
||
<textarea id="message" name="message" rows="5" required></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">发送消息</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-logo">
|
||
<a href="#" class="logo">张三<span class="highlight">.</span></a>
|
||
<p>创建美观、高效、用户友好的网页应用</p>
|
||
</div>
|
||
|
||
<div class="footer-links">
|
||
<h4>快速链接</h4>
|
||
<ul>
|
||
<li><a href="#home">首页</a></li>
|
||
<li><a href="#about">关于</a></li>
|
||
<li><a href="#skills">技能</a></li>
|
||
<li><a href="#projects">项目</a></li>
|
||
<li><a href="#contact">联系</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer-newsletter">
|
||
<h4>保持联系</h4>
|
||
<p>订阅我的技术博客和项目更新</p>
|
||
<form class="newsletter-form">
|
||
<input type="email" placeholder="输入您的邮箱" required>
|
||
<button type="submit" class="btn btn-small">订阅</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© 2026 张三. 保留所有权利.</p>
|
||
<p>最后更新: 2026-03-31</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 返回顶部按钮 -->
|
||
<button id="backToTop" class="back-to-top" aria-label="返回顶部">
|
||
<i class="fas fa-chevron-up"></i>
|
||
</button>
|
||
|
||
<!-- JavaScript -->
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html> |