diff --git a/package-lock.json b/package-lock.json
index a51bf8b..bfc009a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -65,6 +65,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1231,6 +1232,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1276,6 +1278,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1625,6 +1628,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -2233,6 +2237,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -3364,6 +3369,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -3932,6 +3938,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -4143,6 +4150,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -4881,6 +4889,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5072,6 +5081,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/src/App.jsx b/src/App.jsx
index 4504f55..431c9a5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,7 @@ import Mentors from './components/Mentors'
 import SummerOfAI from './components/SummerOfAI'
 import Contribute from './components/Contribute'
 import Footer from './components/Footer'
+import Blog from './components/Blog'
 
 export default function App() {
   return (
@@ -22,6 +23,7 @@ export default function App() {
         <Storyboards />
         <Mentors />
         <SummerOfAI />
+        <Blog />
         <Contribute />
       </main>
       <Footer />
diff --git a/src/components/Blog.jsx b/src/components/Blog.jsx
new file mode 100644
index 0000000..fe4b4d6
--- /dev/null
+++ b/src/components/Blog.jsx
@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import { blogPosts } from '../data/blog'
+import BlogPostLayout from './BlogPostLayout'
+
+export default function Blog() {
+  const [selected, setSelected] = useState(null)
+
+  if (selected) {
+    return (
+      <section id="blog" className="py-16" style={{ background: 'var(--cream)' }}>
+        <div className="max-w-2xl mx-auto px-6">
+          <button
+            onClick={() => setSelected(null)}
+            className="flex items-center gap-2 text-sm text-[var(--ink-muted)] hover:text-[var(--purple)] mb-8 transition-colors"
+          >
+            ← Back to Blog
+          </button>
+        </div>
+        <BlogPostLayout post={selected} />
+      </section>
+    )
+  }
+
+  return (
+    <section id="blog" className="py-20" style={{ background: 'var(--cream-dark)' }}>
+      <div className="max-w-5xl mx-auto px-6">
+        <p className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: 'var(--purple)' }}>
+          From the Community
+        </p>
+        <h2 className="font-display text-3xl md:text-4xl font-bold text-[var(--ink)] mb-12">
+          Blog & Resources
+        </h2>
+
+        <div className="grid md:grid-cols-3 gap-8">
+          {blogPosts.map((post) => (
+            <button
+              key={post.id}
+              onClick={() => setSelected(post)}
+              className="text-left group rounded-2xl overflow-hidden border border-[var(--border)] hover:border-[var(--purple)] transition-all duration-200 hover:shadow-lg"
+              style={{ background: 'white' }}
+            >
+              {/* Cover image — pre-sized */}
+              <div className="w-full aspect-[16/9] bg-[var(--cream-dark)] overflow-hidden">
+                <img
+                  src={post.coverImage}
+                  alt={post.title}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                  width={400}
+                  height={225}
+                />
+              </div>
+
+              <div className="p-5">
+                <span
+                  className="inline-block text-xs font-bold uppercase tracking-widest px-2 py-0.5 rounded-full mb-3"
+                  style={{ background: 'var(--purple-light)', color: 'var(--purple)' }}
+                >
+                  {post.category}
+                </span>
+                <h3 className="font-display text-lg font-bold text-[var(--ink)] leading-snug mb-2 group-hover:text-[var(--purple)] transition-colors">
+                  {post.title}
+                </h3>
+                <p className="text-sm text-[var(--ink-muted)] line-clamp-2">{post.excerpt}</p>
+                <div className="flex items-center gap-2 mt-4 text-xs text-[var(--ink-muted)]">
+                  <span>{post.author}</span>
+                  <span>·</span>
+                  <span>{post.readTime} min read</span>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/src/components/BlogPostLayout.jsx b/src/components/BlogPostLayout.jsx
new file mode 100644
index 0000000..3f80b72
--- /dev/null
+++ b/src/components/BlogPostLayout.jsx
@@ -0,0 +1,56 @@
+import ShareButtons from './ShareButtons'
+
+export default function BlogPostLayout({ post }) {
+  if (!post) return null
+
+  const formattedDate = new Date(post.date).toLocaleDateString('en-IN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+
+  return (
+    <article className="max-w-2xl mx-auto px-6 py-12">
+      {/* Category */}
+      <span
+        className="inline-block text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full mb-4"
+        style={{ background: 'var(--purple-light)', color: 'var(--purple)' }}
+      >
+        {post.category}
+      </span>
+
+      {/* Title */}
+      <h1 className="font-display text-3xl md:text-4xl font-bold text-[var(--ink)] leading-tight mb-4">
+        {post.title}
+      </h1>
+
+      {/* Meta */}
+      <div className="flex items-center gap-4 text-sm text-[var(--ink-muted)] mb-8">
+        <span>{post.author}</span>
+        <span>·</span>
+        <span>{formattedDate}</span>
+        <span>·</span>
+        <span>{post.readTime} min read</span>
+      </div>
+
+      {/* Cover image — pre-sized to prevent CLS */}
+      <div className="w-full aspect-[16/9] rounded-2xl overflow-hidden mb-8 bg-[var(--cream-dark)]">
+        <img
+          src={post.coverImage}
+          alt={post.title}
+          className="w-full h-full object-cover"
+          width={800}
+          height={450}
+        />
+      </div>
+
+      {/* Excerpt */}
+      <p className="text-lg text-[var(--ink-soft)] leading-relaxed mb-8">
+        {post.excerpt}
+      </p>
+
+      {/* Share buttons */}
+      <ShareButtons title={post.title} />
+    </article>
+  )
+}
\ No newline at end of file
diff --git a/src/components/ShareButtons.jsx b/src/components/ShareButtons.jsx
new file mode 100644
index 0000000..15e0aef
--- /dev/null
+++ b/src/components/ShareButtons.jsx
@@ -0,0 +1,75 @@
+import { useState } from 'react'
+
+export default function ShareButtons({ title, url }) {
+  const shareUrl = url || window.location.href
+  const [copied, setCopied] = useState(false)
+
+  const platforms = [
+    {
+      name: 'Twitter / X',
+      icon: '𝕏',
+      href: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(shareUrl)}`,
+    },
+    {
+      name: 'LinkedIn',
+      icon: 'in',
+      href: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`,
+    },
+    {
+      name: 'WhatsApp',
+      icon: '💬',
+      href: `https://wa.me/?text=${encodeURIComponent(title + ' ' + shareUrl)}`,
+    },
+  ]
+
+  function handleNativeShare() {
+    if (navigator.share) {
+      navigator.share({ title, url: shareUrl })
+    }
+  }
+
+  function handleCopy() {
+    navigator.clipboard.writeText(shareUrl).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-3 mt-8">
+      <span className="text-sm font-semibold text-[var(--ink-muted)] uppercase tracking-wide">
+        Share
+      </span>
+
+      {typeof navigator !== 'undefined' && navigator.share && (
+        <button
+          onClick={handleNativeShare}
+          className="flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium border border-[var(--border)] hover:border-[var(--purple)] hover:text-[var(--purple)] transition-all"
+        >
+          ↑ Share
+        </button>
+      )}
+
+      {platforms.map((p) => (
+        <a
+          key={p.name}
+          href={p.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={`Share on ${p.name}`}
+          className="flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium border border-[var(--border)] hover:border-[var(--purple)] hover:text-[var(--purple)] transition-all"
+        >
+          <span>{p.icon}</span>
+          <span>{p.name}</span>
+        </a>
+      ))}
+
+      <button
+        onClick={handleCopy}
+        className="flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium border border-[var(--border)] hover:border-[var(--purple)] hover:text-[var(--purple)] transition-all"
+      >
+        {copied ? '✓ Copied!' : '🔗 Copy Link'}
+      </button>
+    </div>
+  )
+}
diff --git a/src/data/blog.js b/src/data/blog.js
new file mode 100644
index 0000000..0c41faf
--- /dev/null
+++ b/src/data/blog.js
@@ -0,0 +1,52 @@
+/**
+ * Blog posts data
+ *
+ * To add a blog post, copy the object below and fill in the details.
+ * Submit a PR with your changes!
+ *
+ * Fields:
+ *   id          - Unique number
+ *   slug        - URL-friendly identifier (e.g. "getting-started-with-ml")
+ *   title       - Article title
+ *   excerpt     - One or two sentence summary
+ *   date        - Publication date (YYYY-MM-DD)
+ *   readTime    - Estimated read time in minutes
+ *   category    - One of: "AI Basics", "Career", "Tools", "Community"
+ *   coverImage  - URL or local path to cover image
+ *   author      - Author name
+ */
+export const blogPosts = [
+  {
+    id: 1,
+    slug: 'getting-started-with-ml',
+    title: 'Getting Started with Machine Learning as a Student',
+    excerpt: 'You don\'t need a PhD to start learning ML. Here\'s a practical roadmap for school and college students in India.',
+    date: '2025-04-10',
+    readTime: 5,
+    category: 'AI Basics',
+    coverImage: 'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=800&q=80',
+    author: 'Ananya Pillai',
+  },
+  {
+    id: 2,
+    slug: 'women-in-ai-india',
+    title: 'Women in AI: Closing the Gender Gap in India',
+    excerpt: 'A look at the current state of gender diversity in Indian AI research and what you can do to be part of the change.',
+    date: '2025-04-22',
+    readTime: 7,
+    category: 'Career',
+    coverImage: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&q=80',
+    author: 'Riya Sharma',
+  },
+  {
+    id: 3,
+    slug: 'free-ai-tools-for-students',
+    title: '7 Free AI Tools Every Student Should Know About',
+    excerpt: 'From Colab to Hugging Face — here are the tools that will take you from zero to building real AI projects.',
+    date: '2025-05-01',
+    readTime: 4,
+    category: 'Tools',
+    coverImage: 'https://images.unsplash.com/photo-1555255707-c07966088b7b?w=800&q=80',
+    author: 'Neha Krishnan',
+  },
+]
\ No newline at end of file