宇佐见函钩 - 个人学习网站

👋 项目介绍

这是一个基于纯HTML、CSS和JavaScript开发的个人学习网站，专注于算法可视化、编程学习笔记和技术分享。网站采用响应式设计，适配各种设备屏幕。

网站从最初的个人博客逐渐发展为一个综合的学习平台，包含交互式算法演示、项目展示和学习资源分享。

✨ 功能特点

🌐 主要页面

• 首页：个人介绍、学习状态和B站空间展示
• 学习笔记：CSAPP实验报告、数据结构学习心得和技术文档
• 日记：个人日常记录，支持日历查看
• 交流页面：友链展示，方便与朋友们互相交流
• 图片墙：个人图片收藏和meme图集
• 产品展示：开发的应用程序和学习工具展示

📚 技术文档与工具

• 图算法可视化：Prim、Kruskal、拓扑排序、AOE关键路径算法的交互式演示
• KMP算法可视化：字符串匹配算法的详细演示
• NeoChat：局域网聊天程序介绍和使用指南
• 在线代码空间：编程环境配置指南
• CDN使用指南：静态资源优化实践
• 不确定性理论：相关学习笔记
• 树与二叉树算法：数据结构可视化

🎨 设计特色

• 响应式布局：完美适配桌面、平板和手机
• 统一导航：通过JavaScript动态加载通用header
• 现代UI设计：卡片式布局、悬停动画和过渡效果
• 深色主题：以紫色为主色调的现代设计风格
• 交互式演示：算法可视化支持单步执行和实时反馈

🎵 多媒体功能

• 背景音乐播放器：网站氛围音乐
• 图片网格展示：支持多种布局和比例显示
• PDF在线预览：学习笔记和文档的便捷查看

🚀 快速开始

环境要求

• 现代浏览器（Chrome、Firefox、Safari、Edge等）
• 支持ES6+ JavaScript特性

使用方法

1. 克隆或下载本项目到本地
2. 确保所有文件保持原始目录结构
3. 使用浏览器直接打开index.html，或通过Live Server等工具启动本地服务器
4. 开始浏览和学习！

📝 功能说明

算法可视化工具

• 图算法演示：支持自定义图构建，实时显示算法执行过程
• KMP字符串匹配：可视化next数组生成和匹配过程
• 交互式学习：每步执行都有详细的文字说明，帮助理解算法逻辑

学习资源

• CSAPP实验报告：Malloclab、Proxylab、Shelllab等实验总结
• 数据结构笔记：树、图、排序等算法的学习心得
• 编程实践：项目开发经验和技术分享

个人展示

• 产品作品：NeoChat聊天程序、算法可视化工具等
• 学习历程：从天津大学计算机专业学生的学习记录
• 兴趣分享：动漫、J-pop、Minecraft、东方Project等

🎯 技术实现

前端技术栈

• HTML5：语义化标签和结构化设计
• CSS3：Flexbox/Grid布局、CSS变量、响应式设计
• Vanilla JavaScript：原生JS实现所有交互功能
• Canvas API：算法可视化的图形绘制

架构特点

• 模块化设计：组件化开发，便于维护和扩展
• 静态站点：无需后端服务器，部署简单
• CDN优化：静态资源通过CDN加速加载
• PWA支持：离线访问和安装支持

开发实践

• 动态header加载确保全站导航一致性
• 算法演示支持单步执行和状态追踪
• 响应式图片和媒体资源优化

🤝 交流与合作

欢迎对网站内容、技术实现提出建议，或希望添加友链的朋友们通过以下方式联系：

• 邮箱：1225230685@qq.com
• B站空间：宇佐见函钩的个人空间
• GitHub：FunctionHookTJU

📅 更新日志

• 2025年8月：网站基础框架搭建
• 2025年10月：添加日记页面、日历功能和学习笔记
• 2025年11月：新增算法可视化工具（KMP、图算法）
• 2025年12月：扩展图算法演示，添加AOE关键路径算法

💡 开发心得

这个网站是我学习前端开发和算法的实践项目。从简单的个人博客，到交互式学习工具的演进，让我深入理解了用户体验设计和技术实现。

虽然还有很多可以改进的地方，但我会持续更新内容，优化交互体验。也非常欢迎大家提出宝贵的建议和意见！

---

© 2025 宇佐见函钩. 保留所有权利.