2:I[4386,["439","static/chunks/439-6fdcfc0994b0affb.js","173","static/chunks/173-735f641d26ddf332.js","965","static/chunks/965-580d0bff728e3b90.js","797","static/chunks/app/20khz-vinyl-scanner/page-c7fb8c5909131d14.js"],"InteractiveHoverButton"]
3:I[8173,["439","static/chunks/439-6fdcfc0994b0affb.js","173","static/chunks/173-735f641d26ddf332.js","965","static/chunks/965-580d0bff728e3b90.js","797","static/chunks/app/20khz-vinyl-scanner/page-c7fb8c5909131d14.js"],"Image"]
4:I[4124,["439","static/chunks/439-6fdcfc0994b0affb.js","173","static/chunks/173-735f641d26ddf332.js","965","static/chunks/965-580d0bff728e3b90.js","797","static/chunks/app/20khz-vinyl-scanner/page-c7fb8c5909131d14.js"],"default"]
5:I[9275,[],""]
6:I[1343,[],""]
0:["SP6RCeq2rO14arVUyLfwI",[[["",{"children":["20khz-vinyl-scanner",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",{"children":["20khz-vinyl-scanner",{"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,{"children":[["$","div",null,{"className":"text-gray-950 text-5xl font-semibold pt-28 md:pt-48","children":["20kHz -",["$","br",null,{}]," Vinyl Scanner"]}],["$","div",null,{"className":"text-gray-600 mt-8 max-w-[400px]","children":"What if discovering physical music could instantly lead to listening digitally?"}],["$","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: React Native "}],["$","div",null,{"children":"Back-end: NodeJs "}],["$","div",null,{"children":"Release: 2023"}]]}],["$","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"}]}]}]]}],["$","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":"rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20khz-Vinyl-scanner-4.webp","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] mt-12 relative","children":[["$","div",null,{"className":"text-gray-600 mt-24 max-w-[600px] text-pretty","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 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":"Instant access, zero friction"}],"Designed with a focus on simplicity and speed, it lets users scan a vinyl or CD barcode and instantly access the album on their preferred streaming platform. No typing, no searching, just listening."]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20khz-app-ux.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":"Scan history and search"}],"All your scans are saved in one place for quick access and easy replay. If a barcode isn’t available, built-in search lets you find albums manually."]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20khz-app-ux-search.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":"Manual code search"}],"When scanning isn’t possible, due to poor lighting, damaged labels, or missing barcodes, you can enter the code manually to search and stream the album just as quickly."]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20khz-app-screen-ux-manual-s.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-3xl mb-3","children":"Branding & Visual identity"}],"The visual identity of this app builds on the existing branding of ",["$","a",null,{"href":"/20khz-io","className":"text-blue-300","children":"20kHz.io"}],", a web-based SaaS platform designed to help music artists centralize and share their content."]}],["$","div",null,{"className":"w-[150px] h-[2px] bg-gray-200 my-16"}],["$","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"}],"The UI uses a dark base for contrast, with white and grey tones for hierarchy. Blue & purple accents highlight interactive elements, while cyan adds visual feedback in navigation."]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8 mb-16","children":["$","$L3",null,{"src":"./work/20kh-app-colors.jpg","width":800,"height":700}]}],["$","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"}],"Since this app acts as an add-on and promotional tool for the ",["$","a",null,{"href":"/20khz","className":"text-blue-300","children":"20kHz.io"}]," ecosystem, the logo and UI were designed as a sub-brand, maintaining visual consistency while adapting to a mobile-first, utility-driven experience."]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20kh-app-logo.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-lg mb-3","children":"1. Vertical orientation"}],["$","ul",null,{"className":"list-disc ml-6 space-y-2","children":[["$","li",null,{"children":[["$","span",null,{"className":"font-semibold","children":"Why: "}]," The app is designed for mobile, where vertical interaction dominates. Rotating the logo emphasizes its mobile-first context."]}],["$","li",null,{"children":"The domain suffix “.io” was removed to streamline the logo for small-scale use (app icons, splash screens) and refocus on the brand core: “20kHz”."}],["$","li",null,{"children":[["$","span",null,{"className":"font-semibold","children":"UX Benefit:"}]," More readable, functional, and visually cohesive across mobile interfaces."]}]]}]]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20kh-app-logo-step-A.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-lg mb-3","children":"2. Barcode symbol integration"}],["$","ul",null,{"className":"list-disc ml-6 space-y-2","children":[["$","li",null,{"children":[["$","span",null,{"className":"font-semibold","children":"Why: "}]," The app revolves around barcode scanning. Incorporating a barcode motif into the logo makes this purpose instantly visible."]}],["$","li",null,{"children":[["$","span",null,{"className":"font-semibold","children":"Branding Impact:"}]," Creates an icon that can stand alone without explanatory text-visually distinctive, functional, and directly tied to the app’s value."]}]]}]]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8","children":["$","$L3",null,{"src":"./work/20kh-app-logo-step-B.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-lg mb-3","children":"3. Consistency with the parent brand"}],["$","ul",null,{"className":"list-disc ml-6 space-y-2","children":[["$","li",null,{"children":"The new logo maintains the original’s strong contrasts and typographic style while adapting to a new context."}],["$","li",null,{"children":"This ensures brand coherence across the 20kHz ecosystem, while also allowing the app to communicate its distinct function and purpose."}]]}]]}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8 shadow","children":["$","$L3",null,{"src":"./work/20kh-app-logo-step-C.jpg","width":1000,"height":700}]}],["$","div",null,{"className":"text-gray-600 mt-24 max-w-[600px] text-pretty","children":"This logo variation translates the core identity of 20kHz into a format tailored for mobile use. By adapting its structure, removing unnecessary elements, and visually emphasizing the app’s main function, it maintains brand coherence while clearly communicating a new use case within the product ecosystem."}],["$","div",null,{"className":"rounded-xl overflow-hidden mt-8 mb-24","children":["$","$L3",null,{"src":"./work/20khz-Vinyl-scanner-1.webp","width":1000,"height":700}]}]]}]}]]}],["$","div",null,{"className":"w-full  mt-12 relative","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":[["$","div",null,{"className":"rounded-xl overflow-hidden mt-8 w-fit h-[400px] order-2","children":["$","$L3",null,{"src":"./work/20khz-vinylScanner-app-promo_2.png","width":400,"height":300}]}],["$","div",null,{"className":"max-w-[400px] text-gray-200 md:p-8 order-2","children":[["$","div",null,{"className":"font-semibold text-xl text-white mt-8 my-4 md:mt-0","children":"From spin to stream"}],"This project was a real pleasure to work on, a chance to design and build something simple, useful, and just a little bit magical!",["$","div",null,{"className":"mt-14 text-2xl text-black font-bold text-white","children":"Get it now ✨"}],["$","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://apps.apple.com/fr/app/20khz-vinyl-scanner/id6474036413","children":["$","$L2",null,{"color":"black","children":"Ios"}]}],["$","a",null,{"className":"mt-8 md:mt-0","target":"blank","href":"https://play.google.com/store/apps/details?id=io.twentykhz.barcodescanner&hl=fr","children":["$","$L2",null,{"children":"Android"}]}]]}]]}]]}],["$","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-vinyl-scanner","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