Add dedicated blog page with featured post grid

[Copilot]

Creates a centralized blog hub at /blog.html to replace the fragmented static/longblog.html approach. Provides a structured layout for showcasing research, op-eds, and project highlights.

Changes

• New blog.html page at root level

  • Hero section with gradient background matching site aesthetics
  • 4-post grid layout using existing .project-card component styles
  • Featured post (Femigritude Literary Lab) with expanded layout and badge
  • Call-to-action section for collaboration

• Navigation update in index.html

  • Added "Blog" link between Skills and Contact

• Blog post cards structure

  • Title, excerpt, date, author, category tags
  • Placeholder anchor links (#post-slug) with "Coming soon" indicators
  • ARIA labels for accessibility

Featured Post Layout

The featured post spans full grid width with a 1:2 image-to-content ratio:

<article class="project-card" style="grid-column: 1 / -1;">
  <div style="position: absolute; ...">Featured</div>
  <div style="display: grid; grid-template-columns: 1fr 2fr;">
    <!-- Icon placeholder -->
    <!-- Post content -->
  </div>
</article>

Screenshots

Desktop View

Mobile View

Navigation Integration

---

Posts use semantic HTML (<article>, proper heading hierarchy) and inherit existing dark mode support. Design system consistency maintained via existing CSS variables.

Original prompt

Create Dedicated Blog Page for Website

Objective

Create a new dedicated Blog page (blog.html) at the root level of the website to serve as a central hub for op-eds, features, news, and write-ups. This will replace/enhance the current static/longblog.html approach and integrate properly with the main site navigation.

Context

Currently, the blog content is located in static/longblog.html which is not prominently featured in the main navigation. We need a professional, dedicated Blog page that:

• Lives at the root level as blog.html
• Is accessible from the main navigation on index.html
• Features the Femigritude Literary Lab post and other content
• Follows the same design system as the rest of the site

Requirements

1. Create blog.html at Root Level

Create a new file blog.html with:

• Hero Section: "Blog & Insights" or similar title with engaging subtitle about sharing research, opinions, and stories
• Blog Grid/List: Display blog posts in an attractive, scannable format (cards or list view)
• Categories/Tags (optional but recommended): Filter by Research, Op-Eds, Features, News, Projects
• Navigation: Full site navigation matching index.html
• Responsive Design: Mobile-first, matching existing site aesthetics

2. Update index.html Navigation

Add a "Blog" link to the main navigation in index.html:

• Current nav items: Home, About, Projects, Skills, Contact
• Add: Blog (between Projects and Skills, or after Skills)

3. Blog Post Structure

Each blog post card/item should display:

• Title: Clear, clickable heading
• Excerpt/Preview: 2-3 sentences summary
• Date: Publication or last updated date
• Author (optional): Adamu Abubakar, Adamu Danjuma, Guest contributors, etc.
• Category/Tags: Research, Op-Ed, Feature, News, Project Highlight
• Read More Link: Links to full article
• Featured Image (placeholder for now): Space for hero images

4. Initial Blog Posts to Feature

Post 1: Femigritude Literary Lab (Featured/Pinned)

• Title: Join Us: Femigritude Literary Lab Invites Submissions
• Excerpt: The Femigritude Literary Lab invites young African women and girls to submit creative work. Learn about this transformative movement centering African women's voices through writing, healing, and empowerment.
• Category: Featured Project
• Author: Guest post by Diweng Mercy Dafong
• Link: static/femigritude-literary-lab-blog.html (from the previous PR)

Post 2: AI's Impact on Language Research (Placeholder)

• Title: Exploring AI's Impact on Language Research
• Excerpt: How artificial intelligence is revolutionizing language data analysis and annotation, with a focus on African languages and NLP applications.
• Category: Research
• Author: Adamu Abubakar
• Link: # (placeholder for now, or create blog/ai-language-research.html)

Post 3: Postcolonial Theory (Placeholder)

• Title: The Role of Postcolonial Theory Today
• Excerpt: Reflecting on how postcolonial perspectives inform contemporary literature and culture, with insights from Francophone African literature.
• Category: Research
• Author: Adamu Danjuma
• Link: # (placeholder for now, or create blog/postcolonial-theory-today.html)

5. Design Requirements

• Match existing site design: Use the same color scheme, typography, and component styles from index.html
• Hero section: Similar to Projects section hero with gradient background
• Blog cards: Similar styling to .project-card from index.html
• Hover effects: Consistent with existing card hover animations
• Footer: Use the same footer as index.html

6. Technical Considerations

• Keep the blog page structure simple and static (no backend required)
• Use semantic HTML5 elements (<article>, <section>, etc.)
• Ensure accessibility (ARIA labels, proper heading hierarchy)
• Maintain consistency with styles.css from the main site
• Consider adding a blog posts sorting/filtering feature (optional)

7. Future-Proofing

Structure the blog page so it's easy to:

• Add new blog posts by duplicating the card structure
• Convert to a blog generator (Jekyll, Hugo, etc.) in the future if needed
• Add pagination if the number of posts grows
• Include social sharing buttons (optional)

File Structure

/
├── index.html (update navigation)
├── blog.html (new file)
├── static/
│   ├── femigritude-literary-lab-blog.html (already exists/being created)
│   └── blog/ (optional: future blog posts)
│       ├── ai-language-research.html
│       └── postcolonial-theory-today.html
└── styles.css (may need minor additions for blog-specific styles)

Acceptance Criteria

• blog.html created at root level with hero section and blog grid
• Blog page features the Femigritude Literary Lab post prominently (featured/pinned)
• At least 2-3 blog post cards displayed
• Navigation updated in `index.html...

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[adab-tech]

@copilot hi