<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>江枫的个人网站</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="dynamic-bg"></div>
<nav class="navbar">
<div class="logo">Xr <span>江枫</span></div>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我</a></li>
<li class="dropdown">
<a href="#projects">项目展示 <i class="fas fa-chevron-down"></i></a>
<ul class="dropdown-menu">
<li><a href="#project1">项目一</a></li>
<li><a href="#project2">项目二</a></li>
<li><a href="#project3">项目三</a></li>
</ul>
</li>
<li><a href="#contact">联系我</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!-- 首页部分 -->
<section id="home" class="hero">
<div class="hero-content">
<h1 class="fade-in">你好，我是 <span class="highlight">江枫</span></h1>
<p class="fade-in delay-1">我专注于创建令人印象深刻的交互体验</p>
<button class="cta-btn fade-in delay-2">探索我的作品</button>
<div class="scroll-down">
<span>向下滚动</span>
<i class="fas fa-chevron-down"></i>
</div>
</div>
</section>
<section id="about" class="about">
<h2 class="section-title">关于我</h2>
<div class="about-content">
<div class="profile-img">
<img src="profile.jpg" alt="我的照片">
</div>
<div class="about-text">
<h3>我是一个充满激情的设计师</h3>
<p>我专注于创造美观且功能强大的数字体验。拥有5年以上的行业经验，致力于将创意概念转化为引人注目的设计作品。</p>
<div class="skills">
<div class="skill">
<div class="skill-name">html/css/JavaScript设计</div>
<div class="skill-bar">
<div class="skill-level" style="width: 90%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">前端开发</div>
<div class="skill-bar">
<div class="skill-level" style="width: 85%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">动画设计</div>
<div class="skill-bar">
<div class="skill-level" style="width: 95%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="projects" class="projects">
<h2 class="section-title">项目展示</h2>
<div class="project-grid">
<div class="project-card" id="project1">
<div class="project-img"></div>
<div class="project-info">
<h3>电子商务网站</h3>
<p>响应式设计，增强用户体验</p>
<button class="project-btn">查看详情</button>
</div>
</div>
<div class="project-card" id="project2">
<div class="project-img"></div>
<div class="project-info">
<h3>移动应用UI</h3>
<p>现代化界面设计，流畅交互</p>
<button class="project-btn">查看详情</button>
</div>
</div>
<div class="project-card" id="project3">
<div class="project-img"></div>
<div class="project-info">
<h3>品牌重塑</h3>
<p>从零开始构建完整的品牌识别系统</p>
<button class="project-btn">查看详情</button>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<h2 class="section-title">联系我</h2>
<div class="contact-content">
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<div>
<h3>邮箱</h3>
<p>3752757373qq.com</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<div>
<h3>电话</h3>
<p>暂无电话联系</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<div>
<h3>位置</h3>
<p>中国，</p>
</div>
</div>
</div>
<form class="contact-form">
<div class="form-group">
<input type="text" placeholder="您的姓名">
</div>
<div class="form-group">
<input type="email" placeholder="您的邮箱">
</div>
<div class="form-group">
<textarea placeholder="您的留言"></textarea>
</div>
<button type="submit" class="submit-btn">发送留言</button>
</form>
</div>
</section>
<footer>
<div class="footer-content">
<div class="social-links">
<a href="#"><i class="fab fa-behance"></i></a>
<a href="#"><i class="fab fa-dribbble"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
<p>© 2025 江枫. 保留所有权利.（梦幻创意创想工作室）</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
index.html
assets
styles.css
script.js