chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

1.0

Browse Source
This commit is contained in:
Zuoling Rong
2025-01-31 21:51:24 +08:00
parent 6ea490bf69
commit 09f493ddbc
50 changed files with 18130 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
index.html
View File

@@ -16,18 +16,22 @@
</div>
<div class="nav-section">
<a href="#" class="nav-item active" data-page="home">
<i class="fas fa-home"></i>
<span>首页</span>
</a>
<a href="#" class="nav-item" data-page="projects">
<i class="fas fa-project-diagram"></i>
<span>项目</span>
</a>
<a href="#" class="nav-item" data-page="articles">
<i class="fas fa-book"></i>
<span>文章</span>
</a>
<a href="#" class="nav-item" data-page="friends">
<i class="fas fa-users"></i>
<span>朋友</span>
@@ -36,18 +40,22 @@
<div class="nav-section">
<div class="section-title">在线账号</div>
<a href="https://github.com" class="nav-item" target="_blank">
<i class="fab fa-github"></i>
<span>GitHub</span>
</a>
<a href="https://t.me" class="nav-item" target="_blank">
<i class="fab fa-telegram"></i>
<span>Telegram</span>
</a>
<a href="https://twitter.com" class="nav-item" target="_blank">
<i class="fab fa-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://steam.com" class="nav-item" target="_blank">
<i class="fab fa-steam"></i>
<span>Steam</span>
@@ -73,11 +81,13 @@
<section class="category">
<h2><i class="fas fa-star"></i> 常用网站</h2>
<div class="sites-grid">
<a href="https://www.google.com" class="site-card">
<i class="fab fa-google"></i>
<h3>Google</h3>
<p>全球最大的搜索引擎</p>
</a>
<a href="https://www.github.com" class="site-card">
<i class="fab fa-github"></i>
<h3>GitHub</h3>
@@ -89,11 +99,13 @@
<section class="category">
<h2><i class="fas fa-graduation-cap"></i> 学习资源</h2>
<div class="sites-grid">
<a href="https://www.bilibili.com" class="site-card">
<i class="fas fa-play-circle"></i>
<h3>哔哩哔哩</h3>
<p>视频学习平台</p>
</a>
<a href="https://www.zhihu.com" class="site-card">
<i class="fas fa-question-circle"></i>
<h3>知乎</h3>
@@ -105,25 +117,29 @@
<!-- 项目页 -->
<div class="page" id="projects">
<div class="welcome-section">
<h2>我的项目</h2>
<p class="subtitle">这里展示了我的一些个人项目和开源贡献</p>
</div>
<section class="category">
<h2><i class="fas fa-code"></i> 个人项目</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fas fa-compass"></i>
<h3>个人导航站</h3>
<p>一个简洁美观的个人导航页面</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-tasks"></i>
<h3>Todo List</h3>
<p>基于Vue3的待办事项管理器</p>
</a>
<a href="#" class="site-card">
<a href="https://blog.rzlnb.top/" class="site-card">
<i class="fas fa-blog"></i>
<h3>个人博客</h3>
<p>使用Hexo搭建的技术博客</p>
@@ -134,11 +150,13 @@
<section class="category">
<h2><i class="fas fa-code-branch"></i> 开源贡献</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-github"></i>
<h3>Project A</h3>
<p>开源项目贡献</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-github"></i>
<h3>Project B</h3>
@@ -150,29 +168,34 @@
<!-- 文章页 -->
<div class="page" id="articles">
<div class="welcome-section">
<h2>技术文章</h2>
<p class="subtitle">分享我的技术文章和学习笔记</p>
</div>
<section class="category">
<h2><i class="fas fa-pen"></i> 最新文章</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-vuejs"></i>
<h3>Vue3最佳实践</h3>
<p>Vue3组合式API的使用技巧</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-js"></i>
<h3>JavaScript进阶</h3>
<p>JavaScript高级特性解析</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-git-alt"></i>
<h3>Git使用技巧</h3>
<p>Git常用命令和工作流</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-docker"></i>
<h3>Docker入门</h3>
@@ -184,21 +207,25 @@
<section class="category">
<h2><i class="fas fa-book"></i> 学习笔记</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-react"></i>
<h3>React Hooks</h3>
<p>React Hooks最佳实践</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-node-js"></i>
<h3>Node.js实战</h3>
<p>Node.js服务端开发笔记</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-css3"></i>
<h3>CSS技巧</h3>
<p>CSS常用技巧总结</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-database"></i>
<h3>数据库设计</h3>
@@ -210,11 +237,13 @@
<section class="category">
<h2><i class="fas fa-code"></i> 源码解析</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fab fa-vuejs"></i>
<h3>Vue源码解析</h3>
<p>Vue.js核心原理解析</p>
</a>
<a href="#" class="site-card">
<i class="fab fa-react"></i>
<h3>React原理</h3>
@@ -226,29 +255,34 @@
<!-- 朋友页 -->
<div class="page" id="friends">
<div class="welcome-section">
<h2>友情链接</h2>
<p class="subtitle">优秀的博主和朋友们</p>
</div>
<section class="category">
<h2><i class="fas fa-user-friends"></i> 技术博主</h2>
<div class="sites-grid">
<a href="#" class="site-card">
<i class="fas fa-code"></i>
<h3>小明的博客</h3>
<p>全栈开发工程师，分享技术心得</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-paint-brush"></i>
<h3>小红的前端</h3>
<p>专注前端开发与设计</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-server"></i>
<h3>小张的后端</h3>
<p>分享后端开发经验</p>
</a>
<a href="#" class="site-card">
<i class="fas fa-mobile-alt"></i>
<h3>小李的移动端</h3>
@@ -260,21 +294,25 @@
<section class="category">
<h2><i class="fas fa-laptop-code"></i> 技术社区</h2>
<div class="sites-grid">
<a href="https://github.com" class="site-card">
<i class="fab fa-github"></i>
<h3>GitHub</h3>
<p>开源代码托管平台</p>
</a>
<a href="https://stackoverflow.com" class="site-card">
<i class="fab fa-stack-overflow"></i>
<h3>Stack Overflow</h3>
<p>程序员问答社区</p>
</a>
<a href="https://juejin.cn" class="site-card">
<i class="fas fa-book"></i>
<h3>掘金</h3>
<p>高质量技术社区</p>
</a>
<a href="https://v2ex.com" class="site-card">
<i class="fas fa-comments"></i>
<h3>V2EX</h3>
@@ -286,21 +324,25 @@
<section class="category">
<h2><i class="fas fa-coffee"></i> 休闲娱乐</h2>
<div class="sites-grid">
<a href="https://www.bilibili.com" class="site-card">
<i class="fas fa-play-circle"></i>
<h3>哔哩哔哩</h3>
<p>视频弹幕网站</p>
</a>
<a href="https://www.zhihu.com" class="site-card">
<i class="fas fa-question-circle"></i>
<h3>知乎</h3>
<p>问答社区</p>
</a>
<a href="https://www.douban.com" class="site-card">
<i class="fas fa-film"></i>
<h3>豆瓣</h3>
<p>文艺生活社区</p>
</a>
<a href="https://music.163.com" class="site-card">
<i class="fas fa-music"></i>
<h3>网易云音乐</h3>
@@ -341,4 +383,4 @@
</div>
<script src="script.js"></script>
</body>
</html>
</html>