Matteo Courquin

作品集通常是一条往下滚的长页面，Matteo Courquin 的这一版却把所有内容都摊在一个屏幕上。FWA 页面上的团队自述写得很清楚，这是一个不滚动的互动作品集，要在一个屏幕之内试另一种浏览方式。为了让这一屏像一台真的电脑，站点从开机画面开始。开场模仿的是 BIOS 屏幕，也就是电脑开机时最先跑起来、在黑屏上逐行打出硬件自检信息的那段系统程序。这一屏上还有一行 PRESS ANY KEY (TAB+S) ...... SKIP，提示访客可以按键跳过开场。

开机之后，访客面对的是一张电脑桌面。左边是作品列表和作品缩略图两扇窗口，中间是项目详情和项目图片两扇暂时空着的窗口，右边是一张肖像照片、一扇技术栈窗口、一扇奖项窗口和一扇标着 ABOUT 的自我介绍窗口。Matteo 在 ABOUT 窗口里介绍自己，说他从建筑学转到创业，中途还做过木工。作品列表里一共 12 个项目，获过奖的项目后面挂着一个小奖杯，访客点其中一项，这个项目就会在中间两扇空窗口里打开。每扇窗口的标题栏左端都有一个拖动把手，访客可以把窗口拖到任何地方，再按 L 键一下复原。

桌面上最特别的是那张监控表，它散在窗口的缝隙里，用 10 像素的灰色小字列出访客这一次浏览的数据，包括当前时间、停留时长、鼠标速度、平均帧率、点击次数、悬停次数和按键次数。表上还写着访客的浏览器、系统、窗口尺寸、屏幕刷新率、语言、时区、所在地区，以及到服务器的延迟。访客在桌面上的每一次操作，都会让这张表上的某个数字跳一下。

整个站也可以只用键盘操作，快捷键表就印在桌面右下角。T 键切换语言，S 键开关声音，O 键更换中间的三维物体，D 键切换暗色模式，G 键显示网格。M 键打开一扇地图窗口，标着巴黎和鹿特丹两个办公室，E 键把中间的物体炸开，数字键 0、1、2 直接打开列表里的前三个项目。

这个站的界面只用黑白灰，外加一个很少露面的紫色 #4d00e6，它只出现在选中的项目名和几处小标记上。底色是浅灰色，上面铺着一层细网格，窗口的标题栏是黑底白字，内容区是更浅的灰。整张桌面因此像一台老式电脑的系统界面，颜色只用来区分窗口和底，不用来装饰。

窗口上的文字也照着系统界面的样子来写。每扇窗口的标题栏上用方括号写着窗口的名字，比如 [WORK/LIST]、[STACK] 和 [ABOUT]，右端是一个展开用的加号按钮。桌面底部一排四个带箭头的链接按钮，分别通向 LINKEDIN、GITHUB、INSTRAGRAM 和 AWWWARDS，其中 Instagram 拼成了 INSTRAGRAM，多了一个 r。

这个站的文字分成两种完全相反的字体。所有界面文字都是一款叫 n27 的无衬线字，全部大写，只有 10、14 和 18 像素三个字号，字母间距收得很紧，读起来像终端里的系统信息。唯一的大字是背景里那行 CREATIVE DEVELOPER，它不是一款网页字体，而是用矢量图形一笔一笔画出来的哥特体，也就是中世纪手抄本里那种粗细对比极大、笔画带尖角的字。两行字母撑满整个屏幕，窗口压在字上面，中间那个三维物体又压在窗口之间，画面因此分成字、窗口和物体三层。

中间那个物体是桌面上唯一的三维画面。它一共有六种，希腊半身像、玫瑰、水母、骷髅、心脏和一枚国际象棋的马，访客按 O 键就换一种。物体的材质是一种带彩虹色边缘的半透明质感。从这种质感看，它应该是用一张 matcap 贴图做出来的，也就是一张预先画好了光影和反光的球形图片，物体贴上它，不用实时计算灯光也能像玻璃一样反光。

项目打开后，中间两扇窗口的标题换成项目名，内容也照着系统信息的格式来排。详情窗口左边一列是 CLIENT、YEAR、CREDITS 这样的栏目名，右边对齐写着客户、年份，以及每一项分工由谁来做，Matteo 自己负责的那一项就写成 MATTEO (ME)。图片窗口里放着这个项目的截图和视频，一张大图在上，两张小图在下。

