Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/geallenboy/gegarron

一个精心设计的个人网站，旨在展示个人项目、博客和技术成就。该网站提供简洁而现代的用户界面，适用于展示个人信息、作品、博客文章等。
https://github.com/geallenboy/gegarron

nextjs shadcn-ui types ver

Last synced: 8 months ago
JSON representation

一个精心设计的个人网站，旨在展示个人项目、博客和技术成就。该网站提供简洁而现代的用户界面，适用于展示个人信息、作品、博客文章等。

Awesome Lists containing this project

README 

          
# ✨ GeGarron - 现代化AI开发者作品集



> 一个充满创意和互动性的个人网站，展示AI探索者的技术实力与创新思维






![Next.js](https://img.shields.io/badge/Next.js-15-black?style=for-the-badge&logo=next.js)

![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=for-the-badge&logo=typescript)

![Framer Motion](https://img.shields.io/badge/Framer%20Motion-12-pink?style=for-the-badge&logo=framer)

![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3-cyan?style=for-the-badge&logo=tailwind-css)



[🌐 在线预览](https://gegarron.com) · [📖 文档](https://github.com/geallenboy/gegarron) · [🐛 报告问题](https://github.com/geallenboy/gegarron/issues)






## 🎯 项目亮点



### 🚀 **沉浸式体验**

- **3D交互设计**: 立体化的Logo和社交链接，带来前所未有的视觉冲击

- **粒子系统**: 动态粒子背景，营造科技感氛围

- **鼠标跟随**: 智能光标跟随效果，增强用户互动体验

- **视差滚动**: 多层次的滚动视差，创造深度感



### 🎨 **视觉设计革新**

- **玻璃拟态**: 现代化的毛玻璃效果和背景模糊

- **渐变动画**: 流动的渐变色彩，展现动态美感

- **微交互**: 精心设计的悬浮、点击和过渡动画

- **响应式布局**: 完美适配所有设备尺寸



### 🌟 **技术创新**

- **智能主题**: 自动适配系统主题，支持实时切换

- **多语言**: 中英文无缝切换，国际化体验

- **性能优化**: 代码分割、懒加载、图片优化

- **SEO友好**: 完整的元数据和结构化数据



## 🛠️ 技术架构



### 核心技术栈



| 技术 | 版本 | 用途 |

|------|------|------|

| **Next.js** | 15.x | React全栈框架 |

| **TypeScript** | 5.x | 类型安全 |

| **Framer Motion** | 12.x | 动画引擎 |

| **Tailwind CSS** | 3.x | 原子化CSS |

| **Lucide React** | Latest | 图标库 |

| **next-themes** | Latest | 主题管理 |



## 🎪 功能展示



### 🏠 **英雄区域**

- **3D Logo**: 可交互的大脑图标，悬浮时旋转180度

- **动态标题**: 流动的渐变文字效果

- **技能云**: 交互式技能标签，悬浮时产生阴影效果

- **统计数据**: 脉冲动画的成就展示



### 💼 **项目展示**

- **卡片设计**: 玻璃拟态风格的项目卡片

- **悬浮效果**: 鼠标悬浮时的3D变换

- **技术标签**: 彩色渐变的技术栈标签

- **快速访问**: 一键跳转到项目链接



### 🔧 **服务展示**

- **图标动画**: 悬浮时的旋转和缩放效果

- **渐变背景**: 动态的背景色彩变化

- **光效扫描**: 从左到右的光线扫描效果

- **装饰元素**: 旋转的几何图形装饰



### 🌟 **开源项目**

- **GitHub集成**: 直接展示GitHub项目信息

- **进度条**: 动态加载的顶部进度条

- **分类展示**: 清晰的项目分类和描述

- **快速链接**: 直达GitHub仓库



## 🚀 快速开始



### 环境准备



```bash

# 检查Node.js版本 (需要 >= 18.0.0)

node --version



# 检查npm版本 (需要 >= 8.0.0)

npm --version

```



### 安装与运行



```bash

# 1. 克隆项目

git clone https://github.com/geallenboy/gegarron.git

cd gegarron



# 2. 安装依赖

npm install



# 3. 启动开发服务器

npm run dev



# 4. 打开浏览器访问

# http://localhost:3000

```



### 构建部署



```bash

# 构建生产版本

npm run build



# 预览生产版本

npm run start



# 代码检查

npm run lint

```



## 📁 项目结构



```

gegarron/

├── 📁 src/

│   ├── 📁 app/                    # Next.js App Router

│   │   ├── 📄 layout.tsx         # 根布局组件

│   │   ├── 📄 page.tsx           # 主页面组件

│   │   ├── 📄 providers.tsx      # 全局Provider

│   │   ├── 📄 not-found.tsx      # 404页面

│   │   ├── 📄 robots.ts          # 搜索引擎爬虫配置

│   │   └── 📄 sitemap.ts         # 站点地图

│   ├── 📁 config/                 # 配置文件

│   │   └── 📄 infoConfig.ts      # 个人信息配置

│   ├── 📁 styles/                 # 样式文件

│   │   └── 📄 tailwind.css       # 全局样式

│   ├── 📁 components/             # 可复用组件

│   │   ├── 📁 ui/                # UI组件库

│   │   ├── 📁 shared/            # 共享组件

│   │   └── 📁 seo/               # SEO组件

│   └── 📁 lib/                    # 工具函数

├── 📁 public/                     # 静态资源

│   ├── 🖼️ favicon.png            # 网站图标

│   └── 🖼️ *.webp                # 项目图片

├── 📄 tailwind.config.ts         # Tailwind配置

├── 📄 next.config.js             # Next.js配置

└── 📄 package.json               # 项目依赖

```



## ⚙️ 个性化配置



### 🔧 基本信息设置



编辑 `src/config/infoConfig.ts`:



```typescript

// 个人基本信息

export const name = 'Your Name'

export const email = 'your@email.com'



// 社交媒体链接

export const socialLinks = [

  {

    name: 'Github',

    icon: 'github',

    href: 'https://github.com/yourusername'

  },

  {

    name: 'Twitter',

    icon: 'x', 

    href: 'https://twitter.com/yourusername'

  }

  // 添加更多社交链接...

]



// 核心服务

export const coreServices = {

  zh: [

    {

      title: '服务标题',

      description: '服务描述',

      icon: 'brain'

    }

    // 添加更多服务...

  ]

}



// 项目列表

export const projectsList = {

  zh: [

    {

      name: '项目名称',

      description: '项目描述',

      link: { href: 'https://project-url.com' },

      logo: '/project-image.webp',

      techStack: ['Next.js', 'TypeScript', 'Tailwind CSS'],

      category: ['网站', '应用']

    }

    // 添加更多项目...

  ]

}

```



### 🎨 主题定制



在 `tailwind.config.ts` 中自定义主题:



```typescript

export default {

  theme: {

    extend: {

      colors: {

        // 自定义颜色

        primary: {

          50: '#eff6ff',

          500: '#3b82f6',

          900: '#1e3a8a'

        }

      },

      animation: {

        // 自定义动画

        'float': 'float 6s ease-in-out infinite',

        'pulse-glow': 'pulse-glow 2s infinite'

      }

    }

  }

}

```



### 🌐 多语言配置



支持中英文双语，在配置文件中添加对应语言的内容:



```typescript

export const content = {

  zh: {

    headline: '你好，我是 Your Name',

    tagline: '用 AI 重新定义可能性',

    // 更多中文内容...

  },

  en: {

    headline: "Hi, I'm Your Name", 

    tagline: 'Redefining Possibilities with AI',

    // 更多英文内容...

  }

}

```



## 🎨 设计系统



### 色彩方案



```css

/* 主色调 */

--primary-blue: #3B82F6

--primary-purple: #8B5CF6  

--primary-pink: #EC4899



/* 渐变色 */

--gradient-primary: linear-gradient(135deg, #3B82F6, #8B5CF6)

--gradient-secondary: linear-gradient(135deg, #8B5CF6, #EC4899)



/* 玻璃效果 */

--glass-bg: rgba(255, 255, 255, 0.1)

--glass-border: rgba(255, 255, 255, 0.2)

--glass-blur: backdrop-filter: blur(20px)

```



### 动画时序



| 动画类型 | 持续时间 | 缓动函数 |

|----------|----------|----------|

| 微交互 | 200ms | ease-out |

| 悬浮效果 | 300ms | ease-in-out |

| 页面过渡 | 500ms | cubic-bezier |

| 背景动画 | 2-20s | linear/ease-in-out |



### 间距系统



```css

/* Tailwind CSS间距 */

xs: 0.5rem   /* 8px */

sm: 1rem     /* 16px */  

md: 1.5rem   /* 24px */

lg: 2rem     /* 32px */

xl: 3rem     /* 48px */

2xl: 4rem    /* 64px */

```



## 🚀 性能优化



### 构建优化

- ✅ **代码分割**: 自动路由级别的代码分割

- ✅ **Tree Shaking**: 移除未使用的代码

- ✅ **图片优化**: Next.js Image组件自动优化

- ✅ **字体优化**: 本地字体文件，减少网络请求

- ✅ **CSS优化**: Tailwind CSS自动清理未使用样式



### 运行时优化

- ✅ **懒加载**: 组件和图片按需加载

- ✅ **缓存策略**: 静态资源长期缓存

- ✅ **预加载**: 关键资源预加载

- ✅ **压缩**: Gzip/Brotli压缩

- ✅ **CDN**: 静态资源CDN分发



### 性能指标



| 指标 | 目标值 | 当前值 |

|------|--------|--------|

| **FCP** | < 1.5s | ~1.2s |

| **LCP** | < 2.5s | ~2.1s |

| **CLS** | < 0.1 | ~0.05 |

| **FID** | < 100ms | ~80ms |



## 🔧 开发指南



### 添加新组件



```typescript

// src/components/ui/NewComponent.tsx

'use client'



import { motion } from 'framer-motion'



interface NewComponentProps {

  title: string

  description?: string

}



export const NewComponent = ({ title, description }: NewComponentProps) => {

  return (

    

      
{title}


      {description && (

        
{description}


      )}

    

  )

}

```



### 自定义动画



```typescript

// 定义动画变体

const customVariants = {

  hidden: { 

    opacity: 0, 

    scale: 0.8,

    y: 50 

  },

  visible: {

    opacity: 1,

    scale: 1,

    y: 0,

    transition: {

      type: "spring" as const,

      stiffness: 100,

      damping: 15

    }

  }

}



// 使用动画



  Content



```



### 添加新页面



```bash

# 1. 创建页面目录

mkdir src/app/about



# 2. 创建页面文件

touch src/app/about/page.tsx



# 3. 添加页面内容

echo "export default function About() {

  return 
About Page


}" > src/app/about/page.tsx

```



## 🐛 常见问题



### TypeScript错误



**问题**: Framer Motion类型错误

```typescript

// ❌ 错误写法

transition: { type: "spring" }



// ✅ 正确写法  

transition: { type: "spring" as const }

```



**问题**: 图片路径错误

```typescript

// ❌ 错误写法



// ✅ 正确写法



```



### 性能问题



**问题**: 动画卡顿

```css

/* 解决方案: 启用GPU加速 */

.animated-element {

  transform: translate3d(0, 0, 0);

  will-change: transform;

}

```



**问题**: 首屏加载慢

```typescript

// 解决方案: 使用动态导入

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {

  loading: () => 
Loading...


})

```



### 部署问题



**问题**: Vercel部署失败

```bash

# 检查Node.js版本

node --version



# 清理缓存重新安装

rm -rf node_modules package-lock.json

npm install

```



## 🤝 贡献指南



我们欢迎所有形式的贡献！



### 贡献流程



1. **Fork项目** 到你的GitHub账户

2. **创建分支** `git checkout -b feature/amazing-feature`

3. **提交更改** `git commit -m 'Add amazing feature'`

4. **推送分支** `git push origin feature/amazing-feature`

5. **创建PR** 提交Pull Request



### 代码规范



```bash

# 代码格式化

npm run format



# 代码检查

npm run lint



# 类型检查

npm run type-check

```



### 提交规范



```bash

# 功能添加

git commit -m "feat: add new animation component"



# 问题修复  

git commit -m "fix: resolve mobile responsive issue"



# 文档更新

git commit -m "docs: update README with new features"

```



## 📄 许可证



本项目基于 [MIT License](LICENSE) 开源协议。



## 🙏 致谢



感谢以下开源项目和社区的支持：



- [**Next.js**](https://nextjs.org/) - 强大的React全栈框架

- [**Framer Motion**](https://www.framer.com/motion/) - 优雅的动画库

- [**Tailwind CSS**](https://tailwindcss.com/) - 实用的CSS框架

- [**Lucide**](https://lucide.dev/) - 精美的图标库

- [**Vercel**](https://vercel.com/) - 优秀的部署平台



## 📞 联系方式






**GeGarron** - AI探索者 & 独立开发者



[![Email](https://img.shields.io/badge/Email-gejialun88%40gmail.com-red?style=for-the-badge&logo=gmail)](mailto:gejialun88@gmail.com)

[![GitHub](https://img.shields.io/badge/GitHub-geallenboy-black?style=for-the-badge&logo=github)](https://github.com/geallenboy)

[![Twitter](https://img.shields.io/badge/Twitter-gejialun88-blue?style=for-the-badge&logo=twitter)](https://twitter.com/gejialun88)



[🌐 **访问网站**](https://gegarron.com) · [📖 **查看文档**](https://github.com/geallenboy/gegarron) · [💬 **技术交流**](mailto:gejialun88@gmail.com)






---






**如果这个项目对你有帮助，请给一个 ⭐ Star 支持！**



*用心构建每一行代码，用技术改变世界* 🚀