diff --git a/index.js b/index.js
index e4c3a74f..88b25994 100644
--- a/index.js
+++ b/index.js
@@ -11,4 +11,8 @@ app.get('/', (req, res) => {
   res.render('index', {haikus: haikus});
 });
 
+app.get('/blog', (req, res) => {
+  res.render('blog');
+});
+
 app.listen(port);
\ No newline at end of file
diff --git a/public/css/blog.css b/public/css/blog.css
new file mode 100644
index 00000000..6c4e2d5f
--- /dev/null
+++ b/public/css/blog.css
@@ -0,0 +1,695 @@
+/* ===================================
+   CSS Reset & Base Styles
+   =================================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    /* Color Scheme - Blue & White */
+    --primary-blue: #2563eb;
+    --primary-blue-dark: #1e40af;
+    --primary-blue-light: #3b82f6;
+    --accent-blue: #60a5fa;
+    --background-white: #ffffff;
+    --background-light: #f8fafc;
+    --text-dark: #1e293b;
+    --text-gray: #64748b;
+    --text-light: #94a3b8;
+    --border-color: #e2e8f0;
+    
+    /* Fluid Typography using clamp() */
+    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
+    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
+    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
+    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
+    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
+    --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
+    --font-size-3xl: clamp(2rem, 1.6rem + 2vw, 3rem);
+    --font-size-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
+    
+    /* Fluid Spacing */
+    --spacing-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
+    --spacing-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
+    --spacing-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
+    --spacing-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
+    --spacing-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
+    --spacing-2xl: clamp(3rem, 2rem + 5vw, 5rem);
+    
+    /* Transitions for elastic feel */
+    --transition-fast: 0.2s ease;
+    --transition-base: 0.3s ease;
+    --transition-slow: 0.5s ease;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size: var(--font-size-base);
+    line-height: 1.6;
+    color: var(--text-dark);
+    background-color: var(--background-white);
+    overflow-x: hidden;
+}
+
+/* ===================================
+   Container & Layout
+   =================================== */
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-md);
+    transition: padding var(--transition-base);
+}
+
+/* ===================================
+   Header & Navigation
+   =================================== */
+.header {
+    background-color: var(--background-white);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    transition: box-shadow var(--transition-base);
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-md) 0;
+    transition: padding var(--transition-base);
+}
+
+.logo h1 {
+    font-size: var(--font-size-2xl);
+    font-weight: 700;
+    color: var(--primary-blue);
+    transition: font-size var(--transition-base);
+}
+
+.nav-list {
+    display: flex;
+    list-style: none;
+    gap: var(--spacing-lg);
+    transition: gap var(--transition-base);
+}
+
+.nav-link {
+    text-decoration: none;
+    color: var(--text-dark);
+    font-size: var(--font-size-base);
+    font-weight: 500;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: 6px;
+    transition: all var(--transition-fast);
+    position: relative;
+}
+
+.nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background-color: var(--primary-blue);
+    transform: translateX(-50%);
+    transition: width var(--transition-base);
+}
+
+.nav-link:hover {
+    color: var(--primary-blue);
+}
+
+.nav-link:hover::after {
+    width: 80%;
+}
+
+/* Hamburger Menu */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--spacing-xs);
+    z-index: 1001;
+    transition: transform var(--transition-base);
+}
+
+.hamburger:hover {
+    transform: scale(1.1);
+}
+
+.hamburger-line {
+    width: 25px;
+    height: 3px;
+    background-color: var(--primary-blue);
+    border-radius: 3px;
+    transition: all var(--transition-base);
+}
+
+.hamburger.active .hamburger-line:nth-child(1) {
+    transform: rotate(45deg) translate(7px, 7px);
+}
+
+.hamburger.active .hamburger-line:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger.active .hamburger-line:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -7px);
+}
+
+/* ===================================
+   Hero Section
+   =================================== */
+.hero {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: var(--background-white);
+    padding: var(--spacing-2xl) 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    transition: padding var(--transition-base);
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>');
+    animation: float 20s linear infinite;
+}
+
+@keyframes float {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-100px); }
+}
+
+.hero-content {
+    position: relative;
+    z-index: 1;
+}
+
+.hero-title {
+    font-size: var(--font-size-4xl);
+    font-weight: 800;
+    margin-bottom: var(--spacing-md);
+    animation: fadeInUp 0.8s ease;
+    transition: font-size var(--transition-base);
+}
+
+.hero-subtitle {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--spacing-xl);
+    opacity: 0.95;
+    max-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
+    animation: fadeInUp 1s ease;
+    transition: font-size var(--transition-base);
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.cta-button {
+    background-color: var(--background-white);
+    color: var(--primary-blue);
+    border: none;
+    padding: var(--spacing-md) var(--spacing-xl);
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all var(--transition-base);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    animation: fadeInUp 1.2s ease;
+}
+
+.cta-button:hover {
+    transform: translateY(-3px) scale(1.05);
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
+}
+
+.cta-button:active {
+    transform: translateY(-1px) scale(1.02);
+}
+
+/* ===================================
+   Featured Section
+   =================================== */
+.featured {
+    padding: var(--spacing-2xl) 0;
+    background-color: var(--background-light);
+    transition: padding var(--transition-base);
+}
+
+.section-title {
+    font-size: var(--font-size-3xl);
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: var(--spacing-xl);
+    color: var(--text-dark);
+    transition: font-size var(--transition-base);
+}
+
+.featured-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--spacing-lg);
+    transition: gap var(--transition-base);
+}
+
+.featured-card {
+    background-color: var(--background-white);
+    padding: var(--spacing-xl);
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    transition: all var(--transition-base);
+}
+
+.featured-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.15);
+}
+
+.featured-icon {
+    font-size: var(--font-size-4xl);
+    margin-bottom: var(--spacing-md);
+    transition: transform var(--transition-base);
+}
+
+.featured-card:hover .featured-icon {
+    transform: scale(1.2) rotate(5deg);
+}
+
+.featured-card h3 {
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--spacing-sm);
+    color: var(--primary-blue);
+    transition: font-size var(--transition-base);
+}
+
+.featured-card p {
+    font-size: var(--font-size-base);
+    color: var(--text-gray);
+    transition: font-size var(--transition-base);
+}
+
+/* ===================================
+   Articles Section
+   =================================== */
+.articles {
+    padding: var(--spacing-2xl) 0;
+    transition: padding var(--transition-base);
+}
+
+.articles-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-xl);
+    transition: gap var(--transition-base);
+}
+
+.article-card {
+    background-color: var(--background-white);
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
+    transition: all var(--transition-base);
+    display: flex;
+    flex-direction: column;
+}
+
+.article-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.2);
+}
+
+.article-image {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    transition: height var(--transition-base);
+}
+
+.placeholder-image {
+    width: 100%;
+    height: 100%;
+    transition: transform var(--transition-slow);
+}
+
+.article-card:hover .placeholder-image {
+    transform: scale(1.1);
+}
+
+.article-content {
+    padding: var(--spacing-lg);
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    transition: padding var(--transition-base);
+}
+
+.article-tag {
+    display: inline-block;
+    background-color: var(--primary-blue-light);
+    color: var(--background-white);
+    padding: var(--spacing-xs) var(--spacing-md);
+    border-radius: 20px;
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    margin-bottom: var(--spacing-sm);
+    width: fit-content;
+    transition: all var(--transition-fast);
+}
+
+.article-title {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    margin-bottom: var(--spacing-sm);
+    color: var(--text-dark);
+    transition: color var(--transition-fast), font-size var(--transition-base);
+}
+
+.article-card:hover .article-title {
+    color: var(--primary-blue);
+}
+
+.article-excerpt {
+    font-size: var(--font-size-base);
+    color: var(--text-gray);
+    margin-bottom: var(--spacing-md);
+    line-height: 1.7;
+    flex: 1;
+    transition: font-size var(--transition-base);
+}
+
+.article-meta {
+    display: flex;
+    gap: var(--spacing-md);
+    font-size: var(--font-size-sm);
+    color: var(--text-light);
+    margin-bottom: var(--spacing-md);
+    transition: gap var(--transition-base), font-size var(--transition-base);
+}
+
+.article-link {
+    color: var(--primary-blue);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: var(--font-size-base);
+    transition: all var(--transition-fast);
+    display: inline-flex;
+    align-items: center;
+}
+
+.article-link:hover {
+    color: var(--primary-blue-dark);
+    transform: translateX(5px);
+}
+
+/* ===================================
+   Newsletter Section
+   =================================== */
+.newsletter {
+    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+    color: var(--background-white);
+    padding: var(--spacing-2xl) 0;
+    text-align: center;
+    transition: padding var(--transition-base);
+}
+
+.newsletter-title {
+    font-size: var(--font-size-3xl);
+    font-weight: 700;
+    margin-bottom: var(--spacing-md);
+    transition: font-size var(--transition-base);
+}
+
+.newsletter-text {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-xl);
+    opacity: 0.95;
+    transition: font-size var(--transition-base);
+}
+
+.newsletter-form {
+    display: flex;
+    gap: var(--spacing-md);
+    max-width: 500px;
+    margin: 0 auto;
+    flex-wrap: wrap;
+    justify-content: center;
+    transition: gap var(--transition-base);
+}
+
+.newsletter-input {
+    flex: 1;
+    min-width: 250px;
+    padding: var(--spacing-md) var(--spacing-lg);
+    border: none;
+    border-radius: 50px;
+    font-size: var(--font-size-base);
+    transition: all var(--transition-base);
+}
+
+.newsletter-input:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
+}
+
+.newsletter-button {
+    padding: var(--spacing-md) var(--spacing-xl);
+    background-color: var(--background-white);
+    color: var(--primary-blue);
+    border: none;
+    border-radius: 50px;
+    font-size: var(--font-size-base);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-base);
+    white-space: nowrap;
+}
+
+.newsletter-button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* ===================================
+   Footer
+   =================================== */
+.footer {
+    background-color: var(--text-dark);
+    color: var(--background-white);
+    padding: var(--spacing-2xl) 0 var(--spacing-lg);
+    transition: padding var(--transition-base);
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-xl);
+    margin-bottom: var(--spacing-xl);
+    transition: gap var(--transition-base);
+}
+
+.footer-section h3,
+.footer-section h4 {
+    margin-bottom: var(--spacing-md);
+    color: var(--background-white);
+    transition: font-size var(--transition-base);
+}
+
+.footer-section h3 {
+    font-size: var(--font-size-2xl);
+}
+
+.footer-section h4 {
+    font-size: var(--font-size-lg);
+}
+
+.footer-section p {
+    color: var(--text-light);
+    font-size: var(--font-size-base);
+    transition: font-size var(--transition-base);
+}
+
+.footer-links {
+    list-style: none;
+}
+
+.footer-links li {
+    margin-bottom: var(--spacing-sm);
+}
+
+.footer-links a {
+    color: var(--text-light);
+    text-decoration: none;
+    font-size: var(--font-size-base);
+    transition: all var(--transition-fast);
+}
+
+.footer-links a:hover {
+    color: var(--accent-blue);
+    padding-left: 5px;
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-light);
+    font-size: var(--font-size-sm);
+    transition: font-size var(--transition-base);
+}
+
+/* ===================================
+   Responsive Design - Tablet
+   =================================== */
+@media (max-width: 1024px) {
+    .articles-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .nav-list {
+        gap: var(--spacing-md);
+    }
+}
+
+/* ===================================
+   Responsive Design - Mobile & Tablet
+   =================================== */
+@media (max-width: 768px) {
+    /* Show hamburger menu */
+    .hamburger {
+        display: flex;
+    }
+    
+    /* Hide navigation by default */
+    .nav {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 70%;
+        max-width: 300px;
+        height: 100vh;
+        background-color: var(--background-white);
+        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
+        transition: right var(--transition-base);
+        z-index: 999;
+    }
+    
+    .nav.active {
+        right: 0;
+    }
+    
+    .nav-list {
+        flex-direction: column;
+        padding: var(--spacing-2xl) var(--spacing-lg);
+        gap: var(--spacing-sm);
+    }
+    
+    .nav-link {
+        display: block;
+        padding: var(--spacing-md);
+        border-bottom: 1px solid var(--border-color);
+    }
+    
+    /* Single column for articles */
+    .articles-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Adjust featured grid */
+    .featured-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    /* Newsletter form stacks */
+    .newsletter-form {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .newsletter-input,
+    .newsletter-button {
+        width: 100%;
+        min-width: auto;
+    }
+    
+    /* Footer stacks */
+    .footer-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+    
+    /* Increase touch targets */
+    .cta-button,
+    .newsletter-button {
+        min-height: 48px;
+    }
+    
+    .nav-link {
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+    }
+}
+
+/* ===================================
+   Responsive Design - Small Mobile
+   =================================== */
+@media (max-width: 480px) {
+    .container {
+        padding: 0 var(--spacing-sm);
+    }
+    
+    .article-image {
+        height: 180px;
+    }
+    
+    .nav {
+        width: 85%;
+    }
+}
+
+/* ===================================
+   Print Styles
+   =================================== */
+@media print {
+    .header,
+    .hamburger,
+    .newsletter,
+    .footer {
+        display: none;
+    }
+    
+    .article-card {
+        break-inside: avoid;
+    }
+}
diff --git a/public/js/blog.js b/public/js/blog.js
new file mode 100644
index 00000000..5116b9b2
--- /dev/null
+++ b/public/js/blog.js
@@ -0,0 +1,162 @@
+// ===================================
+// Hamburger Menu Toggle
+// ===================================
+document.addEventListener('DOMContentLoaded', () => {
+    const hamburger = document.getElementById('hamburger');
+    const nav = document.getElementById('nav');
+    
+    if (hamburger && nav) {
+        hamburger.addEventListener('click', () => {
+            hamburger.classList.toggle('active');
+            nav.classList.toggle('active');
+        });
+        
+        // Close menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!hamburger.contains(e.target) && !nav.contains(e.target)) {
+                hamburger.classList.remove('active');
+                nav.classList.remove('active');
+            }
+        });
+        
+        // Close menu when clicking on a nav link
+        const navLinks = nav.querySelectorAll('.nav-link');
+        navLinks.forEach(link => {
+            link.addEventListener('click', () => {
+                hamburger.classList.remove('active');
+                nav.classList.remove('active');
+            });
+        });
+    }
+});
+
+// ===================================
+// Smooth Scroll for Navigation Links
+// ===================================
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});
+
+// ===================================
+// Newsletter Form Handler
+// ===================================
+const newsletterForm = document.querySelector('.newsletter-form');
+if (newsletterForm) {
+    newsletterForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const emailInput = newsletterForm.querySelector('.newsletter-input');
+        const email = emailInput.value;
+        
+        // Simple validation
+        if (email && email.includes('@')) {
+            // Show success message
+            const button = newsletterForm.querySelector('.newsletter-button');
+            const originalText = button.textContent;
+            button.textContent = '✓ Subscribed!';
+            button.style.backgroundColor = '#10b981';
+            button.style.color = 'white';
+            
+            // Reset form
+            emailInput.value = '';
+            
+            // Reset button after 3 seconds
+            setTimeout(() => {
+                button.textContent = originalText;
+                button.style.backgroundColor = '';
+                button.style.color = '';
+            }, 3000);
+        }
+    });
+}
+
+// ===================================
+// Add scroll effect to header
+// ===================================
+let lastScroll = 0;
+const header = document.querySelector('.header');
+
+window.addEventListener('scroll', () => {
+    const currentScroll = window.pageYOffset;
+    
+    if (currentScroll > 100) {
+        header.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.1)';
+    } else {
+        header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.05)';
+    }
+    
+    lastScroll = currentScroll;
+});
+
+// ===================================
+// Animate elements on scroll
+// ===================================
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.style.opacity = '1';
+            entry.target.style.transform = 'translateY(0)';
+        }
+    });
+}, observerOptions);
+
+// Observe article cards for animation
+document.addEventListener('DOMContentLoaded', () => {
+    const articleCards = document.querySelectorAll('.article-card');
+    articleCards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(30px)';
+        card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+        observer.observe(card);
+    });
+    
+    const featuredCards = document.querySelectorAll('.featured-card');
+    featuredCards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(30px)';
+        card.style.transition = `opacity 0.6s ease ${index * 0.15}s, transform 0.6s ease ${index * 0.15}s`;
+        observer.observe(card);
+    });
+});
+
+// ===================================
+// Add elastic resize effect indicator
+// ===================================
+let resizeTimer;
+window.addEventListener('resize', () => {
+    document.body.style.transition = 'all 0.3s ease';
+    
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+        document.body.style.transition = '';
+    }, 300);
+});
+
+// ===================================
+// CTA Button Click Handler
+// ===================================
+const ctaButton = document.querySelector('.cta-button');
+if (ctaButton) {
+    ctaButton.addEventListener('click', () => {
+        const articlesSection = document.getElementById('articles');
+        if (articlesSection) {
+            articlesSection.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+}
diff --git a/public/responsive-demo.html b/public/responsive-demo.html
new file mode 100644
index 00000000..be3a1db0
--- /dev/null
+++ b/public/responsive-demo.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Responsive Design Demo - TechBlog</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #f8fafc;
+            padding: 20px;
+        }
+        
+        .demo-container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        
+        h1 {
+            text-align: center;
+            color: #2563eb;
+            margin-bottom: 10px;
+            font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
+        }
+        
+        .subtitle {
+            text-align: center;
+            color: #64748b;
+            margin-bottom: 40px;
+            font-size: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);
+        }
+        
+        .viewport-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+        
+        .viewport-demo {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            transition: transform 0.3s ease;
+        }
+        
+        .viewport-demo:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 30px rgba(37, 99, 235, 0.2);
+        }
+        
+        .viewport-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 20px;
+            font-weight: 600;
+        }
+        
+        .viewport-size {
+            font-size: 0.9rem;
+            opacity: 0.9;
+            margin-top: 5px;
+        }
+        
+        .iframe-container {
+            position: relative;
+            background: #e2e8f0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 400px;
+        }
+        
+        .device-frame {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 0 0 8px #1e293b, 0 10px 30px rgba(0, 0, 0, 0.3);
+            overflow: hidden;
+        }
+        
+        .desktop-frame {
+            width: 100%;
+            max-width: 900px;
+        }
+        
+        .tablet-frame {
+            width: 100%;
+            max-width: 600px;
+        }
+        
+        .mobile-frame {
+            width: 100%;
+            max-width: 375px;
+        }
+        
+        iframe {
+            width: 100%;
+            border: none;
+            display: block;
+        }
+        
+        .features {
+            background: white;
+            border-radius: 12px;
+            padding: 30px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            margin-top: 40px;
+        }
+        
+        .features h2 {
+            color: #2563eb;
+            margin-bottom: 20px;
+            font-size: clamp(1.3rem, 1.5vw + 0.8rem, 2rem);
+        }
+        
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        
+        .feature-item {
+            padding: 20px;
+            background: #f8fafc;
+            border-radius: 8px;
+            border-left: 4px solid #2563eb;
+        }
+        
+        .feature-item h3 {
+            color: #1e293b;
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+        }
+        
+        .feature-item p {
+            color: #64748b;
+            line-height: 1.6;
+            font-size: 0.95rem;
+        }
+        
+        .cta-section {
+            text-align: center;
+            margin-top: 40px;
+            padding: 40px;
+            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
+            border-radius: 12px;
+            color: white;
+        }
+        
+        .cta-button {
+            display: inline-block;
+            background: white;
+            color: #2563eb;
+            padding: 15px 40px;
+            border-radius: 50px;
+            text-decoration: none;
+            font-weight: 600;
+            margin-top: 20px;
+            transition: transform 0.3s ease;
+        }
+        
+        .cta-button:hover {
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body>
+    <div class="demo-container">
+        <h1>🎨 Elastic Web Design Demonstration</h1>
+        <p class="subtitle">See how the TechBlog adapts seamlessly across different devices</p>
+        
+        <div class="viewport-grid">
+            <!-- Desktop View -->
+            <div class="viewport-demo">
+                <div class="viewport-header">
+                    <div>💻 Desktop View</div>
+                    <div class="viewport-size">> 1024px</div>
+                </div>
+                <div class="iframe-container">
+                    <div class="device-frame desktop-frame">
+                        <iframe src="/blog" height="500"></iframe>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Tablet View -->
+            <div class="viewport-demo">
+                <div class="viewport-header">
+                    <div>📱 Tablet View</div>
+                    <div class="viewport-size">768px - 1024px</div>
+                </div>
+                <div class="iframe-container">
+                    <div class="device-frame tablet-frame">
+                        <iframe src="/blog" height="500"></iframe>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Mobile View -->
+            <div class="viewport-demo">
+                <div class="viewport-header">
+                    <div>📱 Mobile View</div>
+                    <div class="viewport-size">< 768px</div>
+                </div>
+                <div class="iframe-container">
+                    <div class="device-frame mobile-frame">
+                        <iframe src="/blog" height="500"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="features">
+            <h2>✨ Elastic Design Features</h2>
+            <div class="features-grid">
+                <div class="feature-item">
+                    <h3>🔤 Fluid Typography</h3>
+                    <p>Text scales smoothly using CSS clamp() for optimal readability across all screen sizes</p>
+                </div>
+                <div class="feature-item">
+                    <h3>📐 Flexible Grids</h3>
+                    <p>CSS Grid with auto-fit and minmax() creates layouts that adapt intelligently</p>
+                </div>
+                <div class="feature-item">
+                    <h3>🎯 Touch-Friendly</h3>
+                    <p>Buttons and interactive elements meet minimum 44px touch target guidelines</p>
+                </div>
+                <div class="feature-item">
+                    <h3>🍔 Hamburger Menu</h3>
+                    <p>Navigation transforms into a slide-out menu on mobile and tablet devices</p>
+                </div>
+                <div class="feature-item">
+                    <h3>🎨 Smooth Transitions</h3>
+                    <p>All layout changes include smooth CSS transitions for a polished feel</p>
+                </div>
+                <div class="feature-item">
+                    <h3>📊 Adaptive Layouts</h3>
+                    <p>3-column → 2-column → 1-column grid adapts based on available space</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="cta-section">
+            <h2>Ready to Experience It?</h2>
+            <p>Visit the full blog to see elastic design in action</p>
+            <a href="/blog" class="cta-button">View Full Blog →</a>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/videos/browser_session_1763569551363.webm b/videos/browser_session_1763569551363.webm
new file mode 100644
index 00000000..f66a4505
Binary files /dev/null and b/videos/browser_session_1763569551363.webm differ
diff --git a/views/blog.ejs b/views/blog.ejs
new file mode 100644
index 00000000..a003f3ba
--- /dev/null
+++ b/views/blog.ejs
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TechBlog - Elastic Web Design</title>
+    <link rel="stylesheet" href="/css/blog.css">
+</head>
+<body>
+    <!-- Header with Navigation -->
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <div class="logo">
+                    <h1>TechBlog</h1>
+                </div>
+                <nav class="nav" id="nav">
+                    <ul class="nav-list">
+                        <li><a href="#home" class="nav-link">Home</a></li>
+                        <li><a href="#articles" class="nav-link">Articles</a></li>
+                        <li><a href="#tutorials" class="nav-link">Tutorials</a></li>
+                        <li><a href="#about" class="nav-link">About</a></li>
+                        <li><a href="#contact" class="nav-link">Contact</a></li>
+                    </ul>
+                </nav>
+                <button class="hamburger" id="hamburger" aria-label="Toggle menu">
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="hero" id="home">
+        <div class="container">
+            <div class="hero-content">
+                <h2 class="hero-title">Master Elastic Web Design</h2>
+                <p class="hero-subtitle">Learn how to create responsive, fluid, and adaptive layouts that work seamlessly across all devices</p>
+                <button class="cta-button">Start Learning</button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Featured Section -->
+    <section class="featured">
+        <div class="container">
+            <h2 class="section-title">Featured Topics</h2>
+            <div class="featured-grid">
+                <div class="featured-card">
+                    <div class="featured-icon">📱</div>
+                    <h3>Mobile-First Design</h3>
+                    <p>Build from small screens up for optimal performance</p>
+                </div>
+                <div class="featured-card">
+                    <div class="featured-icon">🎨</div>
+                    <h3>Fluid Typography</h3>
+                    <p>Scale text smoothly across all viewport sizes</p>
+                </div>
+                <div class="featured-card">
+                    <div class="featured-icon">📐</div>
+                    <h3>Flexible Grids</h3>
+                    <p>Create layouts that adapt to any screen width</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Articles Section -->
+    <section class="articles" id="articles">
+        <div class="container">
+            <h2 class="section-title">Latest Articles</h2>
+            <div class="articles-grid">
+                <!-- Article 1 -->
+                <article class="article-card">
+                    <div class="article-image">
+                        <div class="placeholder-image" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
+                    </div>
+                    <div class="article-content">
+                        <span class="article-tag">CSS</span>
+                        <h3 class="article-title">Elastic Web Design Tips</h3>
+                        <p class="article-excerpt">Discover essential techniques for creating truly elastic web designs that adapt fluidly to any screen size using modern CSS features.</p>
+                        <div class="article-meta">
+                            <span class="article-date">Nov 15, 2025</span>
+                            <span class="article-read-time">5 min read</span>
+                        </div>
+                        <a href="#" class="article-link">Read More →</a>
+                    </div>
+                </article>
+
+                <!-- Article 2 -->
+                <article class="article-card">
+                    <div class="article-image">
+                        <div class="placeholder-image" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
+                    </div>
+                    <div class="article-content">
+                        <span class="article-tag">Layout</span>
+                        <h3 class="article-title">Responsive Layout Examples</h3>
+                        <p class="article-excerpt">Explore real-world examples of responsive layouts that demonstrate best practices in modern web development and design patterns.</p>
+                        <div class="article-meta">
+                            <span class="article-date">Nov 12, 2025</span>
+                            <span class="article-read-time">7 min read</span>
+                        </div>
+                        <a href="#" class="article-link">Read More →</a>
+                    </div>
+                </article>
+
+                <!-- Article 3 -->
+                <article class="article-card">
+                    <div class="article-image">
+                        <div class="placeholder-image" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
+                    </div>
+                    <div class="article-content">
+                        <span class="article-tag">JavaScript</span>
+                        <h3 class="article-title">Building Adaptive Components</h3>
+                        <p class="article-excerpt">Learn how to create JavaScript components that intelligently adapt their behavior based on viewport size and device capabilities.</p>
+                        <div class="article-meta">
+                            <span class="article-date">Nov 10, 2025</span>
+                            <span class="article-read-time">6 min read</span>
+                        </div>
+                        <a href="#" class="article-link">Read More →</a>
+                    </div>
+                </article>
+
+                <!-- Article 4 -->
+                <article class="article-card">
+                    <div class="article-image">
+                        <div class="placeholder-image" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);"></div>
+                    </div>
+                    <div class="article-content">
+                        <span class="article-tag">Performance</span>
+                        <h3 class="article-title">Optimizing Responsive Images</h3>
+                        <p class="article-excerpt">Master the art of serving the right image at the right size for optimal performance across all devices and screen densities.</p>
+                        <div class="article-meta">
+                            <span class="article-date">Nov 8, 2025</span>
+                            <span class="article-read-time">8 min read</span>
+                        </div>
+                        <a href="#" class="article-link">Read More →</a>
+                    </div>
+                </article>
+
+                <!-- Article 5 -->
+                <article class="article-card">
+                    <div class="article-image">
+                        <div class="placeholder-image" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);"></div>
+                    </div>
+                    <div class="article-content">
+                        <span class="article-tag">Design</span>
+                        <h3 class="article-title">Fluid Typography Systems</h3>
+                        <p class="article-excerpt">Implement scalable typography that responds smoothly to viewport changes using CSS clamp() and custom properties.</p>
+                        <div class="article-meta">
+                            <span class="article-date">Nov 5, 2025</span>
+                            <span class="article-read-time">5 min read</span>
+                        </div>
+                        <a href="#" class="article-link">Read More →</a>
+                    </div>
+                </article>
+
+                <!-- Article 6 -->
+                <article class="article-card">
+                    <div class="article-image">
+                        <div class="placeholder-image" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);"></div>
+                    </div>
+                    <div class="article-content">
+                        <span class="article-tag">Grid</span>
+                        <h3 class="article-title">CSS Grid Mastery</h3>
+                        <p class="article-excerpt">Deep dive into CSS Grid and learn how to create complex, responsive layouts with minimal code and maximum flexibility.</p>
+                        <div class="article-meta">
+                            <span class="article-date">Nov 3, 2025</span>
+                            <span class="article-read-time">10 min read</span>
+                        </div>
+                        <a href="#" class="article-link">Read More →</a>
+                    </div>
+                </article>
+            </div>
+        </div>
+    </section>
+
+    <!-- Newsletter Section -->
+    <section class="newsletter">
+        <div class="container">
+            <div class="newsletter-content">
+                <h2 class="newsletter-title">Stay Updated</h2>
+                <p class="newsletter-text">Get the latest articles and tutorials delivered to your inbox</p>
+                <form class="newsletter-form">
+                    <input type="email" class="newsletter-input" placeholder="Enter your email" required>
+                    <button type="submit" class="newsletter-button">Subscribe</button>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-section">
+                    <h3>TechBlog</h3>
+                    <p>Your source for modern web development insights</p>
+                </div>
+                <div class="footer-section">
+                    <h4>Quick Links</h4>
+                    <ul class="footer-links">
+                        <li><a href="#home">Home</a></li>
+                        <li><a href="#articles">Articles</a></li>
+                        <li><a href="#tutorials">Tutorials</a></li>
+                    </ul>
+                </div>
+                <div class="footer-section">
+                    <h4>Connect</h4>
+                    <ul class="footer-links">
+                        <li><a href="#">Twitter</a></li>
+                        <li><a href="#">GitHub</a></li>
+                        <li><a href="#">LinkedIn</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 TechBlog. Demonstrating Elastic Web Design.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/js/blog.js"></script>
+</body>
+</html>