访客按 D 键，整张桌面会换成暗色模式，这套黑白灰也跟着整体翻过来。底色变成近黑，窗口的标题栏反过来成了白底黑字，背景里的哥特体字母变成白色。

这个站的动效大多用在信息出现的那一刻。开场的 BIOS 文字像打字机一样逐行打出来，按下回车后，哥特体大字的字母一个个出现，然后各扇窗口依次弹开。照片窗口里的肖像先是一格格的马赛克，再慢慢变清楚。ABOUT 窗口里的文字平时是一串不断跳动的乱码，要等光标移上去，才一个字一个字地还原成正文。

拖动窗口和操作物体的时候，画面都很流畅。桌面静止时、拖动窗口时和按 E 键炸开物体时，画面都是每秒 60 帧，最慢的一帧也在 17 毫秒左右，接近 60 帧下每帧约 16.7 毫秒的预算。三维库 three.js 只负责中间那一个物体，其余的窗口、网格和文字全是普通的网页元素。

这个作品集的页面由网页框架 Next.js 生成，内容存在 Sanity 里。Sanity 是一种无头内容管理系统，只负责存放和管理内容，不管页面长什么样，页面由 Next.js 另外把内容取过来排。项目的图片和视频都从 Sanity 的服务器加载，STACK 窗口里摆着的也正是 Next.js、AWS 等几个技术的标志。

Matteo Courquin 这个站最大的问题是下载量太大。浏览器第一次打开首页，停在 BIOS 屏幕上、访客还没按回车，就已经下载了 32.6 到 33.4 MB。这些下载里有 24.4 MB 是一段 WAV 格式的背景环境音。WAV 是不压缩的音频格式，同样的声音存成 MP3 或 AAC，通常只要它的十分之一左右。更关键的是，这个站的声音默认是关着的，声音按钮上写着 Unmute sound，访客不主动打开声音，这 24.4 MB 就完全用不上。

背景音之外，开场时还有一批文件要一次下载完。另外 8 个音效文件也都是 WAV，合计约 650 KB。六个三维物体的模型合计 2.6 MB，最大的玫瑰就有 979 KB，此外还有一段 2.9 MB 的项目视频和约 950 KB 的脚本。

尽管下载量这么大，首屏本身出来得并不慢。服务器在 201 到 309 毫秒内返回第一个字节，Google 建议的上限是 0.8 秒，浏览器在 360 到 540 毫秒画出第一块内容（FCP），建议是 1.8 秒以内。页面上最大的一块内容（LCP）是缩略图窗口里的一张图，出现在 1 秒左右，也在 Google 建议的 2.5 秒以内，加载时页面也没有任何跳动。不过这个站在加载过程中有一个长达 0.9 到 1.1 秒的长任务，也就是一段让浏览器连续忙着、完全不响应输入的脚本，这一秒左右里访客的点击和按键都得不到回应。

这个站用键盘可以走完所有功能，读屏软件的用户却会遇到不少麻烦。55 个按钮里有 24 个没有读屏软件能念出来的名字，从桌面上看，这些按钮大多是窗口上只画着图标、不带文字的拖动把手和展开按钮。页面没有任何标题标签，读屏用户没法按标题在桌面上跳转。英文版的页面语言还标成了法语，读屏软件会用法语的发音去念英文。操作系统里有一个减少动态效果的设置，是给容易被运动画面弄得头晕的人用的，这个站对它没有做任何处理。

Matteo Courquin 的作品集在 FWA 拿到 82 分，FWA 把它归进 Fun & Playable、Music & Sound 和 Personal/Portfolio 三个分类，也就是好玩可操作、音乐与声音、个人作品集。

两位署名者都来自 Metabole Studio，这家工作室在巴黎和鹿特丹两地办公。两人的 FWA 档案上都是两个当日站，一个在 8 月 19 日，另一个就是这个作品集。桌面奖项窗口里挂着的是 Palomino 这个项目的 Awwwards 荣誉证书，日期也是 8 月 19 日，窗口角上写着 NB. X31，看起来是工作室拿到的奖项总数。Matteo Courquin 在 Awwwards 上有 6 件作品、3 次荣誉提名，作品列表里的 Altitude 101、Palomino、Apax、Techunt 和 Mom Design 都是 Metabole Studio 的项目。从两人的职务看，这个站大概是 Jérôme Bezeau 负责艺术方向，Matteo Courquin 负责开发。