Hugging Face's logo

Spaces:
Jan0726
/
sjifdf
Running

App Files Community
sjifdf / index.html
Jan0726's picture
Jan0726
undefined - Follow Up Deployment
ea4f825 verified
raw
history blame contribute delete
56.4 kB
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>李梓健 | AIGC生成式应用设计师</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
 <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#165DFF',
 secondary: '#8B5CF6',
 accent: '#EC4899',
 dark: '#111827',
 light: '#F9FAFB'
 },
 fontFamily: {
 inter: ['Inter', 'sans-serif'],
 },
 }
 }
 }
 </script>
<style type="text/tailwindcss">
 @layer utilities {
 .content-auto {
 content-visibility: auto;
 }
 .text-gradient {
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 }
 .bg-blur {
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 }
 .parallax {
 transform-style: preserve-3d;
 perspective: 1000px;
 }
 .parallax-layer {
 transform: translateZ(0);
 transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 .hover-scale {
 transition: transform 0.3s ease;
 }
 .hover-scale:hover {
 transform: scale(1.03);
 }
 .animate-float {
 animation: float 6s ease-in-out infinite;
 }
 @keyframes float {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-15px); }
 100% { transform: translateY(0px); }
 }
 .grid-masonry {
 grid-template-rows: masonry;
 }
 .text-shadow {
 text-shadow: 0 2px 4px rgba(0,0,0,0.3);
 }
 .text-shadow-lg {
 text-shadow: 0 4px 8px rgba(0,0,0,0.5);
 }
 .transition-transform-opacity {
 transition-property: transform, opacity;
 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 transition-duration: 300ms;
 }
 }
 </style>
</head>
<body class="font-inter bg-gray-900 text-white overflow-x-hidden">
 <!-- 导航栏 -->
 <nav id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300">
 <div class="container mx-auto px-4 py-4 flex justify-between items-center">
 <a href="#home" class="text-2xl font-bold text-white">
 <span class="text-gradient bg-gradient-to-r from-primary to-secondary">李梓健</span>
 </a>
<!-- 桌面导航 -->
 <div class="hidden md:flex space-x-8">
 <a href="#home" class="text-white hover:text-primary transition-colors">首页</a>
 <a href="#about" class="text-white hover:text-primary transition-colors">关于</a>
 <a href="#skills" class="text-white hover:text-primary transition-colors">技能</a>
 <a href="#portfolio" class="text-white hover:text-primary transition-colors">作品集</a>
 <a href="#contact" class="text-white hover:text-primary transition-colors">联系</a>
 </div>
<!-- 移动端菜单按钮 -->
 <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
 <i class="fa fa-bars text-2xl"></i>
 </button>
 </div>
<!-- 移动端导航菜单 -->
 <div id="mobile-menu" class="hidden md:hidden bg-dark/90 bg-blur absolute w-full">
 <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
 <a href="#home" class="text-white hover:text-primary transition-colors py-2">首页</a>
 <a href="#about" class="text-white hover:text-primary transition-colors py-2">关于</a>
 <a href="#skills" class="text-white hover:text-primary transition-colors py-2">技能</a>
 <a href="#portfolio" class="text-white hover:text-primary transition-colors py-2">作品集</a>
 <a href="#contact" class="text-white hover:text-primary transition-colors py-2">联系</a>
 </div>
 </div>
 </nav>
<!-- 英雄区 -->
 <section id="home" class="min-h-screen flex items-center relative overflow-hidden">
 <div class="absolute inset-0 bg-gradient-to-br from-dark via-primary/20 to-secondary/20"></div>
<!-- 背景动态元素 -->
 <div class="absolute inset-0 overflow-hidden">
 <div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/30 rounded-full filter blur-3xl animate-float"></div>
 <div class="absolute top-1/2 -left-20 w-80 h-80 bg-secondary/20 rounded-full filter blur-3xl animate-float" style="animation-delay: 2s;"></div>
 <div class="absolute -bottom-40 right-1/4 w-72 h-72 bg-accent/20 rounded-full filter blur-3xl animate-float" style="animation-delay: 4s;"></div>
 </div>
