The project gives an overview of the city of Melbourne about the dining options and live music. The website serves as a prototype to give visitors recommendations, suggestions according to the suburbs. The website is fully responsive and mobile-friendly.
The project's structure follows Vue.js's strategy, in which the related CSS code and the javascript code are in the same .vue
extension file (script, style block).
However, in this project, the code is separated into two files situated in the same folder. For example, in the scripts/header
folder, the related CSS file is header.css
and the javascript file is header.js
. Although the CSS file is not scoped to the specific file, it's relatively simple to find the styles instead of all-in-one style.css
.
The data is stored in JSON format in the javascript file.
- HTML5 for page rendering
- CSS3 for styles and responsiveness
- JavaScript for an event handler, such as buttons
- Mapbox-gl for map rendering, building
- Bootstrap 5 for responsiveness
- Font awesome for icons
- Splide for slide effects
- Figma - UI/UX design
- Zeplin - design and front-end development collaboration
- Notion - project management
- Juptyer notebook - data analysis and pre-processing
- Netlify - deployment
- GuanXin Wang - front-end developer
- TianHua Lu - data analyst
- TuoHuang Li - front-end developer
- Yu-Hsin Tseng - designer