个人网站产品系统

本网站是一个专业的个人作品展示平台，主要用于展示软件开发工程师在数字孪生与多模态大模型技术领域的项目经验和技术能力。

*项目展示模块**：以卡片形式展示7个核心项目，包括Web端数字孪生系统、船舶监管系统、AI模型应用系统、深海养殖软件系统、船舶能效控制系统等，每个项目支持视频预览和详细页面跳转。

**技术能力模块**：展示数字孪生技术、大模型应用、前端开发、系统集成、全栈开发、项目管理等六大技术能力，并突出核心优势。

**个人简介模块**：展示开发经验、技术栈、工作信息、联系方式等个人信息，帮助访客全面了解开发者背景。

**交互体验**：采用滚动动画、视频播放、玻璃态设计等现代化UI效果，提供流畅的用户体验。



**前端框架**：Next.js 16（React 18）+ TypeScript，采用App Router架构，支持服务端渲染和静态生成，提升SEO和首屏加载性能。

**样式方案**：Tailwind CSS 4.x + PostCSS，采用原子化CSS设计，结合自定义动画和玻璃态（glassmorphism）效果，实现现代化的视觉设计。

**UI组件库**：Radix UI + shadcn/ui，提供无障碍访问的组件基础，确保良好的用户体验和可访问性。

**字体与图标**：Google Fonts（Orbitron + Inter）+ Lucide React图标库，提供专业的视觉呈现。

### 架构设计

项目采用组件化、模块化的架构设计，主要分为页面层（app目录）、组件层（components目录）、工具层（lib目录）和静态资源层（public目录）。通过Intersection Observer API实现滚动动画效果，采用客户端组件（"use client"）处理交互逻辑，服务端组件处理静态内容渲染。

### 实现亮点

1. **性能优化**：采用Next.js的自动代码分割和图片优化，结合视频懒加载和元数据预加载策略，显著提升页面加载速度。

2. **交互体验**：实现滚动触发的渐入动画效果，视频预览功能支持点击播放和模态框展示，提供流畅的用户交互体验。

3. **响应式设计**：采用移动优先的响应式布局，支持多设备适配，确保在不同屏幕尺寸下都有良好的显示效果。

4. **可维护性**：采用TypeScript进行类型约束，组件化设计便于复用和维护，代码结构清晰，易于扩展。

5. **视觉设计**：采用玻璃态设计风格，结合渐变色彩和脉冲动画效果，营造科技感与未来感的视觉氛围，与数字孪生和AI技术的主题高度契合。