<div class="container mx-auto px-4 py-20 relative z-10">
 <div class="max-w-4xl mx-auto text-center">
 <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold leading-tight mb-6">
 <span class="block">你好，我是</span>
 <span class="text-gradient bg-gradient-to-r from-primary via-secondary to-accent">李梓健</span>
 </h1>
 <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-semibold mb-8 text-gray-300">
 AIGC生成式应用 <span class="text-white">设计师</span>
 </h2>
 <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-400 mb-10 max-w-2xl mx-auto">
 专注于人工智能生成内容(AIGC)的创新应用设计，将技术与艺术完美融合，创造沉浸式数字体验。
 </p>
 <div class="flex flex-wrap justify-center gap-4">
 <a href="#portfolio" class="px-8 py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-medium hover:shadow-lg hover:shadow-primary/20 transition transform hover:scale-105">
 查看作品集
 </a>
 <a href="#contact" class="px-8 py-3 border border-white/30 rounded-full font-medium hover:bg-white/10 transition transform hover:scale-105">
 联系我
 </a>
 </div>
 </div>
 </div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
 <a href="#about" class="text-white/70 hover:text-white transition">
 <i class="fa fa-chevron-down text-2xl"></i>
 </a>
 </div>
 </section>
<!-- 关于我 -->
 <section id="about" class="py-24 bg-gray-800 relative">
 <div class="container mx-auto px-4">
 <div class="max-w-6xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4">
 <span class="text-gradient bg-gradient-to-r from-primary to-secondary">关于</span> 我
 </h2>
 <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div>
 </div>
<div class="grid md:grid-cols-2 gap-12 items-center">
 <div class="relative">
 <div class="absolute -top-4 -left-4 w-full h-full border-2 border-primary/30 rounded-xl"></div>
 <div class="absolute -bottom-4 -right-4 w-full h-full border-2 border-secondary/30 rounded-xl"></div>
 <img src="https://picsum.photos/id/1005/600/800" alt="李梓健" class="w-full h-auto rounded-xl shadow-2xl hover-scale">
 <div class="absolute -bottom-6 -left-6 bg-dark/80 bg-blur p-4 rounded-lg shadow-lg">
 <p class="text-sm text-gray-300">22岁 · 本科 · 设计专业</p>
 </div>
 </div>
<div>
 <h3 class="text-2xl font-bold mb-6">AIGC生成式应用设计师</h3>
 <p class="text-gray-300 mb-6 leading-relaxed">
 我是李梓健，一名专注于人工智能生成内容(AIGC)的设计师。通过结合设计专业知识与前沿AI技术，我致力于创造创新的数字体验和视觉解决方案。
 </p>
 <p class="text-gray-300 mb-8 leading-relaxed">
 我的工作涉及AI辅助设计工具开发、生成式艺术创作、交互式AI界面设计等领域。我相信AIGC将彻底改变设计行业的未来，而我希望成为这一变革的推动者。
 </p>
<div class="grid grid-cols-2 gap-4 mb-8">
 <div class="bg-gray-700/50 p-4 rounded-lg">
 <h4 class="font-bold text-primary mb-2">教育背景</h4>
 <p class="text-gray-300">设计专业本科</p>
 </div>
 <div class="bg-gray-700/50 p-4 rounded-lg">
 <h4 class="font-bold text-primary mb-2">专注领域</h4>
 <p class="text-gray-300">AIGC应用设计</p>
 </div>
 <div class="bg-gray-700/50 p-4 rounded-lg">
 <h4 class="font-bold text-primary mb-2">经验</h4>
 <p class="text-gray-300">2年+</p>
 </div>
 <div class="bg-gray-700/50 p-4 rounded-lg">
 <h4 class="font-bold text-primary mb-2">位置</h4>
 <p class="text-gray-300">中国-深圳</p>
 </div>
 </div>
<div class="flex flex-wrap gap-4">
 <a href="#portfolio" class="px-6 py-2 bg-primary rounded-full font-medium hover:bg-primary/90 transition">
 查看我的作品
 </a>
 <a href="#contact" class="px-6 py-2 border border-primary rounded-full font-medium hover:bg-primary/10 transition">
 联系我
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- 技能部分 -->
 <section id="skills" class="py-24 bg-gray-900 relative">
 <div class="container mx-auto px-4">
 <div class="max-w-6xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4">
 我的 <span class="text-gradient bg-gradient-to-r from-primary to-secondary">技能</span>
 </h2>
 <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div>
 </div>
