Hello everyone! Welcome to Nate's Space, Portfolio of Design and Code., And this is 'Project' page, the work that I proud with!

I was selected for an internship with Museum London to help develop educational art-related projects. There are two main projects involved, and one of them is The Vault—a closed-system website displayed through a Raspberry Pi inside an arcade-style cabinet located within the museum. Its purpose is to showcase 3D models of artworks in the museum’s collection.

The museum’s visitors include a wide demographic—from adults and seniors to young children. The museum regularly rotates exhibitions and activities each week. Likewise, The Vault must also be accessible to all audiences, even though the arcade cabinet might seem targeted at teens due to its game-like appearance and button controls.

The display is limited to a single arcade machine inside the museum. It runs on a Linux-based Raspberry Pi system, which I had no prior experience with. The control system includes only six buttons, which adds UX limitations. Additionally, the project uses Google’s model-viewer but must operate fully offline, meaning the system runs on Node.js directly from the local machine—making the technical setup particularly challenging.

In terms of UI, The Vault follows an arcade theme with a nostalgic retro-game aesthetic. Our team designed the interface using pixel art inspired by classic Famicom-style games. Since the website has only a few core functions—mainly displaying art pieces and a behind-the-scenes feature—it doesn’t require a complex navigation system or responsive design. It’s only meant to display content on the single screen within the museum.

The main goal was to display 3D models of artworks through the arcade interface. We faced several constraints—starting with the unusual screen ratio since the display is a TV rather than a standard computer screen. We couldn’t rely on 100% width or height rendering, so we had to design with extra padding and test repeatedly on the real hardware. Since the audience ranges from children to seniors, font sizes had to be large enough to ensure readability. However, this conflicted with the screen’s limited resolution of just 1360 × 768 pixels.

The 3D models we received from another team had various issues. The models were created by photographing the objects from all sides—except the bottom—so we had to edit and seal some of the open areas manually. We also cleaned up many errors in the raw files. To optimize performance, we resized the models significantly—reducing them by about 90% in file size to ensure smooth loading, even though it’s running locally. This was important, especially since Raspberry Pi devices are prone to crashes when loading large assets.

The backend system for The Vault was relatively simple. We used OOP principles to structure content as JSON data and imported these into JavaScript modules for dynamic rendering within HTML. The layout is a single-page site, and all content is presented using lightboxes. This makes content management straightforward, so that Museum London staff can easily update the information later, if needed.

This project was incredibly valuable to me. Not only was it my first time creating a website for real clients with real users, but it was also my first experience working on Linux and running Node.js locally. In the future, I believe it wouldn’t be difficult to adapt this project for public online access. If that happens, I’d like to explore tools like Three.js or expand my knowledge of Node.js-based solutions to enhance 3D rendering capabilities further.