[Feature Request] Add Blog / Awareness Articles Page (blog.html)

[Riya-Kharade]

💡 The Problem

Currently, EcoPulse focuses on 3D visualization and analytics, but it does not provide structured educational content in the form of articles or awareness posts.

Users can explore pollution data, but they do not have access to detailed explanations, insights, or awareness-driven content.

This limits the platform’s educational depth and professional appeal.

---

🚀 Proposed Solution

Create a new page called blog.html that showcases pollution awareness articles in a clean, professional layout.

The page should include:

• 📰 Pollution awareness posts
• 🖼 Cards with image + title + short description
• 📂 Category filter (Air, Water, Noise, Climate, Sustainability)
• 📖 "Read More" functionality (expandable or separate page)

The page will be built using:

• HTML for structure
• Tailwind CSS for card-based design
• Vanilla JavaScript for:
  • Category filtering
  • Optional dynamic content rendering

No backend required (articles can be stored in a JS array).

---

🎨 Visual Representation

The blog.html page should include:

1️⃣ Hero Section

• Heading: "Environmental Awareness & Insights"
• Short tagline encouraging learning

---

2️⃣ Category Filter Section

• Buttons or dropdown filter:
  • All
  • Air Pollution
  • Water Pollution
  • Climate Change
  • Sustainability
• Active filter highlight
• Smooth content update animation

---

3️⃣ Blog Cards Grid Layout

Each card should include:

• Article image
• Title
• Short preview text (2–3 lines)
• "Read More" button
• Subtle hover animation

Responsive grid layout:

• 3 columns (desktop)
• 2 columns (tablet)
• 1 column (mobile)

---

🛠️ Implementation Details

• New File: blog.html
• Data Source: Static JavaScript array containing blog posts
• Filtering Logic: Vanilla JS filter function
• Layout: Tailwind grid system
• No new dependencies required

Optional enhancement:

• Modal popup for full article
• Expandable content section
• Search functionality

---

🎯 Impact

This feature will:

• Improve educational value
• Increase platform credibility
• Provide deeper environmental context
• Strengthen presentation for hackathons and portfolio
• Make EcoPulse look like a complete environmental awareness platform

It transforms EcoPulse from a visualization tool into an informative climate-tech ecosystem.

Assign this issue to me under ECWOC'26