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

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

🌐 在线预览 · 📖 文档 · 🐛 报告问题

🎯 项目亮点

🚀 沉浸式体验

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仓库

🚀 快速开始

环境准备

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

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

安装与运行

# 1. 克隆项目
git clone https://github.com/geallenboy/gegarron.git
cd gegarron

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

# 4. 打开浏览器访问
# http://localhost:3000

构建部署

# 构建生产版本
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:

// 个人基本信息
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 中自定义主题:

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'
      }
    }
  }
}

🌐 多语言配置

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

export const content = {
  zh: {
    headline: '你好，我是 Your Name',
    tagline: '用 AI 重新定义可能性',
    // 更多中文内容...
  },
  en: {
    headline: "Hi, I'm Your Name", 
    tagline: 'Redefining Possibilities with AI',
    // 更多英文内容...
  }
}

🎨 设计系统

色彩方案

/* 主色调 */
--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

间距系统

/* 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

🔧 开发指南

添加新组件

// 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 (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="p-6 bg-white/10 backdrop-blur-xl rounded-2xl"
    >
      <h3 className="text-xl font-bold mb-2">{title}</h3>
      {description && (
        <p className="text-gray-600 dark:text-gray-300">{description}</p>
      )}
    </motion.div>
  )
}

自定义动画

// 定义动画变体
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
    }
  }
}

// 使用动画
<motion.div
  variants={customVariants}
  initial="hidden"
  animate="visible"
>
  Content
</motion.div>

添加新页面

# 1. 创建页面目录
mkdir src/app/about

# 2. 创建页面文件
touch src/app/about/page.tsx

# 3. 添加页面内容
echo "export default function About() {
  return <div>About Page</div>
}" > src/app/about/page.tsx

🐛 常见问题

TypeScript错误

问题: Framer Motion类型错误

// ❌ 错误写法
transition: { type: "spring" }

// ✅ 正确写法  
transition: { type: "spring" as const }

问题: 图片路径错误

// ❌ 错误写法
<Image src="./image.jpg" />

// ✅ 正确写法
<Image src="/image.jpg" />

性能问题

问题: 动画卡顿

/* 解决方案: 启用GPU加速 */
.animated-element {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

问题: 首屏加载慢

// 解决方案: 使用动态导入
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <div>Loading...</div>
})

部署问题

问题: Vercel部署失败

# 检查Node.js版本
node --version

# 清理缓存重新安装
rm -rf node_modules package-lock.json
npm install

🤝 贡献指南

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

贡献流程

Fork项目 到你的GitHub账户
创建分支 git checkout -b feature/amazing-feature
提交更改 git commit -m 'Add amazing feature'
推送分支 git push origin feature/amazing-feature
创建PR 提交Pull Request

代码规范

# 代码格式化
npm run format

# 代码检查
npm run lint

# 类型检查
npm run type-check

提交规范

# 功能添加
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 开源协议。

🙏 致谢

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

Next.js - 强大的React全栈框架
Framer Motion - 优雅的动画库
Tailwind CSS - 实用的CSS框架
Lucide - 精美的图标库
Vercel - 优秀的部署平台

📞 联系方式

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

🌐 访问网站 · 📖 查看文档 · 💬 技术交流

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

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

Name		Name	Last commit message	Last commit date
Latest commit History 31 Commits
.vscode		.vscode
docker		docker
public		public
src		src
.dockerignore		.dockerignore
.env.prod		.env.prod
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
components.json		components.json
next-env.d.ts		next-env.d.ts
next.config.mjs		next.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
prettier.config.js		prettier.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
typography.ts		typography.ts

License

geallenboy/gegarron

Folders and files

Latest commit

History

Repository files navigation