https://github.com/lem0n4id/osi-unpacked
OSI Unpacked: An animated, story-driven journey through the 7 layers of the OSI networking model. Built with React, GSAP, and Tailwind CSS to make complex concepts intuitive and fun.
https://github.com/lem0n4id/osi-unpacked
framer-motion gsap networking osi react vite
Last synced: about 2 months ago
JSON representation
OSI Unpacked: An animated, story-driven journey through the 7 layers of the OSI networking model. Built with React, GSAP, and Tailwind CSS to make complex concepts intuitive and fun.
- Host: GitHub
- URL: https://github.com/lem0n4id/osi-unpacked
- Owner: lem0n4id
- Created: 2025-08-16T09:16:21.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-08-16T09:34:36.000Z (about 2 months ago)
- Last Synced: 2025-08-16T11:29:27.505Z (about 2 months ago)
- Topics: framer-motion, gsap, networking, osi, react, vite
- Language: JavaScript
- Homepage: https://osi-unpacked.vercel.app/
- Size: 182 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📦 OSI Unpacked
A cinematic, step-by-step visualizer for the OSI model, built with React, Vite, GSAP, and Tailwind CSS. This project aims to make the layers of network communication intuitive and engaging through pixel-art animation. 🎨
## 🚀 Live Demo
[https://osi-unpacked.vercel.app/](https://osi-unpacked.vercel.app/)
## 📸 Screenshot
## 🛠️ Tech Stack
- **Framework**: [React](https://reactjs.org/) via [Vite](https://vitejs.dev/) ⚛️
- **Animation**: [GSAP (GreenSock Animation Platform)](https://greensock.com/gsap/) & [Framer Motion](https://www.framer.com/motion/) ✨
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) 💅
- **Icons**: [React Icons](https://react-icons.github.io/react-icons/) 👾
- **Font**: [VT323](https://fonts.google.com/specimen/VT323) ✒️
## 💻 Local Development
To run this project locally, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/lem0n4id/osi-unpacked.git
cd osi-unpacked
```
2. **Install dependencies:**
```bash
npm install
```
3. **Run the development server:**
```bash
npm run dev
```
The application will be available at `http://localhost:5173`.
## 🙏 Credits
- Inspired by the desire to make network education more visual and fun.
- Built with the help of countless open-source libraries and community resources.