<<<<<<< HEAD
illli Ai studio 是一个专业的 超灵感AI工作室平台，为用户提供智能化的创意解决方案。
- 智能内容生成
- AI 图像创作
- 数据分析
- 代码辅助
- 多语言翻译
- 语音识别
- Astro 5.0 - 现代静态网站生成器
- Tailwind CSS - 实用优先的 CSS 框架
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览构建结果
npm run preview/
├── public/ # 静态资源
├── src/
│ ├── assets/ # 图片、样式等资源
│ ├── components/ # 组件
│ ├── content/ # 内容（博客文章等）
│ ├── layouts/ # 布局组件
│ ├── pages/ # 页面
│ └── utils/ # 工具函数
├── package.json
└── astro.config.ts
A modern, responsive portfolio website built with Next.js 15, TypeScript, and Tailwind CSS.
- 🚀 Next.js 15 - Latest version with App Router
- 🎨 Modern UI - Beautiful design with Tailwind CSS
- 📱 Responsive - Works perfectly on all devices
- 🌙 Dark/Light Mode - Theme switching capability
- 📝 Blog System - Dynamic blog with markdown support
- ⚡ Performance - Optimized for speed and SEO
- 🔧 TypeScript - Full type safety
- Framework: Next.js 15.3.4
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Radix UI
- Animations: Framer Motion
- Icons: Lucide React
- Markdown: React Markdown
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone <your-repo-url>
cd client13- Install dependencies:
npm install
# or
yarn install- Run the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
src/
├── app/ # Next.js App Router pages
│ ├── about/ # About page
│ ├── blog/ # Blog pages
│ └── navigation/ # Navigation page
├── components/ # Reusable components
│ ├── ui/ # UI components
│ └── magicui/ # Magic UI components
├── sections/ # Page sections
├── assets/ # Static assets
└── lib/ # Utility functions
This project can be deployed on:
- Vercel (Recommended)
- Netlify
- Railway
- Any platform that supports Next.js
This project is private and proprietary.
For any questions or support, please contact the project maintainer.
超灵感工作室是一个专注于AI辅助创意设计的个人作品展示网站，采用现代化的前端技术栈构建，以深色紫色调为主基调，融合发光元素和动态效果，营造出科技感与创意感并存的视觉体验。网站主要展示个人作品集、技术能力和社交网络，通过精心设计的UI组件和流畅的动画效果，为访问者提供沉浸式的浏览体验。
┌───────────────────────────────────────────────────┐
│ 前端 (Next.js) │
├───────────┬───────────────┬────────────┬──────────┤
│ 页面组件 │ UI组件库 │ 数据获取层 │ 动画系统 │
└─────┬─────┴───────┬───────┴─────┬──────┴────┬─────┘
│ │ │ │
▼ ▼ ▼ ▼
┌─────────────────────────────────────────────────┐
│ API接口层 (RESTful) │
└─────────────────────────┬─────────────────────┘
│
▼
┌─────────────────────────────────────────────────┐
│ 后端 (Strapi CMS) │
├───────────┬───────────────┬────────────────────┤
│ 内容类型 │ 媒体管理 │ 用户权限 │
└─────┬─────┴───────┬───────┴──────────┬─────────┘
│ │ │
▼ ▼ ▼
┌─────────────────────────────────────────────────┐
│ 数据库 (MySQL) │
├───────────┬───────────────┬────────────────────┤
│ 作品数据 │ 用户数据 │ 配置数据 │
└───────────┴───────────────┴────────────────────┘
src/
├── app/ # Next.js应用路由和页面
│ ├── page.tsx # 首页
│ ├── about/ # 关于页面
│ ├── blog/ # 博客页面
│ └── layout.tsx # 全局布局
├── components/ # 可复用UI组件
│ ├── ui/ # 基础UI组件
│ └── shared/ # 共享组件
├── sections/ # 页面主要区块
│ ├── hero/ # 首页主视觉区
│ ├── projects/ # 项目展示区
│ └── friends/ # 友链展示区
├── lib/ # 工具和库
│ ├── api.ts # API请求和数据获取
│ └── utils.ts # 通用工具函数
└── assets/ # 静态资源
┌───────────────────────┐ ┌───────────────────────┐
│ 内容类型管理 │────►│ API生成器 │
└───────────────────────┘ └───────────────────────┘
▲ │
│ ▼
┌───────────────────────┐ ┌───────────────────────┐
│ 媒体文件管理 │◄────│ 权限控制系统 │
└───────────────────────┘ └───────────────────────┘
▲ │
│ ▼
┌───────────────────────┐ ┌───────────────────────┐
│ 数据模型 │◄────│ 插件扩展系统 │
└───────────────────────┘ └───────────────────────┘
Strapi CMS 使用 MySQL 数据库存储以下主要数据实体：
┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐
│ HomeData │ │ Project │ │ BlogPost │
├───────────────────┤ ├───────────────────┤ ├───────────────────┤
│ id │ │ id │ │ id │
│ home_title │ │ title │ │ title │
│ description │ │ year │ │ slug │
│ work_title │ │ who │ │ description │
│ work_description │ │ results │ │ content │
│ contact_links │ │ link │ │ category │
└───────────────────┘ │ image │ │ bg_image │
└───────────────────┘ └───────────────────┘
▲ ▲
│ │
┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐
│ Friend │ │ AboutData │ │ Media │
├───────────────────┤ ├───────────────────┤ ├───────────────────┤
│ id │ │ id │ │ id │
│ name │ │ title │ │ name │
│ position │ │ description │ │ alternativeText │
│ description │ │ personal │ │ caption │
│ link │ │ skills │ │ width │
│ Avatar │ │ language │ │ height │
└───────────────────┘ └───────────────────┘ │ url │
│ formats │
└───────────────────┘
前端通过RESTful API与Strapi后端通信，主要API接口包括：
GET /api/home - 获取首页数据
GET /api/about - 获取关于页面数据
GET /api/friends - 获取友链列表
GET /api/projects - 获取项目列表
GET /api/blogs - 获取博客文章列表
GET /api/blogs/:slug - 获取特定博客文章详情
网站采用深色主题设计，以紫色调为主，配合发光元素：
┌────────────────────────────────────────────────────────────────┐
│ ┌─────────────┐ ┌─────────────┐│
│ │ Logo │ │ Nav ││
│ └─────────────┘ └─────────────┘│
├────────────────────────────────────────────────────────────────┤
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Hero Section │ │
│ │ (动态星空效果) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────┘ │
├────────────────────────────────────────────────────────────────┤
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Projects Section │ │
│ │ (作品展示区) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────┘ │
├────────────────────────────────────────────────────────────────┤
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Friends Section │ │
│ │ (无限轮播友链展示) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────┘ │
├────────────────────────────────────────────────────────────────┤
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Contact Section │ │
│ └────────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
- 前端：Next.js 15.x、React 18.x、TailwindCSS、Framer Motion
- 后端：Strapi CMS
- 数据库：MySQL
- 部署：Docker容器化部署
开发服务器运行：
npm run dev
# 或
yarn dev
# 或
pnpm dev
# 或
bun dev在浏览器中访问 http://localhost:3000 查看网站。
- 潜在客户和合作伙伴：寻找AI创意设计服务的个人或企业
- 同行设计师：对AI辅助设计感兴趣的设计师群体
- 招聘方：寻找具有创新能力的设计人才的企业或团队
- 创意社区：对创意设计和AI技术感兴趣的人群
-
作品展示需求
- 以视觉吸引力强的方式展示个人项目作品
- 提供作品详情页面，展示项目背景、过程和成果
- 支持多种媒体格式（图片、视频）的作品展示
- 作品分类与筛选功能
-
内容管理需求
- 通过后台轻松添加、编辑和删除作品
- 支持内容草稿和发布状态管理
- 媒体文件管理系统，优化图片存储与展示
- 博客内容管理，支持富文本编辑
-
用户体验需求
- 响应式设计，适配各种设备尺寸
- 流畅的页面过渡和动画效果
- 优化的加载速度和性能表现
- 直观的导航系统和用户界面
-
社交与联系需求
- 友链展示与合作伙伴展示
- 社交媒体链接整合
- 联系表单或其他联系方式
- 分享功能支持
-
性能需求
- 页面加载时间控制在3秒以内
- 支持图片懒加载和资源优化
- 实现数据缓存策略减少API请求
- 良好的移动端性能表现
-
安全需求
- 后台管理系统访问控制
- API接口安全保护
- 数据备份与恢复机制
- 防DDoS和常见Web攻击防护
-
可维护性需求
- 模块化和组件化的代码架构
- 清晰的代码注释和文档
- 版本控制与更新管理
- 错误监控与日志系统
-
技术约束
- 基于Next.js前端框架开发
- 使用Strapi作为后端CMS系统
- MySQL数据库存储结构化数据
- 支持主流浏览器的兼容性
本项目成功实现了一个现代化、响应式的个人作品展示网站，具有以下特点：
-
创新的视觉体验：通过深色紫色调设计和动态效果，打造出独特的科技感与创意感并存的视觉风格，使网站在同类作品集站点中脱颖而出。
-
高效的内容管理：基于Strapi CMS的内容管理系统，使作品更新和内容维护变得简单高效，无需直接修改代码即可更新网站内容。
-
优化的用户体验：实现了多项用户体验优化措施，包括：
- 平滑的动画和过渡效果
- 优化的加载性能和响应速度
- 直观的导航和内容展示逻辑
- 全响应式设计，适配从移动设备到大屏显示器
-
完善的技术架构：采用前后端分离架构，前端使用Next.js实现静态生成和服务端渲染的混合策略，后端使用Strapi提供稳定的API服务，MySQL数据库确保数据的可靠存储。
-
高级动画系统：
- 实现轨道动画系统，创造动态星空效果
- 使用Framer Motion实现平滑的元素过渡
- 无限滚动效果展示友链和作品
-
高性能数据获取策略：
- 实现自定义缓存系统减少重复请求
- 智能重试机制处理网络不稳定情况
- 全面的错误处理和用户友好的提示
-
模块化组件设计：
- 高度抽象的UI组件库，确保界面一致性
- 功能与展示分离的架构，提高可维护性
- 状态管理与数据流的合理设计
-
性能优化挑战：
- 挑战：大量动画效果和媒体内容导致性能问题
- 解决方案：实现图片优化、代码分割和懒加载策略，使用Next.js的图像优化功能，控制动画复杂度
-
数据获取可靠性：
- 挑战：网络不稳定环境下的数据获取可靠性
- 解决方案：实现带退避算法的请求重试机制和本地缓存系统，提高API请求成功率
-
跨浏览器兼容性：
- 挑战：确保在不同浏览器中保持一致的视觉效果和功能
- 解决方案：使用标准CSS特性，提供适当的回退方案，全面的浏览器测试
项目未来可考虑的发展方向：
-
增强交互功能：
- 添加用户评论和反馈系统
- 引入更多交互式展示方式，如3D展示或AR预览
-
内容扩展：
- 增加更多内容类型，如教程、案例研究等
- 支持更多媒体格式，如3D模型、交互式演示
-
技术升级：
- 实现PWA功能，支持离线访问
- 集成AI助手，提供智能交互体验
- 增强分析功能，收集用户行为数据
-
国际化支持：
- 多语言支持，拓展国际市场
- 区域化内容管理
The project includes a DashScope AI assistant chat widget that appears in the bottom right corner of the website. To set it up:
- Create a
.env.localfile in the root directory - Add the following environment variables with your DashScope API credentials:
NEXT_PUBLIC_DASHSCOPE_API_KEY=your_dashscope_api_key_here NEXT_PUBLIC_DASHSCOPE_APP_ID=your_dashscope_app_id_here - If you want to customize the assistant, you can modify the parameters in
src/components/DashScopeAssistant.tsx
For more detailed instructions, please refer to the DashScope Assistant Setup Guide.
2abd93aa38cc4ac821e0c4458dab8fdbc33808db