This content originally appeared on DEV Community and was authored by James Wallis
The VECentre by Inner Sanctum Design is a virtual venue designed to reflect a live show, by artists for artists. It was created as a replacement for in-person art exhibitions, a major revenue stream for artists, that could no longer take place due to COVID-19 restrictions. Each exhibition is bespoke and results in a 3D tour that a user can navigate around. I was requested to develop a website and implement the tour hosting. TheVECentre.com helps users find out more about The VECentre and provides an interface to access the virtual tours. The website was originally built for the Christmas 2020 tour.
The homepage
Task
My task was to work alongside Inner Sanctum Design to develop the website and organise the tour hosting platform. As such, the desktop version of the website had already been designed - all I needed to do was design a mobile version and build it in a responsive manner. I made a few usability changes such as making the header reduce in height when the user scrolls (to increase screen real estate). In addition, I was required to find a provider to host the tours and make them display on a thevecentre.com/tour URL.
The tour selection page
Technical Details
TheVECentre.com is predominately built using Next.js and Tailwind CSS. Two Next.js plugins, next-seo and next-optimized-images, to handle the SEO orientated properties and optimise images for different device sizes respectively. Additionally, React Icons supplies any social icons, EmailJS powers the contact form and Framer Motion adds animations to the site.
The tours are stored on AWS S3 in a public bucket and are displayed in iframes. As the 3D software used to build the tours creates a social image, manifest and other assets, they are loaded into the website at build time. The result is that Inner Sanctum Design are able to change tour assets and the website will automatically pick up any changes.
As a separate feature, I was asked to create a "guestbook" to enable visitors to review a tour and see previous visitors comments. The data is both saved to and read from a Google Sheet using the Google APIs
Scrolling through the homepage
The source code for TheVECentre.com is available on GitHub.
This content originally appeared on DEV Community and was authored by James Wallis
James Wallis | Sciencx (2021-04-25T22:22:43+00:00) TheVECentre.com. Retrieved from https://www.scien.cx/2021/04/25/thevecentre-com/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.