my_web

[fangt124]

<title>你好菲特</title> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--bg: #0f0f0f;
--surface: #1a1a1a;
--text: #eaeaea;
--text-muted: #999;
--accent: #64ffda;
--accent-dim: rgba(100, 255, 218, 0.1);
--radius: 12px;
--max-w: 720px;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}

/* ── Nav ── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
backdrop-filter: blur(12px) saturate(180%);
background: rgba(15, 15, 15, 0.75);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
nav .inner {
max-width: var(--max-w); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px;
}
nav .logo { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.5px; color: var(--accent); }
nav .links { display: flex; gap: 28px; list-style: none; }
nav .links a {
color: var(--text-muted); text-decoration: none; font-size: 0.9rem;
transition: color 0.2s;
}
nav .links a:hover { color: var(--text); }

/* ── Hero ── */
.hero {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
text-align: center; padding: 120px 24px 80px;
}
.hero h1 {
font-size: clamp(2.8rem, 7vw, 4.8rem); font-weight: 800;
letter-spacing: -1px; line-height: 1.15; margin-bottom: 18px;
background: linear-gradient(135deg, var(--text) 30%, var(--accent) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.hero .tagline {
font-size: 1.15rem; color: var(--text-muted); max-width: 460px;
margin: 0 auto 36px;
}
.hero .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 11px 26px; border-radius: 999px; font-size: 0.95rem;
text-decoration: none; font-weight: 500; transition: all 0.25s; cursor: pointer;
border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #0f0f0f; }
.btn-primary:hover { box-shadow: 0 0 28px rgba(100, 255, 218, 0.35); transform: translateY(-1px); }
.btn-outline { border-color: rgba(255,255,255,0.2); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ── Sections ── */
section { padding: 90px 24px; }
section .container { max-width: var(--max-w); margin: 0 auto; }
.section-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 10px; }
.section-title { font-size: 1.9rem; font-weight: 700; margin-bottom: 36px; letter-spacing: -0.5px; }

/* ── About ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.about-card {
background: var(--surface); border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--radius); padding: 28px;
transition: border-color 0.25s;
}
.about-card:hover { border-color: rgba(100, 255, 218, 0.2); }
.about-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.about-card p { color: var(--text-muted); font-size: 0.93rem; }

/* ── Projects ── */
.project-list { display: flex; flex-direction: column; gap: 20px; }
.project-item {
background: var(--surface); border: 1px solid rgba(255,255,255,0.05);
border-radius: var(--radius); padding: 26px 28px;
display: flex; align-items: flex-start; gap: 20px;
transition: border-color 0.25s, transform 0.25s;
}
.project-item:hover { border-color: rgba(100, 255, 218, 0.2); transform: translateX(4px); }
.project-icon {
width: 46px; height: 46px; border-radius: 10px;
background: var(--accent-dim); display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; flex-shrink: 0;
}
.project-info h3 { font-size: 1.05rem; margin-bottom: 4px; }
.project-info p { color: var(--text-muted); font-size: 0.9rem; }
.project-tags { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tag {
font-size: 0.72rem; padding: 3px 10px; border-radius: 999px;
background: var(--accent-dim); color: var(--accent);
letter-spacing: 0.3px;
}

/* ── Contact ── */
.contact { text-align: center; padding-bottom: 120px; }
.contact-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.contact-link {
color: var(--text-muted); text-decoration: none; padding: 10px 20px;
border: 1px solid rgba(255,255,255,0.08); border-radius: 999px;
font-size: 0.9rem; transition: all 0.25s;
}
.contact-link:hover { border-color: var(--accent); color: var(--accent); }

/* ── Footer ── */
footer {
text-align: center; padding: 28px 24px; border-top: 1px solid rgba(255,255,255,0.05);
color: var(--text-muted); font-size: 0.8rem;
}

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 600px) {
.about-grid { grid-template-columns: 1fr; }
nav .links { gap: 16px; }
}
</style>

你好菲特

• 关于
• 项目
• 联系

你好，菲特 👋

热爱技术、设计和创造。在这里分享我的思考与作品。

查看项目 联系我

About

关于我

🧠 技术背景

拥有多年的软件工程经验，专注于前端开发与用户体验。擅长使用现代 Web 技术构建高性能应用。

🎯 核心理念

代码是手段，解决问题才是目的。追求简洁、可维护的设计，让技术服务于产品和用户。

📚 持续学习

保持好奇心，不断探索新技术和新领域。相信最好的投资是投资自己。

🤝 开放合作

乐于交流与协作，欢迎任何有趣的想法和项目。一起创造更好的东西。

Work

精选项目

🖥️

个人网站

一个极简风格的个人主页，展示个人信息与作品集，响应式设计适配各种设备。

HTML CSS Responsive

📊

数据看板

实时数据可视化仪表盘，支持多种图表类型和自定义布局，帮助企业快速洞察数据。

React D3.js WebSocket

🛠️

开源工具

一系列提升开发效率的小工具集，涵盖了代码生成、格式化、自动化脚本等场景。

Node.js CLI Open Source

Contact

联系我

有想法或合作意向？欢迎随时联系。

📧 Email 💻 GitHub 🐦 Twitter

© 2026 你好菲特. All rights reserved.

<script> const observer = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }); }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' }); document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); document.querySelectorAll('a[href^="#"]').forEach(a => { a.addEventListener('click', e => { e.preventDefault(); const t = document.querySelector(a.getAttribute('href')); if (t) t.scrollIntoView({ behavior: 'smooth' }); }); }); </script>