style(css): 优化主题颜色和标签云样式

- 调整日夜模式下的背景色和文字颜色,提升可读性
- 增强毛玻璃效果和边框透明度
- 重构标签云布局,支持响应式设计
- 优化标签悬停效果和动画性能
- 统一使用CSS变量管理主题颜色
- 改进技术标签的视觉层次和交互反馈
- 增加移动端适配和滚动动画
- 修复时间线在小屏幕上的显示问题
This commit is contained in:
hehh
2025-11-20 19:25:10 +08:00
parent 29e2e2761f
commit 629eb55a41
3 changed files with 1086 additions and 428 deletions

View File

@@ -105,49 +105,12 @@
<!-- 技术栈云图 -->
<section class="tech-cloud-section">
<div class="section-header">
<h2 class="section-title">技术栈云图</h2>
<h2 class="section-title">技术栈</h2>
<p class="section-subtitle">技术探索之旅 - 追求深度与完美的技术实践</p>
</div>
<div class="tech-cloud-container">
<div class="cloud-wrapper">
<span class="cloud-tag" data-weight="5" data-category="core">Java</span>
<span class="cloud-tag" data-weight="4" data-category="core">Python</span>
<span class="cloud-tag" data-weight="4" data-category="core">JavaScript</span>
<span class="cloud-tag" data-weight="5" data-category="backend">Spring Boot</span>
<span class="cloud-tag" data-weight="5" data-category="backend">WebFlux</span>
<span class="cloud-tag" data-weight="5" data-category="backend">Reactor</span>
<span class="cloud-tag" data-weight="3" data-category="core">TypeScript</span>
<span class="cloud-tag" data-weight="4" data-category="backend">Spring Cloud</span>
<span class="cloud-tag" data-weight="3" data-category="core">Go</span>
<span class="cloud-tag" data-weight="4" data-category="data">MySQL</span>
<span class="cloud-tag" data-weight="4" data-category="data">Redis</span>
<span class="cloud-tag" data-weight="3" data-category="data">MongoDB</span>
<span class="cloud-tag" data-weight="4" data-category="ops">Docker</span>
<span class="cloud-tag" data-weight="3" data-category="ops">Kubernetes</span>
<span class="cloud-tag" data-weight="3" data-category="ai">OpenAI API</span>
<span class="cloud-tag" data-weight="3" data-category="ai">LangChain</span>
<span class="cloud-tag" data-weight="2" data-category="ai">TensorFlow</span>
<span class="cloud-tag" data-weight="2" data-category="ai">PyTorch</span>
<span class="cloud-tag" data-weight="3" data-category="data">Elasticsearch</span>
<span class="cloud-tag" data-weight="2" data-category="data">RabbitMQ</span>
<span class="cloud-tag" data-weight="2" data-category="data">Kafka</span>
<span class="cloud-tag" data-weight="3" data-category="ops">Jenkins</span>
<span class="cloud-tag" data-weight="4" data-category="ops">Git</span>
<span class="cloud-tag" data-weight="3" data-category="ops">Linux</span>
<span class="cloud-tag" data-weight="2" data-category="ops">AWS</span>
<span class="cloud-tag" data-weight="2" data-category="ops">Nginx</span>
<span class="cloud-tag" data-weight="3" data-category="backend">Spring Security</span>
<span class="cloud-tag" data-weight="3" data-category="backend">MyBatis</span>
<span class="cloud-tag" data-weight="2" data-category="backend">JPA</span>
<span class="cloud-tag" data-weight="2" data-category="backend">Dubbo</span>
<span class="cloud-tag" data-weight="2" data-category="backend">Netty</span>
<span class="cloud-tag" data-weight="2" data-category="ai">Transformers</span>
<span class="cloud-tag" data-weight="2" data-category="ai">Scikit-learn</span>
<span class="cloud-tag" data-weight="1" data-category="ai">Ollama</span>
<span class="cloud-tag" data-weight="1" data-category="ai">Dify</span>
<span class="cloud-tag" data-weight="1" data-category="ai">Spring AI</span>
<span class="cloud-tag" data-weight="1" data-category="data">ClickHouse</span>
<span class="cloud-tag" data-weight="1" data-category="data">Postgresql</span>
<div class="cloud-wrapper" id="tech-cloud-wrapper">
<!-- 技术标签将通过JavaScript动态生成 -->
</div>
</div>
<div class="tech-philosophy">