Gionatan Nese '26

作品集要解决的问题通常是排序：先放哪个项目、每个给多大位置、访客滚到第几屏会走。这一份干脆不排序，它把作品摊在一片空白里，让访客自己走过去。

打开是一块几乎全白的画面，顶上一行小字写着 GN .D，旁边三个带编号的小标签。画面中间散着十几张作品图，大小不一、深浅不一，有的是黑底上的一枚吊坠，有的是一支喷枪的渲染图，有的是一台发动机。它们没有对齐到任何网格上。

推滚轮，文档一动不动，动的是这片空间。按住拖，整片图跟着手走，松手之后还会顺着惯性滑一段才停。图会随着移动进出画面，走远了还会有新的进来。

这个做法把一件事交还给了访客：看多少、按什么顺序看、什么时候停。换来的是你始终不知道一共有多少东西可看，也不知道走到哪儿算到头。

第二块才是常规的作品页。切到 Projects，画面变成一排满幅的三维渲染图，横着排开，上面一行标题写着 A Curated Selection of Branding and Digital Projects。四个项目列在这里，加上一块写着 Coming Soon 的空位。

第三块 About 是一页文字，讲他怎么做事，分成 Quality 和 Feel 两段，大意是不为了填满版面而做东西，以及设计不只是表面好看，还包括它在手里的感觉。他在这一页注明自己目前在 DashDigital® 工作。

值得注意的是这三块在技术上是三条真实的路由。虽然画面几乎全在画布里，四个项目的链接是实打实的 <a>，地址分别是 /projects/ferrari、/projects/erica-basile 这一类，可以单独打开、单独分享。很多这种全画布的站会把导航做成纯粹的画布事件，链接一根都没有，这个站没有走那条路。

版面上的规矩只有一条，文字归 DOM，画面归画布，两边不重叠。

这条规矩带来的结果很极端。整个首页的 DOM 只有 176 个元素，字号全部落在 11 到 16px 之间，因为所有大字都不在 DOM 里。文字颜色只有两种，黑色用在 174 个元素上，白色用在 2 个。背景色也只有三种，白、一层半透明的浅灰、以及一块黑。

那层半透明浅灰是 rgba(237, 237, 237, 0.5)，只用在顶上那几个导航小标签上，全站 176 个元素里只有 5 个带圆角，也全是它们。换句话说，圆角在这个站里是一个功能标记，只要看到圆角，那就是可以点的东西。

字体是两款，分工按角色划，不按字号划。LayGrotesk 这款无衬线写了 1,455 个字符，Teodor 这款衬线只写了 56 个。但把渲染面积算出来，无衬线占 12,787 平方像素，衬线占 6,466，也就是 3.7% 的字数占掉了三分之一的文字面积。衬线字出现的地方很固定，项目名后面那一行说明。

最见功夫的是这两款字怎么配。Ferrari 那个项目页顶上，Ferrari 四个字母用的是加粗的无衬线，紧接着一行 Design Exploration 用的是衬线。一个是名字，一个是它属于哪一类，字形的差别替代了本来要用字号或者颜色去做的区分。Projects 页那行标题也是同一手，A Curated Selection of 是粗无衬线，Branding and Digital Projects 是衬线。

项目页的画面走的是另一套逻辑。白色的标题区之下是一整块法拉利红，红里躺着一个近乎全黑的 330 P4 底盘剪影。整个站到这里才第一次出现大面积的彩色，而且只有这一块，前面的 Creative Space 和后面的 About 都回到白底。颜色在这里是用来分段的，不是用来装饰的。

三维画面的明暗全部由一张 837 KB 的 MatCap 贴图提供。这是个省事的做法。把光照信息预先烘进一张球面贴图里，渲染时按法线方向取色，场景里一盏灯都不用打，金属和塑料的质感直接从贴图上来。这样一来光就是死的，物体转了方向，高光不会跟着变。对这种不需要真实光照变化的展示画面来说，这笔换算很划算。

这个站的主交互是拖和推，不是点。

推滚轮的时候，动的是画布里的那片空间，文档的 scrollY 从头到尾是 0。按住左键横向拖，那片空间跟着走，松手之后有一段明显的惯性尾巴。图在移动中会重新进出画面，所以这片空间没有边界，也没有到底这回事。