<div class="grid md:grid-cols-2 gap-12">
 <div>
 <h3 class="text-2xl font-bold mb-8">设计技能</h3>
<div class="space-y-6">
 <div>
 <div class="flex justify-between mb-2">
 <span class="font-medium">AIGC工具应用</span>
 <span class="text-primary">95%</span>
 </div>
 <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
 <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 95%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <span class="font-medium">UI/UX设计</span>
 <span class="text-primary">90%</span>
 </div>
 <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
 <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 90%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <span class="font-medium">生成式艺术</span>
 <span class="text-primary">85%</span>
 </div>
 <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
 <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 85%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <span class="font-medium">交互设计</span>
 <span class="text-primary">80%</span>
 </div>
 <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
 <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 80%"></div>
 </div>
 </div>
 </div>
 </div>
<div>
 <h3 class="text-2xl font-bold mb-8">技术能力</h3>
<div class="space-y-6">
 <div>
 <div class="flex justify-between mb-2">
 <span class="font-medium">Python编程</span>
 <span class="text-primary">75%</span>
 </div>
 <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
 <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 75%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <span class="font-medium">AI模型调优</span>
 <span class="text-primary">80%</span>
 </div>
 <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
 <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 80%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <span class="font-medium">图像处理</span>
 <span class="text-primary">85%</span>
 </div>
 <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
 <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 85%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <span class="font-medium">3D建模</span>
 <span class="text-primary">70%</span>
 </div>
 <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
 <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: 70%"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- 工具和软件 -->
 <div class="mt-20">
 <h3 class="text-2xl font-bold mb-8 text-center">熟练使用的工具</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
 <div class="bg-gray-800 p-6 rounded-xl text-center hover-scale">
 <i class="fa fa-paint-brush text-3xl text-primary mb-4"></i>
 <h4 class="font-medium">Midjourney</h4>
 </div>
<div class="bg-gray-800 p-6 rounded-xl text-center hover-scale">
 <i class="fa fa-magic text-3xl text-primary mb-4"></i>
 <h4 class="font-medium">Workflow</h4>
 </div>
<div class="bg-gray-800 p-6 rounded-xl text-center hover-scale">
 <i class="fa fa-code text-3xl text-primary mb-4"></i>
 <h4 class="font-medium">Stable Diffusion</h4>
 </div>
<div class="bg-gray-800 p-6 rounded-xl text-center hover-scale">
 <i class="fa fa-pencil text-3xl text-primary mb-4"></i>
 <h4 class="font-medium">Figma</h4>
 </div>
<div class="bg-gray-800 p-6 rounded-xl text-center hover-scale">
 <i class="fa fa-picture-o text-3xl text-primary mb-4"></i>
 <h4 class="font-medium">Photoshop</h4>
 </div>
<div class="bg-gray-800 p-6 rounded-xl text-center hover-scale">
 <i class="fa fa-cube text-3xl text-primary mb-4"></i>
 <h4 class="font-medium">D5</h4>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- 作品集 -->
 <section id="portfolio" class="py-24 bg-gray-800 relative">
 <div class="container mx-auto px-4">
 <div class="max-w-6xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4">
 我的 <span class="text-gradient bg-gradient-to-r from-primary to-secondary">作品集</span>
 </h2>
 <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div>
 <p class="text-gray-300 mt-6 max-w-2xl mx-auto">
 探索我在AIGC生成式应用设计领域的最新作品，展示技术与艺术的完美融合。
 </p>
 </div>
<!-- 筛选器 -->
 <div class="flex flex-wrap justify-center gap-4 mb-12">
 <button class="px-6 py-2 bg-primary rounded-full font-medium filter-btn active" data-filter="all">全部作品</button>
 <button class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-full font-medium transition filter-btn" data-filter="aigc">AIGC设计</button>
 <button class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-full font-medium transition filter-btn" data-filter="ui">UI/UX</button>
 <button class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-full font-medium transition filter-btn" data-filter="art">生成式艺术</button>
 </div>
