https://github.com/freddysae0/harbour-space
Front-end challenge for Harbour Space University
https://github.com/freddysae0/harbour-space
animations css css-animations javascript landing-page pinia pinia-vuejs vue vue3 vuejs
Last synced: about 2 months ago
JSON representation
Front-end challenge for Harbour Space University
- Host: GitHub
- URL: https://github.com/freddysae0/harbour-space
- Owner: freddysae0
- Created: 2024-04-15T20:00:32.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-19T12:39:08.000Z (about 2 years ago)
- Last Synced: 2024-04-20T06:38:27.227Z (about 2 years ago)
- Topics: animations, css, css-animations, javascript, landing-page, pinia, pinia-vuejs, vue, vue3, vuejs
- Language: Vue
- Homepage: https://hschallenge.netlify.app
- Size: 12.5 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Challenge of Harbour Space 🚀
This project is a responsive landing page, imitating the design of [Harbour Space](https://harbour.space). It features advanced animations using CSS + JavaScript. The project is built with:
- [Vue.js 3](https://vuejs.org)
- [Pinia](https://pinia.vuejs.org/) for state management
- [Tailwind CSS](https://tailwindcss.com)
- [Sass](https://sass-lang.com) (minimal use).
You can view the project live at [Freddy's HS Challenge](https://hschallenge.netlify.app/).
## Desktop Preview 🖥️
Upon startup, the site prompts the user to select an API for a specific scholarship. Due to time constraints, the API is only consumed and displayed in the first section, [HeroSection.vue](./src/sections/HeroSection.vue). However, data handling for displaying it throughout the project is implemented using [Pinia](https://pinia.vuejs.org/).
The API base url is located in the `/src/api.js` file:
```js
export const apiListUrl =
"https://pre-prod.harbour.space/api/v1/scholarship_pages/";
```
The fetching to this route indicates us the different APIs available that we can show to the user, as shown in the following image:
Here's a demonstration of the landing page:
- 
- 
- 
- 
- 
- 
#### Connectivity error
There is also this component that I hope if you are not intentionally looking to provoke it, you will never have to see it, it is activated if any API request fails, you can test it by running the project locally, and disconnecting from the Internet, it will be the first thing you will see when you open the project.
- 
## Mobile Preview 📱
- 
## Installing the Project 🛠️
Ensure you have [Node.js](https://nodejs.org) and [npm](https://www.npmjs.com/) installed on your system. If you do, follow these steps:
### Clone the Project
```bash
git clone https://github.com/freddysae0/harbour-space.git
```
### Access the Project Folder
```bash
cd harbour-space
```
### Install Dependencies
```bash
npm i
```
### Run the Project Locally
```bash
npm run serve
```
If successful, the project will run in development mode on your system.
## Building the Project 🏗️
### Compile and Minify for Production
```bash
npm run build
```
This `readme.md` wasn't generated by AI; it was carefully crafted, including compressing GIFs with the Cuba's slow internet 😂. All information is organized for clarity. If you're interested in the project, consider leaving a star in the repo or following me. 🌟
PS:
There is an [auto-generated pdf](./README.pdf), with the same content as this README.
## Development Process ☕
# That is all. Thanks for Reading!