🌄 RayOfRoads

A Cinematic Travel Storytelling Website

Visit: https://rayofroads.netlify.app

RayOfRoads is a visually immersive travel website designed to showcase cinematic journeys, high-quality photography, and smooth storytelling transitions. It captures the essence of roads, greenery, mountains, monasteries, waterfalls, and sunsets—all in a seamless narrative flow.

---

✨ Features

• 🎬 Cinematic UI & Smooth Transitions: Enhanced user experience with framer-motion for fluid page transitions and interactions.
• 📸 High-Quality Photography Showcase: An immersive gallery designed to highlight visual storytelling.
• 🌄 Story-Driven Sequence Design: A content-first approach to sharing travel experiences.
• 📱 Fully Responsive: Optimized for all device sizes, from desktops to mobile phones.
• 🛡️ Admin Dashboard: Dedicated section for content management.
• 🤖 Powered by AI: Built and refined using Google AI Studio technical assistance.

---

🛠️ Technology Stack

This project is built using modern web technologies for performance and scalability:

• Core: React 19 & TypeScript
• Build Tool: Vite
• Styling: Modern CSS with Lucide React icons
• Animations: Framer Motion
• Routing: React Router DOM
• Development: Google AI Studio

---

🚀 Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

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

Installation

1. Clone the repository

   git clone https://github.com/tech-akash010/RayofRoads.git
   cd RayofRoads

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

4. Open in Browser Visit http://localhost:5173 (or the URL shown in your terminal).

---

📂 Project Structure

ray-of-roads/
├── src/
│   ├── components/      # Reusable UI components (Layout, Navbar, etc.)
│   ├── pages/           # Page views (Home, Blog, Gallery, Contact, etc.)
│   ├── types.ts         # TypeScript definitions
│   ├── constants.ts     # Configuration and static data
│   ├── App.tsx          # Main application component
│   └── index.css        # Global styles
├── public/              # Static assets
└── package.json         # Project dependencies and scripts

---

🔮 Future Enhancements

• Parallax Cinematic Scrolling: Deepening the visual depth of the storytelling.
• Animated Title Cards: Movie-style introductions for blog posts.
• Travel Blog Section: Expanded writing features for detailed itineraries.
• Ambient SFX & Music: Optional immersive audio backgrounds.
• AI-Powered Story Builder: Tools to auto-generate layouts from content.

---

📄 License

This project is licensed under the MIT License.