Commercial Project

🌏 CITYA

A Vue.js Single Page Application for CITYA virtual exhibition

🌏 CITYA

❔ About

CITYA is a physical and virtual exhibition project between six cities: Beijing, Hong Kong, Macao, Tallinn, Rome and San Francisco. This website serves as an online platform for artists to express their thoughts on the theme 'City as a medium' through digital technologies.

I worked as a web developer and a UI/UX designer with the key visual designed by the graphic designer.

🔨Technologies

JavaScript
Vue.js
WebGL
Three.js
GraphQL
PostgresSQL
Strapi CMS
Sass/SCSS
Bootstrap 5

🔗Link(s) to the project

Live Site

🌟Features

WebGL

  • The landing page graphic is developed with Three.js library and matcap texture

Geolocating

  • Serve different landing page and clock to different geo regions using IP Location API
  • The landing page of the WebGL canvas background and main page background (except about, contact and acknowledgement page) will change according to geo regions and regional time
  • Day mode: 07:00 - 17:59, Night mode: 18:00 - 06:59

The landing page shown in Hong Kong with day mode

Hong Kong - day mode

The landing page shown in Hong Kong with night mode

Hong Kong - night mode

The landing page shown in Rome with day mode

Rome - day mode

The landing page shown in San Francisco with day mode

San Francisco - day mode

The landing page shown in Tallinn with day mode

Tallinn - day mode

  • The footer will display all the presenting cities' time, the current geolocation's time is highlighted.

A demo image based on the IP address in Hong Kong

Demo based on the IP address in Hong Kong

  • (All pages except landing page) - there is a real-time clock display based on the current IP address' location.

A demo image of the clock based on current IP address' location

GSAP

  • GSAP is used for the hover effects and infinite text scrolling effect

CMS / Admin Dashboard

  • Strapi Headless CMS
  • Authentication and user management
  • PostgresSQL as database
  • API consumption with GraphQL

Deployment

  • Frontend: Automatic deployment on Netlify with a UAT branch and a production branch on GitHub
  • Database and CMS (Admin Dashboard): Automatic deployment on Render and with a GitHub branch

👏Acknowledgements

‍