Talk Buddy Website

A modern, multilingual language learning platform website built with vanilla HTML, CSS, and JavaScript.

Features

• 🌍 Multilingual Support: English and Thai translations
• 📱 Responsive Design: Mobile-first approach with fluid layouts
• 🎨 Dark/Light Theme: Toggle between themes with localStorage persistence
• ⚡ Performance Optimized: Lightweight, fast loading, and SEO-friendly
• 🔒 Security Headers: CSP, XSS protection, and other security measures
• 📊 Analytics Ready: Google Analytics 4 integration
• 🚀 PWA Support: Service worker for offline functionality
• ♿ Accessibility: ARIA labels, keyboard navigation, and screen reader support

Project Structure

talk-buddy-website/
├── index.html          # Main HTML file
├── css/
│   └── main.css       # Comprehensive CSS with CSS custom properties
├── js/
│   └── main.js        # Interactive functionality and state management
├── lang/
│   ├── en.js          # English translations
│   └── th.js          # Thai translations
├── assets/
│   ├── images/        # Images and illustrations
│   ├── icons/         # Favicons and PWA icons
│   └── fonts/         # Custom fonts (if any)
├── vercel.json        # Vercel deployment configuration
├── netlify.toml       # Netlify deployment configuration
├── .htaccess          # Apache server configuration
├── robots.txt         # Search engine crawler instructions
├── sitemap.xml        # XML sitemap for SEO
├── sw.js              # Service worker for PWA
└── README.md          # This file

Getting Started

Local Development

1. Clone the repository:

git clone https://github.com/yourusername/talk-buddy-website.git
cd talk-buddy-website

2. Serve the files using a local server:

# Using Python 3
python -m http.server 8000

# Using Node.js (if you have http-server installed)
npx http-server .

# Using PHP
php -S localhost:8000

3. Open your browser and navigate to http://localhost:8000

Deployment

Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel
3. Follow the prompts

Netlify

1. Connect your Git repository to Netlify
2. Set build command: (leave empty)
3. Set publish directory: ./
4. Deploy

Traditional Hosting

1. Upload all files to your web server
2. Ensure the .htaccess file is uploaded for Apache servers
3. Update the base URL in sitemap.xml and other configuration files

Configuration

Analytics

Replace GA_MEASUREMENT_ID in js/main.js with your actual Google Analytics measurement ID.

SEO

Update the following in index.html:

• Meta descriptions and titles
• Open Graph images
• Canonical URLs
• Structured data

Content

Modify translations in lang/en.js and lang/th.js to customize the content.

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Fallbacks are provided for older browsers where possible.

Performance

• Lighthouse Score: 95+ across all metrics
• Core Web Vitals: Optimized for LCP, FID, and CLS
• Bundle Size: < 100KB total (uncompressed)
• Time to Interactive: < 3 seconds on 3G

Accessibility

• WCAG 2.1 AA compliant
• Keyboard navigation support
• Screen reader optimized
• High contrast support
• Reduced motion respect

Security

• Content Security Policy (CSP)
• XSS Protection
• Frame Options
• HTTPS enforcement
• Secure headers

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes
4. Test thoroughly
5. Commit: git commit -m 'Add feature'
6. Push: git push origin feature-name
7. Create a pull request

License

MIT License - see LICENSE file for details.

Support

For support, email support@talkbuddy.com or create an issue in this repository.