<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="particles"></canvas>
<nav class="navbar">
<div class="nav-container">
<div class="logo">CXH</div>
<ul class="nav-menu">
<li><a href="#home" class="nav-link">首页</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 class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<section id="home" class="hero">
<div class="hero-content">
<div class="greeting">你好，我是</div>
<h1 class="name">陈锨濠</h1>
<div class="typewriter">
<span id="typed-text"></span>
<span class="cursor">|</span>
</div>
<p class="description">
广东科学技术职业学院商学院<br>
商务数据分析与应用专业学生
</p>
<div class="hero-buttons">
<a href="#projects" class="btn btn-primary">查看项目</a>
<a href="#contact" class="btn btn-secondary">联系我</a>
</div>
<div class="scroll-indicator">
<i class="fas fa-chevron-down"></i>
</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="image-frame">
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=young%20asian%20male%20student%20programmer%20portrait%20professional%20photo&image_size=square_hd" alt="陈锨濠">
</div>
</div>
<div class="about-text">
<h3>热爱编程，专注AI</h3>
<p>
我是一名对技术充满热情的大学生，目前就读于广东科学技术职业学院商学院，
主修商务数据分析与应用专业。我对AI编程和数据科学有着浓厚的兴趣。
</p>
<p>
在学习过程中，我不断探索新技术，喜欢用代码解决实际问题。
我相信技术的力量可以改变世界，希望通过自己的努力，在AI领域有所建树。
</p>
<div class="about-stats">
<div class="stat-item">
<div class="stat-number">3+</div>
<div class="stat-label">年学习经验</div>
</div>
<div class="stat-item">
<div class="stat-number">10+</div>
<div class="stat-label">完成项目</div>
</div>
<div class="stat-item">
<div class="stat-number">5+</div>
<div class="stat-label">编程语言</div>
</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-card">
<div class="skill-icon">
<i class="fab fa-python"></i>
</div>
<h3>Python</h3>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
<p class="skill-percent">85%</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fas fa-brain"></i>
</div>
<h3>机器学习</h3>
<div class="skill-bar">
<div class="skill-progress" style="width: 75%"></div>
</div>
<p class="skill-percent">75%</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fab fa-js-square"></i>
</div>
<h3>JavaScript</h3>
<div class="skill-bar">
<div class="skill-progress" style="width: 80%"></div>
</div>
<p class="skill-percent">80%</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fas fa-chart-bar"></i>
</div>
<h3>数据分析</h3>
<div class="skill-bar">
<div class="skill-progress" style="width: 88%"></div>
</div>
<p class="skill-percent">88%</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fab fa-html5"></i>
</div>
<h3>HTML/CSS</h3>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
<p class="skill-percent">90%</p>
</div>
<div class="skill-card">
<div class="skill-icon">
<i class="fab fa-git-alt"></i>
</div>
<h3>Git</h3>
<div class="skill-bar">
<div class="skill-progress" style="width: 78%"></div>
</div>
<p class="skill-percent">78%</p>
</div>
</div>
</div>
</section>
<section id="projects" class="projects">
<div class="container">
<h2 class="section-title">精选项目</h2>
<div class="projects-grid">
<div class="project-card">
<div class="project-image">
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=AI%20machine%20learning%20data%20visualization%20dashboard%20interface%20technology%20blue&image_size=landscape_16_9" alt="AI项目">
<div class="project-overlay">
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="#" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-content">
<h3>智能数据分析平台</h3>
<p>基于Python和机器学习的数据分析平台，支持数据可视化和智能预测</p>
<div class="project-tags">
<span class="tag">Python</span>
<span class="tag">TensorFlow</span>
<span class="tag">Pandas</span>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=web%20application%20dashboard%20modern%20UI%20design%20cyberpunk%20style&image_size=landscape_16_9" alt="Web项目">
<div class="project-overlay">
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="#" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-content">
<h3>电商数据管理系统</h3>
<p>全栈Web应用，用于管理和分析电商数据，提供实时报表功能</p>
<div class="project-tags">
<span class="tag">JavaScript</span>
<span class="tag">HTML/CSS</span>
<span class="tag">Chart.js</span>
</div>
</div>
</div>
<div class="project-card">
<div class="project-image">
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=chatbot%20AI%20interface%20conversation%20artificial%20intelligence%20technology&image_size=landscape_16_9" alt="聊天机器人">
<div class="project-overlay">
<a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
<a href="#" class="project-link"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="project-content">
<h3>AI智能聊天机器人</h3>
<p>基于自然语言处理的智能聊天机器人，支持多轮对话</p>
<div class="project-tags">
<span class="tag">Python</span>
<span class="tag">NLP</span>
<span class="tag">Flask</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">联系我</h2>
<p class="contact-subtitle">有任何问题或合作意向，欢迎随时联系我</p>
<div class="contact-content">
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-text">
<h3>邮箱</h3>
<a href="mailto:example@email.com">example@email.com</a>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fab fa-github"></i>
</div>
<div class="contact-text">
<h3>GitHub</h3>
<a href="https://github.com" target="_blank">github.com/chenxianhao</a>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-text">
<h3>位置</h3>
<p>中国，广东</p>
</div>
</div>
</div>
<div class="social-links">
<a href="https://github.com" class="social-link" target="_blank">
<i class="fab fa-github"></i>
</a>
<a href="#" class="social-link">
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="social-link">
<i class="fab fa-zhihu"></i>
</a>
<a href="#" class="social-link">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<p>© 2024 陈锨濠. 用 <i class="fas fa-heart"></i> 和代码构建</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>