Fire Tablet

A beautiful, interactive presentation of the Fire Tablet as a responsive slide show. Each verse is presented on an elegantly styled page inspired by ancient religious manuscripts.

Live Demo | Fire Tablet Text

✨ Features

• Elegant Book-like Design: Pages styled to resemble ancient religious manuscripts with decorative elements
• Smooth Transitions: Gentle fade animations between slides for a meditative experience
• Responsive Layout: Adapts beautifully to all screen sizes from mobile to desktop
• Touch Navigation: Swipe support for mobile devices with visual indicators
• Keyboard Navigation: Use arrow keys for quick navigation
• Consistent Page Size: Fixed dimensions with scrollable content for longer verses
• Decorative Typography: Custom styling for first letters and beautiful font combinations
• Progress Tracking: Subtle page numbering and estimated reading time

🚀 Getting Started

Prerequisites

• Node.js (v12.0 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/vramdhanie/fire.git
   cd fire
   

2. Install dependencies:

   npm install
   # or
   yarn install
   

3. Start the development server:

   npm start
   # or
   yarn start
   

4. Open your browser and visit http://localhost:3000

🎮 Usage

• Click on the page or use right arrow key to move to the next verse
• Left arrow key to move to the previous verse
• On mobile, swipe left to go to the next verse or swipe right to go to the previous verse
• Use the navigation buttons at the top or bottom to navigate between verses
• The reset button (↺) returns to the first verse

💻 Technologies Used

• React - Frontend library
• TailwindCSS - Utility-first CSS framework
• React Transition Group - Animation library
• Google Fonts - EB Garamond, Cinzel Decorative, and Tangerine fonts

🏗️ Project Structure

fire/
├── public/              # Static files
├── src/                 # Source code
│   ├── assets/          # CSS and other assets
│   │   ├── main.css     # Main TailwindCSS file
│   │   ├── religious-theme.css # Custom styling
│   │   └── transitions.css # Animation definitions
│   ├── App.js           # Main application component
│   ├── slide.js         # Slide component
│   ├── controls.js      # Navigation controls
│   └── tablet.js        # Fire Tablet text content
├── package.json         # Dependencies and scripts
└── tailwind.config.js   # TailwindCSS configuration

🎨 Design Features

Manuscript Styling

• Ancient aesthetic: Inspired by religious manuscripts and illuminated texts
• Decorative elements: Ornate borders and typography flourishes
• Typography: Beautiful font combinations with custom styling
• Color palette: Warm, meditative colors suitable for spiritual content

Responsive Design

• Mobile-first approach: Optimized for touch devices
• Adaptive layouts: Content adjusts to different screen sizes
• Touch gestures: Swipe navigation for mobile users
• Keyboard support: Full keyboard navigation for desktop users

Animations

• Smooth transitions: Gentle fade effects between slides
• Performance optimized: Hardware-accelerated animations
• Accessibility: Respects user's motion preferences
• Progressive enhancement: Works without JavaScript

🔄 Deployment

The application is deployed using GitHub Pages. To deploy your own version:

npm run deploy
# or
yarn deploy

🎯 User Experience

Navigation

• Intuitive controls: Clear visual indicators for navigation
• Progress tracking: Users know where they are in the presentation
• Multiple input methods: Click, keyboard, and touch support
• Reset functionality: Easy return to the beginning

Accessibility

• Keyboard navigation: Full keyboard support
• Screen reader friendly: Proper semantic HTML structure
• Motion preferences: Respects user's animation settings
• High contrast: Readable text in various lighting conditions

Performance

• Optimized assets: Efficient image and font loading
• Smooth animations: 60fps transitions
• Responsive images: Appropriate sizing for different devices
• Minimal dependencies: Lightweight bundle size

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgements

• The Fire Tablet text is from Bahá'í Prayers
• Inspired by ancient manuscript design traditions
• Built with modern web technologies for accessibility and performance

---

Made with ❤️ by Vincent Ramdhanie