{"id":24151286,"url":"https://github.com/geallenboy/gegarron","last_synced_at":"2025-11-24T21:16:55.998Z","repository":{"id":271875505,"uuid":"914837494","full_name":"geallenboy/gegarron","owner":"geallenboy","description":"一个精心设计的个人网站，旨在展示个人项目、博客和技术成就。该网站提供简洁而现代的用户界面，适用于展示个人信息、作品、博客文章等。","archived":false,"fork":false,"pushed_at":"2025-07-28T23:16:33.000Z","size":4451,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-29T01:10:19.195Z","etag":null,"topics":["nextjs","shadcn-ui","types","ver"],"latest_commit_sha":null,"homepage":"https://gegarron.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geallenboy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-10T12:10:00.000Z","updated_at":"2025-07-28T23:16:36.000Z","dependencies_parsed_at":"2025-01-10T13:32:17.519Z","dependency_job_id":"6a519ffe-9780-4f5d-aceb-951642f72395","html_url":"https://github.com/geallenboy/gegarron","commit_stats":null,"previous_names":["geallenboy/gegarron"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/geallenboy/gegarron","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geallenboy%2Fgegarron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geallenboy%2Fgegarron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geallenboy%2Fgegarron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geallenboy%2Fgegarron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geallenboy","download_url":"https://codeload.github.com/geallenboy/gegarron/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geallenboy%2Fgegarron/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286079811,"owners_count":27282121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-24T02:00:07.096Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","shadcn-ui","types","ver"],"created_at":"2025-01-12T09:15:05.545Z","updated_at":"2025-11-24T21:16:55.992Z","avatar_url":"https://github.com/geallenboy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ✨ GeGarron - 现代化AI开发者作品集\n\n\u003e 一个充满创意和互动性的个人网站，展示AI探索者的技术实力与创新思维\n\n\u003cdiv align=\"center\"\u003e\n\n![Next.js](https://img.shields.io/badge/Next.js-15-black?style=for-the-badge\u0026logo=next.js)\n![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=for-the-badge\u0026logo=typescript)\n![Framer Motion](https://img.shields.io/badge/Framer%20Motion-12-pink?style=for-the-badge\u0026logo=framer)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3-cyan?style=for-the-badge\u0026logo=tailwind-css)\n\n[🌐 在线预览](https://gegarron.com) · [📖 文档](https://github.com/geallenboy/gegarron) · [🐛 报告问题](https://github.com/geallenboy/gegarron/issues)\n\n\u003c/div\u003e\n\n## 🎯 项目亮点\n\n### 🚀 **沉浸式体验**\n- **3D交互设计**: 立体化的Logo和社交链接，带来前所未有的视觉冲击\n- **粒子系统**: 动态粒子背景，营造科技感氛围\n- **鼠标跟随**: 智能光标跟随效果，增强用户互动体验\n- **视差滚动**: 多层次的滚动视差，创造深度感\n\n### 🎨 **视觉设计革新**\n- **玻璃拟态**: 现代化的毛玻璃效果和背景模糊\n- **渐变动画**: 流动的渐变色彩，展现动态美感\n- **微交互**: 精心设计的悬浮、点击和过渡动画\n- **响应式布局**: 完美适配所有设备尺寸\n\n### 🌟 **技术创新**\n- **智能主题**: 自动适配系统主题，支持实时切换\n- **多语言**: 中英文无缝切换，国际化体验\n- **性能优化**: 代码分割、懒加载、图片优化\n- **SEO友好**: 完整的元数据和结构化数据\n\n## 🛠️ 技术架构\n\n### 核心技术栈\n\n| 技术 | 版本 | 用途 |\n|------|------|------|\n| **Next.js** | 15.x | React全栈框架 |\n| **TypeScript** | 5.x | 类型安全 |\n| **Framer Motion** | 12.x | 动画引擎 |\n| **Tailwind CSS** | 3.x | 原子化CSS |\n| **Lucide React** | Latest | 图标库 |\n| **next-themes** | Latest | 主题管理 |\n\n## 🎪 功能展示\n\n### 🏠 **英雄区域**\n- **3D Logo**: 可交互的大脑图标，悬浮时旋转180度\n- **动态标题**: 流动的渐变文字效果\n- **技能云**: 交互式技能标签，悬浮时产生阴影效果\n- **统计数据**: 脉冲动画的成就展示\n\n### 💼 **项目展示**\n- **卡片设计**: 玻璃拟态风格的项目卡片\n- **悬浮效果**: 鼠标悬浮时的3D变换\n- **技术标签**: 彩色渐变的技术栈标签\n- **快速访问**: 一键跳转到项目链接\n\n### 🔧 **服务展示**\n- **图标动画**: 悬浮时的旋转和缩放效果\n- **渐变背景**: 动态的背景色彩变化\n- **光效扫描**: 从左到右的光线扫描效果\n- **装饰元素**: 旋转的几何图形装饰\n\n### 🌟 **开源项目**\n- **GitHub集成**: 直接展示GitHub项目信息\n- **进度条**: 动态加载的顶部进度条\n- **分类展示**: 清晰的项目分类和描述\n- **快速链接**: 直达GitHub仓库\n\n## 🚀 快速开始\n\n### 环境准备\n\n```bash\n# 检查Node.js版本 (需要 \u003e= 18.0.0)\nnode --version\n\n# 检查npm版本 (需要 \u003e= 8.0.0)\nnpm --version\n```\n\n### 安装与运行\n\n```bash\n# 1. 克隆项目\ngit clone https://github.com/geallenboy/gegarron.git\ncd gegarron\n\n# 2. 安装依赖\nnpm install\n\n# 3. 启动开发服务器\nnpm run dev\n\n# 4. 打开浏览器访问\n# http://localhost:3000\n```\n\n### 构建部署\n\n```bash\n# 构建生产版本\nnpm run build\n\n# 预览生产版本\nnpm run start\n\n# 代码检查\nnpm run lint\n```\n\n## 📁 项目结构\n\n```\ngegarron/\n├── 📁 src/\n│   ├── 📁 app/                    # Next.js App Router\n│   │   ├── 📄 layout.tsx         # 根布局组件\n│   │   ├── 📄 page.tsx           # 主页面组件\n│   │   ├── 📄 providers.tsx      # 全局Provider\n│   │   ├── 📄 not-found.tsx      # 404页面\n│   │   ├── 📄 robots.ts          # 搜索引擎爬虫配置\n│   │   └── 📄 sitemap.ts         # 站点地图\n│   ├── 📁 config/                 # 配置文件\n│   │   └── 📄 infoConfig.ts      # 个人信息配置\n│   ├── 📁 styles/                 # 样式文件\n│   │   └── 📄 tailwind.css       # 全局样式\n│   ├── 📁 components/             # 可复用组件\n│   │   ├── 📁 ui/                # UI组件库\n│   │   ├── 📁 shared/            # 共享组件\n│   │   └── 📁 seo/               # SEO组件\n│   └── 📁 lib/                    # 工具函数\n├── 📁 public/                     # 静态资源\n│   ├── 🖼️ favicon.png            # 网站图标\n│   └── 🖼️ *.webp                # 项目图片\n├── 📄 tailwind.config.ts         # Tailwind配置\n├── 📄 next.config.js             # Next.js配置\n└── 📄 package.json               # 项目依赖\n```\n\n## ⚙️ 个性化配置\n\n### 🔧 基本信息设置\n\n编辑 `src/config/infoConfig.ts`:\n\n```typescript\n// 个人基本信息\nexport const name = 'Your Name'\nexport const email = 'your@email.com'\n\n// 社交媒体链接\nexport const socialLinks = [\n  {\n    name: 'Github',\n    icon: 'github',\n    href: 'https://github.com/yourusername'\n  },\n  {\n    name: 'Twitter',\n    icon: 'x', \n    href: 'https://twitter.com/yourusername'\n  }\n  // 添加更多社交链接...\n]\n\n// 核心服务\nexport const coreServices = {\n  zh: [\n    {\n      title: '服务标题',\n      description: '服务描述',\n      icon: 'brain'\n    }\n    // 添加更多服务...\n  ]\n}\n\n// 项目列表\nexport const projectsList = {\n  zh: [\n    {\n      name: '项目名称',\n      description: '项目描述',\n      link: { href: 'https://project-url.com' },\n      logo: '/project-image.webp',\n      techStack: ['Next.js', 'TypeScript', 'Tailwind CSS'],\n      category: ['网站', '应用']\n    }\n    // 添加更多项目...\n  ]\n}\n```\n\n### 🎨 主题定制\n\n在 `tailwind.config.ts` 中自定义主题:\n\n```typescript\nexport default {\n  theme: {\n    extend: {\n      colors: {\n        // 自定义颜色\n        primary: {\n          50: '#eff6ff',\n          500: '#3b82f6',\n          900: '#1e3a8a'\n        }\n      },\n      animation: {\n        // 自定义动画\n        'float': 'float 6s ease-in-out infinite',\n        'pulse-glow': 'pulse-glow 2s infinite'\n      }\n    }\n  }\n}\n```\n\n### 🌐 多语言配置\n\n支持中英文双语，在配置文件中添加对应语言的内容:\n\n```typescript\nexport const content = {\n  zh: {\n    headline: '你好，我是 Your Name',\n    tagline: '用 AI 重新定义可能性',\n    // 更多中文内容...\n  },\n  en: {\n    headline: \"Hi, I'm Your Name\", \n    tagline: 'Redefining Possibilities with AI',\n    // 更多英文内容...\n  }\n}\n```\n\n## 🎨 设计系统\n\n### 色彩方案\n\n```css\n/* 主色调 */\n--primary-blue: #3B82F6\n--primary-purple: #8B5CF6  \n--primary-pink: #EC4899\n\n/* 渐变色 */\n--gradient-primary: linear-gradient(135deg, #3B82F6, #8B5CF6)\n--gradient-secondary: linear-gradient(135deg, #8B5CF6, #EC4899)\n\n/* 玻璃效果 */\n--glass-bg: rgba(255, 255, 255, 0.1)\n--glass-border: rgba(255, 255, 255, 0.2)\n--glass-blur: backdrop-filter: blur(20px)\n```\n\n### 动画时序\n\n| 动画类型 | 持续时间 | 缓动函数 |\n|----------|----------|----------|\n| 微交互 | 200ms | ease-out |\n| 悬浮效果 | 300ms | ease-in-out |\n| 页面过渡 | 500ms | cubic-bezier |\n| 背景动画 | 2-20s | linear/ease-in-out |\n\n### 间距系统\n\n```css\n/* Tailwind CSS间距 */\nxs: 0.5rem   /* 8px */\nsm: 1rem     /* 16px */  \nmd: 1.5rem   /* 24px */\nlg: 2rem     /* 32px */\nxl: 3rem     /* 48px */\n2xl: 4rem    /* 64px */\n```\n\n## 🚀 性能优化\n\n### 构建优化\n- ✅ **代码分割**: 自动路由级别的代码分割\n- ✅ **Tree Shaking**: 移除未使用的代码\n- ✅ **图片优化**: Next.js Image组件自动优化\n- ✅ **字体优化**: 本地字体文件，减少网络请求\n- ✅ **CSS优化**: Tailwind CSS自动清理未使用样式\n\n### 运行时优化\n- ✅ **懒加载**: 组件和图片按需加载\n- ✅ **缓存策略**: 静态资源长期缓存\n- ✅ **预加载**: 关键资源预加载\n- ✅ **压缩**: Gzip/Brotli压缩\n- ✅ **CDN**: 静态资源CDN分发\n\n### 性能指标\n\n| 指标 | 目标值 | 当前值 |\n|------|--------|--------|\n| **FCP** | \u003c 1.5s | ~1.2s |\n| **LCP** | \u003c 2.5s | ~2.1s |\n| **CLS** | \u003c 0.1 | ~0.05 |\n| **FID** | \u003c 100ms | ~80ms |\n\n## 🔧 开发指南\n\n### 添加新组件\n\n```typescript\n// src/components/ui/NewComponent.tsx\n'use client'\n\nimport { motion } from 'framer-motion'\n\ninterface NewComponentProps {\n  title: string\n  description?: string\n}\n\nexport const NewComponent = ({ title, description }: NewComponentProps) =\u003e {\n  return (\n    \u003cmotion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.5 }}\n      className=\"p-6 bg-white/10 backdrop-blur-xl rounded-2xl\"\n    \u003e\n      \u003ch3 className=\"text-xl font-bold mb-2\"\u003e{title}\u003c/h3\u003e\n      {description \u0026\u0026 (\n        \u003cp className=\"text-gray-600 dark:text-gray-300\"\u003e{description}\u003c/p\u003e\n      )}\n    \u003c/motion.div\u003e\n  )\n}\n```\n\n### 自定义动画\n\n```typescript\n// 定义动画变体\nconst customVariants = {\n  hidden: { \n    opacity: 0, \n    scale: 0.8,\n    y: 50 \n  },\n  visible: {\n    opacity: 1,\n    scale: 1,\n    y: 0,\n    transition: {\n      type: \"spring\" as const,\n      stiffness: 100,\n      damping: 15\n    }\n  }\n}\n\n// 使用动画\n\u003cmotion.div\n  variants={customVariants}\n  initial=\"hidden\"\n  animate=\"visible\"\n\u003e\n  Content\n\u003c/motion.div\u003e\n```\n\n### 添加新页面\n\n```bash\n# 1. 创建页面目录\nmkdir src/app/about\n\n# 2. 创建页面文件\ntouch src/app/about/page.tsx\n\n# 3. 添加页面内容\necho \"export default function About() {\n  return \u003cdiv\u003eAbout Page\u003c/div\u003e\n}\" \u003e src/app/about/page.tsx\n```\n\n## 🐛 常见问题\n\n### TypeScript错误\n\n**问题**: Framer Motion类型错误\n```typescript\n// ❌ 错误写法\ntransition: { type: \"spring\" }\n\n// ✅ 正确写法  \ntransition: { type: \"spring\" as const }\n```\n\n**问题**: 图片路径错误\n```typescript\n// ❌ 错误写法\n\u003cImage src=\"./image.jpg\" /\u003e\n\n// ✅ 正确写法\n\u003cImage src=\"/image.jpg\" /\u003e\n```\n\n### 性能问题\n\n**问题**: 动画卡顿\n```css\n/* 解决方案: 启用GPU加速 */\n.animated-element {\n  transform: translate3d(0, 0, 0);\n  will-change: transform;\n}\n```\n\n**问题**: 首屏加载慢\n```typescript\n// 解决方案: 使用动态导入\nconst HeavyComponent = dynamic(() =\u003e import('./HeavyComponent'), {\n  loading: () =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e\n})\n```\n\n### 部署问题\n\n**问题**: Vercel部署失败\n```bash\n# 检查Node.js版本\nnode --version\n\n# 清理缓存重新安装\nrm -rf node_modules package-lock.json\nnpm install\n```\n\n## 🤝 贡献指南\n\n我们欢迎所有形式的贡献！\n\n### 贡献流程\n\n1. **Fork项目** 到你的GitHub账户\n2. **创建分支** `git checkout -b feature/amazing-feature`\n3. **提交更改** `git commit -m 'Add amazing feature'`\n4. **推送分支** `git push origin feature/amazing-feature`\n5. **创建PR** 提交Pull Request\n\n### 代码规范\n\n```bash\n# 代码格式化\nnpm run format\n\n# 代码检查\nnpm run lint\n\n# 类型检查\nnpm run type-check\n```\n\n### 提交规范\n\n```bash\n# 功能添加\ngit commit -m \"feat: add new animation component\"\n\n# 问题修复  \ngit commit -m \"fix: resolve mobile responsive issue\"\n\n# 文档更新\ngit commit -m \"docs: update README with new features\"\n```\n\n## 📄 许可证\n\n本项目基于 [MIT License](LICENSE) 开源协议。\n\n## 🙏 致谢\n\n感谢以下开源项目和社区的支持：\n\n- [**Next.js**](https://nextjs.org/) - 强大的React全栈框架\n- [**Framer Motion**](https://www.framer.com/motion/) - 优雅的动画库\n- [**Tailwind CSS**](https://tailwindcss.com/) - 实用的CSS框架\n- [**Lucide**](https://lucide.dev/) - 精美的图标库\n- [**Vercel**](https://vercel.com/) - 优秀的部署平台\n\n## 📞 联系方式\n\n\u003cdiv align=\"center\"\u003e\n\n**GeGarron** - AI探索者 \u0026 独立开发者\n\n[![Email](https://img.shields.io/badge/Email-gejialun88%40gmail.com-red?style=for-the-badge\u0026logo=gmail)](mailto:gejialun88@gmail.com)\n[![GitHub](https://img.shields.io/badge/GitHub-geallenboy-black?style=for-the-badge\u0026logo=github)](https://github.com/geallenboy)\n[![Twitter](https://img.shields.io/badge/Twitter-gejialun88-blue?style=for-the-badge\u0026logo=twitter)](https://twitter.com/gejialun88)\n\n[🌐 **访问网站**](https://gegarron.com) · [📖 **查看文档**](https://github.com/geallenboy/gegarron) · [💬 **技术交流**](mailto:gejialun88@gmail.com)\n\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**如果这个项目对你有帮助，请给一个 ⭐ Star 支持！**\n\n*用心构建每一行代码，用技术改变世界* 🚀\n\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeallenboy%2Fgegarron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeallenboy%2Fgegarron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeallenboy%2Fgegarron/lists"}