<!-- 作品网格 -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- 作品项 1 -->
 <div class="group relative overflow-hidden rounded-xl hover-scale portfolio-item" data-category="aigc">
 <img src="https://picsum.photos/id/1015/600/400" alt="AI生成式角色设计" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
 <span class="text-xs font-medium text-primary mb-2">AIGC设计</span>
 <h3 class="text-xl font-bold mb-2">AI生成式角色设计</h3>
 <p class="text-gray-300 text-sm mb-4">使用Stable Diffusion创建的游戏角色概念设计</p>
 <a href="portfolio/ai-character-design.html" class="inline-flex items-center text-white text-sm font-medium portfolio-link">
 查看详情 <i class="fa fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
<!-- 作品项 2 -->
 <div class="group relative overflow-hidden rounded-xl hover-scale portfolio-item" data-category="ui">
 <img src="https://picsum.photos/id/1019/600/400" alt="AI辅助UI界面设计" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
 <span class="text-xs font-medium text-primary mb-2">UI/UX</span>
 <h3 class="text-xl font-bold mb-2">AI辅助UI界面设计</h3>
 <p class="text-gray-300 text-sm mb-4">使用AI工具生成并优化的移动应用界面</p>
 <a href="portfolio/ai-ui-design.html" class="inline-flex items-center text-white text-sm font-medium portfolio-link">
 查看详情 <i class="fa fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
<!-- 作品项 3 -->
 <div class="group relative overflow-hidden rounded-xl hover-scale portfolio-item" data-category="art">
 <img src="https://picsum.photos/id/1039/600/400" alt="生成式艺术展览" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
 <span class="text-xs font-medium text-primary mb-2">生成式艺术</span>
 <h3 class="text-xl font-bold mb-2">生成式艺术展览</h3>
 <p class="text-gray-300 text-sm mb-4">基于GAN网络的抽象艺术作品系列</p>
 <a href="portfolio/generative-art-exhibition.html" class="inline-flex items-center text-white text-sm font-medium portfolio-link">
 查看详情 <i class="fa fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
<!-- 作品项 4 -->
 <div class="group relative overflow-hidden rounded-xl hover-scale portfolio-item" data-category="aigc">
 <img src="https://picsum.photos/id/1040/600/400" alt="AI音乐可视化" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
 <span class="text-xs font-medium text-primary mb-2">AIGC设计</span>
 <h3 class="text-xl font-bold mb-2">AI音乐可视化</h3>
 <p class="text-gray-300 text-sm mb-4">使用AI分析音乐情感并生成对应视觉效果</p>
 <a href="portfolio/ai-music-visualization.html" class="inline-flex items-center text-white text-sm font-medium portfolio-link">
 查看详情 <i class="fa fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
<!-- 作品项 5 -->
 <div class="group relative overflow-hidden rounded-xl hover-scale portfolio-item" data-category="aigc">
 <img src="https://picsum.photos/id/1041/600/400" alt="3D模型生成工具" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
 <span class="text-xs font-medium text-primary mb-2">AIGC设计</span>
 <h3 class="text-xl font-bold mb-2">3D模型生成工具</h3>
 <p class="text-gray-300 text-sm mb-4">基于文本描述的3D模型生成界面设计</p>
 <a href="portfolio/3d-model-generator.html" class="inline-flex items-center text-white text-sm font-medium portfolio-link">
 查看详情 <i class="fa fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
<!-- 作品项 6 -->
 <div class="group relative overflow-hidden rounded-xl hover-scale portfolio-item" data-category="ui">
 <img src="https://picsum.photos/id/1042/600/400" alt="AI交互装置设计" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
 <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
 <span class="text-xs font-medium text-primary mb-2">交互设计</span>
 <h3 class="text-xl font-bold mb-2">AI交互装置设计</h3>
 <p class="text-gray-300 text-sm mb-4">响应式AI艺术装置的用户体验设计</p>
 <a href="portfolio/ai-interactive-installation.html" class="inline-flex items-center text-white text-sm font-medium portfolio-link">
 查看详情 <i class="fa fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
 </div>
<!-- 移除了原有的空链接节点 -->
 </div>
 </div>
 </section>
