AI导哈

Chrome DevTools MCP Server 官网

一个为 Google DevFest Workshop 活动创建的官方网站，主题是 Chrome DevTools MCP Server，采用可爱的设计风格和丰富的动画效果。

  • by iccyyxx
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 iccyyxx/devtools-mcp-website

使用说明

🎉 Google DevFest Workshop - Chrome DevTools MCP Server

🌈 一个超级可爱的 Google DevFest Workshop 活动官网

📖 项目介绍

这是一个为 Google DevFest Workshop 活动创建的官方网站，主题是 Chrome DevTools MCP Server。网站采用超级可爱的设计风格，包含丰富的动画效果和表情符号。

🌟 网站特色

  • 🎨 超级可爱的设计风格 - 大量使用表情符号和渐变色彩
  • ✨ 丰富的动画效果 - 浮动动画、发光效果、悬停动画
  • 📱 完全响应式设计 - 适配桌面、平板、手机等各种设备
  • 🚀 优秀的用户体验 - 清晰的导航、直观的布局、愉悦的交互

📋 网站结构

🏠 主页 (index.html)

  • Google DevFest Workshop 总体信息展示
  • 活动亮点和快速导航

🌍 GDG & DevFest 介绍页 (gdg.html)

  • Google Developer Groups 社区介绍
  • DevFest 活动详情和参与方式
  • 技术主题和社区价值

🛠️ DevTools MCP 介绍页 (devtools.html)

  • Model Context Protocol 详细介绍
  • Chrome DevTools MCP Server 特性展示
  • 核心功能和使用场景
  • 技术优势和开始使用指南

👨‍💻 关于牙方 (profile.html)

  • 个人介绍和特色展示
  • 技能树和日常时间线
  • 兴趣爱好和联系方式

🚀 本地运行

  1. 克隆仓库到本地：
git clone https://github.com/iccyyxx/devtools-mcp-website.git
cd devtools-mcp-website
  1. 启动本地服务器：
# 使用 Python
python3 -m http.server 8080

# 或使用 Node.js
npx http-server -p 8080
  1. 在浏览器中访问：http://localhost:8080

🌐 在线访问

网站已部署到 GitHub Pages：

  • 🔗 主页：https://iccyyxx.github.io/devtools-mcp-website/
  • 🔗 GDG 介绍：https://iccyyxx.github.io/devtools-mcp-website/gdg.html
  • 🔗 DevTools MCP：https://iccyyxx.github.io/devtools-mcp-website/devtools.html
  • 🔗 关于牙方：https://iccyyxx.github.io/devtools-mcp-website/profile.html

🔧 技术栈

  • 前端：HTML5, CSS3, JavaScript
  • 样式：自定义 CSS，响应式设计
  • 字体：Noto Sans SC (Google Fonts)
  • 部署：GitHub Pages + GitHub Actions
  • 工具：Chrome DevTools MCP Server

🎯 关于作者

牙方 - 爱睡觉的前端开发工程师 😴

  • 📧 邮箱：80975930@qq.com
  • 💻 专长：前端开发、UI/UX 设计
  • 🌙 特色：充足的睡眠让我在编程时思路更清晰！

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

  • 感谢 Google Developer Groups 社区
  • 感谢 Chrome DevTools MCP Server 项目
  • 感谢所有参与 DevFest Workshop 的开发者们

🎨 Made with ❤️ by 牙方 | 🌟 Powered by Chrome DevTools MCP Server

相关 MCP