Gabriel Atwell 的作品集

这是一个完全自定义、从零开始构建的作品集，使用了 SvelteKit、GSAP 和 Three.js 技术。 它属于 渐进式 Web 应用，汇集了一系列 前端实验，同时还包含一个 Three.js 博客，以及 CSS 和 GSAP 的教程。

https://atwell.dev

---

功能特性

进阶网页应用（PWA）

• 可安装 — 通过网页应用清单文件与图标，访客可将该站点添加到主屏幕或桌面。
• 离线可用 — 服务工作进程会缓存应用核心文件，因此无需网络连接即可加载作品集。
• 响应式设计，以移动端优先 — 无论屏幕尺寸如何，都能呈现自适应布局并支持触控操作。

🧪 前端实验

这是一组我构建的交互式演示沙箱，用于探索并拓展网页技术的极限：

• GSAP — 基于滚动触发的动画、时间轴控制、进度调节、缓动效果以及错开显示功能。
• Three.js — WebGL 场景、3D 模型以及着色器调试环境。
• CSS — 现代布局模式、变换效果、混合模式以及微交互功能。
• 每个实验都是独立且可运行的，并配有文档说明，因此也可作为参考代码片段使用。

Three.js 博客

• 文章由 sveltekit 中的 远程函数 提供服务。
• 内容以 Markdown 格式编写，并在客户端渲染。
• 该博客让网站始终保持最新状态 — 我会定期发布新文章和实验内容。
• 还有一个示例页面。

CSS 与 GSAP 教学内容

• 实验板块既是作品集，也是学习资源。（当未聚焦在任何元素上时，按两次 Tab 键即可进入）
• 每个演示都会解释某项技术之所以有效的原理，而不仅仅是告诉用户如何复制使用。
• 文章会将文字说明与可直接查看和调整的实时交互式示例相结合。

完全自定义

• 无需模板——界面、动画及布局均通过手动编码实现。
• 基于 Markdown 的内容管理方式，让添加项目和文章变得十分快捷。

---

🛠️ 技术栈

层级	技术名称
前端	SvelteKit（Svelte 5 runes）
动画效果	GSAP + ScrollTrigger
3D / WebGL	Three.js
博客后端	Sveltekit Remote Functions
内容格式	Markdown
PWA	Service worker + web app manifest
托管服务	Cloudflare Pages