diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..426ce62
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,174 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Function to fetch and parse Markdown files
+    async function fetchMarkdown(filename) {
+        try {
+            const response = await fetch(`articles/${filename}`);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch ${filename}`);
+            }
+            return await response.text();
+        } catch (error) {
+            console.error('Error fetching markdown:', error);
+            return null;
+        }
+    }
+
+    // Function to parse Markdown content
+    function parseMarkdown(markdown) {
+        if (!markdown) return null;
+        
+        // Simple markdown parser for this example
+        // In a real application, you might want to use a library like marked.js
+        
+        // Extract title from the first heading
+        const titleMatch = markdown.match(/^# (.+)$/m);
+        const title = titleMatch ? titleMatch[1] : 'Untitled';
+        
+        // Extract date if it exists
+        const dateMatch = markdown.match(/Date: (.+)$/m);
+        const date = dateMatch ? dateMatch[1] : 'No date';
+        
+        // Get the content after the title
+        let content = markdown.replace(/^# .+$/m, '').trim();
+        
+        // Remove date line if it exists
+        content = content.replace(/Date: .+$/m, '').trim();
+        
+        // Create excerpt (first 150 characters)
+        const excerpt = content.substring(0, 150) + '...';
+        
+        return {
+            title,
+            date,
+            content,
+            excerpt
+        };
+    }
+
+    // Function to load articles
+    async function loadArticles() {
+        const articlesGrid = document.getElementById('articles-grid');
+        const featuredArticle = document.getElementById('featured-article');
+        
+        if (!articlesGrid || !featuredArticle) {
+            // Not on the homepage
+            return;
+        }
+        
+        // Get the list of article files
+        // In a real app, you would need a server-side solution to list files
+        // For this example, we'll simulate with a limited number of articles
+        const articleNumbers = [];
+        
+        // Try to get articles 1 through 20 (adjust based on your needs)
+        for (let i = 1; i <= 20; i++) {
+            const markdown = await fetchMarkdown(`${i}.md`);
+            if (markdown) {
+                articleNumbers.push(i);
+            } else {
+                // No more articles found
+                break;
+            }
+        }
+        
+        // Sort in descending order to get the newest first
+        articleNumbers.sort((a, b) => b - a);
+        
+        // Display the latest article as featured
+        if (articleNumbers.length > 0) {
+            const latestNumber = articleNumbers[0];
+            const markdown = await fetchMarkdown(`${latestNumber}.md`);
+            const article = parseMarkdown(markdown);
+            
+            if (article) {
+                featuredArticle.innerHTML = `
+                    <h2>${article.title}</h2>
+                    <span class="date">${article.date}</span>
+                    <p class="excerpt">${article.excerpt}</p>
+                    <a href="article.html?id=${latestNumber}" class="read-more">Read More</a>
+                `;
+            }
+            
+            // Remove the latest article from the array
+            articleNumbers.shift();
+        }
+        
+        // Display up to 6 previous articles in the grid
+        const displayCount = Math.min(10, articleNumbers.length);
+        
+        for (let i = 0; i < displayCount; i++) {
+            const articleNumber = articleNumbers[i];
+            const markdown = await fetchMarkdown(`${articleNumber}.md`);
+            const article = parseMarkdown(markdown);
+            
+            if (article) {
+                const articleCard = document.createElement('div');
+                articleCard.className = 'article-card';
+                articleCard.innerHTML = `
+                    <h3>${article.title}</h3>
+                    <span class="date">${article.date}</span>
+                    <p class="excerpt">${article.excerpt}</p>
+                    <a href="article.html?id=${articleNumber}" class="read-more">Read More</a>
+                `;
+                
+                articlesGrid.appendChild(articleCard);
+            }
+        }
+    }
+
+    // Function to load a single article page
+    async function loadArticlePage() {
+        // Check if we're on an article page
+        const urlParams = new URLSearchParams(window.location.search);
+        const articleId = urlParams.get('id');
+        
+        if (!articleId) {
+            // Not on an article page
+            return;
+        }
+        
+        const articleTitle = document.getElementById('article-title');
+        const main = document.querySelector('main');
+        
+        // Fetch the article
+        const markdown = await fetchMarkdown(`${articleId}.md`);
+        const article = parseMarkdown(markdown);
+        
+        if (article) {
+            // Set the article title in the header
+            if (articleTitle) {
+                articleTitle.textContent = article.title;
+            }
+            
+            // Convert markdown content to HTML (simplified version)
+            let html = article.content;
+            
+            // Convert headers
+            html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+            html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+            
+            // Convert paragraphs (simple version)
+            html = html.split('\n\n').map(p => `<p>${p}</p>`).join('');
+            
+            // Create the article container
+            const articleContainer = document.createElement('div');
+            articleContainer.className = 'article-page';
+            articleContainer.innerHTML = `
+                <h1>${article.title}</h1>
+                <div class="article-meta">${article.date}</div>
+                <div class="article-content">
+                    ${html}
+                </div>
+            `;
+            
+            main.innerHTML = '';
+            main.appendChild(articleContainer);
+        } else {
+            main.innerHTML = '<div class="article-page"><h1>Article Not Found</h1><p>The requested article could not be found.</p></div>';
+        }
+    }
+
+    // Initialize the page
+    loadArticles();
+    loadArticlePage();
+});