项目作品 | 崔喆�?/title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">  <link rel="stylesheet" href="../assets/css/design-system.css"> <link rel="stylesheet" href="../assets/css/animations.css"> <style> :root { --page-padding: 48px; --page-padding-mobile: 20px; } body { font-family: 'Noto Sans SC', sans-serif; background: var(--color-bg-primary); color: var(--color-text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--navbar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--page-padding); background: rgba(10, 20, 40, 0.5); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); transition: all var(--transition-base); } .nav-back { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); text-decoration: none; font-size: 0.875rem; } .nav-back:hover { color: var(--color-text-primary); } button[data-theme-toggle] { width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-bg-secondary); color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all var(--transition-base); } button[data-theme-toggle]:hover { color: var(--color-text-primary); border-color: var(--color-text-secondary); } .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--page-padding); } .page-header { padding: calc(var(--navbar-height) + 72px) 0 48px; border-bottom: 1px solid var(--color-border); margin-bottom: 48px; } .page-title { font-size: 2rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; background: var(--color-accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .page-subtitle { color: var(--color-text-secondary); font-size: 1rem; } .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; padding-bottom: 80px; } .project-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-base), box-shadow var(--transition-base); } .project-card:hover { border-color: var(--color-text-secondary); box-shadow: var(--color-shadow-md); } .project-image { height: 180px; overflow: hidden; } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); } .project-card:hover .project-image img { transform: scale(1.04); } .project-content { padding: 20px; } .project-content h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; } .project-content p { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 16px; } .project-tags { display: flex; flex-wrap: wrap; gap: 8px; } .project-tag { padding: 4px 10px; background: var(--color-bg-tertiary); border-radius: 100px; font-size: 0.6875rem; color: var(--color-text-secondary); } .fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .container { padding: 0 var(--page-padding-mobile); } .nav { padding: 0 var(--page-padding-mobile); } .projects-grid { grid-template-columns: 1fr; } } </style> </head> <body data-theme="dark"> <nav class="nav"> <a href="../index.html" class="nav-back"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> 返回首页 </a> <button data-theme-toggle title="切换主题">🌙</button> </nav> <div class="container"> <header class="page-header fade-up"> <h1 class="page-title"> <span>🚀</span> 项目作品 </h1> <p class="page-subtitle">15+ 完整项目，涵盖多个技术领�?/p> </header> <div class="projects-grid fade-up"> <div class="project-card"> <div class="project-image"> <img src="https://cdn.jsdelivr.net/gh/TonyDDcui/Self_Introduction@main/Project_record/project_img/img1.jpg" alt="智能小车"> </div> <div class="project-content"> <h3>智能循迹小车</h3> <p>基于 STM32 的智能循迹小车，配备多种传感器，实现自主导航与避障功能�?/p> <div class="project-tags"> <span class="project-tag">STM32</span> <span class="project-tag">传感�?/span> <span class="project-tag">PID控制</span> </div> </div> </div> <div class="project-card"> <div class="project-image"> <img src="https://cdn.jsdelivr.net/gh/TonyDDcui/Self_Introduction@main/Project_record/project_img/img2.jpg" alt="智能家居"> </div> <div class="project-content"> <h3>智能家居控制系统</h3> <p>物联网智能家居系统，支持远程控制、语音交互和自动化场景配置�?/p> <div class="project-tags"> <span class="project-tag">IoT</span> <span class="project-tag">WiFi</span> <span class="project-tag">MQTT</span> </div> </div> </div> <div class="project-card"> <div class="project-image"> <img src="https://cdn.jsdelivr.net/gh/TonyDDcui/Self_Introduction@main/Project_record/project_img/img3.jpg" alt="机械�?> </div> <div class="project-content"> <h3>四自由度机械�?/h3> <p>舵机控制机械臂，支持精确位置控制、轨迹规划与抓取作业�?/p> <div class="project-tags"> <span class="project-tag">舵机控制</span> <span class="project-tag">运动�?/span> <span class="project-tag">逆解�?/span> </div> </div> </div> </div> </div> <script src="../assets/js/main.js"></script> <script> // 使用�?JS 中的 IntersectionObserver 来处�?fade-up 动画 (function() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); }); }, { threshold: 0.1 }); document.querySelectorAll('.fade-up').forEach(el => observer.observe(el)); })(); </script> </body> </html>