[{"data":1,"prerenderedAt":789},["ShallowReactive",2],{"folio-writing-cmd":3,"folio-clipboard-cmd":74,"cmd-works":79,"folio-page:\u002Fwriting\u002Fhow-i-redrew-my-portfolio":394},[4,13,24,33,42,51,60,67],{"path":5,"title":6,"description":7,"date":8,"tags":9,"readingMinutes":12},"\u002Fwriting\u002Fhow-i-redrew-my-portfolio","How I Redrew My Portfolio","I've just redesigned my portfolio. It used to be blue, it's red now. Here is where everything on it comes from.","2026-10-18",[10,11],"design","personal",17,{"path":14,"title":15,"description":16,"date":17,"tags":18,"readingMinutes":23},"\u002Fwriting\u002Fhow-i-work-with-agents-right-now","How I Work With Agents Right Now","Which agents I use in October 2026 and for what, the skills they share, and the few rules that keep them from acting in my name.","2026-10-12",[19,20,21,22],"agents","ai","workflow","open-source",9,{"path":25,"title":26,"description":27,"date":28,"tags":29,"readingMinutes":32},"\u002Fwriting\u002Fhow-a-tweet-changed-my-life","How a Tweet Changed My Life","From a layoff in Nice to Vercel in London, by way of Nuxt. The story of a tweet posted on a Tuesday morning in December, and of everything that made it work.","2026-09-02",[30,11,31,22],"career","nuxt",14,{"path":34,"title":35,"description":36,"date":37,"tags":38,"readingMinutes":41},"\u002Fwriting\u002Ffrom-local-to-production-containerizing-your-nuxt-app","From Local to Production: Deploy the Latest Nuxt Stack with Docker","Learn how to properly containerize and deploy a Nuxt application using the latest versions of Nuxt UI and Content. Set up Docker with best practices, automate builds with GitHub Actions, and deploy your application anywhere.","2025-01-15",[31,39,40],"docker","devops",3,{"path":43,"title":44,"description":45,"date":46,"tags":47,"readingMinutes":41},"\u002Fwriting\u002Fhow-to-securely-share-environment-variables-with-your-team","How To Securely Share Environment Variables With Your Team","Learn how to avoid critical security risks in environment variable management and discover how Shelve provides a modern, secure solution for development teams.","2024-10-24",[48,49,50],"security","devtools","shelve",{"path":52,"title":53,"description":54,"date":55,"tags":56,"readingMinutes":59},"\u002Fwriting\u002Fhow-raycast-became-my-ultimate-sidekick","How Raycast Became My Ultimate Sidekick","Let me take you on a journey through the magical land of Raycast – an app that has completely revolutionized my workflow and made me wonder how I ever survived without it.","2024-03-05",[57,58,49],"productivity","raycast",5,{"path":61,"title":62,"description":63,"date":64,"tags":65,"readingMinutes":66},"\u002Fwriting\u002F5-amazing-raycast-nuxt-snippets","5 Amazing Raycast Snippets for Enhancing Your Nuxt (Vue) Projects","Discover 5 powerful Raycast snippets that can transform your Nuxt and Vue development workflow, saving time and enhancing productivity.","2024-01-22",[31,58,57],4,{"path":68,"title":69,"description":70,"date":71,"tags":72,"readingMinutes":73},"\u002Fwriting\u002Fnot-an-impostor","You are not an impostor","Your story is worth telling, and you are not alone in this journey. Here's how to overcome the trap of perfection and embrace your authenticity.","2024-01-11",[30,11],2,[75],{"path":76,"title":77,"date":78},"\u002Fclipboard\u002F2026-04-07","Clipboard #1","2026-04-07",[80,97,110,122,135,149,161,175,186,197,210,221,232,244,256,268,280,290,301,312,324,335,348,359,371,383],{"id":81,"category":82,"date":83,"description":84,"extension":85,"github":86,"meta":87,"name":88,"release":89,"screenshotOptions":89,"screenshotUrl":90,"stem":91,"tags":92,"url":95,"__hash__":96},"works\u002F1.works\u002Fpersonal-agent-template.json","ecosystem","2026-06-11","Open-source template for a durable personal AI agent — web chat, Slack, Linear, and long-term memory","json","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fpersonal-agent-template",{},"Personal Agent Template",null,"\u002Fworks\u002Fpersonal-agent-template.png","1.works\u002Fpersonal-agent-template",[20,31,93,22,94],"vercel","eve","https:\u002F\u002Fpersonal-agent-template.vercel.app","3t1pnE1i1jK5p6Vt_9XeCCod6IHAMCdCfyJYX_M5ObY",{"id":98,"category":82,"date":99,"description":100,"extension":85,"github":101,"meta":102,"name":103,"release":89,"screenshotOptions":89,"screenshotUrl":104,"stem":105,"tags":106,"url":108,"__hash__":109},"works\u002F1.works\u002Fnuxt-connect-starter.json","2026-06-10","Nuxt starter for Vercel Connect","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fnuxt-connect-starter",{},"Nuxt Connect Starter","\u002Fworks\u002Fnuxt-connect-starter.png","1.works\u002Fnuxt-connect-starter",[31,93,22,107],"oauth","https:\u002F\u002Fnuxt-connect-starter.labs.vercel.dev","7SXArkIA4F2hLT8xBol42icO9_RazZO2ZqB4c8HoktU",{"id":111,"category":11,"date":112,"description":113,"extension":85,"github":114,"meta":115,"name":116,"release":89,"screenshotOptions":89,"screenshotUrl":117,"stem":118,"tags":119,"url":114,"__hash__":121},"works\u002F1.works\u002Fnitro-imessage-agent.json","2026-05-04","iMessage agent template","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fnitro-imessage-agent-template",{},"Nitro iMessage Agent","\u002Fworks\u002Fnitro-imessage-agent.png","1.works\u002Fnitro-imessage-agent",[120,20,93,22],"nitro","CQQAGUr0rtr5tS7hgD1AZHquQ6aiCZCrnZCvrRnGLUQ",{"id":123,"category":11,"date":124,"description":125,"extension":85,"github":126,"meta":127,"name":128,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":129,"tags":130,"url":133,"__hash__":134},"works\u002F1.works\u002Ff1-league.json","2026-03-07","F1 prediction league with friends","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Ff1-league",{},"F1 League","1.works\u002Ff1-league",[31,131,132],"nuxthub","game","https:\u002F\u002Ff1.hrcd.fr","um8s0_VM7dz3yWHfTN3lgizBE7PC5yPnkdwDcT8Uc5Q",{"id":136,"category":137,"date":138,"description":139,"extension":85,"github":140,"meta":141,"name":142,"release":89,"screenshotOptions":89,"screenshotUrl":143,"stem":144,"tags":145,"url":147,"__hash__":148},"works\u002F1.works\u002Fgithub-tools.json","featured","2026-02-21","AI SDK tools for GitHub","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fgithub-tools",{},"GitHub Tools","\u002Fworks\u002Fgithub-tools.png","1.works\u002Fgithub-tools",[146,20,22],"typescript","https:\u002F\u002Fgithub-tools.com","f-Hgnxt9cTlzbjLffkDOiKfkGD9iKSdaFifXryA7z6U",{"id":150,"category":137,"date":151,"description":152,"extension":85,"github":153,"meta":154,"name":155,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":156,"tags":157,"url":159,"__hash__":160},"works\u002F1.works\u002Fevlog.json","2026-01-24","Wide events and structured errors for TypeScript","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fevlog",{},"Evlog","1.works\u002Fevlog",[146,158,22],"logging","https:\u002F\u002Fevlog.dev","sWH496NG_E1XoPirIfX5JmQUVQ2w_ffspril7qAlkA4",{"id":162,"category":82,"date":163,"description":164,"extension":85,"github":165,"meta":166,"name":167,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":168,"tags":169,"url":173,"__hash__":174},"works\u002F1.works\u002Fcomark.json","2026-01-22","Streaming markdown parser with component support","https:\u002F\u002Fgithub.com\u002Fnuxtlabs\u002Fcomark",{},"Comark","1.works\u002Fcomark",[170,171,172,22],"markdown","vue","react","https:\u002F\u002Fcomark.dev","GK5AFpf3lBPvehlXKn986tmBcg3_Xmb_tKCEnnxpWTE",{"id":176,"category":82,"date":177,"description":178,"extension":85,"github":179,"meta":180,"name":181,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":182,"tags":183,"url":184,"__hash__":185},"works\u002F1.works\u002Fknowledge-agent.json","2026-01-20","File-system based AI agent template","https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fknowledge-agent-template",{},"Knowledge Agent","1.works\u002Fknowledge-agent",[20,31,93,22],"https:\u002F\u002Fchatsdk-knowledge-agent.vercel.app","tNQhHyfLCP5LYK6MVHx4pL8yuahjerz5yaQkOgG_-ZQ",{"id":187,"category":82,"date":188,"description":189,"extension":85,"github":190,"meta":191,"name":192,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":193,"tags":194,"url":195,"__hash__":196},"works\u002F1.works\u002Fnuxt-mcp-toolkit.json","2025-11-08","MCP server toolkit for Nuxt","https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fmcp-toolkit",{},"Nuxt MCP Toolkit","1.works\u002Fnuxt-mcp-toolkit",[31,20,22],"https:\u002F\u002Fmcp-toolkit.nuxt.dev","ULzM9IU6hg3LP3gBC5C-utumevGcfkrU6AtfAGm5ZRg",{"id":198,"category":11,"date":199,"description":200,"extension":85,"github":201,"meta":202,"name":203,"release":204,"screenshotOptions":89,"screenshotUrl":205,"stem":206,"tags":207,"url":208,"__hash__":209},"works\u002F1.works\u002Fnuxt-raycast-extension.json","2025-02-12","Raycast extension for Nuxt","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fnuxt-raycast-extension",{},"Nuxt Raycast Extension","2025","\u002Fworks\u002Fnuxt-raycast-extension.png","1.works\u002Fnuxt-raycast-extension",[31,49],"https:\u002F\u002Fwww.raycast.com\u002Fhugorcd\u002Fnuxt-ui","FSAuRTBxt3S7pt8cDONLqjQ4L61bDxRtSlWvY8fHsBI",{"id":211,"category":11,"date":212,"description":213,"extension":85,"github":214,"meta":215,"name":216,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":217,"tags":218,"url":219,"__hash__":220},"works\u002F1.works\u002Fnuppets.json","2025-02-07","Nuxt & Vue snippets hub","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fnuppets",{},"Nuppets","1.works\u002Fnuppets",[31,171,49],"https:\u002F\u002Fnuppets.dev","CLpZXSqC0wjCZPwL4aRs7Kot7neszICOHQSvDJjCWR8",{"id":222,"category":11,"date":223,"description":224,"extension":85,"github":225,"meta":226,"name":227,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":228,"tags":229,"url":225,"__hash__":231},"works\u002F1.works\u002Fnuxt-visitors.json","2025-01-28","Visitor tracking for Nuxt","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fnuxt-visitors",{},"Nuxt Visitors","1.works\u002Fnuxt-visitors",[31,230,22],"analytics","O6qC1kdHa3mU4lEBLbhjguCzayCOjI8SVRcC0OIQ9pQ",{"id":233,"category":11,"date":234,"description":235,"extension":85,"github":236,"meta":237,"name":238,"release":204,"screenshotOptions":89,"screenshotUrl":89,"stem":239,"tags":240,"url":242,"__hash__":243},"works\u002F1.works\u002Fnuxt-better-auth.json","2024-10-23","Better Auth demo for Nuxt","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fnuxt-better-auth",{},"Nuxt x Better Auth","1.works\u002Fnuxt-better-auth",[31,241],"auth","https:\u002F\u002Fbetter-auth.hrcd.fr\u002F","g_WffyMkhDPY6t-W4ZYxwG2U2JeCseaKHwsaDa8BqvE",{"id":245,"category":11,"date":246,"description":247,"extension":85,"github":248,"meta":249,"name":250,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":251,"tags":252,"url":254,"__hash__":255},"works\u002F1.works\u002Finkly.json","2024-08-28","Email signature generator","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Finkly",{},"Inkly","1.works\u002Finkly",[31,10,253],"template","https:\u002F\u002Finkly.email","AnWWSjjF8RYB8nkIo4vHvzj4_axbq04yDHgkatlZ5H8",{"id":257,"category":11,"date":258,"description":259,"extension":85,"github":260,"meta":261,"name":262,"release":263,"screenshotOptions":89,"screenshotUrl":264,"stem":265,"tags":266,"url":260,"__hash__":267},"works\u002F1.works\u002Feslint-config.json","2024-03-27","ESLint config for TS, Vue & Nuxt","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Feslint-config",{},"@hrcd\u002Feslint-config","2024","\u002Fworks\u002Feslint-config.png","1.works\u002Feslint-config",[146,49,22],"1kYYxHVQb0eW0Gj1LTSZlzFSI_LhFLSYoZGAolcGhqE",{"id":269,"category":137,"date":270,"description":271,"extension":85,"github":272,"meta":273,"name":274,"release":263,"screenshotOptions":89,"screenshotUrl":275,"stem":276,"tags":277,"url":278,"__hash__":279},"works\u002F1.works\u002Fshelve.json","2024-02-27","Secrets management, simplified","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fshelve",{},"Shelve","\u002Fworks\u002Fshelve.png","1.works\u002Fshelve",[146,49,22],"https:\u002F\u002Fshelve.cloud\u002F","DLdElq8I2BQJv_I3IBZCtRTJvB4XXhPafTcgVoK8fP0",{"id":281,"category":137,"date":64,"description":282,"extension":85,"github":283,"meta":284,"name":285,"release":263,"screenshotOptions":89,"screenshotUrl":89,"stem":286,"tags":287,"url":288,"__hash__":289},"works\u002F1.works\u002Fhr-folio.json","My portfolio website","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fhr-folio",{},"HR Folio","1.works\u002Fhr-folio",[31,10,22],"\u002F","_5dNFqM90hBqX33lJmQbuLk5jhbua7IfFiipW4zPEa0",{"id":291,"category":11,"date":292,"description":293,"extension":85,"github":294,"meta":295,"name":296,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":297,"tags":298,"url":299,"__hash__":300},"works\u002F1.works\u002Fnuxtlog.json","2024-01-18","Changelog & blog template for Nuxt","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fnuxtlog",{},"Nuxtlog","1.works\u002Fnuxtlog",[31,253,22],"https:\u002F\u002Fnuxtlog.hrcd.fr","hRYTmi6-MNuc40ALzRCgV9fl_SOkfp1598AbF5kDg54",{"id":302,"category":11,"date":303,"description":304,"extension":85,"github":305,"meta":306,"name":307,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":308,"tags":309,"url":310,"__hash__":311},"works\u002F1.works\u002Fcurrencia.json","2023-11-13","Crypto tracker template","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fcurrencia",{},"Currencia","1.works\u002Fcurrencia",[31,253],"https:\u002F\u002Fcurrencia.hrcd.fr","ck83zD8-ETismCJrS1tmCyzVcfFKtOBNZ-gV2blgWmQ",{"id":313,"category":137,"date":314,"description":315,"extension":85,"github":316,"meta":317,"name":318,"release":263,"screenshotOptions":89,"screenshotUrl":319,"stem":320,"tags":321,"url":322,"__hash__":323},"works\u002F1.works\u002Fcanvas.json","2023-06-13","Minimal portfolio template","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fcanvas",{},"Canvas","\u002Fworks\u002Fcanvas.png","1.works\u002Fcanvas",[31,253,10],"https:\u002F\u002Fcanvas.hrcd.fr\u002F","AJiYTGR0eM5SBzAAwOVHNg_r3Ck8L9by0lG3qixR3UY",{"id":325,"category":11,"date":326,"description":327,"extension":85,"github":328,"meta":329,"name":330,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":331,"tags":332,"url":333,"__hash__":334},"works\u002F1.works\u002Fhelpr.json","2023-03-18","Automation tools for workflows","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fhelpr",{},"Helpr","1.works\u002Fhelpr",[31,49],"https:\u002F\u002Fhelpr.hrcd.fr","ryMPdPVL2PEjtWIUtvLBMgpY4rCeEzuj3L33GekmrrU",{"id":336,"category":11,"date":337,"description":338,"extension":85,"github":339,"meta":340,"name":341,"release":342,"screenshotOptions":343,"screenshotUrl":89,"stem":344,"tags":345,"url":346,"__hash__":347},"works\u002F1.works\u002Fmaison-hochard.json","2022-09-11","Design & development agency","https:\u002F\u002Fgithub.com\u002FHugoRCD\u002Fmaison-hochard",{},"Maison Hochard","2022",{"delay":59},"1.works\u002Fmaison-hochard",[10,31],"https:\u002F\u002Fmh.hrcd.fr\u002F","91eDnpBDR9JCpGLIAxiHNXRxfqeTcBnA4FHNauKJ5LA",{"id":349,"category":82,"date":350,"description":351,"extension":85,"github":352,"meta":353,"name":354,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":355,"tags":356,"url":357,"__hash__":358},"works\u002F1.works\u002Fnuxt.com.json","2022-01-31","The official Nuxt website","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt.com",{},"Nuxt.com","1.works\u002Fnuxt.com",[31,10,22],"https:\u002F\u002Fnuxt.com","2cJThN2gMyup6qwItkAYlwNcNmyzenp3cVw25Y5Rkyo",{"id":360,"category":82,"date":361,"description":362,"extension":85,"github":363,"meta":364,"name":365,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":366,"tags":367,"url":369,"__hash__":370},"works\u002F1.works\u002Fnuxt-ui.json","2021-11-16","UI library for Nuxt & Vue","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fui",{},"Nuxt UI","1.works\u002Fnuxt-ui",[171,31,368],"design-system","https:\u002F\u002Fui.nuxt.com","iGGFPi5C55m35yp7u7ix-NOwvhH-zGIn66u5Wk_wlhA",{"id":372,"category":82,"date":373,"description":374,"extension":85,"github":375,"meta":376,"name":377,"release":89,"screenshotOptions":89,"screenshotUrl":89,"stem":378,"tags":379,"url":381,"__hash__":382},"works\u002F1.works\u002Fdocus.json","2020-11-12","Documentation framework for Nuxt","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fdocus",{},"Docus","1.works\u002Fdocus",[31,380,22],"docs","https:\u002F\u002Fdocus.dev","VUKAqIniX8Qm6-sax0aehqRcWgAx04YX9oPZHG6JZg8",{"id":384,"category":82,"date":385,"description":386,"extension":85,"github":387,"meta":388,"name":389,"release":89,"screenshotOptions":89,"screenshotUrl":390,"stem":391,"tags":392,"url":357,"__hash__":393},"works\u002F1.works\u002Fnuxt.json","2016-10-26","The full-stack Vue framework","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt",{},"Nuxt","\u002Fworks\u002Fnuxt.com.png","1.works\u002Fnuxt",[31,171,22],"2yMVvUTornf6xeC59K-PwgcdJvkTxTDb1ZF0eRbIEQ8",{"id":395,"title":6,"body":396,"date":8,"description":7,"extension":781,"image":89,"meta":782,"navigation":784,"path":5,"rawbody":785,"seo":786,"sheet":784,"stem":787,"__hash__":788},"content\u002F2.writing\u002Fhow-i-redrew-my-portfolio.md",{"type":397,"value":398,"toc":778},"minimark",[399,423,549,637,691,705],[400,401,402,406,410,417],"sheet-head",{},[403,404,6],"h1",{"id":405},"how-i-redrew-my-portfolio",[407,408,409],"p",{},"I've just redesigned my portfolio. It used to be blue. It's red now, and almost everything around that red has changed with it.",[407,411,412,413,416],{},"We live at a time when almost anything can be made. Code is nearly free, and AI does much of the rest; I wrote about how I work with it in ",[414,415,15],"a",{"href":14},". When everything is within reach, what makes a thing yours is what you choose to make, what you choose to leave out, and why. Intention comes first.",[407,418,419,420,422],{},"So instead of starting from a style, I started from the things I love, and let each of them leave its mark on the page: a watch, two reds, the letters we've stopped writing, and the light. In ",[414,421,26],{"href":25},", I wrote that every detail counts, even the ones nobody will consciously notice. These are the details of this site, and the stories behind them.",[424,425,429,432,435,438,441,446,449,452,455,459,462,465,468,516],"sheet-section",{"id":426,"label":427,"numeral":428},"red","The red","I",[407,430,431],{},"The site has one colour, and I knew early on it would be a red. Of all the reds I know, the two I've loved the longest are Cartier's and Ferrari's, and I couldn't choose between them. So the red here is made from both.",[407,433,434],{},"Cartier, to me, is French excellence. Behind the name there is an atelier, and more than a century and a half of people perfecting the same gestures: setting stones, shaping cases, finishing the smallest parts by hand. It's the same idea of craft I try to bring to my own work, with code instead of gold. And of everything that comes out of that atelier, what moves me most is their watches.",[407,436,437],{},"For years, my dream watch was the Santos-Dumont. Its story begins in Paris, in 1904. Alberto Santos-Dumont, a Brazilian aviator and a friend of Louis Cartier, couldn't take out his pocket watch in flight without letting go of the controls. So Cartier designed him a watch to wear on the wrist: a square case with its screws left in view, and Roman numerals on the dial. It became one of the first wristwatches made for a man.",[407,439,440],{},"I bought mine when I joined Vercel. It was a huge step in my career, and I wanted to mark that moment with something I would keep. You'll find the watch all over this site: in the numbering of the sections, in the hour at the top of the page, and in the movement that keeps that hour.",[442,443],"print-spread",{":prints":444,"ratio":445},"[{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Flouis-cartier.jpg\",\"alt\":\"Louis Cartier in a frock coat and top hat, photographed by the atelier Nadar\",\"caption\":\"Louis Cartier, photographed by Nadar\",\"ratio\":\"471\u002F650\",\"x\":1,\"y\":5,\"w\":22,\"r\":-3},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fsantos-dumont-1906.jpg\",\"alt\":\"Alberto Santos-Dumont standing at the controls of his 14-bis at Neuilly in 1906\",\"caption\":\"Alberto Santos-Dumont at the controls of his 14-bis, 1906\",\"ratio\":\"720\u002F503\",\"x\":22,\"y\":19,\"w\":40,\"r\":2},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fsantos-dumont-movement.jpg\",\"alt\":\"The hand-wound movement inside a Cartier Santos-Dumont, seen through the open case\",\"caption\":\"The movement of a Santos-Dumont\",\"ratio\":\"635\u002F720\",\"x\":55,\"y\":2,\"w\":24,\"r\":-1.5},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fpanther-1914.jpg\",\"alt\":\"George Barbier's Lady with Panther, drawn for Cartier in 1914\",\"caption\":\"George Barbier for Cartier, 1914\",\"ratio\":\"563\u002F720\",\"x\":75,\"y\":14,\"w\":25,\"r\":3.5}]","528\u002F268",[407,447,448],{},"Ferrari is the other side of the same colour. Where Cartier is patience and precision, Ferrari is Italy, and passion: the factory in Maranello, the noise, the speed, some of the most beautiful engines and cars ever built. Its red isn't a quiet one. You see it from the other side of a circuit, and you feel it before you understand it.",[407,450,451],{},"It came to me through my father. On the weekends I spent at his place, he showed me Formula 1. It was the time of Michael Schumacher, already a legend, and of red cars that seemed to win every Sunday. I was a child. I didn't know yet what I was looking at, only that I couldn't look away. That's how a passion starts: quietly, long before you have a name for it.",[407,453,454],{},"Then life took over, and through high school and my studies I stopped watching. A few years ago I came back, following Charles Leclerc, and Lewis Hamilton, from his years at Mercedes to his move to Ferrari, and a lot came back with it. Ferrari is almost a religion: you only have to see the crowds dressed in red, at every race, in every country. And for me it's also the F40, which holds all of it at once: memories, desire, and a longing for the future.",[442,456],{":prints":457,"ratio":458},"[{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fmaranello-1947.jpg\",\"alt\":\"The first Ferrari, a 125 S, at the gate of the Maranello factory in 1947\",\"caption\":\"The first Ferrari, at the factory gate, Maranello, 1947\",\"ratio\":\"720\u002F504\",\"x\":0,\"y\":4,\"w\":28,\"r\":-2.5},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fgto-1962.jpg\",\"alt\":\"A Ferrari 250 GTO surrounded by a crowd after winning the Coppa Fagioli in 1962\",\"caption\":\"A 250 GTO wins the Coppa Fagioli, 1962\",\"ratio\":\"720\u002F540\",\"x\":24,\"y\":21,\"w\":28,\"r\":1.5},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Ff40-1987.jpg\",\"alt\":\"A red Ferrari F40 shown to the press at Fiorano in 1987\",\"caption\":\"The F40 at Fiorano, 1987\",\"ratio\":\"720\u002F540\",\"x\":48,\"y\":2,\"w\":28,\"r\":-1},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fschumacher-2004.jpg\",\"alt\":\"Michael Schumacher driving the Ferrari F2004 in 2004\",\"caption\":\"Michael Schumacher in the F2004, 2004\",\"ratio\":\"720\u002F480\",\"x\":72,\"y\":20,\"w\":28,\"r\":2.5}]","528\u002F222",[407,460,461],{},"Side by side, the two reds are closer than you'd think: almost the same hue, almost the same strength, with Cartier's just a little darker. So I mixed them in OKLab, a colour space built around the way our eyes see, and took the point exactly halfway between them. Drag the needle, and the page's red follows.",[463,464],"red-viewer",{},[407,466,467],{},"That point also has the same lightness as my old blue, so nothing on the pages got heavier when the colour changed. At night the red is a touch brighter, so it still reads on black.",[469,470,471,485,492,502,509],"sheet-entries",{},[472,473,477],"sheet-entry",{"font":474,"term":475,"swatch":476},"redaction","Entre-deux","#CD1919",[407,478,479,480,484],{},"The red itself. In couture, an ",[481,482,483],"em",{},"entre-deux"," is the narrow band of lace sewn between two pieces of fabric to join them, as this red joins two others.",[472,486,489],{"font":474,"term":487,"swatch":488},"At night","#E1342D",[407,490,491],{},"The same red, lifted for dark grounds.",[472,493,496],{"font":474,"term":494,"swatch":495},"Envers","#901112",[407,497,498,501],{},[481,499,500],{},"L'envers"," is the back of a fabric, the side you don't see. It's the ground under the page.",[472,503,506],{"font":474,"term":504,"swatch":505},"Bone","#EBEBEB",[407,507,508],{},"Everything drawn on Envers: the lines, the text, the mechanism.",[472,510,513],{"font":474,"term":511,"swatch":512},"Ink","#171717",[407,514,515],{},"The deepest grey, for text on white.",[517,518,519,531,540],"sheet-note",{},[407,520,521,522,526,527,530],{},"Measured from the CSS each site ships: Cartier ",[523,524,525],"code",{},"#C10016",", Ferrari ",[523,528,529],{},"#DA291C",", on 11 and 17 Oct 2026.",[407,532,533,539],{},[414,534,538],{"href":535,"rel":536},"https:\u002F\u002Fbottosson.github.io\u002Fposts\u002Foklab\u002F",[537],"nofollow","OKLab",": halfway in it looks halfway.",[407,541,542,543,548],{},"My watch: the ",[414,544,547],{"href":545,"rel":546},"https:\u002F\u002Fint.cartier.com\u002Fen\u002Fcollections\u002Fwatches\u002Fall-watches\u002Fsantos-de-cartier-all\u002Fwssa0022-santos-dumont-watch.html",[537],"Santos-Dumont",", large model, steel.",[424,550,554,557,560,567,571,574,596,599,602,605,608],{"id":551,"label":552,"numeral":553},"sheet","The letter","II",[407,555,556],{},"The site is two things at once: a letter, and a drawing sheet.",[407,558,559],{},"I don't write letters, and I think it's a shame we're losing them. Everything is instant now. Messages arrive before we've finished thinking, nobody waits for anything, and text can be generated without end. A letter asks for the opposite. You write it with an intention, you take your time over each line, you send it, and then you wait, sometimes for days, for an answer. It teaches you to care about the way you write, and to be patient. And there is something romantic about it that nothing has replaced: letters run all through history, they've changed the course of things, and they've started passions and love stories we still read today.",[407,561,562,563,566],{},"So every page here is written like one. It opens the way a letter does, with the place and the date, ",[481,564,565],{},"London"," and today, beneath the H of my signature. And it closes with the signature itself. A signature is a stamp, like the one at the bottom of a document: it says that I made this, and that I stand behind it. I sign Hugo rather than Hugo Richard, because a surname always keeps a little distance, and a first name is how you sign a letter to someone you know.",[442,568],{":prints":569,"ratio":570},"[{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fgazette-1924.jpg\",\"alt\":\"The cover of the Gazette du Bon Ton, May 1924, with the date at the top\",\"caption\":\"Gazette du Bon Ton, May 1924, the date first\",\"ratio\":\"602\u002F720\",\"x\":3,\"y\":4,\"w\":26,\"r\":-2.5},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Ftelegram-enzo.jpg\",\"alt\":\"A telegram of congratulations signed Enzo Ferrari, sent from Maranello\",\"caption\":\"A telegram of congratulations signed by Enzo Ferrari\",\"ratio\":\"720\u002F507\",\"x\":27,\"y\":12,\"w\":44,\"r\":1.5},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fdino-badge.jpg\",\"alt\":\"The Dino badge, Alfredo Ferrari's signature in blue on yellow enamel\",\"caption\":\"The Dino badge, drawn from a signature\",\"ratio\":\"720\u002F540\",\"x\":70,\"y\":20,\"w\":28,\"r\":-3}]","528\u002F246",[407,572,573],{},"Three typefaces share the page, one for each voice: the titles of the letter, its text, and the measurements of the drawing.",[469,575,576,582,589],{},[472,577,579],{"font":474,"term":578},"Redaction",[407,580,581],{},"The titles. A serif Jeremy Mickel drew in 2019 from the typefaces of official documents, Times New Roman and New Century Schoolbook, then took somewhere else: soft, round curves that end in terminals as sharp as a blade. Its italic sets the red numerals.",[472,583,586],{"font":584,"term":585},"sans","Geist",[407,587,588],{},"The text. Vercel's typeface, drawn in the Swiss tradition: plain, precise, made to be read.",[472,590,593],{"font":591,"term":592},"mono","Geist Mono",[407,594,595],{},"The measurements, notes and captions. Every character takes the same width, like figures on a drawing.",[407,597,598],{},"When you arrive here, I'd like it to feel like receiving a beautiful letter: a good moment, a few things to take away from what I've written, and the feeling, somewhere, that it was made with care.",[407,600,601],{},"The drawing sheet is the other half of the site, the workshop behind the letter. It's where things are designed, measured, and redrawn until they're right, which is how I like to work. Every page sits on the same plate of five columns.",[603,604],"sheet-plate",{},[407,606,607],{},"And you can decide how much of the drawing you want to see. In the footer, or with the D key, the page goes from a clean fair copy to the full drawing, with every measurement written in its margins.",[517,609,610,628],{},[407,611,612,616,617,621,622,627],{},[414,613,578],{"href":614,"rel":615},"https:\u002F\u002Fwww.redaction.us",[537],": Jeremy Mickel and Forest Young, MCKL. ",[414,618,585],{"href":619,"rel":620},"https:\u002F\u002Fvercel.com\u002Ffont",[537],": Vercel. ",[414,623,626],{"href":624,"rel":625},"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FMrs+Saint+Delafield",[537],"Mrs Saint Delafield",": SIL Open Font License.",[407,629,630,631,636],{},"The ",[414,632,635],{"href":633,"rel":634},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFerrari_Dino",[537],"Dino"," badge was drawn from the signature of Alfredo Ferrari, Enzo's son.",[424,638,642,645,648,651,655,658,662,665,668,671,674,677,680,683],{"id":639,"label":640,"numeral":641},"light","The light","III",[407,643,644],{},"A letter is always written somewhere, at a certain hour. So is this page. It's lit by the sun over wherever I happen to be, and the city written at the top is real: I change it when I travel, because a letter has to come from somewhere, and knowing where brings you a little closer to whoever wrote it.",[407,646,647],{},"The light comes from photography, and from painting. When I take pictures, it's what matters most, and nearly always what decides whether a picture is worth taking. The same street can be flat at noon and beautiful an hour before sunset, when the light comes in low and catches a face, the leaves of a tree, the texture of a wall. Very often a good photograph is just good light, seen at the right moment.",[407,649,650],{},"A photographer waits for that light. A painter has to make it, with nothing but pigment, and the painters I love most are the ones who made it best: Leonardo's sfumato, the soft shadow that lets a face dissolve into the air around it; the warm skies of Titian; Caravaggio's beam of light cutting across a dark room; the daylight Vermeer lets in through a window; the sun on Fragonard's pink silk in a shaded garden; Van Gogh's yellow lamp under a night sky. Each of them found their own way to put light on a flat surface.",[442,652],{":prints":653,"ratio":654},"[{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fleonardo-mona-lisa-1503.jpg\",\"alt\":\"A woman with folded hands before a hazy landscape, her face modelled in soft shadow\",\"caption\":\"Mona Lisa, by Leonardo da Vinci, 1503–19\",\"ratio\":\"483\u002F720\",\"x\":0,\"y\":3,\"w\":21,\"r\":-2},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Ftitian-bacchus-ariadne-1523.jpg\",\"alt\":\"Bacchus leaping from his chariot towards Ariadne, under a bright blue sky\",\"caption\":\"Bacchus and Ariadne, by Titian, 1520–23\",\"ratio\":\"720\u002F652\",\"x\":19,\"y\":0,\"w\":28,\"r\":1.5},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fcaravaggio-matthew-1600.jpg\",\"alt\":\"Men counting money at a table in a dark room, caught in a beam of light from a high window\",\"caption\":\"The Calling of Saint Matthew, by Caravaggio, 1600\",\"ratio\":\"720\u002F680\",\"x\":44,\"y\":3,\"w\":28,\"r\":-1},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fvermeer-milkmaid-1658.jpg\",\"alt\":\"A maid pouring milk at a table, lit by daylight from a window on the left\",\"caption\":\"The Milkmaid, by Johannes Vermeer, around 1660\",\"ratio\":\"642\u002F720\",\"x\":72,\"y\":1,\"w\":26,\"r\":2},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Ffragonard-swing-1767.jpg\",\"alt\":\"A young woman in a pink dress on a swing in a dark garden, lit by a patch of sun\",\"caption\":\"The Swing, by Jean-Honoré Fragonard, 1767\",\"ratio\":\"563\u002F720\",\"x\":5,\"y\":55,\"w\":26,\"r\":1.5},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fmonet-impression-1872.jpg\",\"alt\":\"A harbour in blue morning haze, with a small orange sun and its reflection on the water\",\"caption\":\"Impression, Sunrise, by Claude Monet, 1872\",\"ratio\":\"720\u002F558\",\"x\":30,\"y\":58,\"w\":36,\"r\":-1.5},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fvan-gogh-cafe-1888.jpg\",\"alt\":\"A café terrace lit yellow by its lamp, on a cobbled street under a starry blue sky\",\"caption\":\"Café Terrace at Night, by Vincent van Gogh, 1888\",\"ratio\":\"574\u002F720\",\"x\":66,\"y\":55,\"w\":27,\"r\":2}]","528\u002F456",[407,656,657],{},"And then Monet, who made the light itself the subject. In Rouen, he painted the front of the cathedral more than thirty times, from across the square, at different hours and in different weather, because the stone was never the same colour twice.",[442,659],{":prints":660,"ratio":661},"[{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fmonet-rouen-morning.jpg\",\"alt\":\"The façade of Rouen Cathedral in pale blue morning light\",\"caption\":\"Rouen Cathedral in the morning, by Claude Monet, 1892–94\",\"ratio\":\"514\u002F760\",\"x\":4,\"y\":4,\"w\":30,\"r\":-2},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fmonet-rouen-sun.jpg\",\"alt\":\"The same façade of Rouen Cathedral in bright white sunlight, under a blue sky\",\"caption\":\"Rouen Cathedral in full sun, by Claude Monet, 1892–94\",\"ratio\":\"494\u002F760\",\"x\":34,\"y\":0,\"w\":30,\"r\":1},{\"src\":\"\u002Fimages\u002Fwriting\u002Fredrew\u002Fmonet-rouen-evening.jpg\",\"alt\":\"The same façade of Rouen Cathedral in warm orange evening light\",\"caption\":\"Rouen Cathedral in the evening, by Claude Monet, 1892–94\",\"ratio\":\"468\u002F760\",\"x\":66,\"y\":5,\"w\":30,\"r\":2.5}]","528\u002F300",[407,663,664],{},"That's what I wanted for this page: a light of its own, one that changes through the day, like the stone in Rouen, or anything I photograph.",[407,666,667],{},"There's also a moment in photography I've always loved: before the print, there's the negative, the same picture with light and dark swapped. Lift the corner of the home page, and that's what you'll find under my portrait: its negative, laid on a light box, as if it hadn't been printed yet.",[407,669,670],{},"The hour comes from the watch. The page keeps time the way my Santos-Dumont does, with a movement, and its sections are numbered like the hours on its dial. Pull the crown and turn it: the hands move, and the whole page takes on the light of that hour.",[672,673],"crown-viewer",{},[407,675,676],{},"Through the afternoon, the white slowly turns to parchment. After sunset the page becomes a violet dusk that darkens until it's black, and before sunrise it goes through the same in blue. None of it ever makes the page harder to read: every grey keeps the contrast it has at noon, and the red slides gently along its band, towards Cartier's as the light falls, towards Ferrari's at dusk.",[678,679],"sun-viewer",{},[407,681,682],{},"And if you'd rather choose for yourself, the dot in the footer sets light or dark by hand. Press it again, and the page goes back to following the sun.",[517,684,685,688],{},[407,686,687],{},"The red never drops under 4.6 : 1, nor the text under 4.5 : 1. Every build checks it at every height the sun can take.",[407,689,690],{},"The movement is drawn, not copied: 21,600 beats an hour, the beat of the hand-wound 430 MC in my Santos-Dumont.",[424,692,696,699,702],{"id":693,"label":694,"numeral":695},"underneath","Underneath","IV",[407,697,698],{},"Lift any corner of the page, and it folds back like a sheet of paper. On a phone, tap the corner and the page turns over, like the page of a book. I like design that makes you feel something, and few gestures are as familiar as lifting a sheet of paper to see what's underneath. It's also the transition the site needed: the letter is on top, the drawing sheet lies underneath, and something has to take you from one to the other. Nothing does that better than lifting the page.",[700,701],"page-layers",{},[407,703,704],{},"What you find here is the working drawing of the page you were reading, and the mechanism that runs it. Everything that changes on the page by itself sits right above the part that changes it: the movement beneath the hour, a lever for the light, a wheel for the level of detail, a chime for the sound. Point at a part's number, and it tells you what it does. Around them lie the request that brought you here, the file each block of the page comes from, and the last changes made to the site.",[424,706,710,717,720,723,726,729,732],{"id":707,"label":708,"numeral":709},"infinity","Iterate","V",[711,712,714],"sheet-quote",{"by":713},"One of Vercel's values",[407,715,716],{},"Iterate to Greatness.",[407,718,719],{},"Of every idea I've come across in my work, it's the one I find most powerful. When you chase perfection, you miss the point. It's been said a thousand times, but it's true: perfection isn't something you can reach. And while you wait for it, you sometimes never release anything at all, because it's never quite ready.",[407,721,722],{},"Iterating is the opposite. You release something that already holds the foundations of what you think and what you want to show, and then you keep going. You improve it, people tell you what they see, and what they tell you improves it again. There's no end to it, and that's exactly what I love. Most of the time, the process is the most interesting part, and the most fun. For me, it's the only real way to move forward.",[407,724,725],{},"It's something I did less with my projects before, and I want to do much more of it now: not drop the things I start, give them time, and keep taking them further, so that the people who use them know someone is behind them.",[407,727,728],{},"It meets another phrase I love: simplicity is the ultimate sophistication. To me, something becomes right not when there's nothing left to add, but when there's nothing left to take away. And you only get there by coming back to it, again and again.",[407,730,731],{},"On the home page, my role at Vercel starts in 2025 and ends with ∞. Under the page, that sign sits above the barrel, the part that holds the mainspring and can only turn one way. This site works the same way. It isn't finished, and it never will be. I'll keep iterating on it.",[517,733,734,743,757],{},[407,735,736,737,742],{},"The ∞ is drawn as a curve, not typed: a ",[414,738,741],{"href":739,"rel":740},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FLemniscate_of_Bernoulli",[537],"lemniscate of Bernoulli",", the figure of eight mathematicians use for infinity, leaning 12° as if written by hand.",[407,744,745,748,749,752,753,756],{},[481,746,747],{},"Simplicity is the ultimate sophistication"," is usually credited to Leonardo da Vinci. ",[481,750,751],{},"Nothing left to take away"," is Antoine de Saint-Exupéry's, in ",[481,754,755],{},"Terre des hommes",", 1939.",[407,758,759,760,765,766,771,772,777],{},"The archive pictures come from Wikimedia Commons and are in the public domain, apart from ",[414,761,764],{"href":762,"rel":763},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Calibro_Fr%C3%A9d%C3%A9ric_Piguet_21_incassato_in_un_Cartier_Santos_Dumont_anni_Novanta.jpg",[537],"the Santos-Dumont movement"," by EMore98 and ",[414,767,770],{"href":768,"rel":769},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Un_t%C3%A9l%C3%A9gramme_de_f%C3%A9licitations_d%27Enzo_Ferrari....JPG",[537],"the telegram"," by Claude F. Sage (both CC BY-SA 4.0), ",[414,773,776],{"href":774,"rel":775},"https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Michael_Schumacher_Ferrari_2004.jpg",[537],"Schumacher in the F2004"," by Rick Dikeman (CC BY-SA 3.0), and the Gazette du Bon Ton, from the Rijksmuseum (CC0).",{"title":779,"searchDepth":73,"depth":73,"links":780},"",[],"md",{"tags":783},[10,11],true,"---\ntitle: How I Redrew My Portfolio\ndescription: I've just redesigned my portfolio. It used to be blue, it's red now.\n  Here is where everything on it comes from.\ndate: 2026-10-18\ntags: [design, personal]\nsheet: true\n---\n\n::sheet-head\n# How I Redrew My Portfolio\n\nI've just redesigned my portfolio. It used to be blue. It's red now, and almost everything around that red has changed with it.\n\nWe live at a time when almost anything can be made. Code is nearly free, and AI does much of the rest; I wrote about how I work with it in [How I Work With Agents Right Now](\u002Fwriting\u002Fhow-i-work-with-agents-right-now). When everything is within reach, what makes a thing yours is what you choose to make, what you choose to leave out, and why. Intention comes first.\n\nSo instead of starting from a style, I started from the things I love, and let each of them leave its mark on the page: a watch, two reds, the letters we've stopped writing, and the light. In [How a Tweet Changed My Life](\u002Fwriting\u002Fhow-a-tweet-changed-my-life), I wrote that every detail counts, even the ones nobody will consciously notice. These are the details of this site, and the stories behind them.\n::\n\n::sheet-section{id=\"red\" numeral=\"I\" label=\"The red\"}\nThe site has one colour, and I knew early on it would be a red. Of all the reds I know, the two I've loved the longest are Cartier's and Ferrari's, and I couldn't choose between them. So the red here is made from both.\n\nCartier, to me, is French excellence. Behind the name there is an atelier, and more than a century and a half of people perfecting the same gestures: setting stones, shaping cases, finishing the smallest parts by hand. It's the same idea of craft I try to bring to my own work, with code instead of gold. And of everything that comes out of that atelier, what moves me most is their watches.\n\nFor years, my dream watch was the Santos-Dumont. Its story begins in Paris, in 1904. Alberto Santos-Dumont, a Brazilian aviator and a friend of Louis Cartier, couldn't take out his pocket watch in flight without letting go of the controls. So Cartier designed him a watch to wear on the wrist: a square case with its screws left in view, and Roman numerals on the dial. It became one of the first wristwatches made for a man.\n\nI bought mine when I joined Vercel. It was a huge step in my career, and I wanted to mark that moment with something I would keep. You'll find the watch all over this site: in the numbering of the sections, in the hour at the top of the page, and in the movement that keeps that hour.\n\n:::print-spread\n---\nratio: 528\u002F268\nprints:\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Flouis-cartier.jpg\n    alt: Louis Cartier in a frock coat and top hat, photographed by the atelier Nadar\n    caption: Louis Cartier, photographed by Nadar\n    ratio: 471\u002F650\n    x: 1\n    y: 5\n    w: 22\n    r: -3\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fsantos-dumont-1906.jpg\n    alt: Alberto Santos-Dumont standing at the controls of his 14-bis at Neuilly in 1906\n    caption: Alberto Santos-Dumont at the controls of his 14-bis, 1906\n    ratio: 720\u002F503\n    x: 22\n    y: 19\n    w: 40\n    r: 2\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fsantos-dumont-movement.jpg\n    alt: The hand-wound movement inside a Cartier Santos-Dumont, seen through the open case\n    caption: The movement of a Santos-Dumont\n    ratio: 635\u002F720\n    x: 55\n    y: 2\n    w: 24\n    r: -1.5\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fpanther-1914.jpg\n    alt: George Barbier's Lady with Panther, drawn for Cartier in 1914\n    caption: George Barbier for Cartier, 1914\n    ratio: 563\u002F720\n    x: 75\n    y: 14\n    w: 25\n    r: 3.5\n---\n:::\n\nFerrari is the other side of the same colour. Where Cartier is patience and precision, Ferrari is Italy, and passion: the factory in Maranello, the noise, the speed, some of the most beautiful engines and cars ever built. Its red isn't a quiet one. You see it from the other side of a circuit, and you feel it before you understand it.\n\nIt came to me through my father. On the weekends I spent at his place, he showed me Formula 1. It was the time of Michael Schumacher, already a legend, and of red cars that seemed to win every Sunday. I was a child. I didn't know yet what I was looking at, only that I couldn't look away. That's how a passion starts: quietly, long before you have a name for it.\n\nThen life took over, and through high school and my studies I stopped watching. A few years ago I came back, following Charles Leclerc, and Lewis Hamilton, from his years at Mercedes to his move to Ferrari, and a lot came back with it. Ferrari is almost a religion: you only have to see the crowds dressed in red, at every race, in every country. And for me it's also the F40, which holds all of it at once: memories, desire, and a longing for the future.\n\n:::print-spread\n---\nratio: 528\u002F222\nprints:\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fmaranello-1947.jpg\n    alt: The first Ferrari, a 125 S, at the gate of the Maranello factory in 1947\n    caption: The first Ferrari, at the factory gate, Maranello, 1947\n    ratio: 720\u002F504\n    x: 0\n    y: 4\n    w: 28\n    r: -2.5\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fgto-1962.jpg\n    alt: A Ferrari 250 GTO surrounded by a crowd after winning the Coppa Fagioli in 1962\n    caption: A 250 GTO wins the Coppa Fagioli, 1962\n    ratio: 720\u002F540\n    x: 24\n    y: 21\n    w: 28\n    r: 1.5\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Ff40-1987.jpg\n    alt: A red Ferrari F40 shown to the press at Fiorano in 1987\n    caption: The F40 at Fiorano, 1987\n    ratio: 720\u002F540\n    x: 48\n    y: 2\n    w: 28\n    r: -1\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fschumacher-2004.jpg\n    alt: Michael Schumacher driving the Ferrari F2004 in 2004\n    caption: Michael Schumacher in the F2004, 2004\n    ratio: 720\u002F480\n    x: 72\n    y: 20\n    w: 28\n    r: 2.5\n---\n:::\n\nSide by side, the two reds are closer than you'd think: almost the same hue, almost the same strength, with Cartier's just a little darker. So I mixed them in OKLab, a colour space built around the way our eyes see, and took the point exactly halfway between them. Drag the needle, and the page's red follows.\n\n:::red-viewer\n:::\n\nThat point also has the same lightness as my old blue, so nothing on the pages got heavier when the colour changed. At night the red is a touch brighter, so it still reads on black.\n\n:::sheet-entries\n::::sheet-entry{term=\"Entre-deux\" font=\"redaction\" swatch=\"#CD1919\"}\nThe red itself. In couture, an *entre-deux* is the narrow band of lace sewn between two pieces of fabric to join them, as this red joins two others.\n::::\n\n::::sheet-entry{term=\"At night\" font=\"redaction\" swatch=\"#E1342D\"}\nThe same red, lifted for dark grounds.\n::::\n\n::::sheet-entry{term=\"Envers\" font=\"redaction\" swatch=\"#901112\"}\n*L'envers* is the back of a fabric, the side you don't see. It's the ground under the page.\n::::\n\n::::sheet-entry{term=\"Bone\" font=\"redaction\" swatch=\"#EBEBEB\"}\nEverything drawn on Envers: the lines, the text, the mechanism.\n::::\n\n::::sheet-entry{term=\"Ink\" font=\"redaction\" swatch=\"#171717\"}\nThe deepest grey, for text on white.\n::::\n:::\n\n:::sheet-note\nMeasured from the CSS each site ships: Cartier `#C10016`, Ferrari `#DA291C`, on 11 and 17 Oct 2026.\n\n[OKLab](https:\u002F\u002Fbottosson.github.io\u002Fposts\u002Foklab\u002F): halfway in it looks halfway.\n\nMy watch: the [Santos-Dumont](https:\u002F\u002Fint.cartier.com\u002Fen\u002Fcollections\u002Fwatches\u002Fall-watches\u002Fsantos-de-cartier-all\u002Fwssa0022-santos-dumont-watch.html), large model, steel.\n:::\n::\n\n::sheet-section{id=\"sheet\" numeral=\"II\" label=\"The letter\"}\nThe site is two things at once: a letter, and a drawing sheet.\n\nI don't write letters, and I think it's a shame we're losing them. Everything is instant now. Messages arrive before we've finished thinking, nobody waits for anything, and text can be generated without end. A letter asks for the opposite. You write it with an intention, you take your time over each line, you send it, and then you wait, sometimes for days, for an answer. It teaches you to care about the way you write, and to be patient. And there is something romantic about it that nothing has replaced: letters run all through history, they've changed the course of things, and they've started passions and love stories we still read today.\n\nSo every page here is written like one. It opens the way a letter does, with the place and the date, *London* and today, beneath the H of my signature. And it closes with the signature itself. A signature is a stamp, like the one at the bottom of a document: it says that I made this, and that I stand behind it. I sign Hugo rather than Hugo Richard, because a surname always keeps a little distance, and a first name is how you sign a letter to someone you know.\n\n:::print-spread\n---\nratio: 528\u002F246\nprints:\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fgazette-1924.jpg\n    alt: The cover of the Gazette du Bon Ton, May 1924, with the date at the top\n    caption: Gazette du Bon Ton, May 1924, the date first\n    ratio: 602\u002F720\n    x: 3\n    y: 4\n    w: 26\n    r: -2.5\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Ftelegram-enzo.jpg\n    alt: A telegram of congratulations signed Enzo Ferrari, sent from Maranello\n    caption: A telegram of congratulations signed by Enzo Ferrari\n    ratio: 720\u002F507\n    x: 27\n    y: 12\n    w: 44\n    r: 1.5\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fdino-badge.jpg\n    alt: The Dino badge, Alfredo Ferrari's signature in blue on yellow enamel\n    caption: The Dino badge, drawn from a signature\n    ratio: 720\u002F540\n    x: 70\n    y: 20\n    w: 28\n    r: -3\n---\n:::\n\nThree typefaces share the page, one for each voice: the titles of the letter, its text, and the measurements of the drawing.\n\n:::sheet-entries\n::::sheet-entry{term=\"Redaction\" font=\"redaction\"}\nThe titles. A serif Jeremy Mickel drew in 2019 from the typefaces of official documents, Times New Roman and New Century Schoolbook, then took somewhere else: soft, round curves that end in terminals as sharp as a blade. Its italic sets the red numerals.\n::::\n\n::::sheet-entry{term=\"Geist\" font=\"sans\"}\nThe text. Vercel's typeface, drawn in the Swiss tradition: plain, precise, made to be read.\n::::\n\n::::sheet-entry{term=\"Geist Mono\" font=\"mono\"}\nThe measurements, notes and captions. Every character takes the same width, like figures on a drawing.\n::::\n:::\n\nWhen you arrive here, I'd like it to feel like receiving a beautiful letter: a good moment, a few things to take away from what I've written, and the feeling, somewhere, that it was made with care.\n\nThe drawing sheet is the other half of the site, the workshop behind the letter. It's where things are designed, measured, and redrawn until they're right, which is how I like to work. Every page sits on the same plate of five columns.\n\n:::sheet-plate\n:::\n\nAnd you can decide how much of the drawing you want to see. In the footer, or with the D key, the page goes from a clean fair copy to the full drawing, with every measurement written in its margins.\n\n:::sheet-note\n[Redaction](https:\u002F\u002Fwww.redaction.us): Jeremy Mickel and Forest Young, MCKL. [Geist](https:\u002F\u002Fvercel.com\u002Ffont): Vercel. [Mrs Saint Delafield](https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FMrs+Saint+Delafield): SIL Open Font License.\n\nThe [Dino](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFerrari_Dino) badge was drawn from the signature of Alfredo Ferrari, Enzo's son.\n:::\n::\n\n::sheet-section{id=\"light\" numeral=\"III\" label=\"The light\"}\nA letter is always written somewhere, at a certain hour. So is this page. It's lit by the sun over wherever I happen to be, and the city written at the top is real: I change it when I travel, because a letter has to come from somewhere, and knowing where brings you a little closer to whoever wrote it.\n\nThe light comes from photography, and from painting. When I take pictures, it's what matters most, and nearly always what decides whether a picture is worth taking. The same street can be flat at noon and beautiful an hour before sunset, when the light comes in low and catches a face, the leaves of a tree, the texture of a wall. Very often a good photograph is just good light, seen at the right moment.\n\nA photographer waits for that light. A painter has to make it, with nothing but pigment, and the painters I love most are the ones who made it best: Leonardo's sfumato, the soft shadow that lets a face dissolve into the air around it; the warm skies of Titian; Caravaggio's beam of light cutting across a dark room; the daylight Vermeer lets in through a window; the sun on Fragonard's pink silk in a shaded garden; Van Gogh's yellow lamp under a night sky. Each of them found their own way to put light on a flat surface.\n\n:::print-spread\n---\nratio: 528\u002F456\nprints:\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fleonardo-mona-lisa-1503.jpg\n    alt: A woman with folded hands before a hazy landscape, her face modelled in soft shadow\n    caption: Mona Lisa, by Leonardo da Vinci, 1503–19\n    ratio: 483\u002F720\n    x: 0\n    y: 3\n    w: 21\n    r: -2\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Ftitian-bacchus-ariadne-1523.jpg\n    alt: Bacchus leaping from his chariot towards Ariadne, under a bright blue sky\n    caption: Bacchus and Ariadne, by Titian, 1520–23\n    ratio: 720\u002F652\n    x: 19\n    y: 0\n    w: 28\n    r: 1.5\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fcaravaggio-matthew-1600.jpg\n    alt: Men counting money at a table in a dark room, caught in a beam of light from a high window\n    caption: The Calling of Saint Matthew, by Caravaggio, 1600\n    ratio: 720\u002F680\n    x: 44\n    y: 3\n    w: 28\n    r: -1\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fvermeer-milkmaid-1658.jpg\n    alt: A maid pouring milk at a table, lit by daylight from a window on the left\n    caption: The Milkmaid, by Johannes Vermeer, around 1660\n    ratio: 642\u002F720\n    x: 72\n    y: 1\n    w: 26\n    r: 2\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Ffragonard-swing-1767.jpg\n    alt: A young woman in a pink dress on a swing in a dark garden, lit by a patch of sun\n    caption: The Swing, by Jean-Honoré Fragonard, 1767\n    ratio: 563\u002F720\n    x: 5\n    y: 55\n    w: 26\n    r: 1.5\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fmonet-impression-1872.jpg\n    alt: A harbour in blue morning haze, with a small orange sun and its reflection on the water\n    caption: Impression, Sunrise, by Claude Monet, 1872\n    ratio: 720\u002F558\n    x: 30\n    y: 58\n    w: 36\n    r: -1.5\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fvan-gogh-cafe-1888.jpg\n    alt: A café terrace lit yellow by its lamp, on a cobbled street under a starry blue sky\n    caption: Café Terrace at Night, by Vincent van Gogh, 1888\n    ratio: 574\u002F720\n    x: 66\n    y: 55\n    w: 27\n    r: 2\n---\n:::\n\nAnd then Monet, who made the light itself the subject. In Rouen, he painted the front of the cathedral more than thirty times, from across the square, at different hours and in different weather, because the stone was never the same colour twice.\n\n:::print-spread\n---\nratio: 528\u002F300\nprints:\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fmonet-rouen-morning.jpg\n    alt: The façade of Rouen Cathedral in pale blue morning light\n    caption: Rouen Cathedral in the morning, by Claude Monet, 1892–94\n    ratio: 514\u002F760\n    x: 4\n    y: 4\n    w: 30\n    r: -2\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fmonet-rouen-sun.jpg\n    alt: The same façade of Rouen Cathedral in bright white sunlight, under a blue sky\n    caption: Rouen Cathedral in full sun, by Claude Monet, 1892–94\n    ratio: 494\u002F760\n    x: 34\n    y: 0\n    w: 30\n    r: 1\n  - src: \u002Fimages\u002Fwriting\u002Fredrew\u002Fmonet-rouen-evening.jpg\n    alt: The same façade of Rouen Cathedral in warm orange evening light\n    caption: Rouen Cathedral in the evening, by Claude Monet, 1892–94\n    ratio: 468\u002F760\n    x: 66\n    y: 5\n    w: 30\n    r: 2.5\n---\n:::\n\nThat's what I wanted for this page: a light of its own, one that changes through the day, like the stone in Rouen, or anything I photograph.\n\nThere's also a moment in photography I've always loved: before the print, there's the negative, the same picture with light and dark swapped. Lift the corner of the home page, and that's what you'll find under my portrait: its negative, laid on a light box, as if it hadn't been printed yet.\n\nThe hour comes from the watch. The page keeps time the way my Santos-Dumont does, with a movement, and its sections are numbered like the hours on its dial. Pull the crown and turn it: the hands move, and the whole page takes on the light of that hour.\n\n:::crown-viewer\n:::\n\nThrough the afternoon, the white slowly turns to parchment. After sunset the page becomes a violet dusk that darkens until it's black, and before sunrise it goes through the same in blue. None of it ever makes the page harder to read: every grey keeps the contrast it has at noon, and the red slides gently along its band, towards Cartier's as the light falls, towards Ferrari's at dusk.\n\n:::sun-viewer\n:::\n\nAnd if you'd rather choose for yourself, the dot in the footer sets light or dark by hand. Press it again, and the page goes back to following the sun.\n\n:::sheet-note\nThe red never drops under 4.6 : 1, nor the text under 4.5 : 1. Every build checks it at every height the sun can take.\n\nThe movement is drawn, not copied: 21,600 beats an hour, the beat of the hand-wound 430 MC in my Santos-Dumont.\n:::\n::\n\n::sheet-section{id=\"underneath\" numeral=\"IV\" label=\"Underneath\"}\nLift any corner of the page, and it folds back like a sheet of paper. On a phone, tap the corner and the page turns over, like the page of a book. I like design that makes you feel something, and few gestures are as familiar as lifting a sheet of paper to see what's underneath. It's also the transition the site needed: the letter is on top, the drawing sheet lies underneath, and something has to take you from one to the other. Nothing does that better than lifting the page.\n\n:::page-layers\n:::\n\nWhat you find here is the working drawing of the page you were reading, and the mechanism that runs it. Everything that changes on the page by itself sits right above the part that changes it: the movement beneath the hour, a lever for the light, a wheel for the level of detail, a chime for the sound. Point at a part's number, and it tells you what it does. Around them lie the request that brought you here, the file each block of the page comes from, and the last changes made to the site.\n::\n\n::sheet-section{id=\"infinity\" numeral=\"V\" label=\"Iterate\"}\n:::sheet-quote{by=\"One of Vercel's values\"}\nIterate to Greatness.\n:::\n\nOf every idea I've come across in my work, it's the one I find most powerful. When you chase perfection, you miss the point. It's been said a thousand times, but it's true: perfection isn't something you can reach. And while you wait for it, you sometimes never release anything at all, because it's never quite ready.\n\nIterating is the opposite. You release something that already holds the foundations of what you think and what you want to show, and then you keep going. You improve it, people tell you what they see, and what they tell you improves it again. There's no end to it, and that's exactly what I love. Most of the time, the process is the most interesting part, and the most fun. For me, it's the only real way to move forward.\n\nIt's something I did less with my projects before, and I want to do much more of it now: not drop the things I start, give them time, and keep taking them further, so that the people who use them know someone is behind them.\n\nIt meets another phrase I love: simplicity is the ultimate sophistication. To me, something becomes right not when there's nothing left to add, but when there's nothing left to take away. And you only get there by coming back to it, again and again.\n\nOn the home page, my role at Vercel starts in 2025 and ends with ∞. Under the page, that sign sits above the barrel, the part that holds the mainspring and can only turn one way. This site works the same way. It isn't finished, and it never will be. I'll keep iterating on it.\n\n:::sheet-note\nThe ∞ is drawn as a curve, not typed: a [lemniscate of Bernoulli](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FLemniscate_of_Bernoulli), the figure of eight mathematicians use for infinity, leaning 12° as if written by hand.\n\n*Simplicity is the ultimate sophistication* is usually credited to Leonardo da Vinci. *Nothing left to take away* is Antoine de Saint-Exupéry's, in *Terre des hommes*, 1939.\n\nThe archive pictures come from Wikimedia Commons and are in the public domain, apart from [the Santos-Dumont movement](https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Calibro_Fr%C3%A9d%C3%A9ric_Piguet_21_incassato_in_un_Cartier_Santos_Dumont_anni_Novanta.jpg) by EMore98 and [the telegram](https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Un_t%C3%A9l%C3%A9gramme_de_f%C3%A9licitations_d%27Enzo_Ferrari....JPG) by Claude F. Sage (both CC BY-SA 4.0), [Schumacher in the F2004](https:\u002F\u002Fcommons.wikimedia.org\u002Fwiki\u002FFile:Michael_Schumacher_Ferrari_2004.jpg) by Rick Dikeman (CC BY-SA 3.0), and the Gazette du Bon Ton, from the Rijksmuseum (CC0).\n:::\n::\n",{"title":6,"description":7},"2.writing\u002Fhow-i-redrew-my-portfolio","LuiLVfjrzGFCZAH3-EcbGs4-OG644dE8g9fn5b_P8NE",1792957158400]