LO:GO landingpage is a demonstrational project developed in VueJs framework. Even if the scope of the demo is to deliver a single page, it was developed to be maintabable and scalable in a hypotetic production environment. It features a coherent design system, responsive styling, animations, and interaction for better user experience.
To develop the given designs, the following packages were included:
- Vue3 + Vite ( +
vite-svg-loaderfor SVGs imports &vue3-carouselfor sliders) - Scss
- Gsap (+
ScrollTrigger&ScrollToTargetplugins) - Axios
Throught the code, it is possible to encounter @DEMO: these are helpful comments! (i.e. explanations, production environment equivalent, next steps, etc.)
NB: Small layout and styling adjustments were applied in order to unify the design system and develop reusable common elements.
This folder contains the organized static assets for the project, divided by graphics, images, icons and styles. /styles/base._scss contains pre-processor variables, mixins and utils
This folder contains all the vue components used in the project. /base subfolder contains "atomic" level elements, such as logo, icons, navigation and so on.
This folder contains helpful reusable functions and data services, to easily manage data.
Components use static data, retrieved as objects via data-helper localData. However NewsBlock fetches articles via Spaceflight News API (SNAPI) V3.
In order to test the project it is necessary to locally clone this repository. First of all, make sure to have installed Node.js.
- Clone in local folder this repository via GitHub (i.e.
git clone <repository_url>) - Run the following commands, to install the dependencies and run the local server (which features hot-reload)
cd logo_frontend npm install npm run dev - The landing page will now be available to be tested on
localhost