Oculi Mundi
Een online 3D kunstcollectie van antieke kaarten, globes en atlassen.
- Klant:
- Oculi Mundi / The Sunderland Collection
- Tech-stack:
- Next.js / TailwindCSS / Sanity.io / Typescript
- Rol:
- Front-end Engineer
- Jaar:
- 2023
Opdracht
Het bouwen van een online representatie van een kunstcollectie dat niet voelt als een website.
De klant wilde specifiek niet “your mama’s website”. Hiermee doelde ze op een reguliere website. De kunstcollectie bestaat uit hele oude wereldkaarten en atlassen. De klant vroeg om een meeslepende en interactieve ervaring van de kunststukken.
Om dit te realiseren en de gebruiker volledig mee te nemen, is er gebruik gemaakt van 3D om de collectie weer te geven. De navigatie van de web-app doet lijken alsof de gebruiker door de ruimte zweeft.
De 3D-achtige omgeving is vrijwel volledig gemaakt met CSS en semantische HTML, om een high-performant en toegankelijke ervaring te kunnen waarborgen. Met CSS transforms is er een 3D perceptie gemaakt, terwijl de kracht van DOM elementen is bewaard. Hierdoor is de web-app ook goed te gebruiken met keyboard en screenreaders.
Met de kracht van Next.js en Sanity.io heeft de klant volledige controle over de content van de website. Hiermee maakt de website optimaal gebruik van verschillende render methodes, zoals SSR en SSG via hydration. Zo bereiken we de gebruiker op snelheid terwijl we de interactiviteit van de website behouden.
Werkzaamheden
Dit project was een opdracht vanuit Q42 als werkgever. Als Front-end developer maakte ik deel uit van een scrumteam bestaande uit drie developers en twee ontwerpers. Binnen dit team nam ik voornamelijk front-end taken op me, zoals het opzetten van componenten in React, het maken van animaties met Framer-motion en het stylen van pagina's met TailwindCSS.
Daarnaast hielp ik ook met de back-end, zoals het opzetten van het CMS met Sanity.io, het bouwen van herbruikbare elementen voor het CMS en het aanpassen van de CI/CD pipeline.
Het design is volledig ontworpen door de designers van Fabrique.