mononeer · mononeer · Aug 16, 2025 · Aug 16, 2025
diff --git a/css/style.css b/css/style.css
@@ -389,3 +389,128 @@ mark {
     border-bottom: none;
     margin-top: 0;
 }
+
+/* News Article Styling */
+#articles-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+}
+
+.article-card {
+    background-color: #2a344a;
+    padding: 2rem;
+    border-radius: 10px;
+    border-left: 5px solid #8a2be2;
+}
+
+.article-card img {
+    max-width: 100%;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+}
+
+.article-card h3 {
+    margin-top: 0;
+    border-bottom: none;
+}
+
+.article-card h3 a {
+    text-decoration: none;
+    color: #f0f0f0;
+    transition: color 0.3s;
+}
+
+.article-card h3 a:hover {
+    color: #8a2be2;
+}
+
+.article-card .article-source,
+.article-card .article-published {
+    display: inline-block;
+    font-size: 0.9rem;
+    color: #808080;
+    margin-top: 1rem;
+    margin-right: 1rem;
+}
+
+.search-container {
+    padding: 0 1rem 1rem 1rem;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+/* Todo List App Styling */
+.todo-container {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+#todo-form {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 2rem;
+}
+
+#todo-input {
+    flex-grow: 1;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #808080;
+    background-color: #2a344a;
+    color: #f0f0f0;
+    font-size: 1rem;
+}
+
+#todo-form button {
+    padding: 10px 20px;
+    border-radius: 5px;
+    background-color: #8a2be2;
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s;
+}
+
+#todo-form button:hover {
+    background-color: #6a1eae;
+}
+
+#todo-list {
+    list-style: none;
+    padding: 0;
+}
+
+#todo-list li {
+    background-color: #2a344a;
+    padding: 15px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.3s;
+    word-break: break-all;
+}
+
+#todo-list li.completed {
+    text-decoration: line-through;
+    opacity: 0.6;
+    background-color: #1c2333;
+}
+
+#todo-list .delete-btn {
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: 15px;
+    transition: background-color 0.3s;
+}
+
+#todo-list .delete-btn:hover {
+    background-color: #cc0000;
+}
diff --git a/games/calculator/index.html b/games/calculator/index.html
@@ -13,8 +13,12 @@
                 <li><a href="/">Home</a></li>
                 <li><a href="/projects/">Projects</a></li>
                 <li><a href="/games/">Games & Apps</a></li>
+                <li><a href="/news/">News</a></li>
             </ul>
         </nav>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Search page content...">
+        </div>
     </header>
 
     <main>

diff --git a/games/chess/index.html b/games/chess/index.html
@@ -13,8 +13,12 @@
                 <li><a href="/">Home</a></li>
                 <li><a href="/projects/">Projects</a></li>
                 <li><a href="/games/">Games & Apps</a></li>
+                <li><a href="/news/">News</a></li>
             </ul>
         </nav>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Search page content...">
+        </div>
     </header>
 
     <main>

diff --git a/games/index.html b/games/index.html
@@ -13,8 +13,12 @@
                 <li><a href="/">Home</a></li>
                 <li><a href="/projects/">Projects</a></li>
                 <li><a href="/games/">Games & Apps</a></li>
+                <li><a href="/news/">News</a></li>
             </ul>
         </nav>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Search page content...">
+        </div>
     </header>
 
     <main>
@@ -33,6 +37,10 @@ <h3>Chess</h3>
                     <h3>Calculator</h3>
                     <p>A simple and stylish calculator app.</p>
                 </a>
+                <a href="/games/todo/" class="gallery-item">
+                    <h3>Todo List</h3>
+                    <p>A useful app to keep track of your tasks.</p>
+                </a>
             </div>
         </section>
     </main>

diff --git a/games/tictactoe/index.html b/games/tictactoe/index.html
@@ -13,8 +13,12 @@
                 <li><a href="/">Home</a></li>
                 <li><a href="/projects/">Projects</a></li>
                 <li><a href="/games/">Games & Apps</a></li>
+                <li><a href="/news/">News</a></li>
             </ul>
         </nav>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Search page content...">
+        </div>
     </header>
 
     <main>

