我缺课去打造这个沉浸式作品集!!

Source: Dev.to

概览

我叫 Amaan Syed —— 一名全栈开发者，我把网页性能当作 F1 赛车来对待：精准、流畅、极致快速。
我的作品集正是这种理念的体现，融合了严格的工程实践（类型安全、Docker 化）和介于 Formula 1 空气动力学与科幻未来主义之间的视觉风格。它的设计旨在像有效的赛道遥测数据一样——精准、流畅且动态。

已针对桌面（宽屏）和移动（窄屏）进行适配
🏎️ CLICK HERE TO VIEW FULL SITE (DESKTOP RECOMMENDED)

我的构建过程

• 框架： React + Vite（闪电般的构建速度）
• 动画： Framer Motion（基于物理的过渡）
• 样式： 自定义 CSS（玻璃拟态 + 新粗野主义）
• 部署： Google Cloud Run（Docker 化的 Nginx 容器）

AeroFlow

背景是一个活跃的组件，使用混沌的 Bézier 曲线渲染 “Scuderia Red” 流线。线条在屏幕上划动并脉冲，模拟风洞遥测数据。

Liquid Glass

UI 元素采用磨砂玻璃效果并结合高对比度的新粗野主义，呈现出未来感的抬头显示（HUD）外观。

沉浸式微世界

我没有使用传统网格，而是为每个平台打造了独特的体验：

• Web： 一个 3D “Splatter” 布局，浏览器窗口在 Z 轴空间中漂浮。
• Mobile： 一个垂直的 “tear‑off” 卡片堆叠，手感十足。
• AI： 一个带有全息粒子的 “Blast Door” 终端界面。

由 Google Antigravity 提供 Turbo‑Charged 动力

• 物理细化： 使用 Gemini 微调 Framer Motion 弹簧在移动端卡片堆叠的阻尼和刚度系数。
• 一站式 DevOps： Antigravity 自动生成 Dockerfile 和 nginx.conf 用于 Cloud Run，并自动处理 SPA 路由逻辑。
• 视觉打磨： AI 建议使用圆锥渐变遮罩为 “Silver Flow Button” 添加完美的金属光泽，无需使用通用素材。

我尤其为 AI 部分的 Blast Door Terminal 感到自豪。它纯粹依赖 CSS/JS 实现——扫描线、全息粒子以及与用户旅程完美同步的机械门开启动画，将普通的 “Skills” 列表转化为叙事事件。

整体美学围绕我的热情展开：F1、星球大战、色彩科学与排版。

保持饥渴，保持愚蠢！