A modern blog focused on discussing burnout, mental health, and the challenges facing society today. Built with cutting-edge web technologies for a smooth, fast, and beautiful user experience.
🌐 Live: overloaded.live
| Metric | Score |
|---|---|
| Performance | 98 |
| Accessibility | 96 |
| Best Practices | 100 |
| SEO | 100 |
Overloaded is a platform dedicated to honest, critical conversations about:
- 🔥 Burnout Recognition & Recovery
- 🧠 Mental Health Awareness
- ⚖️ Work-Life Balance
- 🌍 Societal Challenges
The blog takes a cold, clinical approach to modern problems — no sugar-coating, just data-backed analysis.
This project also serves as a learning playground to experiment with multiple JavaScript frameworks (Vue, Svelte) working together within Astro's island architecture.
| Technology | Purpose |
|---|---|
| Astro | Static site generation with partial hydration |
| Vue 3 | Interactive components (Header, BackToTop, CookieConsent) |
| Svelte | Lightweight components (Footer) |
| Tailwind CSS 4 | Utility-first styling |
| MDX | Blog posts with component support |
| TypeScript | Type safety |
| Vercel | Hosting & deployment |
- Node.js 20+
- pnpm (recommended)
# Clone the repository
git clone https://github.com/IgorJFS/Overloaded-Blog.git
cd overloaded
# Install dependencies
pnpm install
# Start development server
pnpm devOpen your browser at http://localhost:4321
| Command | Action |
|---|---|
pnpm dev |
Start dev server at localhost:4321 |
pnpm build |
Build production site to ./dist/ |
pnpm preview |
Preview production build locally |
- ✅ Static site generation (fast page loads)
- ✅ Partial hydration (minimal JavaScript)
- ✅ Dark/Light theme toggle
- ✅ Fully responsive design
- ✅ Blog with category filtering
- ✅ Optimized images (WebP thumbnails)
- ✅ Self-hosted fonts (Inter)
- ✅ Lazy-loaded components
- ✅ Delayed ad loading
- ✅ Automatic sitemap generation
- ✅ Structured data (JSON-LD)
- ✅ Open Graph & Twitter Cards
- ✅ Canonical URLs
- ✅ Custom 404 page
- ✅ Cookie consent with Google Consent Mode
- ✅ Privacy Policy & Terms of Service
- ✅ GDPR-ready
src/
├── components/ # Vue & Svelte components
├── config/ # Site configuration
├── data/ # Blog posts metadata
├── layouts/ # Astro layouts
├── pages/ # Routes & MDX blog posts
│ └── blog/ # Blog post files (.mdx)
├── styles/ # Global CSS
├── types/ # TypeScript types
└── utils/ # Utility functions
The site is deployed on Vercel with automatic deployments on push to main.
This project is open source and available under the MIT License.
Built with ☕ and ❤️ by IgorJFS