2:I[4386,["439","static/chunks/439-6fdcfc0994b0affb.js","173","static/chunks/173-735f641d26ddf332.js","965","static/chunks/965-580d0bff728e3b90.js","441","static/chunks/app/20khz/page-3ed0ca5f47a1e741.js"],"InteractiveHoverButton"]
3:I[8173,["439","static/chunks/439-6fdcfc0994b0affb.js","173","static/chunks/173-735f641d26ddf332.js","965","static/chunks/965-580d0bff728e3b90.js","441","static/chunks/app/20khz/page-3ed0ca5f47a1e741.js"],"Image"]
4:I[4124,["439","static/chunks/439-6fdcfc0994b0affb.js","173","static/chunks/173-735f641d26ddf332.js","965","static/chunks/965-580d0bff728e3b90.js","441","static/chunks/app/20khz/page-3ed0ca5f47a1e741.js"],"default"]
5:I[9275,[],""]
6:I[1343,[],""]
0:["SP6RCeq2rO14arVUyLfwI",[[["",{"children":["20khz",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["20khz",{"children":["__PAGE__",{},[["$L1",["$","div",null,{"children":[["$","div",null,{"className":"overflow-hidden bg-white","children":[["$","div",null,{"children":[["$","div",null,{"className":"m-auto w-[90%] max-w-[1000px] mt-12 relative","children":[["$","a",null,{"href":"/","className":"absolute right-0 text-gray-950 cursor-pointer text-xs","children":["$","$L2",null,{"sta":"close","children":"Close"}]}],["$","div",null,{"className":"pl-1 md:pl-8 flex","children":[["$","div",null,{"className":"md:w-[500px]","children":[["$","div",null,{"className":"text-gray-950 text-5xl font-semibold pt-28 md:pt-48","children":"20kHz.io"}],["$","div",null,{"className":"text-gray-600 max-w-[200px] text-pretty text-wrap mt-2","children":"A product designed to let musicians focus on their art, while still maintaining a professional and discoverable online presence."}],["$","div",null,{"className":"text-gray-400 text-xs mt-3 space-y-1","children":[["$","div",null,{"children":"Role: Full Stack Design"}],["$","div",null,{"children":"Front-end: Custom framework + Webpack "}],["$","div",null,{"children":"Back-end: NodeJs "}],["$","div",null,{"children":"Release: 2022"}]]}],["$","div",null,{"className":"flex w-full text-black space-x-8 mt-6","children":[["$","a",null,{"className":"","href":"#caseStudy","children":["$","$L2",null,{"children":"Case study"}]}],["$","a",null,{"className":"","target":"blank","href":"https://20khz.io","children":["$","$L2",null,{"children":"Website"}]}]]}]]}],["$","div",null,{"className":"w-full hidden md:flex items-center overflow-hidden","children":["$","div",null,{"className":"w-[400px] h-[400px] m-auto z-20 flex flex-col items-center justify-end","children":["$","div",null,{"className":"text-[154px] font-bold leading-[151px] -rotate-90","children":[["$","div",null,{"className":"opacity-1 invert text-[184px]","children":"WO _"}],["$","div",null,{"className":"opacity-1","children":"- RK"}]]}]}]}]]}]]}],["$","div",null,{"className":"m-auto w-[100%] md:w-[90%] max-w-[1000px] mt-12 relative","children":["$","div",null,{"className":"md:rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20khz-artist.jpg","width":1000,"height":700}]}]}]]}],["$","div",null,{"className":"w-full border-t md:mt-12 text-gray-950","children":[["$","div",null,{"className":"m-auto w-[90%] max-w-[1000px] pt-12 relative","id":"caseStudy","children":[["$","div",null,{"className":"text-gray-600 mt-12 max-w-[600px] text-pretty","children":["$","div",null,{"className":"text-gray-800 font-semibold text-3xl mb-3","children":[["$","div",null,{"children":"Case study"}],["$","div",null,{"className":"text-6xl md:text-8xl","children":["- U",["$","span",null,{"className":"text-4xl","children":"X"}],"/U",["$","span",null,{"className":"text-4xl","children":"I"}]]}]]}]}],["$","div",null,{"className":"w-[150px] h-[2px] bg-gray-200 mt-16"}],["$","div",null,{"className":"flex flex-col md:flex-row","children":[["$","div",null,{"className":"text-gray-600 mt-16 max-w-[600px] text-pretty","children":["$","div",null,{"className":"text-gray-600 md:max-w-[300px] text-pretty text-sm border rounded-xl p-8","children":"Musicians today are expected to be their own marketers. Between rehearsals, recording, and touring, many simply don’t have the time, or the will, to manage yet another link-in-bio tool or mini website. What they needed was something that worked for them, not something that asked for even more of their time."}]}],["$","div",null,{"className":"text-gray-600 mt-24 max-w-[520px] md:mt-20 text-pretty md:px-12","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-xl mb-3","children":"UX research:"}],"I started by talking to producers and touring artists to understand their struggles with their digital presence.",["$","div",null,{"className":"text-gray-800 font-semibold text-base mt-4 mb-3 ","children":"Key findings:"}],["$","ul",null,{"className":"list-disc ml-6 space-y-2 text-sm","children":[["$","li",null,{"children":"Existing tools felt too corporate or generic"}],["$","li",null,{"children":"Artists often didn’t know what to include in their bios/pages"}],["$","li",null,{"children":"Frequent updates were a pain point"}],["$","li",null,{"children":"Visual identity and authenticity were key"}]]}]]}]]}],["$","div",null,{"className":"md:flex mt-24 items-center m-auto w-fit","children":[["$","div",null,{"className":"text-gray-800 border-l-8 border-none pl-6 font-bold max-w-[410px] text-2xl  py-2 mt-16 mb-8 text-6xl md:text-8xl ","children":"\"I’ll do it after the gig !\""}],["$","div",null,{"className":"text-gray-600 md:max-w-[350px] text-pretty   border-l border-r md:border-none rounded-xl px-4 md:px-8 py-6","children":[["$","span",null,{"className":"text-sm","children":"That sentence, casually said by a touring musician, became the anchor for the entire experience. It wasn’t about laziness, it was about priorities. Artists want to spend time making and performing music, not fiddling with digital tools. This insight became a product principle:"}]," ",["$","strong",null,{"className":"bg-cyan-100","children":" if it takes more than 5 minutes, it’s too much."}]]}]]}],["$","div",null,{"className":"w-[150px] h-[2px] bg-gray-200 my-16 "}],["$","div",null,{"className":"text-gray-600 mt-24 max-w-[500px] text-pretty","children":[["$","div",null,{"className":"text-gray-800 font-bold text-2xl mb-3","children":"11 million artists later…"}],["$","span",null,{"className":"text-black font-semibold","children":"At first, the idea was simple:"}],["$","br",null,{}],["$","span",null,{"className":"italic","children":"\"Let’s just build the pages for them.\" "}],["$","br",null,{}],"The easiest way to help artists is to skip the complicated stuff, no setup, no design tools, just a ready-to-go page.",["$","br",null,{}],["$","br",null,{}],["$","span",null,{"className":"text-black font-semibold","children":"Then we looked closer:"}],["$","br",null,{}],"11 million artists on Spotify.",["$","br",null,{}],"Louis pulled out his calculator (spreadsheets are his love language...) :",["$","br",null,{}],["$","span",null,{"className":"italic","children":"“At 10 minutes per page, that’s about 209 years of non-stop building.”"}]]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-14 shadow ","children":["$","$L3",null,{"src":"./work/20khz-onboarding.png","width":1000,"height":700}]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-14  ","children":["$","$L3",null,{"src":"./work/20khzio-onboarding-map.jpg","width":1000,"height":700}]}],["$","div",null,{"className":"text-gray-600 mt-24 max-w-[600px] text-pretty","children":[["$","strong",null,{"children":"The result:"}]," a polished, functional web presence in minutes."]}],["$","div",null,{"className":"rounded overflow-hidden mt-14 max-w-[700px] rounded-xl shadow pt-2","children":["$","$L3",null,{"src":"./work/20khz-onboarding-step-2.png","width":1000,"height":700}]}],["$","div",null,{"className":"w-[150px] h-[2px] bg-gray-200 my-16 "}],["$","div",null,{"className":"text-gray-600 mt-24 max-w-[600px] text-pretty","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-xl mb-3","children":"UX thinking :"}],"The product’s UX follows one rule: if it takes longer than a song to set up, it’s too long. Each decision was made to reduce mental load and friction.",["$","div",null,{"className":"text-gray-800 font-semibold text-base mt-4 mb-3 ","children":"Target audience:"}],"Our user base spans a wide spectrum of artists, from 20-year-old beatmakers to 60-year-old jazz man.",["$","div",null,{"className":"text-gray-800 font-semibold text-base mt-4 mb-3 ","children":"Design principles: "}],["$","ul",null,{"className":"list-disc ml-6 space-y-2 text-sm","children":[["$","li",null,{"children":[["$","strong",null,{"children":"Mobile-first"}],", with responsive, tap-friendly layouts"]}],["$","li",null,{"children":[["$","strong",null,{"children":"Modular UI"}],", clean sections for music, links, events"]}],["$","li",null,{"children":[["$","strong",null,{"children":"Real-time preview"}],", no separate dashboard"]}],["$","li",null,{"children":[["$","strong",null,{"children":"Auto-sync"}],", music releases and tour dates update automatically, so artists stay focused on creating, not maintaining. "]}]]}]]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-14  ","children":["$","$L3",null,{"src":"./work/20khzio-admin-prev.jpg","width":1000,"height":700}]}],["$","div",null,{"className":"text-gray-600 mt-24 max-w-[600px] text-pretty","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-xl mb-3","children":"UI System :"}],"Our design draws inspiration from digital audio workstations to create a familiar and comfortable environment for musicians. Dark mode reduces eye strain during long creative sessions, monospaced typography enhances readability and precision, and subtle grid lines help organize content clearly without overwhelming the user.",["$","div",null,{"className":"text-gray-800 font-semibold text-base mt-4 mb-3 ","children":"Visual hierarchy: "}],["$","ul",null,{"className":"list-disc ml-6 space-y-2 text-sm","children":[["$","li",null,{"children":"Minimal and functional"}],["$","li",null,{"children":"Music-inspired structure"}],["$","li",null,{"children":"Strong visual rhythm through consistent spacing"}],["$","li",null,{"children":"Clean, legible typography that emphasizes clarity"}]]}]]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-14  ","children":["$","$L3",null,{"src":"./work/20khzio-app-screens.jpg","width":1000,"height":700}]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-14  ","children":["$","$L3",null,{"src":"./work/20khz-io-dashboard.jpg","width":1000,"height":700}]}]]}],["$","div",null,{"className":"w-full border border-top mt-12","children":[["$","div",null,{"className":"m-auto w-[90%] max-w-[1000px] pt-12 relative mb-24","children":[["$","div",null,{"className":"text-gray-600 mt-12 max-w-[600px] text-pretty","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-3xl mb-3","children":"Branding & Visual identity"}],"20kHz.io’s visual identity should feel familiar and approachable to musicians and music lovers. It draws from the aesthetics of recording gear and streaming platforms to create a look that fits naturally within the music world."]}],["$","div",null,{"className":"w-[150px] h-[2px] bg-gray-200 my-16"}],["$","div",null,{"className":"text-gray-600 max-w-[600px] text-pretty text-sm my-14 rounded-xl border p-8","children":"The name 20kHz refers to the upper threshold of human hearing (20,000 hertz). It’s the highest frequency most people can perceive, and a symbolic representation of full-spectrum sound. For a platform designed to help artists share their work, it felt like the perfect metaphor: maximum reach, maximum clarity."}],["$","div",null,{"className":"text-gray-600 max-w-[600px] text-pretty","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-xl mb-3","children":"Logo "}],"This idea also shaped the visual identity. The core logo takes inspiration from EQ frequency bands and audio meters, reimagined through a geometric, minimalist layout that echoes the structure of digital audio tools. Precise, functional, and visually rhythmic."]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20khz-iologo-reshearch.jpg","width":1000,"height":700}]}],["$","div",null,{"className":"text-gray-600 max-w-[600px] text-pretty mt-24","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-xl mb-3","children":"Color system "}],"The UI is built on a dark, neutral base that mimics the studio environment. Quiet, focused, and timeless. Accent colors like electric cyan and deep violet provide rhythm and highlight interactivity, giving users clear visual cues without overwhelming them."]}],["$","div",null,{"className":"rounded overflow-hidden mt-14  w-fit h-fit object-top","children":["$","$L3",null,{"src":"./work/20khzio-ui-moodboard.jpg","width":600,"height":100,"className":"object-top"}]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8 shadow","children":["$","$L3",null,{"src":"./work/20khzio-colorSystem.png","width":1000,"height":700}]}]]}],["$","div",null,{"className":"w-full border border-top mt-12","children":["$","div",null,{"className":"m-auto w-[90%] max-w-[1000px] pt-12 relative mb-12","children":[["$","div",null,{"className":"text-gray-600 max-w-[600px] text-pretty mt-12","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-3xl mb-3","children":"Merch & Promo"}],"The idea behind this part of the project was simple: instead of pushing traditional advertising, why not offer artists tools they’d actually want to use?"]}],["$","div",null,{"className":"border rounded-xl px-8 md:px-12 py-6 mt-24","children":[["$","div",null,{"className":"flex md:flex-row flex-col items-center","children":[["$","div",null,{"className":"text-gray-600 max-w-[400px] text-pretty mt-12 md:mr-12 order-2","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-xl mb-3 ","children":"Auto generated Qr card"}],"An internal tool that creates scannable cards linking directly to the artist’s 20kHz page. Each card features the cover art, a unique QR code, and a layout optimized for both print and screen, ready to be shared, posted, or packed.",["$","div",null,{"className":"mt-4","children":[["$","span",null,{"className":"text-black text-sm font-semibold ","children":"Use cases ideas :"}],["$","ul",null,{"className":"list-disc ml-6 space-y-2 text-sm mt-2","children":[["$","li",null,{"children":"Packed with physical releases and merch"}],["$","li",null,{"children":"Shared at live shows and events to boost visibility"}],["$","li",null,{"children":"Added to press kits or promo bundles for media and industry contacts"}],["$","li",null,{"children":"Linked to artist business cards or backstage passes for pro networking"}]]}]]}]]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8 order-1","children":["$","$L3",null,{"src":"./work/20khz-QR.jpg","width":800,"height":700}]}]]}],["$","div",null,{"className":"w-full h-[1px] bg-gray-200 mt-16 "}],["$","div",null,{"className":"flex md:flex-row flex-col items-center","children":[["$","div",null,{"className":"text-gray-600 max-w-[400px] text-pretty mt-24 md:mt-8 md:ml-12 order-2","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-xl mb-3 ","children":"20kHz - Vinyl scanner"}],"Built for speed and simplicity. Just scan the barcode on a vinyl or CD, and the album opens instantly on your favorite streaming platform or takes you directly to the artist’s 20kHz page.",["$","br",null,{}],["$","br",null,{}],["$","div",null,{"className":"text-gray-600 md:ml-12 pl-6 border-l-8 border-cyan-200 my-12 max-w-[350px]","children":["$","strong",null,{"children":"Together, these tools bridge the gap between physical music and the digital world, making discovery and sharing easy."}]}]]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8 w-fit order-1","children":["$","$L3",null,{"src":"./work/20khz-vinylScanner-app-promo_2.png","width":400,"height":500}]}]]}]]}],["$","div",null,{"className":"text-gray-600 max-w-[600px] text-pretty mt-24","children":[["$","div",null,{"className":"text-gray-800 font-semibold text-xl mb-3","children":"And some branded goodies"}],"Because everyone loves goodies :)"]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20khzio-hoodies.jpg","width":800,"height":700}]}]]}]}]]}]]}]]}],["$","div",null,{"className":"w-full mt-12 ","children":[["$","$L4",null,{}],["$","div",null,{"className":"m-auto maw-w-[1000px] m-auto w-fit px-12 py-8 relative  md:flex items-center  rounded-2xl","children":[["$","video",null,{"src":"./work/20khz-logo-animation.mp4","autoPlay":true,"loop":true,"muted":true,"playsInline":true,"className":"w-[300px] h-full rounded-lg object-cover"}],["$","div",null,{"className":"max-w-[600px] text-gray-200 md:p-8 ","children":[["$","div",null,{"className":"font-semibold text-xl text-white mt-8 my-4 md:mt-0","children":"A month-long project... Ahah"}],"We gave ourselves a month. Spoiler alert: we went way over. But sometimes the best part of any development cycle is that awkward middle phase where you're still figuring things out. Those extra weeks let us actually test with real users. Huge thanks to Basilis from Melting Records and all the artists who beta tested our wonky early versions and helped us make something decent. Nothing revolutionary, but something that holds up and might, with any luck, be useful elsewhere too :)",["$","div",null,{"className":"invert text-black mt-8 md:space-x-8 flex flex-col md:flex-row","children":[["$","a",null,{"className":"","target":"blank","href":"https://20khz.io","children":["$","$L2",null,{"color":"black","children":"Discover the product"}]}],["$","a",null,{"className":"mt-8 md:mt-0","target":"blank","href":"/20khz-vinyl-scanner","children":["$","$L2",null,{"children":"20kHz - Vinyl scanner"}]}]]}]]}]]}],["$","div",null,{"className":"w-full flex items-center justify-center my-24","children":["$","a",null,{"href":"/","className":"m-auto text-gray-950 cursor-pointer text-xs invert","children":["$","$L2",null,{"sta":"close","children":"Home"}]}]}]]}]]}]],null],null]},["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","20khz","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/df506f39cf043077.css","precedence":"next","crossOrigin":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/ad8bafd975cf023a.css","precedence":"next","crossOrigin":"$undefined"}]]}],null]},[["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__className_e8ce0c bg-black ","children":[["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[],"styles":null}],["$","div",null,{"className":"w-full py-8 text-white text-[10px] text-center","children":["© ",2025," - Aurélien Argentin"]}]]}]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/a92cacfebe478885.css","precedence":"next","crossOrigin":"$undefined"}]],[null,"$L7"]]]]]
7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Aurélien A."}],["$","meta","3",{"name":"description","content":"Developer and Product Designer"}],["$","link","4",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"16x16"}],["$","meta","5",{"name":"next-size-adjust"}]]
1:null