https://github.com/little-software-engineer/air-n-port-website
Fun personal project displaying famous airports and iconic airport looks
https://github.com/little-software-engineer/air-n-port-website
airport css frontend html javascript jsx react reactvite
Last synced: 2 months ago
JSON representation
Fun personal project displaying famous airports and iconic airport looks
- Host: GitHub
- URL: https://github.com/little-software-engineer/air-n-port-website
- Owner: little-software-engineer
- Created: 2025-01-05T16:21:51.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-03-06T17:16:50.000Z (3 months ago)
- Last Synced: 2025-03-06T18:27:34.593Z (3 months ago)
- Topics: airport, css, frontend, html, javascript, jsx, react, reactvite
- Language: JavaScript
- Homepage:
- Size: 8.07 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Air N Port
Welcome to the **Air-N-Port**, a React-powered Vite website designed to highlight famous airports and iconic airport looks. This project is a fun and interactive frontend that combines sleek design and engaging content to deliver an entertaining user experience.
---
## Features
### 🎨 **Fun Frontend Design**
- A visually appealing and dynamic user interface.
- Smooth navigation between sections.
### ✈️ **Airport Highlights**
- Explore detailed showcases of world-famous airports.
### 👗 **Iconic Airport Looks**
- Discover timeless airport outfits from celebrities and style icons.
- Interactive slideshow featuring curated images and descriptions.
### 🔄 **Interactive Navigation**
- Navigate effortlessly between the homepage, explore page, and more using the responsive navbar.
- Integrated play/pause functionality and a dynamic hero slider.
---
## Tech Stack
### 🛠 **Built with:**
- [React](https://reactjs.org/) - A JavaScript library for building user interfaces.
- [Vite](https://vitejs.dev/) - A fast build tool and development server.
- [CSS Modules](https://github.com/css-modules/css-modules) - For modular and reusable styles.
---
## Installation and Setup
To run this project locally:
1. **Clone the repository:**
```bash
git clone https://github.com/your-username/air-n-port-webiste.git
```
2. **Navigate to the project directory:**
```bash
cd air-n-port-website
```
3. **Install dependencies:**
```bash
npm install
```
4. **Start the development server:**
```bash
npm run dev
```
5. Open your browser and go to `http://localhost:5173` to view the project.
---
## Contributing
Contributions are welcome! If you have ideas to improve the project or want to add new features, feel free to open a pull request or submit an issue.
---
## Acknowledgments
Special thanks to:
- The open-source community for the amazing tools and libraries.
- All contributors and supporters of this project.
- All the icons used in the project were taken from https://www.flaticon.com/
- Shoutout to the airport theme image owners: https://www.google.com/imgres?q=frankfurt%20airport&imgurl=https%3A%2F%2Fschengen.news%2Fwp-content%2Fuploads%2F2023%2F10%2FInterior-of-the-Frankfurt-International-Airport.jpg&imgrefurl=https%3A%2F%2Fschengen.news%2Ffrankfurt-airport-sees-21-growth-in-passenger-traffic-reaching-59-4-million-in-2023%2F&docid=xPyKzCpMbtULqM&tbnid=OyQb1r9uYCz-sM&vet=12ahUKEwiP_bvIlO6KAxXXFBAIHdniC4gQM3oECGUQAA..i&w=1200&h=675&hcb=2&ved=2ahUKEwiP_bvIlO6KAxXXFBAIHdniC4gQM3oECGUQAA , https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.thrillist.com%2Ftravel%2Fnation%2Ffrankfurt-airport-guide&psig=AOvVaw2kcPcnRwl1S1VBzkzFoZgm&ust=1736701818845000&source=images&cd=vfe&opi=89978449&ved=0CBcQjhxqFwoTCKCvmNCU7ooDFQAAAAAdAAAAABAE , https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.visitpasadena.com%2Fdirectory%2Flos-angeles-international-airport-lax%2F&psig=AOvVaw1onU-malYatVX_r-IRf0Gt&ust=1736701844353000&source=images&cd=vfe&opi=89978449&ved=0CBcQjhxqFwoTCLCt9NaU7ooDFQAAAAAdAAAAABAE , https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.welcomepickups.com%2Fnice%2Fnice-airport%2F&psig=AOvVaw1De4qjuAcdb1ASQFHX9OYc&ust=1736701871641000&source=images&cd=vfe&opi=89978449&ved=0CBcQjhxqFwoTCJiGsOSU7ooDFQAAAAAdAAAAABAE , https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.vinci-concessions.com%2Fen%2Finfrastructure%2Fbelgrade-airport&psig=AOvVaw19nPgZhAZsCkC8O7iSUUkf&ust=1736702083825000&source=images&cd=vfe&opi=89978449&ved=0CBcQjhxqFwoTCJC83MiV7ooDFQAAAAAdAAAAABAE , https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.knkx.org%2F2020-05-07%2Fface-coverings-will-be-mandatory-for-all-passengers-at-lax&psig=AOvVaw25jUoZffCgkO1vwIk11T-A&ust=1736702153774000&source=images&cd=vfe&opi=89978449&ved=0CBEQjhxqFwoTCIirwuqV7ooDFQAAAAAdAAAAABAE , https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pandahub.com%2Fblog%2Fis-there-a-hotel-inside-lax-airport&psig=AOvVaw2_Epikpj7i9Rq9lO44jOci&ust=1736702176339000&source=images&cd=vfe&opi=89978449&ved=0CBEQjhxqFwoTCKCb-vSV7ooDFQAAAAAdAAAAABAE , https://www.google.com/url?sa=i&url=https%3A%2F%2Fairportindustry-news.com%2Ffraport-and-lufthansa-jv-aims-to-improve-services-at-frankfurt-airport%2F&psig=AOvVaw3ikasO75lZFOdTHr5RuB-C&ust=1738674299451000&source=images&cd=vfe&opi=89978449&ved=0CBcQjhxqFwoTCLiJmNHIp4sDFQAAAAAdAAAAABAE
- Shoutout to the airport looks theme image owners: https://www.gq.com/gallery/incredible-90s-airport-style , https://www.vogue.com/article/supermodels-90s-airport-style, https://www.wmagazine.com/fashion/best-90s-airport-celebrity-fashion-style , https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.gq.com%2Fgallery%2Fincredible-90s-airport-style&psig=AOvVaw2QVugqPonwb5ip2DwyYoMi&ust=1736702002606000&source=images&cd=vfe&opi=89978449&ved=0CBcQjhxqFwoTCOjki62V7ooDFQAAAAAdAAAAABAR
- Airplane video link: https://www.youtube.com/watch?v=g77VMRK8HBg&pp=ygUbbm8gY29weXJpZ2h0IGFpcnBsYW5lIHZpZGVv
---
Happy exploring! 🚀
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh