<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth scroll-pt-24">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>郭林涛 - 个人作品集</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
},
colors: {
gray: {
850: '#1f2937',
900: '#111111',
950: '#0a0a0a',
},
primary: '#6366f1',
}
}
}
}
</script>
<style>
/* 微交互与平滑动画基础样式 */
body {
transition: background-color 0.3s ease, color 0.3s ease;
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.glass-card {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Linear 风格发光渐变 */
.hover-glow:hover {
box-shadow: 0 0 40px -10px rgba(99, 102, 241, 0.15);
}
.text-gradient {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 封面动态光晕动画 */
@keyframes pulse-bg {
0% { transform: scale(0.9) translate(0, 0); opacity: 0.3; }
50% { transform: scale(1.1) translate(2%, 2%); opacity: 0.6; }
100% { transform: scale(0.9) translate(-2%, -2%); opacity: 0.3; }
}
</style>
</head>
<body class="bg-[#fafafa] text-gray-900 dark:bg-gray-950 dark:text-gray-100 antialiased selection:bg-primary selection:text-white">
<!-- 导航栏 -->
<nav class="fixed w-full z-50 glass-card bg-white/70 dark:bg-gray-950/70 border-b border-gray-200/50 dark:border-gray-800/50 transition-colors duration-300">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex-shrink-0 font-bold text-xl tracking-tighter cursor-pointer" onclick="window.scrollTo(0,0)">
GLT<span class="text-primary">.</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#about" class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium">关于</a>
<a href="#projects" class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium">项目</a>
<a href="#experience" class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium">经历</a>
<a href="#skills" class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium">技能</a>
</div>
</div>
<div>
<button id="theme-toggle" class="p-2.5 rounded-full bg-gray-100 dark:bg-gray-800/80 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors focus:outline-none">
<i class="fas fa-moon text-gray-800 dark:text-gray-200 hidden dark:block text-sm" id="theme-toggle-light-icon"></i>
<i class="fas fa-sun text-gray-800 dark:text-gray-200 block dark:hidden text-sm" id="theme-toggle-dark-icon"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- 酷炫全屏封面区域 (Hero Section) -->
<section id="hero" class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8">
<!-- 背景动态光晕 -->
<div class="absolute inset-0 z-0 flex items-center justify-center pointer-events-none">
<div class="absolute w-[40rem] h-[40rem] bg-primary/20 rounded-full blur-[120px] mix-blend-normal dark:mix-blend-screen animate-[pulse-bg_8s_ease-in-out_infinite]"></div>
<div class="absolute w-[30rem] h-[30rem] bg-purple-500/20 rounded-full blur-[100px] mix-blend-normal dark:mix-blend-screen animate-[pulse-bg_12s_ease-in-out_infinite_reverse] ml-32 mt-32"></div>
</div>
<!-- 封面内容 -->
<div class="relative z-10 flex flex-col items-center text-center reveal active pt-16">
<div class="inline-flex items-center px-4 py-1.5 rounded-full bg-white/60 dark:bg-gray-900/60 backdrop-blur-md text-primary text-xs font-bold tracking-wide mb-8 border border-primary/20 shadow-sm">
<span class="w-2 h-2 rounded-full bg-primary mr-2 animate-pulse"></span>
AI Product Maker & Developer
</div>
<h1 class="text-6xl md:text-8xl lg:text-9xl font-extrabold tracking-tighter text-gray-900 dark:text-white mb-6 leading-tight">
Hi, 我是 <br class="md:hidden" /><span class="text-gradient">郭林涛</span>
</h1>
<p class="text-lg md:text-2xl text-gray-500 dark:text-gray-400 font-medium tracking-wide mb-12 max-w-2xl">
用 AI 重新定义工具与生活方式
</p>
<a href="#about" class="group relative inline-flex items-center justify-center px-8 py-4 font-bold text-white transition-all duration-300 bg-gray-900 dark:bg-white dark:text-gray-900 rounded-full hover:scale-105 hover:shadow-2xl hover:shadow-primary/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary overflow-hidden">
<span class="relative z-10 flex items-center tracking-wider">
快速了解我 <i class="fas fa-arrow-down ml-3 group-hover:translate-y-1 transition-transform duration-300"></i>
</span>
<div class="absolute inset-0 h-full w-full scale-0 rounded-full transition-all duration-300 group-hover:scale-100 group-hover:bg-primary/10"></div>
</a>
</div>
</section>
<!-- 详细介绍区域 (原英雄区域的介绍部分) -->
<section id="about" class="pt-24 pb-20 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto flex flex-col items-center justify-center reveal">
<h2 class="text-2xl md:text-3xl font-bold tracking-tight mb-8 text-gray-900 dark:text-white flex items-center">
<span class="w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center mr-3"><i class="fas fa-user text-sm text-gray-500 dark:text-gray-400"></i></span>
关于我
</h2>
<div class="flex flex-wrap justify-center gap-5 text-gray-500 dark:text-gray-400 text-sm md:text-base mb-10 font-medium">
<div class="flex items-center hover:text-primary transition-colors cursor-default"><i class="fas fa-phone mr-2"></i> +86 18510820272</div>
<div class="flex items-center hover:text-primary transition-colors cursor-pointer" onclick="openContactModal()"><i class="fas fa-envelope mr-2"></i> 18510820272@126.com</div>
<div class="flex items-center hover:text-primary transition-colors cursor-default"><i class="fas fa-location-dot mr-2"></i> 北京</div>
</div>
<div class="bg-white dark:bg-[#111] p-8 md:p-10 rounded-3xl border border-gray-200/60 dark:border-gray-800/60 shadow-xl shadow-gray-200/20 dark:shadow-none relative overflow-hidden">
<div class="absolute top-0 left-0 w-2 h-full bg-gradient-to-b from-primary to-purple-500"></div>
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 leading-relaxed font-light text-left md:text-center">
曾独立完成 <strong class="text-gray-900 dark:text-white font-medium">2个AI应用</strong> 从0到1原型开发与上线。深度实践 Trae、KimiCode、Google AI Studio、Coze、Gemini 等AI编码工具。对AI Coding工具的适用场景、能力边界及人机协作模式有简单认知。擅长将业务需求快速转化为AI解决方案，具备<strong class="text-gray-900 dark:text-white font-medium">B端工具化思维</strong>与<strong class="text-gray-900 dark:text-white font-medium">C端场景化嗅觉</strong>。
</p>
</div>
</section>
<!-- 项目经历 -->
<section id="projects" class="py-24 bg-white dark:bg-[#0a0a0a]">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between mb-16 reveal">
<h2 class="text-3xl font-bold tracking-tight">
精选项目
</h2>
<div class="h-px bg-gray-200 dark:bg-gray-800 flex-grow ml-8"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- 项目卡片 1 -->
<div class="group flex flex-col bg-gray-50 dark:bg-[#111] rounded-2xl border border-gray-200/50 dark:border-gray-800/50 hover:border-primary/50 dark:hover:border-primary/50 overflow-hidden hover-glow transition-all duration-300 reveal">
<div class="h-48 w-full overflow-hidden bg-gray-200 dark:bg-gray-800 relative">
<img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?auto=format&fit=crop&q=80&w=800" alt="Pet Match" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90 group-hover:opacity-100">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent mix-blend-multiply"></div>
</div>
<div class="p-8 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-4">
<h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">宠物八字相亲App</h3>
<span class="px-2.5 py-1 text-[10px] font-bold tracking-wider uppercase rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800/50">真机测试</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">基于传统八字命理的宠物社交匹配工具，帮助宠物主人为爱宠找到"命中注定"的伴侣。</p>
<ul class="text-sm space-y-3 mb-8 text-gray-700 dark:text-gray-300">
<li class="flex items-start"><i class="fas fa-check-circle text-primary mt-0.5 mr-2 opacity-80"></i> <span><strong>档案与配对：</strong>支持多宠物记录；八字分析生成评分与解读。</span></li>
<li class="flex items-start"><i class="fas fa-check-circle text-primary mt-0.5 mr-2 opacity-80"></i> <span><strong>运势与发情：</strong>每日一签、塔罗占卜；发情日历记录与提醒。</span></li>
<li class="flex items-start"><i class="fas fa-check-circle text-primary mt-0.5 mr-2 opacity-80"></i> <span><strong>亮点：</strong>解决自家猫咪发情痛点，3天完成MVP，独立全流程落地。</span></li>
</ul>
<div class="flex flex-wrap gap-2 mt-auto pt-4 border-t border-gray-200 dark:border-gray-800">
<span class="text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-2.5 py-1 rounded-md text-gray-600 dark:text-gray-300 font-medium">Claude Code (Swift)</span>
<span class="text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-2.5 py-1 rounded-md text-gray-600 dark:text-gray-300 font-medium">Kimi</span>
<span class="text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-2.5 py-1 rounded-md text-gray-600 dark:text-gray-300 font-medium">Gemini (Banana)</span>
</div>
</div>
</div>
<!-- 项目卡片 2 -->
<div class="group flex flex-col bg-gray-50 dark:bg-[#111] rounded-2xl border border-gray-200/50 dark:border-gray-800/50 hover:border-primary/50 dark:hover:border-primary/50 overflow-hidden hover-glow transition-all duration-300 reveal">
<div class="h-48 w-full overflow-hidden bg-gray-200 dark:bg-gray-800 relative">
<img src="https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&q=80&w=800" alt="AI Cocktail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90 group-hover:opacity-100">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent mix-blend-multiply"></div>
</div>
<div class="p-8 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white hover:text-primary transition-colors">
<a href="https://superapp.run/view/08a832c1-5861-4d23-93af-ece362d008c1" target="_blank" class="flex items-center gap-2">
情绪调酒师 <i class="fas fa-arrow-up-right-from-square text-sm opacity-60"></i>
</a>
</h3>
<span class="px-2.5 py-1 text-[10px] font-bold tracking-wider uppercase rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 border border-blue-200 dark:border-blue-800/50">已上线</span>
</div>
<p class="text-[11px] font-medium tracking-wider text-gray-500 uppercase mb-4">2025.12 · 独立设计与全栈开发</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">基于自然语言情绪识别的智能调酒推荐系统。结合调酒知识库生成个性化配方、调制指南及视觉氛围设计。</p>
<ul class="text-sm space-y-3 mb-8 text-gray-700 dark:text-gray-300">
<li class="flex items-start"><i class="fas fa-check-circle text-primary mt-0.5 mr-2 opacity-80"></i> <span><strong>知识构建：</strong>基于酒吧兼职经验，构建风味/酒精度/场景知识库。</span></li>
<li class="flex items-start"><i class="fas fa-check-circle text-primary mt-0.5 mr-2 opacity-80"></i> <span><strong>体验设计：</strong>设计情绪-色彩-风味映射算法，实现感官体验闭环。</span></li>
<li class="flex items-start"><i class="fas fa-check-circle text-primary mt-0.5 mr-2 opacity-80"></i> <span><strong>技术选型：</strong>前端Gemini 3 Pro交互，后端Google AI Studio搭建。</span></li>
</ul>
<div class="flex flex-wrap gap-2 mt-auto pt-4 border-t border-gray-200 dark:border-gray-800">
<span class="text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-2.5 py-1 rounded-md text-gray-600 dark:text-gray-300 font-medium">Trae</span>
<span class="text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-2.5 py-1 rounded-md text-gray-600 dark:text-gray-300 font-medium">Gemini 3 Pro</span>
<span class="text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-2.5 py-1 rounded-md text-gray-600 dark:text-gray-300 font-medium">Google AI Studio</span>
</div>
</div>
</div>
<!-- 项目卡片 3 -->
<div class="group flex flex-col bg-gray-50 dark:bg-[#111] rounded-2xl border border-gray-200/50 dark:border-gray-800/50 hover:border-primary/50 dark:hover:border-primary/50 overflow-hidden hover-glow transition-all duration-300 reveal">
<div class="h-48 w-full overflow-hidden bg-gray-200 dark:bg-gray-800 relative">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800" alt="Data Analytics" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90 group-hover:opacity-100">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent mix-blend-multiply"></div>
</div>
<div class="p-8 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-2">
<h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">可视化数据分析工具</h3>
<span class="px-2.5 py-1 text-[10px] font-bold tracking-wider uppercase rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400 border border-purple-200 dark:border-purple-800/50">企业采纳</span>
</div>
<p class="text-[11px] font-medium tracking-wider text-gray-500 uppercase mb-4">2025.08 - 2025.12 · 专利预警咨询公司</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">直击业务部门的痛点（主要为评专利奖汇报用），策划"Excel智能分析助手"，支持一键导入并自动生成可视化图表与分析报告。</p>
<ul class="text-sm space-y-3 mb-8 text-gray-700 dark:text-gray-300">
<li class="flex items-start"><i class="fas fa-check-circle text-primary mt-0.5 mr-2 opacity-80"></i> <span><strong>实现：</strong>直接使用 Gemini 3 Pro 快速搭建Web应用原型，全流程自动化。</span></li>
<li class="flex items-start"><i class="fas fa-check-circle text-primary mt-0.5 mr-2 opacity-80"></i> <span><strong>落地：</strong>被部门领导正式采纳并内部推广，桥接业务语言与技术实现。</span></li>
</ul>
<div class="flex flex-wrap gap-2 mt-auto pt-4 border-t border-gray-200 dark:border-gray-800">
<span class="text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-2.5 py-1 rounded-md text-gray-600 dark:text-gray-300 font-medium">Gemini 3 Pro</span>
</div>
</div>
</div>
<!-- 项目卡片 4 -->
<div class="group flex flex-col bg-gray-50 dark:bg-[#111] rounded-2xl border border-gray-200/50 dark:border-gray-800/50 hover:border-primary/50 dark:hover:border-primary/50 overflow-hidden hover-glow transition-all duration-300 reveal">
<div class="h-48 w-full overflow-hidden bg-gray-200 dark:bg-gray-800 relative">
<img src="https://images.unsplash.com/photo-1507838153414-b4b713384a76?auto=format&fit=crop&q=80&w=800" alt="Music and CRM" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90 group-hover:opacity-100">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent mix-blend-multiply"></div>
</div>
<div class="p-8 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-6">
<h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">AI 工具链探索</h3>
<span class="px-2.5 py-1 text-[10px] font-bold tracking-wider uppercase rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 border border-amber-200 dark:border-amber-800/50">研发中</span>
</div>
<div class="space-y-6">
<div>
<strong class="text-sm block mb-1.5 text-gray-900 dark:text-gray-200">合唱团 MusicXML 转换工具：</strong>
<p class="text-sm text-gray-600 dark:text-gray-400">针对合唱团五线谱转简谱痛点，使用Trae、KimiCode探索AI端到端开发，优化输出排版逻辑。</p>
</div>
<div class="h-px w-full bg-gray-200 dark:bg-gray-800"></div>
<div>
<strong class="text-sm block mb-1.5 text-gray-900 dark:text-gray-200">家庭企业 CRM 自动化：</strong>
<p class="text-sm text-gray-600 dark:text-gray-400">基于Coze平台搭建B端客户管理工作流，探索大模型在中小企业降本增效的应用落地。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 经历区域 -->
<section id="experience" class="py-24 bg-[#fafafa] dark:bg-gray-950 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">
<!-- 实习经历 -->
<div class="reveal">
<h2 class="text-2xl font-bold mb-10 flex items-center tracking-tight">
<span class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center mr-3"><i class="fas fa-briefcase text-sm"></i></span>
实习经历
</h2>
<div class="space-y-6 relative before:absolute before:inset-0 before:ml-2 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-[1px] before:bg-gradient-to-b before:from-transparent before:via-gray-300 dark:before:via-gray-800 before:to-transparent">
<div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
<div class="flex items-center justify-center w-4 h-4 rounded-full border-[3px] border-primary bg-white dark:bg-gray-950 shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10 shadow-sm shadow-primary/30"></div>
<div class="w-[calc(100%-2rem)] md:w-[calc(50%-1.5rem)] p-5 hover:bg-white dark:hover:bg-gray-900/50 rounded-xl hover:shadow-lg hover:shadow-gray-200/50 dark:hover:shadow-black/20 transition-all border border-transparent hover:border-gray-200/50 dark:hover:border-gray-800/50">
<h4 class="font-bold text-gray-900 dark:text-white mb-1">北京国知专利预警咨询有限公司</h4>
<div class="text-[11px] font-semibold text-primary uppercase tracking-wider mb-3">财务助理 · 2025.11 - 2026.01</div>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">支持专利财务数据治理，熟练使用Excel与Tableau清洗数据。开发数据可视化报告工具，找出审计报告5+处关键数据错误。</p>
</div>
</div>
<div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
<div class="flex items-center justify-center w-4 h-4 rounded-full border-[3px] border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10"></div>
<div class="w-[calc(100%-2rem)] md:w-[calc(50%-1.5rem)] p-5 hover:bg-white dark:hover:bg-gray-900/50 rounded-xl hover:shadow-lg hover:shadow-gray-200/50 dark:hover:shadow-black/20 transition-all border border-transparent hover:border-gray-200/50 dark:hover:border-gray-800/50">
<h4 class="font-bold text-gray-900 dark:text-white mb-1">北京众德仕和会计师事务所</h4>
<div class="text-[11px] font-semibold text-gray-500 uppercase tracking-wider mb-3">审计实习生 · 2024.07 - 2024.08</div>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">参与企业财务合规审计及公司注销流程。</p>
</div>
</div>
<div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
<div class="flex items-center justify-center w-4 h-4 rounded-full border-[3px] border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10"></div>
<div class="w-[calc(100%-2rem)] md:w-[calc(50%-1.5rem)] p-5 hover:bg-white dark:hover:bg-gray-900/50 rounded-xl hover:shadow-lg hover:shadow-gray-200/50 dark:hover:shadow-black/20 transition-all border border-transparent hover:border-gray-200/50 dark:hover:border-gray-800/50">
<h4 class="font-bold text-gray-900 dark:text-white mb-1">大唐商业保理有限公司</h4>
<div class="text-[11px] font-semibold text-gray-500 uppercase tracking-wider mb-3">财务实习生 · 2023.07 - 2023.08</div>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">处理资金结算系统对账，建立对金融系统数据流的基础认知。</p>
</div>
</div>
</div>
</div>
<!-- 在校经历 & 教育背景 -->
<div class="reveal space-y-16">
<div>
<h2 class="text-2xl font-bold mb-8 flex items-center tracking-tight">
<span class="w-8 h-8 rounded-lg bg-purple-500/10 text-purple-500 flex items-center justify-center mr-3"><i class="fas fa-graduation-cap text-sm"></i></span>
教育背景
</h2>
<div class="bg-white dark:bg-[#111] p-6 rounded-2xl border border-gray-200/80 dark:border-gray-800/80 shadow-sm">
<div class="flex justify-between items-start mb-1">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">北京工商大学</h3>
<span class="text-[11px] font-medium text-gray-500 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">2022.09 - 2026.06</span>
</div>
<p class="text-purple-600 dark:text-purple-400 font-medium text-sm mb-4">会计学 本科</p>
<ul class="text-sm text-gray-600 dark:text-gray-400 space-y-2">
<li><strong class="text-gray-900 dark:text-gray-300">核心课程：</strong>财务管理、审计、数据分析基础</li>
<li><strong class="text-gray-900 dark:text-gray-300">认证与培训：</strong>IBM数据分析证书（Coursera）、持续自学AI产品方法论</li>
</ul>
</div>
</div>
<div>
<h2 class="text-2xl font-bold mb-8 flex items-center tracking-tight">
<span class="w-8 h-8 rounded-lg bg-pink-500/10 text-pink-500 flex items-center justify-center mr-3"><i class="fas fa-users text-sm"></i></span>
在校经历
</h2>
<div class="space-y-4">
<div class="group bg-white dark:bg-[#111] p-5 rounded-2xl border border-gray-200/80 dark:border-gray-800/80 hover:border-pink-500/30 dark:hover:border-pink-500/30 transition-colors shadow-sm">
<div class="flex justify-between items-center mb-2">
<h4 class="font-bold text-gray-900 dark:text-white">学生合唱团 团长</h4>
<span class="text-[10px] text-gray-400 font-medium uppercase tracking-wider">2024.06 - 2025.06</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">带领60人团队获北京市大学生艺术节银奖，统筹预算与排期。主导"AI+音乐"工具探索项目。</p>
</div>
<div class="group bg-white dark:bg-[#111] p-5 rounded-2xl border border-gray-200/80 dark:border-gray-800/80 hover:border-pink-500/30 dark:hover:border-pink-500/30 transition-colors shadow-sm">
<div class="flex justify-between items-center mb-2">
<h4 class="font-bold text-gray-900 dark:text-white">商学院文艺部 部长</h4>
<span class="text-[10px] text-gray-400 font-medium uppercase tracking-wider">2023.06 - 2024.06</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">策划执行500+人规模校园艺术展演，负责产品化思维的活动策划与物料制作（PS/PR）。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 技能与工具栈 -->
<section id="skills" class="py-24 bg-white dark:bg-[#0a0a0a] reveal border-t border-gray-100 dark:border-gray-900">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white mb-4">技能与工具栈</h2>
<p class="text-gray-500 dark:text-gray-400">持续探索前沿工具边界，将想法转化为现实落地</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- AI Tools -->
<div class="bg-gray-50 dark:bg-[#111] p-8 rounded-3xl border border-gray-200/60 dark:border-gray-800/60 hover:shadow-xl dark:hover:shadow-primary/5 transition-all duration-300">
<div class="w-12 h-12 bg-primary text-white rounded-2xl flex items-center justify-center mb-6 text-xl shadow-lg shadow-primary/20">
<i class="fas fa-brain"></i>
</div>
<h3 class="text-lg font-bold mb-3 text-gray-900 dark:text-white">AI 产品工具</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6 line-clamp-2">重度实践者，涵盖代码生成、视频创作与音频处理：</p>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">Trae</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">KimiCode</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">Coze</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">Google AI Studio</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">Gemini 3 Pro</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">Claude Code</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">即梦ai</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">museai</span>
</div>
</div>
<!-- Design & Content -->
<div class="bg-gray-50 dark:bg-[#111] p-8 rounded-3xl border border-gray-200/60 dark:border-gray-800/60 hover:shadow-xl dark:hover:shadow-pink-500/5 transition-all duration-300">
<div class="w-12 h-12 bg-pink-500 text-white rounded-2xl flex items-center justify-center mb-6 text-xl shadow-lg shadow-pink-500/20">
<i class="fas fa-pen-nib"></i>
</div>
<h3 class="text-lg font-bold mb-3 text-gray-900 dark:text-white">产品设计与内容</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-6">深度使用于学校大型活动视觉输出与自媒体运营：</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">Photoshop</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">Premiere</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">剪映 / 达芬奇</span>
<span class="px-3 py-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs font-medium rounded-lg text-gray-700 dark:text-gray-300">Figma (基础)</span>
</div>
<div class="p-4 bg-white dark:bg-gray-800/50 rounded-xl border border-gray-100 dark:border-gray-700/50 flex items-start">
<i class="fab fa-xiaohongshu text-red-500 mt-1 mr-3"></i>
<p class="text-xs text-gray-600 dark:text-gray-300 leading-relaxed">小红书自媒体运营：单篇阅读量最高 <strong class="text-gray-900 dark:text-white">9w+</strong>，点赞最高 <strong class="text-gray-900 dark:text-white">3k+</strong>，无千粉以下低迷数据。</p>
</div>
</div>
<!-- Languages -->
<div class="bg-gray-50 dark:bg-[#111] p-8 rounded-3xl border border-gray-200/60 dark:border-gray-800/60 hover:shadow-xl dark:hover:shadow-emerald-500/5 transition-all duration-300 flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 rounded-full flex items-center justify-center mb-6 text-2xl border border-emerald-200 dark:border-emerald-800">
<i class="fas fa-language"></i>
</div>
<div class="text-5xl font-extrabold text-gray-900 dark:text-white tracking-tighter mb-2">6.0</div>
<div class="text-xs font-bold text-gray-400 uppercase tracking-[0.2em] mb-6">雅思 IELTS</div>
<div class="px-5 py-2.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm">
阅读单项 <span class="text-emerald-600 dark:text-emerald-400 font-bold ml-1 text-base">7.0</span>
</div>
</div>
</div>
</div>
</section>
<!-- 底部信息 -->
<footer class="bg-white dark:bg-[#050505] py-12 border-t border-gray-200/60 dark:border-gray-900 text-center">
<div class="max-w-6xl mx-auto px-4 flex flex-col items-center">
<h2 class="text-2xl font-bold mb-6 tracking-tighter text-gray-900 dark:text-white">GLT<span class="text-primary">.</span></h2>
<div class="flex space-x-4 md:space-x-6 mb-8">
<button onclick="openContactModal()" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-900 flex items-center justify-center text-gray-500 hover:text-primary hover:bg-primary/10 dark:hover:text-primary dark:hover:bg-primary/20 transition-all">
<span class="sr-only">Phone</span>
<i class="fas fa-phone"></i>
</button>
<button onclick="openContactModal()" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-900 flex items-center justify-center text-gray-500 hover:text-primary hover:bg-primary/10 dark:hover:text-primary dark:hover:bg-primary/20 transition-all">
<span class="sr-only">Email</span>
<i class="fas fa-envelope"></i>
</button>
<button onclick="openContactModal()" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-900 flex items-center justify-center text-[#07C160] hover:bg-[#07C160]/10 dark:hover:bg-[#07C160]/20 transition-all">
<span class="sr-only">WeChat</span>
<i class="fab fa-weixin text-lg"></i>
</button>
<button onclick="openContactModal()" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-900 flex items-center justify-center text-[#FF2442] hover:bg-[#FF2442]/10 dark:hover:bg-[#FF2442]/20 transition-all">
<span class="sr-only">Xiaohongshu</span>
<span class="font-bold text-[9px] tracking-tighter whitespace-nowrap">小红书</span>
</button>
</div>
<p class="text-xs font-medium text-gray-400 tracking-wide uppercase">
© 2026 郭林涛. All rights reserved.
</p>
</div>
</footer>
<!-- Contact Modal 交互弹窗 -->
<div id="contact-modal" class="fixed inset-0 z-[100] hidden items-center justify-center">
<div class="absolute inset-0 bg-gray-900/40 backdrop-blur-sm transition-opacity opacity-0" id="contact-modal-backdrop" onclick="closeContactModal()"></div>
<div class="relative bg-white dark:bg-[#111] p-8 rounded-3xl border border-gray-200/50 dark:border-gray-800/50 shadow-2xl max-w-sm w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="contact-modal-content">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white tracking-tight">联系方式</h3>
<button onclick="closeContactModal()" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-3">
<div class="flex items-center p-4 bg-gray-50 dark:bg-[#1a1a1a] rounded-2xl border border-gray-100 dark:border-gray-800/80">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 shrink-0">
<i class="fas fa-phone"></i>
</div>
<div>
<p class="text-[11px] text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-0.5">电话</p>
<p class="text-gray-900 dark:text-white font-bold tracking-wide">18510820272</p>
</div>
</div>
<div class="flex items-center p-4 bg-gray-50 dark:bg-[#1a1a1a] rounded-2xl border border-gray-100 dark:border-gray-800/80">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 shrink-0">
<i class="fas fa-envelope"></i>
</div>
<div>
<p class="text-[11px] text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-0.5">邮箱</p>
<p class="text-gray-900 dark:text-white font-bold tracking-wide">18510820272@126.com</p>
</div>
</div>
<div class="flex items-center p-4 bg-gray-50 dark:bg-[#1a1a1a] rounded-2xl border border-gray-100 dark:border-gray-800/80">
<div class="w-10 h-10 rounded-full bg-[#07C160]/10 flex items-center justify-center text-[#07C160] mr-4 shrink-0">
<i class="fab fa-weixin text-lg"></i>
</div>
<div>
<p class="text-[11px] text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-0.5">微信</p>
<p class="text-gray-900 dark:text-white font-bold tracking-wide">18510820272</p>
</div>
</div>
<div class="flex items-center p-4 bg-gray-50 dark:bg-[#1a1a1a] rounded-2xl border border-gray-100 dark:border-gray-800/80">
<div class="w-10 h-10 rounded-full bg-[#FF2442]/10 flex items-center justify-center text-[#FF2442] mr-4 shrink-0">
<span class="font-bold text-[9px] whitespace-nowrap">小红书</span>
</div>
<div>
<p class="text-[11px] text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-0.5">小红书号</p>
<p class="text-gray-900 dark:text-white font-bold tracking-wide">674134176</p>
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript 交互与功能 -->
<script>
// 深色/浅色模式切换逻辑
const themeToggleBtn = document.getElementById('theme-toggle');
const html = document.documentElement;
// 检查本地存储或系统默认设置
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
html.classList.add('dark');
} else {
html.classList.remove('dark');
}
themeToggleBtn.addEventListener('click', () => {
html.classList.toggle('dark');
if (html.classList.contains('dark')) {
localStorage.theme = 'dark';
} else {
localStorage.theme = 'light';
}
});
// 滚动淡入动画 (Intersection Observer)
const revealElements = document.querySelectorAll('.reveal');
const revealObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, {
root: null,
threshold: 0.1,
rootMargin: "0px 0px -40px 0px"
});
revealElements.forEach(el => revealObserver.observe(el));
// 弹窗控制逻辑
const contactModal = document.getElementById('contact-modal');
const contactModalContent = document.getElementById('contact-modal-content');
const contactModalBackdrop = document.getElementById('contact-modal-backdrop');
function openContactModal() {
contactModal.classList.remove('hidden');
contactModal.classList.add('flex');
// 延时触发动画以呈现弹窗过渡效果
setTimeout(() => {
contactModalBackdrop.classList.remove('opacity-0');
contactModalBackdrop.classList.add('opacity-100');
contactModalContent.classList.remove('scale-95', 'opacity-0');
contactModalContent.classList.add('scale-100', 'opacity-100');
}, 10);
}
function closeContactModal() {
contactModalBackdrop.classList.remove('opacity-100');
contactModalBackdrop.classList.add('opacity-0');
contactModalContent.classList.remove('scale-100', 'opacity-100');
contactModalContent.classList.add('scale-95', 'opacity-0');
// 等待动画结束后隐藏DOM元素
setTimeout(() => {
contactModal.classList.add('hidden');
contactModal.classList.remove('flex');
}, 300);
}
</script>
</body>
</html>