🌌 Odyssey

A premium, immersive journey through digital landscapes, designed for the IITP Hackathon. Odyssey combines fluid animations, elegant typography, and a sophisticated design system to create a truly unique exploration experience.

Important

This project is a demonstration of high-end UI/UX principles using React and Framer Motion.

✨ Features

• 🌀 Fluid Page Transitions: Seamless, motion-blurred transitions between pages using framer-motion and AnimatePresence.
• 🧭 Intuitive Navigation: A sleek user journey through Origin, Cartography, Insights, and more.
• 🎨 Premium Aesthetics: A custom-crafted design system with glassmorphism, depth-based z-indexing, and curated gradients.
• 📱 Fully Responsive: Optimized for every device, from mobile screens to ultra-wide displays.
• 🚀 Ultra Fast: Built on Vite 6 for lightning-fast development and optimized production builds.

🛠️ Tech Stack

• Framework: React 19
• Bundler: Vite 8
• Styling: Tailwind CSS 4
• Animations: Framer Motion
• Routing: React Router 7

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd odyssey

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

📂 Project Structure

odyssey/
├── src/
│   ├── components/  # Reusable UI components
│   ├── pages/       # Navigation routes (Origin, Cartography, etc.)
│   ├── assets/      # Visual assets and media
│   ├── App.jsx      # Main routing and transition logic
│   └── index.css    # Global styles and Tailwind base
├── public/          # Static assets
└── vite.config.js   # Configuration for Vite

🌐 Deployment

Live Demo: [Deployment Link - Aether Narrative]

---

Built with ❤️ for the IIT Patna Odyssey Hackathon.