<!-- 项目流程 -->
 <section class="py-24 bg-gray-900 relative">
 <div class="container mx-auto px-4">
 <div class="max-w-6xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4">
 我的 <span class="text-gradient bg-gradient-to-r from-primary to-secondary">设计流程</span>
 </h2>
 <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div>
 <p class="text-gray-300 mt-6 max-w-2xl mx-auto">
 从概念到实现，我遵循一套系统化的流程，确保每个项目都能达到最高标准。
 </p>
 </div>
<div class="relative">
 <!-- 流程线 -->
 <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-gradient-to-b from-primary to-secondary transform -translate-x-1/2"></div>
<div class="space-y-12 md:space-y-0">
 <!-- 步骤 1 -->
 <div class="flex flex-col md:flex-row items-center md:items-start">
 <div class="md:w-1/2 md:pr-12 md:text-right order-2 md:order-1 mt-6 md:mt-0">
 <h3 class="text-xl font-bold mb-4">需求分析</h3>
 <p class="text-gray-300">深入了解客户需求，明确项目目标和期望成果，分析可行性和技术限制。</p>
 </div>
 <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold z-10 order-1 md:order-2">
 01
 </div>
 <div class="md:w-1/2 md:pl-12 order-3 hidden md:block"></div>
 </div>
<!-- 步骤 2 -->
 <div class="flex flex-col md:flex-row items-center md:items-start">
 <div class="md:w-1/2 md:pr-12 order-1 md:order-1 hidden md:block"></div>
 <div class="w-16 h-16 rounded-full bg-secondary flex items-center justify-center text-white text-2xl font-bold z-10 order-2">
 02
 </div>
 <div class="md:w-1/2 md:pl-12 order-3 md:order-3 mt-6 md:mt-0">
 <h3 class="text-xl font-bold mb-4">AI概念探索</h3>
 <p class="text-gray-300">利用AIGC工具进行概念生成和探索，创建多个设计方向供客户选择。</p>
 </div>
 </div>
<!-- 步骤 3 -->
 <div class="flex flex-col md:flex-row items-center md:items-start">
 <div class="md:w-1/2 md:pr-12 md:text-right order-2 md:order-1 mt-6 md:mt-0">
 <h3 class="text-xl font-bold mb-4">原型设计</h3>
 <p class="text-gray-300">根据选定的方向创建高保真原型，确保交互体验和视觉效果符合预期。</p>
 </div>
 <div class="w-16 h-16 rounded-full bg-accent flex items-center justify-center text-white text-2xl font-bold z-10 order-1 md:order-2">
 03
 </div>
 <div class="md:w-1/2 md:pl-12 order-3 hidden md:block"></div>
 </div>
<!-- 步骤 4 -->
 <div class="flex flex-col md:flex-row items-center md:items-start">
 <div class="md:w-1/2 md:pr-12 order-1 md:order-1 hidden md:block"></div>
 <div class="w-16 h-16 rounded-full bg-primary flex items-center justify-center text-white text-2xl font-bold z-10 order-2">
 04
 </div>
 <div class="md:w-1/2 md:pl-12 order-3 md:order-3 mt-6 md:mt-0">
 <h3 class="text-xl font-bold mb-4">AI优化与迭代</h3>
 <p class="text-gray-300">使用AI工具对设计进行优化和迭代，提升细节和整体质量。</p>
 </div>
 </div>
<!-- 步骤 5 -->
 <div class="flex flex-col md:flex-row items-center md:items-start">
 <div class="md:w-1/2 md:pr-12 md:text-right order-2 md:order-1 mt-6 md:mt-0">
 <h3 class="text-xl font-bold mb-4">实现与部署</h3>
 <p class="text-gray-300">将最终设计转化为实际产品，进行测试和部署，确保高质量交付。</p>
 </div>
 <div class="w-16 h-16 rounded-full bg-secondary flex items-center justify-center text-white text-2xl font-bold z-10 order-1 md:order-2">
 05
 </div>
 <div class="md:w-1/2 md:pl-12 order-3 hidden md:block"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- 联系我 -->
 <section id="contact" class="py-24 bg-gray-800 relative">
 <div class="container mx-auto px-4">
 <div class="max-w-6xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4">
 <span class="text-gradient bg-gradient-to-r from-primary to-secondary">联系</span> 我
 </h2>
 <div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div>
 <p class="text-gray-300 mt-6 max-w-2xl mx-auto">
 对我的作品感兴趣或有项目合作需求？请随时联系我，期待与您共创精彩！
 </p>
 </div>
