[{"data":1,"prerenderedAt":121},{"projects-mobile-phone-museum-en":2},{"id":3,"title":4,"body":5,"description":104,"extension":105,"image":106,"link":107,"links":108,"meta":109,"navigation":110,"path":111,"position":112,"role":113,"seo":114,"stem":115,"tags":116,"type":119,"__hash__":120},"projectsEn\u002Fen\u002Fprojects\u002Fmobile-phone-museum.md","Mobile Phone Museum",{"type":6,"value":7,"toc":95},"minimark",[8,22,32,42,65],[9,10,13,18],"div",{"className":11},[12],"row",[14,15,17],"h2",{"id":16},"context","Context",[19,20,21],"p",{},"The Mobile Phone Museum is an online nonprofit museum dedicated to the history of mobile phones. Its collection holds more than 2,800 devices from more than 200 manufacturers.",[9,23,25,29],{"className":24},[12],[14,26,28],{"id":27},"my-role","My role",[19,30,31],{},"I mainly built the website's frontend, but I also helped create and manage content in the CMS.",[9,33,35,39],{"className":34},[12],[14,36,38],{"id":37},"challenge","Challenge",[19,40,41],{},"The pages were built from a design by a graphic studio, and the client cared a lot about pixel-perfect styling and interesting animations. As the project and its data grew, generating static pages in Gatsby.js became very time-consuming.",[9,43,45,49],{"className":44},[12],[14,46,48],{"id":47},"solution","Solution",[50,51,52,56,59,62],"ul",{},[53,54,55],"li",{},"I built the original website in React with the Gatsby.js framework.",[53,57,58],{},"On the homepage intro slide, the screen of a Nokia 3310 shows an animated count of the devices in the museum's collection in a digital font.",[53,60,61],{},"We later rewrote the website in Next.js to work with data more easily and optimize images.",[53,63,64],{},"The website offers search and filtering, phone collections and generated articles. The phone detail page shows PDF files, plays videos from platforms such as YouTube or Vimeo and lets users zoom into images.",[9,66,68,72],{"className":67},[12],[14,69,71],{"id":70},"technologies","Technologies",[50,73,74,77,80,83,86,89,92],{},[53,75,76],{},"Next.js",[53,78,79],{},"GraphQL",[53,81,82],{},"React PDF",[53,84,85],{},"Sass (SCSS)",[53,87,88],{},"video.js",[53,90,91],{},"Swiper",[53,93,94],{},"React Image Magnify",{"title":96,"searchDepth":97,"depth":97,"links":98},"",2,[99,100,101,102,103],{"id":16,"depth":97,"text":17},{"id":27,"depth":97,"text":28},{"id":37,"depth":97,"text":38},{"id":47,"depth":97,"text":48},{"id":70,"depth":97,"text":71},"An online museum of more than 2,800 phones. I built the frontend from a pixel-perfect design and moved the site from Gatsby to Next.js for faster builds.","md","\u002Fimages\u002Flogo-mpm.svg","https:\u002F\u002Fwww.mobilephonemuseum.com",null,{},true,"\u002Fen\u002Fprojects\u002Fmobile-phone-museum",5,"Frontend developer",{"title":4,"description":104},"en\u002Fprojects\u002Fmobile-phone-museum",[76,117,79,118],"React","Sass","Website · Next.js","zmqhTDK2Klyli-svv6YbP2EP5qm6_wY806ax2eWp68Y",1792435547094]