diff --git a/games/todo/index.html b/games/todo/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todo List - Rendani Manugeni</title>
+    <link rel="stylesheet" href="../../css/style.css">
+</head>
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/projects/">Projects</a></li>
+                <li><a href="/games/">Games & Apps</a></li>
+                <li><a href="/news/">News</a></li>
+            </ul>
+        </nav>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Search page content...">
+        </div>
+    </header>
+
+    <main>
+        <section id="apps">
+            <h2>Todo List</h2>
+            <div class="app-container-full">
+                <div class="todo-container">
+                    <form id="todo-form">
+                        <input type="text" id="todo-input" placeholder="Add a new task..." autocomplete="off">
+                        <button type="submit">Add Task</button>
+                    </form>
+                    <ul id="todo-list">
+                        <!-- Todo items will be loaded here -->
+                    </ul>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Rendani Manugeni. All rights reserved.</p>
+    </footer>
+
+    <script src="../../js/todo.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -13,8 +13,12 @@
                 <li><a href="/">Home</a></li>
                 <li><a href="/projects/">Projects</a></li>
                 <li><a href="/games/">Games & Apps</a></li>
+                <li><a href="/news/">News</a></li>
             </ul>
         </nav>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Search page content...">
+        </div>
     </header>
 
     <main>

diff --git a/js/chess.js b/js/chess.js
@@ -70,6 +70,7 @@ function initializeChessGame() {
     let selectedSquare = null;
     let currentPlayer = 'white'; // White starts
     let isGameOver = false;
+    let playerVsAiMode = true; // Default to playing against AI
 
     function handleSquareClick(event) {
         if (isGameOver) return;
@@ -209,6 +210,16 @@ function initializeChessGame() {
         updateStatus();
         updateBoardView(fromR, fromC, toR, toC);
         checkGameState();
+
+        if (playerVsAiMode && currentPlayer === 'black' && !isGameOver) {
+            // Use a timeout to make the AI's move feel less instantaneous
+            setTimeout(() => {
+                const aiMove = getAiMove();
+                if (aiMove) {
+                    movePiece(aiMove.from.r, aiMove.from.c, aiMove.to.r, aiMove.to.c);
+                }
+            }, 500); // 0.5 second delay
+        }
     }
 
     function updateStatus() {
@@ -414,4 +425,56 @@ function initializeChessGame() {
         }
         return null;
     }
+
+    // --- AI Logic ---
+    const pieceValues = {
+        'pawn': 10, 'knight': 30, 'bishop': 30, 'rook': 50, 'queen': 90, 'king': 900
+    };
+
+    function evaluateBoard(board) {
+        let totalScore = 0;
+        for (let r = 0; r < 8; r++) {
+            for (let c = 0; c < 8; c++) {
+                const piece = board[r][c];
+                if (piece) {
+                    totalScore += (piece.color === 'white' ? pieceValues[piece.type] : -pieceValues[piece.type]);
+                }
+            }
+        }
+        return totalScore;
+    }
+
+    function getAiMove() {
+        let bestMove = null;
+        let bestScore = Infinity; // Black (AI) wants to find the lowest score
+
+        for (let r = 0; r < 8; r++) {
+            for (let c = 0; c < 8; c++) {
+                const piece = boardState[r][c];
+                if (piece && piece.color === 'black') {
+                    const moves = getValidMoves(piece, r, c);
+                    for (const move of moves) {
+                        const [toR, toC] = move;
+
+                        // Simulate the move to evaluate the resulting board state
+                        const originalDestPiece = boardState[toR][toC];
+                        boardState[toR][toC] = piece;
+                        boardState[r][c] = null;
+
+                        const score = evaluateBoard(boardState);
+
+                        // Undo the move to restore the board state
+                        boardState[r][c] = piece;
+                        boardState[toR][toC] = originalDestPiece;
+
+                        if (score < bestScore) {
+                            bestScore = score;
+                            bestMove = { from: { r, c }, to: { r: toR, c: toC }, piece };
+                        }
+                    }
+                }
+            }
+        }
+        return bestMove;
+    }
 }
diff --git a/js/main.js b/js/main.js
@@ -19,15 +19,16 @@ document.addEventListener('DOMContentLoaded', () => {
                 return;
             }
 
+            projectsContainer.classList.add('gallery-container');
             const projectsHTML = projects.map(project => `
-                <div class="project-card">
-                    <h3><a href="${project.html_url}" target="_blank" rel="noopener noreferrer">${project.name}</a></h3>
+                <a href="/project-detail/?repo=${project.name}" class="gallery-item">
+                    <h3>${project.name}</h3>
                     <p>${project.description || 'No description available.'}</p>
                     <div class="project-footer">
                         <span>${project.language ? `Language: ${project.language}` : ''}</span>
                         <span>⭐ ${project.stargazers_count}</span>
                     </div>
-                </div>
+                </a>
             `).join('');
 
             projectsContainer.innerHTML = projectsHTML;