<div class="grid md:grid-cols-2 gap-12">
 <div>
 <form id="contact-form" class="space-y-6">
 <div>
 <label for="name" class="block text-sm font-medium text-gray-300 mb-2">姓名</label>
 <input type="text" id="name" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white" placeholder="您的姓名" required="">
 </div>
<div>
 <label for="email" class="block text-sm font-medium text-gray-300 mb-2">邮箱</label>
 <input type="email" id="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white" placeholder="您的邮箱" required="">
 </div>
<div>
 <label for="subject" class="block text-sm font-medium text-gray-300 mb-2">主题</label>
 <input type="text" id="subject" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white" placeholder="消息主题" required="">
 </div>
<div>
 <label for="message" class="block text-sm font-medium text-gray-300 mb-2">消息</label>
 <textarea id="message" rows="6" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-white" placeholder="请详细描述您的需求或问题..." required=""></textarea>
 </div>
<button type="submit" class="px-8 py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-medium hover:shadow-lg hover:shadow-primary/20 transition transform hover:scale-105 w-full md:w-auto">
 发送消息
 </button>
 </form>
 </div>
<div>
 <div class="bg-gray-700/50 p-8 rounded-xl h-full">
 <h3 class="text-2xl font-bold mb-6">联系方式</h3>
<div class="space-y-6">
 <div class="flex items-start gap-4">
 <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
 <i class="fa fa-envelope"></i>
 </div>
 <div>
 <h4 class="font-medium mb-1">邮箱</h4>
 <p class="text-gray-300">1248567324@qq.com</p>
 </div>
 </div>
<div class="flex items-start gap-4">
 <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
 <i class="fa fa-phone"></i>
 </div>
 <div>
 <h4 class="font-medium mb-1">电话</h4>
 <p class="text-gray-300">+86 135 0909 9505</p>
 </div>
 </div>
<div class="flex items-start gap-4">
 <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
 <i class="fa fa-map-marker"></i>
 </div>
 <div>
 <h4 class="font-medium mb-1">地址</h4>
 <p class="text-gray-300">中国广东省深圳市南山区</p>
 </div>
 </div>
 </div>
<div class="mt-12">
 <h4 class="font-medium mb-4">社交媒体</h4>
 <div class="flex space-x-4">
 <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white hover:bg-primary transition">
 <i class="fa fa-weixin"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white hover:bg-primary transition">
 <i class="fa fa-weibo"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white hover:bg-primary transition">
 <i class="fa fa-instagram"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white hover:bg-primary transition">
 <i class="fa fa-linkedin"></i>
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- 页脚 -->
 <footer class="bg-gray-900 py-12">
 <div class="container mx-auto px-4">
 <div class="max-w-6xl mx-auto">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-6 md:mb-0">
 <a href="#home" class="text-2xl font-bold text-white">
 <span class="text-gradient bg-gradient-to-r from-primary to-secondary">李梓健</span>
 </a>
 <p class="text-gray-400 mt-2">AIGC生成式应用设计师</p>
 </div>
<div class="flex space-x-8 mb-6 md:mb-0">
 <a href="#home" class="text-gray-400 hover:text-white transition">首页</a>
 <a href="#about" class="text-gray-400 hover:text-white transition">关于</a>
 <a href="#skills" class="text-gray-400 hover:text-white transition">技能</a>
 <a href="#portfolio" class="text-gray-400 hover:text-white transition">作品集</a>
 <a href="#contact" class="text-gray-400 hover:text-white transition">联系</a>
 </div>
<div class="flex space-x-4">
 <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-primary transition">
 <i class="fa fa-weixin"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-primary transition">
 <i class="fa fa-weibo"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-primary transition">
 <i class="fa fa-instagram"></i>
 </a>
 <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-primary transition">
 <i class="fa fa-linkedin"></i>
 </a>
 </div>
 </div>
<div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500 text-sm">
 <p>© 2025 李梓健 | AIGC生成式应用设计师. 保留所有权利.</p>
 </div>
 </div>
 </div>
 </footer>
