<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>张家旺 · 生成式AI应用专家 · Python自动化架构师 · WEB全栈工程师</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #05070c;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Microsoft YaHei', sans-serif;
color: #eef2fb;
line-height: 1.6;
scroll-behavior: smooth;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
background: radial-gradient(circle at 20% 30%, rgba(0, 100, 200, 0.08) 0%, transparent 50%),
radial-gradient(circle at 85% 70%, rgba(0, 200, 255, 0.05) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
body::after {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(0, 162, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 162, 255, 0.08) 1px, transparent 1px);
background-size: 45px 45px;
pointer-events: none;
z-index: 0;
opacity: 0.3;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 28px;
position: relative;
z-index: 2;
}
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
padding: 2rem 0;
}
.hero .glow-orbit {
position: absolute;
width: 500px;
height: 500px;
background: conic-gradient(from 0deg, rgba(0,162,255,0.1), rgba(99,210,255,0.2), rgba(0,162,255,0.1));
border-radius: 50%;
filter: blur(70px);
opacity: 0.5;
z-index: -1;
animation: slowRotate 24s infinite linear;
}
@keyframes slowRotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.hero .avatar-wrapper {
width: 200px;
height: 200px;
margin: 0 auto 1.5rem auto;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(0, 162, 255, 0.5);
box-shadow: 0 0 20px rgba(0, 162, 255, 0.3);
transition: transform 0.3s ease;
opacity: 0;
animation: fadeUp 1s 0.1s forwards;
}
.hero .avatar {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero .avatar-wrapper:hover {
transform: scale(1.02);
border-color: #00a2ff;
box-shadow: 0 0 28px rgba(0, 162, 255, 0.5);
}
.hero h1 {
font-size: 5rem;
font-weight: 700;
background: linear-gradient(135deg, #FFFFFF, #7ad0ff, #00a2ff);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmer 6s infinite linear;
margin-bottom: 1rem;
letter-spacing: -0.02em;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards, shimmer 8s infinite 1s;
}
@keyframes shimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero .badge {
display: inline-block;
background: rgba(0, 162, 255, 0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(0, 162, 255, 0.3);
padding: 6px 18px;
border-radius: 60px;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.3px;
margin-bottom: 1.8rem;
color: #a0d4ff;
opacity: 0;
animation: fadeUp 0.8s 0.2s forwards;
}
.hero p {
font-size: 1.5rem;
font-weight: 400;
color: #ccdeff;
margin-bottom: 2.5rem;
max-width: 700px;
backdrop-filter: blur(2px);
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s 0.4s forwards;
}
.hero .btn {
background: linear-gradient(105deg, #0077ff, #00aeff);
padding: 14px 44px;
border-radius: 60px;
border: none;
font-weight: 600;
font-size: 1.05rem;
color: #fff;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: 0 10px 25px -5px rgba(0, 162, 255, 0.4);
backdrop-filter: blur(4px);
display: inline-flex;
align-items: center;
gap: 10px;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s 0.7s forwards;
}
.hero .btn i {
font-size: 1rem;
transition: transform 0.3s;
}
.hero .btn:hover {
transform: translateY(-4px);
box-shadow: 0 20px 30px -10px rgba(0, 162, 255, 0.6);
background: linear-gradient(105deg, #1a88ff, #22bdff);
}
.hero .btn:hover i {
transform: translateY(2px);
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
section {
margin: 130px 0 140px;
opacity: 0;
transform: translateY(40px);
transition: all 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
section.active {
opacity: 1;
transform: translateY(0);
}
.section-title {
font-size: 2.5rem;
font-weight: 600;
letter-spacing: -0.01em;
background: linear-gradient(to right, #e0f0ff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 3rem;
display: inline-block;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 60%;
height: 3px;
background: linear-gradient(90deg, #00a2ff, #63d2ff, transparent);
border-radius: 4px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.info-card, .glass-panel {
background: rgba(12, 20, 32, 0.55);
backdrop-filter: blur(12px);
border: 1px solid rgba(48, 108, 180, 0.25);
border-radius: 28px;
padding: 28px 26px;
transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.info-card:hover {
border-color: rgba(0, 162, 255, 0.5);
transform: translateY(-6px);
background: rgba(18, 28, 45, 0.7);
box-shadow: 0 22px 40px rgba(0, 162, 255, 0.15);
}
.info-card h3 {
font-size: 1.45rem;
font-weight: 600;
margin-bottom: 1rem;
color: #c6e2ff;
letter-spacing: -0.2px;
display: flex;
align-items: center;
gap: 8px;
}
.info-card p {
color: #b9cef0;
margin-bottom: 8px;
font-size: 0.98rem;
display: flex;
align-items: center;
gap: 8px;
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 10px;
}
.skill-tag {
background: rgba(0, 162, 255, 0.08);
border: 1px solid rgba(0, 162, 255, 0.25);
backdrop-filter: blur(4px);
padding: 6px 18px;
border-radius: 40px;
font-size: 0.85rem;
font-weight: 500;
color: #cfe5ff;
transition: all 0.25s;
}
.skill-tag:hover {
background: rgba(0, 162, 255, 0.25);
border-color: #00a2ff;
color: white;
transform: scale(1.02);
}
.timeline {
position: relative;
padding-left: 32px;
}
.timeline::before {
content: '';
position: absolute;
left: 8px;
top: 12px;
width: 2px;
height: calc(100% - 20px);
background: linear-gradient(180deg, #00a2ff, #2f6ea0, transparent);
border-radius: 2px;
}
.timeline-item {
position: relative;
margin-bottom: 48px;
padding-left: 20px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -26px;
top: 6px;
width: 14px;
height: 14px;
background: #00a2ff;
border-radius: 50%;
box-shadow: 0 0 12px #00a2ff, 0 0 4px #fff;
border: 2px solid rgba(20, 30, 45, 0.8);
}
.timeline-date {
font-size: 0.9rem;
font-weight: 500;
color: #7bc3ff;
letter-spacing: 0.3px;
margin-bottom: 8px;
}
.timeline-item h3 {
font-size: 1.35rem;
font-weight: 600;
margin-bottom: 12px;
color: #eef5ff;
}
.timeline-item p {
color: #b9cef0;
line-height: 1.6;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 28px;
}
.gallery-card {
background: rgba(8, 16, 28, 0.6);
backdrop-filter: blur(8px);
border-radius: 24px;
border: 1px solid rgba(0, 162, 255, 0.2);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
cursor: pointer;
}
.gallery-card:hover {
transform: translateY(-8px) scale(1.02);
border-color: #00a2ff;
box-shadow: 0 25px 35px -12px rgba(0, 162, 255, 0.3);
}
.gallery-img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.5s ease;
background: linear-gradient(145deg, #101826, #1b253a);
}
.gallery-card:hover .gallery-img {
transform: scale(1.05);
}
.gallery-caption {
padding: 16px 18px;
font-size: 0.9rem;
font-weight: 500;
color: #cbe1fe;
border-top: 1px solid rgba(0,162,255,0.2);
background: rgba(0, 0, 0, 0.2);
}
.about-card {
background: linear-gradient(125deg, rgba(0, 162, 255, 0.05), rgba(5, 20, 35, 0.6));
border-left: 4px solid #00a2ff;
}
.contact {
text-align: center;
background: rgba(8, 18, 32, 0.4);
backdrop-filter: blur(16px);
border-radius: 64px;
padding: 48px 32px;
margin-top: 90px;
border: 1px solid rgba(0, 162, 255, 0.25);
}
.contact .contact-links {
display: flex;
justify-content: center;
gap: 42px;
flex-wrap: wrap;
margin-top: 32px;
}
.contact a {
color: #cce4ff;
text-decoration: none;
font-size: 1.2rem;
font-weight: 500;
background: rgba(0, 162, 255, 0.1);
padding: 12px 28px;
border-radius: 60px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(0, 162, 255, 0.2);
}
.contact a i {
font-size: 1.3rem;
}
.contact a:hover {
background: #00a2ff;
color: #05070c;
border-color: transparent;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 162, 255, 0.4);
}
.back2top {
position: fixed;
bottom: 30px;
right: 30px;
background: rgba(0, 162, 255, 0.2);
backdrop-filter: blur(8px);
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
border: 1px solid rgba(0, 162, 255, 0.5);
z-index: 99;
color: #00a2ff;
font-size: 1.4rem;
}
.back2top.show {
opacity: 1;
visibility: visible;
}
.back2top:hover {
background: #00a2ff;
color: #0a0f1a;
transform: translateY(-5px);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #0a101c;
}
::-webkit-scrollbar-thumb {
background: #00a2ff;
border-radius: 20px;
}
@media (max-width: 780px) {
.hero h1 { font-size: 3rem; }
.hero p { font-size: 1.2rem; }
.section-title { font-size: 2rem; }
.container { padding: 0 20px; }
.contact .contact-links { gap: 18px; }
.contact a { padding: 8px 20px; font-size: 0.9rem; }
.gallery-grid { gap: 20px; }
}
</style>
</head>
<body>
<div class="container">
<div class="hero">
<div class="glow-orbit" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
<div class="badge">
<i class="fas fa-microchip"></i> 生成式AI应用专家 · Python自动化架构师 · WEB全栈工程师
</div>
<div class="avatar-wrapper">
<img class="avatar" src="imgs/head.png" alt="张家旺头像">
</div>
<h1>张家旺</h1>
<p>生成式AI应用专家 · Python自动化架构师 · WEB全栈工程师</p>
<button class="btn" onclick="scrollToContent()">
<i class="fas fa-arrow-down"></i> 探索履历
</button>
</div>
<section id="about">
<h2 class="section-title"><i class="fas fa-user-astronaut"></i> 个人信息</h2>
<div class="info-grid">
<div class="info-card"><h3><i class="fas fa-id-card"></i> 基本资料</h3>
<p><i class="fas fa-birthday-cake"></i> 出生：1997.02</p>
<p><i class="fas fa-map-marker-alt"></i> 现居：重庆两江新区</p>
<p><i class="fas fa-graduation-cap"></i> 学历：重庆工商大学 本科</p>
</div>
<div class="info-card"><h3><i class="fas fa-address-book"></i> 联系方式</h3>
<p><i class="fas fa-phone-alt"></i> 手机：13038360154</p>
<p><i class="fas fa-envelope"></i> 邮箱：1593324992@qq.com</p>
<p><i class="fab fa-weixin"></i> 微信：13038360154</p>
</div>
<div class="info-card"><h3><i class="fas fa-bolt"></i> 核心优势</h3>
<p>✅ 生成式AI全栈落地</p>
<p>✅ 自动化工程与低代码</p>
<p>✅ Azure云平台专家 · RAG & Agent</p>
</div>
</div>
</section>
<section id="skills">
<h2 class="section-title"><i class="fas fa-code"></i> 技能与证书</h2>
<div class="info-card">
<h3><i class="fas fa-laptop-code"></i> 技术栈</h3>
<div class="skill-tags">
<span class="skill-tag">Python</span><span class="skill-tag">FastAPI</span>
<span class="skill-tag">Vue3/React</span><span class="skill-tag">生成式AI</span>
<span class="skill-tag">RAG</span><span class="skill-tag">Agent</span>
<span class="skill-tag">Azure</span><span class="skill-tag">Docker</span>
<span class="skill-tag">低代码</span><span class="skill-tag">LangChain</span>
</div>
</div>
<div class="info-card" style="margin-top:24px;">
<h3><i class="fas fa-award"></i> 证书与荣誉</h3>
<p>🏅 软件设计师、Azure全系列认证 (AI-102, AZ-305, DP-600等)</p>
<p>🏅 社内AI应用专家 · 技术革新奖 · 五年功勋奖</p>
<p>🌐 语言：英语、日语N3、普通话</p>
</div>
</section>
<section id="experience">
<h2 class="section-title"><i class="fas fa-briefcase"></i> 工作经历</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date"><i class="far fa-calendar-alt"></i> 2021.08 - 至今 | 北京富士系统工程有限公司重庆分公司</div>
<h3>软件工程师 / AI应用专家</h3>
<p>负责业务自动化、AI可视化、生成式AI平台建设；主导研发体系优化、流程标准化、AI能力规模化落地，累计降本超17%。构建内部AI生态，推动多个业务线智能化转型。</p>
</div>
</div>
</section>
<section id="projects">
<h2 class="section-title"><i class="fas fa-rocket"></i> 核心项目</h2>
<div class="timeline">
<div class="timeline-item"><div class="timeline-date">2024.03 - 至今 | 社内AI推进（AI应用专家）</div>
<p>自研AI custom robot、AgentBase平台，集成27个MCP工具；员工使用率80%，落地代码审查、文档审核等场景，培养5-10名AI人才。</p>
</div>
<div class="timeline-item"><div class="timeline-date">2023.10 - 2026.04 | FRDC技术支援（项目管理者）</div>
<p>搭建自研项目规范体系，Docker复用率85%；带领小团队完成12个AI Demo，成本控制至65%-70%，客户满意度95%+。</p>
</div>
<div class="timeline-item"><div class="timeline-date">2021.08 - 2023.12 | DSPU保守（项目组长）</div>
<p>电子签名系统自动化改造，人月从72降至48，节省17%成本；每月释放2人力，实现全流程自动化。</p>
</div>
</div>
</section>
<section id="certificates">
<h2 class="section-title"><i class="fas fa-certificate"></i> 认证墙</h2>
<div class="gallery-grid">
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/01.png" alt="JLPT.N3证书"><div class="gallery-caption">🇯🇵 JLPT.N3</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/02.png" alt="技术革新奖"><div class="gallery-caption">🏆 技术应用革新奖</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/03.png" alt="软考中级"><div class="gallery-caption">📘 软考中级设计师</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/04.png" alt="AI-102"><div class="gallery-caption">☁️ AI-102 Microsoft AI工程师</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/05.png" alt="AZ-305"><div class="gallery-caption">⚙️ AZ-305 解决方案架构师</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/06.png" alt="DP-600"><div class="gallery-caption">📊 DP-600 平台架构师</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/07.png" alt="AZ-104"><div class="gallery-caption">🛠️ AZ-104 Azure管理者</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/08.png" alt="AZ-204"><div class="gallery-caption">💻 AZ-204 开发者认证</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/09.png" alt="DP-100"><div class="gallery-caption">🧠 DP-100 数据分析师</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/10.png" alt="DP-300"><div class="gallery-caption">🗄️ DP-300 数据管理员</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/certs/11.png" alt="AZ-400"><div class="gallery-caption">🚀 AZ-400 DevOps专家</div></div>
</div>
</section>
<section id="portfolio">
<h2 class="section-title"><i class="fas fa-cubes"></i> 创新作品集</h2>
<div class="gallery-grid">
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/01.png" alt="AI画像生成"><div class="gallery-caption">🎨 AI画像生成 (Gradio)</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/02.png" alt="广告生成"><div class="gallery-caption">📢 智能广告生成 (Gradio)</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/03.png" alt="智能数据助手"><div class="gallery-caption">🤖 智能数据助手 (Streamlit)</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/04.png" alt="交通映像监视"><div class="gallery-caption">🚦 交通映像监视 (Vue3+FastAPI)</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/05.png" alt="交通事故分析"><div class="gallery-caption">📉 交通事故分析系统</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/06.png" alt="BBOX标注"><div class="gallery-caption">✏️ BBOX数据标记辅助</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/07.png" alt="物体合成置换"><div class="gallery-caption">🖼️ 物体合成置换 (React+Vue)</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/08.png" alt="来店者行动分析"><div class="gallery-caption">👥 来店者行动分析平台</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/09.png" alt="QA标记助手"><div class="gallery-caption">📋 QA任务标记助手</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/10.png" alt="OCR Demo"><div class="gallery-caption">🔍 OCR智能识别Demo</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/11.png" alt="道路补全"><div class="gallery-caption">🛣️ 道路补全AI Demo</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/12.png" alt="时间序列预测"><div class="gallery-caption">📈 时序预测+FastAPI</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/13.png" alt="AIToolBox"><div class="gallery-caption">🧰 AI ToolBox (C# + Gemini)</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/14.png" alt="AI Custom robot"><div class="gallery-caption">🤖 AI Custom Robot (RAG架构)</div></div>
<div class="gallery-card"><img class="gallery-img" src="imgs/portfolio/15.png" alt="Agent Base"><div class="gallery-caption">⚡ Agent Base (MCP+多智能体)</div></div>
</div>
</section>
<section id="about-me">
<h2 class="section-title"><i class="fas fa-feather-alt"></i> 关于我</h2>
<div class="info-card about-card">
<p>计算机本科，近6年企业级开发经验，从后端、自动化成长为生成式AI全栈工程师。擅长用技术解决实际业务痛点，具备平台搭建、团队统筹、AI人才培养能力。深耕RAG、Agent、多智能体协作，主导AI规模化落地，沉淀成熟方法论。持续学习前沿技术，务实高效，善于沟通协作，期待加入优秀团队，共创价值。</p>
</div>
</section>
<section class="contact">
<h2 class="section-title" style="margin-bottom: 1rem;"><i class="fas fa-paper-plane"></i> 连接未来</h2>
<div class="contact-links">
<a href="mailto:1593324992@qq.com"><i class="fas fa-envelope"></i> 邮箱</a>
<a href="tel:13038360154"><i class="fas fa-phone-alt"></i> 电话</a>
<a href="#"><i class="fab fa-weixin"></i> 微信交流</a>
<a href="https://blog.csdn.net/qq_36991535?type=blog" target="_blank">CSDN博客主页</a>
</div>
</section>
</div>
<div class="back2top" id="back2topBtn">
<i class="fas fa-chevron-up"></i>
</div>
<script>
function scrollToContent() {
document.getElementById('about').scrollIntoView({ behavior: 'smooth' });
}
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, { threshold: 0.1, rootMargin: "0px 0px -60px 0px" });
sections.forEach(section => observer.observe(section));
const topBtn = document.getElementById('back2topBtn');
window.addEventListener('scroll', () => {
if (window.scrollY > 500) {
topBtn.classList.add('show');
} else {
topBtn.classList.remove('show');
}
});
topBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
const imgs = document.querySelectorAll('.gallery-img');
imgs.forEach(img => {
img.addEventListener('error', () => {
img.style.background = "linear-gradient(135deg, #0a1428, #111c2e)";
img.style.objectFit = "cover";
img.alt = "✨ 视觉作品示意";
});
});
</script>
</body>
</html>