CINXE.COM

<!DOCTYPE html><html data-capo=""><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Nicolas Garnier</title> <style>@font-face{font-family:Heebo;font-style:normal;font-weight:800;src:url(/_nuxt/Heebo-Black.BC9mDJmI.woff2) format("woff2")}@font-face{font-family:Heebo;font-style:normal;font-weight:600;src:url(/_nuxt/Heebo-Bold.C65bpwY5.woff2) format("woff2")}@font-face{font-family:Heebo;font-style:normal;font-weight:400;src:url(/_nuxt/Heebo-Regular.PAgPqbSu.woff2) format("woff2")}@font-face{font-family:Heebo;font-style:normal;font-weight:200;src:url(/_nuxt/Heebo-Thin.BpVWqM6X.woff2) format("woff2")}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased}:root{--base-width:1440;--vw:1vw;--lvh:1lvh;--dvh:1dvh;--svh:1svh;--colors-white:#fff;--colors-black:#000;overscroll-behavior:none}@media (max-width:1024px){:root{--base-width:1024}}@media (max-width:490px){:root{--base-width:768}}body,html{height:100%}html{font-size:calc(1600vw/var(--base-width))}@media (max-width:1024px) and (max-aspect-ratio:1){html{font-size:calc(1400vw/var(--base-width))}}@media (min-width:1600px){html{font-size:calc(1600vw/var(--base-width))}}body{background-color:var(--colors-black);color:var(--colors-white)}h1,h2,h3{margin:0}h1{font-family:Heebo;font-size:calc(6000vw/var(--base-width));font-weight:800;line-height:100%}@media (max-width:490px){h1{font-size:calc(12000vw/var(--base-width))}}h2{color:var(--colors-white);font-family:Heebo;font-size:calc(3000vw/var(--base-width));font-weight:800}@media (max-width:490px){h2{font-size:calc(6000vw/var(--base-width))}}.project{overflow:hidden}.project-link{color:var(--colors-white);display:block;height:100%;text-decoration:none}.project-link .detail{font-size:calc(3000vw/var(--base-width));opacity:0}@media (max-width:1024px){.project-link .detail{display:none}}.project-link:hover .detail{opacity:1}h3{font-family:Heebo;font-size:calc(1200vw/var(--base-width));font-weight:400;line-height:calc(1200vw/var(--base-width));margin-bottom:auto}@media (max-width:490px){h3{font-size:calc(2500vw/var(--base-width));line-height:calc(3000vw/var(--base-width))}h3 span{display:block}}main{display:flex;flex-direction:column;height:calc(var(--svh, 1vh)*100);justify-content:flex-end;left:0;padding:calc(2000vw/var(--base-width));position:fixed;top:0;width:100vw;z-index:1}@media (max-width:490px){main{padding:calc(4000vw/var(--base-width))}}nav{align-self:flex-start}.footer-items{display:flex}.footer-items .footer-item{margin:0 calc(1000vw/var(--base-width))}.footer-items .footer-item:first-of-type{margin-left:0}.footer-items .footer-item:last-of-type{margin-right:0}.footer-items .footer-item .footer-item-link{color:var(--colors-white);font-family:Heebo;font-size:calc(1200vw/var(--base-width));font-weight:400;position:relative;text-decoration:none}@media (max-width:490px){.footer-items .footer-item .footer-item-link{font-size:calc(2500vw/var(--base-width))}}.footer-items .footer-item .footer-item-link:before{background-color:var(--colors-white);bottom:0;content:"";height:1px;left:0;opacity:0;position:absolute;width:100%}.footer-items .footer-item .footer-item-link:hover:before{opacity:1}footer{display:flex;justify-content:space-between;margin-top:calc(2000vw/var(--base-width))}@media (max-width:490px){footer{margin-top:calc(4000vw/var(--base-width))}}.logo{height:auto;position:absolute;right:calc(2000vw/var(--base-width));top:calc(2000vw/var(--base-width));width:calc(5000vw/var(--base-width))}@media (max-width:490px){.logo{right:calc(4000vw/var(--base-width));top:calc(2600vw/var(--base-width));width:calc(6000vw/var(--base-width))}}.clients{font-family:Heebo;font-size:10vh;font-weight:800;line-height:100%;opacity:.1;padding:0 calc(2000vw/var(--base-width)) 0;text-align:right;text-transform:uppercase}@media (max-width:490px){.clients{font-size:5vh}}.client{text-align:right;transform-origin:right center;white-space:nowrap}.client,.footer-items,.headline,.js-in{opacity:0;will-change:transform}.fg{z-index:2}.bg{z-index:0}</style> <style>.webgl-canvas[data-v-f1077024]{display:block;height:100svh;left:0;position:fixed;top:0;width:100%;z-index:1}</style> <link rel="stylesheet" href="/_nuxt/entry.CAfkwyJC.css"> <link rel="preload" as="fetch" crossorigin="anonymous" href="/_payload.json?4498c2b8-edad-47d9-8d76-c55d9aae5ce8"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/CNWm2zIY.js"> <link rel="prefetch" as="script" crossorigin href="/_nuxt/CC2AZSS3.js"> <link rel="prefetch" as="script" crossorigin href="/_nuxt/CLDsdYu1.js"> <meta property="og:title" content="Nicolas Garnier"> <meta name="description" content="Frontend and Creative Developer based in Amsterdam. WebGL, JavaScript, Vue, React"> <meta property="og:description" content="Frontend and Creative Developer based in Amsterdam. WebGL, JavaScript, Vue, React"> <meta property="og:image" content="https://nico.computer/poster.jpg"> <meta name="twitter:card" content="summary_large_image"> <script type="module" src="/_nuxt/CNWm2zIY.js" crossorigin></script></head><body><div id="__nuxt"><div class="clients"><p class="client">27b</p><p class="client">Active Theory</p><p class="client">Airbnb</p><p class="client">Antinomy</p><p class="client">GoSpooky</p><p class="client">Humane</p><p class="client">Lost Mechanics</p><p class="client">Mojo</p><p class="client">Parallax</p><p class="client">Random Studio</p><p class="client">WeTransfer</p><p class="client">Your Majesty</p><p class="client">27b</p><p class="client">Active Theory</p><p class="client">Airbnb</p><p class="client">Antinomy</p><p class="client">GoSpooky</p><p class="client">Humane</p><p class="client">Lost Mechanics</p><p class="client">Mojo</p><p class="client">Parallax</p><p class="client">Random Studio</p><p class="client">WeTransfer</p><p class="client">Your Majesty</p><p class="client">27b</p><p class="client">Active Theory</p><p class="client">Airbnb</p><p class="client">Antinomy</p><p class="client">GoSpooky</p><p class="client">Humane</p><p class="client">Lost Mechanics</p><p class="client">Mojo</p><p class="client">Parallax</p><p class="client">Random Studio</p><p class="client">WeTransfer</p><p class="client">Your Majesty</p><p class="client">27b</p><p class="client">Active Theory</p><p class="client">Airbnb</p><p class="client">Antinomy</p><p class="client">GoSpooky</p><p class="client">Humane</p><p class="client">Lost Mechanics</p><p class="client">Mojo</p><p class="client">Parallax</p><p class="client">Random Studio</p><p class="client">WeTransfer</p><p class="client">Your Majesty</p><p class="client">27b</p><p class="client">Active Theory</p><p class="client">Airbnb</p><p class="client">Antinomy</p><p class="client">GoSpooky</p><p class="client">Humane</p><p class="client">Lost Mechanics</p><p class="client">Mojo</p><p class="client">Parallax</p><p class="client">Random Studio</p><p class="client">WeTransfer</p><p class="client">Your Majesty</p></div><span></span><main><h3 class="headline">Frontend & Creative Developer - <span>React/Vue/GSAP/WebGL - Amsterdam</span></h3><div><img src="/logo-white.png" class="logo"><h1 class="js-in">Nicolas Garnier</h1><h2 class="project js-in"><a href="https://lifeworld.wetransfer.com" target="_blank" rel="noreferrer, noopener" class="project-link"><span>WePresent x Olafur</span><span class="detail"> - 2024 - with WeTransfer</span></a></h2><h2 class="project js-in"><a href="https://alcestmusic.com" target="_blank" rel="noreferrer, noopener" class="project-link"><span>Alcest</span><span class="detail"> - 2024 - with 27b</span></a></h2><h2 class="project js-in"><a href="https://liefamsterdam.nl" target="_blank" rel="noreferrer, noopener" class="project-link"><span>Lief Amsterdam</span><span class="detail"> - 2023 - Awwwards SOTD - FWA - CSSDA - with Julie Bonnemoy</span></a></h2><h2 class="project js-in"><a href="https://nexus.hexagon.com/experiences/showroom/" target="_blank" rel="noreferrer, noopener" class="project-link"><span>Nexus Showroom</span><span class="detail"> - 2022 - with Parallax, Thomas Aufresne, Bryan James</span></a></h2><h2 class="project js-in"><a href="https://www.awwwards.com/sites/nexus" target="_blank" rel="noreferrer, noopener" class="project-link"><span>Nexus</span><span class="detail"> - 2022 - Awwwards SOTD - FWA - CSSDA - with Parallax, Thomas Aufresne, Bryan James</span></a></h2><h2 class="project js-in"><a href="https://thefwa.com/cases/behemoth-opvs-contra-natvram" target="_blank" rel="noreferrer, noopener" class="project-link"><span>Behemoth</span><span class="detail"> - 2022 - FWA - with Lost Mechanics</span></a></h2><h2 class="project js-in"><a href="https://thefwa.com/cases/msi-gear-up-game-on" target="_blank" rel="noreferrer, noopener" class="project-link"><span>MSI</span><span class="detail"> - 2022 - FWA - with Lost Mechanics</span></a></h2><h2 class="project js-in"><a href="https://vitaarchitecture.com" target="_blank" rel="noreferrer, noopener" class="project-link"><span>Vita Architecture</span><span class="detail"> - 2021 - Awwwards SOTD - FWA - CSSDA - with Julie Bonnemoy</span></a></h2><h2 class="project js-in"><a href="https://www.awwwards.com/sites/the-harmonic-state" target="_blank" rel="noreferrer, noopener" class="project-link"><span>The Harmonic State</span><span class="detail"> - 2021 - Awwwards SOTM - FWA - CSSDA - with Active Theory</span></a></h2><h2 class="project js-in"><a href="https://loerarchitecten.com" target="_blank" rel="noreferrer, noopener" class="project-link"><span>Loer Architecten</span><span class="detail"> - 2020 - Awwwards SOTD - FWA - CSSDA - with Julie Bonnemoy</span></a></h2><h2 class="project js-in"><a href="https://www.awwwards.com/sites/fila-explore" target="_blank" rel="noreferrer, noopener" class="project-link"><span>Fila Explore</span><span class="detail"> - 2019 - Awwwards SOTD - FWA - with Your Majesty</span></a></h2><h2 class="project js-in"><a href="https://www.awwwards.com/sites/julie-bonnemoy" target="_blank" rel="noreferrer, noopener" class="project-link"><span>Julie Bonnemoy</span><span class="detail"> - 2018 - Awwwards SOTD - FWA - CSSDA - with Julie Bonnemoy</span></a></h2></div><footer><nav><ul class="footer-items"><li class="footer-item"><a class="footer-item-link" href="mailto:hello@nico.computer" target="_blank" rel="noreferrer, noopener">say hi</a></li><li class="footer-item"><a class="footer-item-link" href="https://twitter.com/nicodotcomputer" target="_blank" rel="noreferrer, noopener">twitter</a></li><li class="footer-item"><a class="footer-item-link" href="https://instagram.com/nicodotcomputer" target="_blank" rel="noreferrer, noopener">instagram</a></li><li class="footer-item"><a class="footer-item-link" href="https://www.linkedin.com/in/nicolas-garnier-49431b43/" target="_blank" rel="noreferrer, noopener">linkedin</a></li><li class="footer-item"><a class="footer-item-link" href="https://github.com/jackismissing" target="_blank" rel="noreferrer, noopener">github</a></li><li class="footer-item"><a class="footer-item-link" href="https://codepen.io/nicodotcomputer/pens/popular" target="_blank" rel="noreferrer, noopener">codepen</a></li></ul></nav></footer></main></div><div id="teleports"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/_payload.json?4498c2b8-edad-47d9-8d76-c55d9aae5ce8">[{"state":1,"once":3,"_errors":4,"serverRendered":6,"path":7,"prerenderedAt":8},["Reactive",2],{},["Set"],["ShallowReactive",5],{},true,"/",1730112134411]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildId:"4498c2b8-edad-47d9-8d76-c55d9aae5ce8",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>