<!-- JavaScript -->
 <script>
 // 导航栏滚动效果
 window.addEventListener('scroll', function() {
 const navbar = document.getElementById('navbar');
 if (window.scrollY > 50) {
 navbar.classList.add('bg-dark/90', 'bg-blur', 'shadow-lg');
 } else {
 navbar.classList.remove('bg-dark/90', 'bg-blur', 'shadow-lg');
 }
 });
// 移动端菜单切换
 document.getElementById('mobile-menu-button').addEventListener('click', function() {
 const mobileMenu = document.getElementById('mobile-menu');
 mobileMenu.classList.toggle('hidden');
 });
// 平滑滚动
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
// 关闭移动端菜单
 document.getElementById('mobile-menu').classList.add('hidden');
const targetId = this.getAttribute('href');
 const targetElement = document.querySelector(targetId);
if (targetElement) {
 window.scrollTo({
 top: targetElement.offsetTop - 80,
 behavior: 'smooth'
 });
 }
 });
 });
// 作品集筛选功能
 const filterButtons = document.querySelectorAll('.filter-btn');
 const portfolioItems = document.querySelectorAll('.portfolio-item');
filterButtons.forEach(button => {
 button.addEventListener('click', () => {
 // 移除所有按钮的活动状态
 filterButtons.forEach(btn => btn.classList.remove('bg-primary'));
 filterButtons.forEach(btn => btn.classList.add('bg-gray-700'));
// 添加当前按钮的活动状态
 button.classList.remove('bg-gray-700');
 button.classList.add('bg-primary');
const filter = button.getAttribute('data-filter');
portfolioItems.forEach(item => {
 if (filter === 'all' || item.getAttribute('data-category') === filter) {
 item.style.display = 'block';
 } else {
 item.style.display = 'none';
 }
 });
 });
 });
// 联系表单提交
 document.getElementById('contact-form').addEventListener('submit', function(e) {
 e.preventDefault();
// 在实际应用中，这里应该有AJAX请求将表单数据发送到服务器
 // 这里仅做示例，显示提交成功消息
 const form = this;
 const submitButton = form.querySelector('button[type="submit"]');
 const originalText = submitButton.innerHTML;
// 显示加载状态
 submitButton.disabled = true;
 submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 发送中...';
// 模拟提交成功
 setTimeout(() => {
 alert('消息发送成功！我会尽快回复您。');
 form.reset();
// 恢复按钮状态
 submitButton.disabled = false;
 submitButton.innerHTML = originalText;
 }, 1500);
 });
// 作品详情页导航
 document.querySelectorAll('.portfolio-link').forEach(link => {
 link.addEventListener('click', function(e) {
 e.preventDefault();
// 获取链接的href属性
 const href = this.getAttribute('href');
// 实际项目中，这里应该是真实的页面导航
 // 为了演示，我们将创建一个简单的作品详情页
 showPortfolioDetail(href);
 });
 });
