dios.website 🙏

A multilingual Bible reading web application with interactive typing effects and text-to-speech functionality. Experience sacred texts in 40+ languages with modern web technology.

🌟 Features

• 📖 Multilingual Bible Text: Support for 40+ languages including Arabic, Chinese, English, Spanish, French, German, and many more
• 🎭 Typewriter Effect: Beautiful animated text display using React Typed
• 🔊 Text-to-Speech: Listen to Bible verses with customizable voice settings
• 🎛️ Voice Controls:
  • Multiple voice selection
  • Adjustable speech speed
  • Play/pause functionality
• 🌍 Auto Language Detection: Automatically detects user's preferred language
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices
• ♿ Accessibility: ARIA labels and semantic HTML for screen readers
• ⚡ Auto-scroll: Automatic scrolling as text is displayed

🚀 Quick Start

Prerequisites

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

Installation

1. Clone the repository:

git clone <repository-url>
cd dios.website

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open your browser and navigate to http://localhost:3000

📋 Available Scripts

• npm start - Runs the app in development mode
• npm build - Builds the app for production
• npm test - Launches the test runner
• npm run eject - Ejects from Create React App (one-way operation)

🗣️ Supported Languages

The application supports Bible texts in the following languages:

Language	Code	Language	Code	Language	Code
Arabic	ar	Azerbaijani	az	Bulgarian	bg
Bengali	bn	Catalan	ca	Czech	cs
Danish	da	German	de	Greek	el
English	en	Esperanto	eo	Spanish	es
Estonian	et	Basque	eu	Persian	fa
Finnish	fi	French	fr	Irish	ga
Galician	gl	Hebrew	he	Hindi	hi
Hungarian	hu	Indonesian	id	Italian	it
Japanese	ja	Korean	ko	Lithuanian	lt
Latvian	lv	Malay	ms	Norwegian	nb
Dutch	nl	Polish	pl	Portuguese	pt
Romanian	ro	Russian	ru	Slovak	sk
Slovenian	sl	Albanian	sq	Swedish	sv
Thai	th	Filipino	tl	Turkish	tr
Ukrainian	uk	Urdu	ur	Chinese	zh

🏗️ Project Structure

src/
├── components/           # React components
│   ├── BibleDisplay.js  # Main text display component
│   ├── Header.js        # Application header
│   ├── Footer.js        # Application footer
│   ├── SpeechControls.js # Speech play/pause controls
│   ├── SpeedControls.js # Speech speed adjustment
│   ├── VoiceControls.js # Voice selection controls
│   └── LoadingSpinner.js # Loading state component
├── hooks/               # Custom React hooks
│   ├── useBibleText.js  # Bible text loading logic
│   ├── useSpeechControl.js # Speech synthesis logic
│   ├── useVoiceSelection.js # Voice selection logic
│   └── useAutoScroll.js # Auto-scrolling functionality
├── biblia/              # Bible text files (40+ languages)
├── constants/           # Application constants
├── i18n.js             # Internationalization configuration
└── App.js              # Main application component

🔧 Core Technologies

• React 19 - Modern React with hooks
• i18next - Internationalization framework
• React Typed - Typewriter effect animations
• Web Speech API - Text-to-speech functionality via react-text-to-speech
• CSS3 - Modern styling and responsive design

🎨 How It Works

1. Language Detection: The app automatically detects the user's browser language
2. Text Loading: Loads the corresponding Bible text file for the detected language
3. Typewriter Effect: Displays verses with a beautiful typing animation
4. Speech Synthesis: Converts text to speech using the Web Speech API
5. Interactive Controls: Users can control playback speed, voice selection, and navigation

🎛️ User Interface

Controls Available:

• Play/Pause Button: Start or stop text-to-speech
• Speed Slider: Adjust typing and speech speed
• Voice Selector: Choose from available system voices
• Auto-scroll: Automatically scrolls as text progresses

🌐 Browser Compatibility

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Note: Text-to-speech functionality depends on browser support for the Web Speech API

📱 Mobile Support

The application is fully responsive and optimized for mobile devices with touch-friendly controls and adaptive layouts.

🔒 Privacy

This application runs entirely in the browser. No personal data is collected or transmitted to external servers. Bible texts are served locally.

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Commit your changes: git commit -m 'Add new feature'
4. Push to the branch: git push origin feature/new-feature
5. Submit a pull request

📝 License

This project is open source. Please check the license file for details.

🙏 Acknowledgments

• Bible texts from various public domain sources
• React community for excellent libraries
• Web Speech API for enabling text-to-speech functionality

📞 Support

For support, please open an issue on the GitHub repository or visit manalejandro.com.

---

"In the beginning was the Word..." - Experience sacred texts like never before with dios.website