Mobile Phone Museum je online neziskové muzeum zaměřené na historii mobilních telefonů.

O projektu

Na tomto projektu jsem vytvářel primárně Frontend webu ale podílel jsem se také na tvorbě a správě obsahu za pomoci CMS. Úkolem na tomto projektu bylo připravit stránky v Reactu za použití Gatsby.js frameworku dle návrhu od grafického studia. Klient si hodně zakládál na Pixel-Perfect stylování, a imlementace zajímavých animací. Velice zajímavou částí byla tvorba úvodního slidu na domovské stránce kde v obrázku telefonu Nokia 3310 na obrazovce je digitálním fontem animováno počet zařízení které má muzeum ve zbírce. Projekt byl později aktualizován a přepsán do Next.js tak abychom lépe mohli pracovat s daty a optimalizovat obrázky jelikož generování statických stránek v Gatsby.js později začalo být velice časově náročné vzhledem k růstu projektu a objemu dat. Na webu je spousta zajímavých prvků a funkcí od vyhledávání a filtrování přes různé kolekce telefonů, generování článků až po detail telefonu který zobrazuje PDF soubory, přehrává videa z různých platforem jako Youtube nebo Vimeo tak i zoom pro obrázky mobilních telefonů.

Klíčové funkce

• Katalog zařízení - Více než 2800 mobilních telefonů
• Historická časová osa - Vývoj mobilní technologie
• Profily výrobců - Informace o více než 200 výrobcích
• Vzdělávací obsah - Historie a význam mobilních telefonů

Technologie

• Next.js
• GraphQL
• React PDF
• Sass (SCSS)
• video.js
• Swiper
• React Image Magnify