// 显示作品详情页
 function showPortfolioDetail(href) {
 // 解析作品ID
 const portfolioId = href.split('/')[1].replace('.html', '');
// 根据不同的作品ID显示不同的详情内容
 let title, category, description, images;
switch(portfolioId) {
 case 'ai-character-design':
 title = 'AI生成式角色设计';
 category = 'AIGC设计';
 description = `
 <p>这个项目探索了使用Stable Diffusion模型创建游戏角色概念设计的可能性。通过精心设计的提示词和模型参数调整，我能够生成具有独特风格和细节的角色设计。</p>
 <p>这个过程不仅节省了传统手绘角色的时间，还提供了更多创新的可能性。我可以快速生成多个设计方向，然后选择最佳方案进行细化和优化。</p>
 <p>技术栈：Stable Diffusion, Photoshop, Blender</p>
 `;
 images = [
 'https://picsum.photos/id/1015/1200/800',
 'https://picsum.photos/id/1016/1200/800',
 'https://picsum.photos/id/1018/1200/800'
 ];
 break;
case 'ai-ui-design':
 title = 'AI辅助UI界面设计';
 category = 'UI/UX';
 description = `
 <p>这个项目展示了如何使用AI工具辅助UI界面设计过程。通过输入特定的提示词和设计要求，AI可以生成初步的界面布局和设计元素，为设计师提供灵感和起点。</p>
 <p>我使用了多种AI设计工具，包括Midjourney和DALL-E，结合传统的设计工具如Figma，创建了这个移动应用界面。AI生成的设计被用作起点，然后我进行了人工调整和优化，确保最终设计符合用户体验原则和品牌风格。</p>
 <p>技术栈：Midjourney, DALL-E, Figma, Adobe XD</p>
 `;
 images = [
 'https://picsum.photos/id/1019/1200/800',
 'https://picsum.photos/id/1020/1200/800',
 'https://picsum.photos/id/1021/1200/800'
 ];
 break;
case 'generative-art-exhibition':
 title = '生成式艺术展览';
 category = '生成式艺术';
 description = `
 <p>这是一个基于GAN网络的抽象艺术作品系列，探索了人工智能与艺术创作的融合。通过训练GAN模型学习特定艺术风格，我能够生成具有独特视觉语言的艺术作品。</p>
 <p>这个系列的作品在2025年深圳当代艺术馆展出，获得了广泛好评。展览不仅展示了生成式艺术的美学价值，还探讨了AI在艺术创作中的角色和影响。</p>
 <p>技术栈：GAN, PyTorch, TensorFlow, Adobe Illustrator</p>
 `;
 images = [
 'https://picsum.photos/id/1039/1200/800',
 'https://picsum.photos/id/1040/1200/800',
 'https://picsum.photos/id/1041/1200/800'
 ];
 break;
default:
 title = '作品详情';
 category = 'AIGC设计';
 description = '<p>这是一个展示AI与设计融合的项目。</p>';
 images = ['https://picsum.photos/id/1015/1200/800'];
 }
// 创建作品详情页内容
 const detailContent = `
 <div id="portfolio-detail" class="fixed inset-0 z-50 overflow-y-auto bg-black/90 flex items-center justify-center p-4">
 <div class="bg-gray-900 rounded-xl max-w-5xl w-full max-h-[90vh] overflow-y-auto">
 <div class="p-6 flex justify-between items-center border-b border-gray-800">
 <h2 class="text-2xl font-bold">${title}</h2>
 <button id="close-detail" class="text-gray-400 hover:text-white">
 <i class="fa fa-times text-xl"></i>
 </button>
 </div>
 <div class="p-6">
 <span class="text-xs font-medium text-primary bg-primary/10 px-3 py-1 rounded-full">${category}</span>
 <div class="mt-6 space-y-6">
 ${images.map(img => `
 <img src="${img}" alt="${title}" class="w-full h-auto rounded-lg hover-scale">
 `).join('')}
 <div class="mt-8">
 ${description}
 </div>
 </div>
 </div>
 <div class="p-6 border-t border-gray-800 flex justify-between">
 <button id="back-to-portfolio" class="px-6 py-2 border border-primary rounded-full font-medium hover:bg-primary/10 transition">
 返回作品集
 </button>
 <div class="flex space-x-4">
 <a href="#" class="px-6 py-2 bg-primary rounded-full font-medium hover:bg-primary/90 transition">
 分享
 </a>
 <a href="#" class="px-6 py-2 bg-secondary rounded-full font-medium hover:bg-secondary/90 transition">
 下载
 </a>
 </div>
 </div>
 </div>
 </div>
 `;
// 将详情页内容添加到页面
 document.body.insertAdjacentHTML('beforeend', detailContent);
// 添加关闭详情页的事件监听
 document.getElementById('close-detail').addEventListener('click', function() {
 document.getElementById('portfolio-detail').remove();
 });
// 添加返回作品集的事件监听
 document.getElementById('back-to-portfolio').addEventListener('click', function() {
 document.getElementById('portfolio-detail').remove();
 });
// 点击背景也可以关闭详情页
 document.getElementById('portfolio-detail').addEventListener('click', function(e) {
 if (e.target === this) {
 this.remove();
 }
 });
// 阻止详情页内部的滚动传播到背景
 document.querySelector('#portfolio-detail > div').addEventListener('wheel', function(e) {
 e.stopPropagation();
 });
 }
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jan0726/sjifdf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>