5s Arena Blog

A modern football blog built with React, Vite, and TailwindCSS, celebrating football culture, 5-a-side stories, legends, and the beautiful game.

---

Tech Stack

• Frontend: React 18, React Router v6
• Build Tool: Vite 8
• Styling: TailwindCSS 3, Montserrat font
• Images: ImageKit CDN integration
• Deployment: Vercel / Netlify

---

Features

• Responsive design (mobile-first)
• Hero section with video highlights
• Featured & recent posts grid
• Category filtering on post list
• Author profiles
• Login & registration pages
• Write/publish post interface
• SEO meta tags (Open Graph, Twitter Cards)

---

Getting Started

# Clone the repository
git clone https://github.com/RobynAwesome/5s-Arena-Blog-v2.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

---

Project Structure

src/
  components/    # Reusable components (Navbar, Footer, Image)
  layouts/       # Page layouts (MainLayout)
  routes/        # Page components (Homepage, PostListPage, etc.)
public/
  authors/       # Author profile images
  backgrounds/   # Hero & section backgrounds
  posts/         # Blog post cover images
  sidebar-backgrounds/
  video-posts/   # Video content
  youtube-images/ # Social icons & favicon

---

Contributing

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

---

Support

• Open an issue
• Support on Ko-fi