Portfolio Project Collection (作品集项目集)

这是一个包含多种 frontend 框架实现的设计师作品集项目集合。

DEMO Online

• https://ag.cszi.com [angular-app]

项目结构

• astro-app: 使用 Astro + Tailwind CSS 构建的静态站点版本。
• angular-app: 使用 Angular 19 + Tailwind CSS 4 构建的单页应用版本。
• react-app: 使用 React 19 + Vite 7 + Tailwind CSS 4 构建的单页应用版本。
• vue-app: 使用 Vue 3 + Vite 7 + Tailwind CSS 4 构建的单页应用版本。

核心功能

• 响应式布局: 适配手机与桌面端，提供类原生 Web App 交互体验。
• 动态分类: 支持按项目类型实时过滤。
• 高清灯箱: 深入优化的图片预览系统，支持多图切换、手势与键盘导航。
• 数据驱动: 所有内容（作品、服务、个人信息）均通过 JSON 配置文件驱动，易于快速修改。

快速开始

每一个子目录都是一个独立的工程。

React 版本 (推荐)

cd react-app
pnpm install
pnpm dev

Vue 版本

cd vue-app
pnpm install
pnpm dev

Astro 版本

cd astro-app
pnpm install
pnpm dev

Angular 版本

cd angular-app
pnpm install
pnpm start

设计规范

遵循 First Principles 设计，注重视觉美感与极简主义，采用 Inter 字体，强调呼吸感与动态微交互。