想复刻这套的人要注意一个前提：文档不滚意味着浏览器原生的滚动条、键盘翻页、触摸板惯性全部失效，这些都得自己实现一遍。这个站实现了拖和滚轮，但没有实现键盘。

声音这一层做得比画面还细。站点准备了八个音效文件，名字直接说明了各自的岗位：ENTER 进场、MENU HOVER 划过菜单、IMAGE HOVER 划过图、SOFT CLICK 和 SOFT CLICK 2 两种点击、HIT 一次撞击、SCRUBBLE 拖动时的摩擦声，外加一段 AMBIENT 环境音。也就是说，每一种手势都配了一个声音，拖动时听到的和点击时听到的不是同一个。

声音默认是关的，右上角那个小圆点是开关，它的说明文字写着打开声音。没有自动播放，这一点是对的。

减弱动画这个系统偏好，站点完全没有处理。样式表里没有对应的规则，打开这个设置之后画布照样在跑。对一个把全部内容都放进画布的站来说，这个偏好本来最该被接住，因为这里没有第二套静态版本可以退回去。

键盘也是同一类缺口。样式表里一条 :focus 规则都没有，导航标签虽然带编号，但那三个数字是印上去的，按数字键不会切换。只用键盘的人能 Tab 到那几个链接，却看不出焦点停在哪。

站点用 Next.js 加 Turbopack 构建，画面这一层是一块 1920×945 的 WebGL2 画布，由 three.js r184 驱动。画布的渲染尺寸和显示尺寸是 1 比 1，没有做超采样。

首屏快得很干脆。首字节 228 毫秒，首次内容绘制 432 毫秒，load 468 毫秒，全程一次布局偏移都没有，累计位移量是 0。这在一个 WebGL 站上不常见，原因也不复杂。首屏要绘制的 DOM 只有那一行导航，画布是后面才铺上去的，所以没有东西可以被挤动。

一次访问传 20.3 MB，55 个文件。最大的一类是视频，11.5 MB 分在几个 webm 里，最大的一个 4.6 MB。第二大的是音频 6.65 MB，而这 6.65 MB 里有 6.5 MB 是那一段 AMBIENT 环境音。

问题就在这里。声音默认是关的，可是这段 6.5 MB 的环境音在访客碰任何东西之前就已经下载完了，占整次访问的三分之一。真正该做的是等访客点开声音再去取它，八个音效里其余七个加起来还不到 150 KB，先下也无所谓。

图片这边处理得很省。作品图是 webp 和 jpg 混用，单张最大 335 KB，大部分在 50 到 230 KB 之间，一共 2.1 MB 左右，对一个以图为主的作品集来说相当克制。

无障碍这块，基础的几样是齐的。页面声明了语言，九个可交互控件全部有名字，没有一处用正数的 tab 顺序。做错的是前面说过的两条，焦点不可见，以及减弱动画完全没接。开发奖的六项里无障碍 6.40 是最低的一项，评委 Federico Pian 在这一项上只给了 5 分，和实际情况对得上。

这个站在同一天拿下两个平台的奖，而且在 Awwwards 那边同时拿了当日站点和开发奖。

四个维度里 Creativity 7.73 领先，Usability 7.09 落在最后，两者差 0.64。这个高低关系正好是这个站的取向。它把浏览方式整个换掉了，赢在这一步，也在这一步上让一部分访客找不到北。

五位评委的总分是 7.00、7.30、7.00、7.00、6.00。四张挤在 7.0 到 7.3，一位土耳其的独立艺术总监把四项全部给了 6 分。

开发奖那边，WPO 7.80 是六项最高的，和实测对得上，首屏 432 毫秒、零位移。无障碍 6.40 最低，也对得上。

两个人，一个在米兰负责设计，一个在巴基斯坦负责前端。Soomro 在自己的 Awwwards 主页上把年龄写进了一句话的自我介绍里。创意前端工程师，WebGL，16 岁。这个站是他的两个获奖作品之一，也是他在 FWA 的第一座奖。

Nese 这边的主页只有这一个作品，但这一个作品同时带回了当日站点、开发奖和一次提名。他把接单预算和远程意向也挂在主页上，写着 5,000 到 30,000 美元。这份作品集的目的写在明面上。