feat: add the remaining topics

frontend/app/globals.css

@@ -28,9 +28,32 @@ pre code {
   font-size: 0.9em;
 }
 
+article {
+  min-width: 0;
+}
+
+article table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+article th,
+article td {
+  padding: 0.75rem;
+  text-align: left;
+  word-break: break-word;
+}
+
+article img,
+article video,
+article iframe {
+  max-width: 100%;
+}
+
 /* 3. SUBTLE TEXT SELECTION COLOR */
 ::selection {
   background-color: rgba(99, 102, 241, 0.2);
   /* Soft indigo highlight */
   color: inherit;
-}
+}

frontend/content/accessibility.mdx

@@ -0,0 +1,89 @@
+---
+title: "Accessibility"
+description: "Inclusive web development practices for keyboard navigation, screen readers, and semantic structure."
+category: "Frontend & Web"
+---
+
+## Getting Started
+
+Accessibility ensures all users can interact with your interface, including people using keyboards, screen readers, or assistive technologies. Good accessibility improves usability for everyone.
+
+### Semantic HTML
+
+Use semantic elements to communicate structure and meaning.
+
+```html
+<header>
+  <h1>My site</h1>
+</header>
+<nav>
+  <a href="/">Home</a>
+  <a href="/about">About</a>
+</nav>
+<main>
+  <article>
+    <h2>Article title</h2>
+  </article>
+</main>
+<footer>© 2026</footer>
+```
+
+---
+
+## Keyboard Navigation
+
+Ensure interactive elements are reachable with Tab and can be operated with the keyboard.
+
+```html
+<button type="button">Submit</button>
+<a href="/more">Learn more</a>
+<input type="text" placeholder="Search" />
+```
+
+Avoid disabling focus or relying on mouse-only interactions.
+
+---
+
+## ARIA & Labels
+
+Use accessible labels when native semantics are not enough.
+
+```html
+<label for="email">Email</label>
+<input id="email" type="email" />
+
+<div role="alert">Form submission failed</div>
+```
+
+Prefer native controls first, then add ARIA roles, states, and properties as needed.
+
+---
+
+## Contrast & Visual Design
+
+Sufficient color contrast helps users with low vision or color blindness.
+
+```css
+button {
+  color: #ffffff;
+  background: #1d4ed8;
+}
+```
+
+Check contrast ratios, avoid relying on color alone, and ensure text is readable at different sizes.
+
+---
+
+## Accessible Forms
+
+Group related inputs and use clear labels.
+
+```html
+<fieldset>
+  <legend>Shipping information</legend>
+  <label for="name">Name</label>
+  <input id="name" name="name" />
+</fieldset>
+```
+
+Provide helpful error messages, and keep form fields predictable and easy to complete.

frontend/content/agents.mdx

@@ -0,0 +1,40 @@
+---
+title: "Agents"
+description: "Autonomous agent patterns for tool use, planning, and multi-step workflows with AI."
+category: "Data & AI"
+---
+
+## Getting Started
+
+Agents automate multi-step tasks by combining planning, tool use, and decision making. They can orchestrate actions across APIs, data sources, and interfaces.
+
+---
+
+## Core concepts
+
+- **tools**: capabilities the agent can call
+- **planner**: chooses the next step
+- **executor**: performs actions and evaluates results
+
+---
+
+## Example flow
+
+1. receive a goal
+2. search for relevant information
+3. call tools to gather data or perform actions
+4. decide the next step
+
+---
+
+## Use cases
+
+- workflow automation
+- research assistants
+- code generation with validation
+
+---
+
+## Safety
+
+Control what tools an agent can access, validate outputs, and ensure actions remain within authorized boundaries.

frontend/content/ai-safety.mdx

@@ -0,0 +1,37 @@
+---
+title: "AI Safety"
+description: "Responsible AI practices for reducing risk, bias, and harmful outputs from machine learning systems."
+category: "Data & AI"
+---
+
+## Getting Started
+
+AI safety focuses on minimizing harm from model outputs and ensuring systems behave within intended bounds.
+
+---
+
+## Key concerns
+
+- bias in training data
+- privacy and data handling
+- harmful or misleading outputs
+
+---
+
+## Mitigation techniques
+
+- sanitize training and evaluation data
+- use guardrails and content filters
+- monitor for unsafe outputs
+
+---
+
+## Human oversight
+
+Design systems so humans can review and intervene when necessary.
+
+---
+
+## Iteration
+
+Continuously test against new failure modes and update models, prompts, and safety checks.

frontend/content/algorithms.mdx

@@ -0,0 +1,100 @@
+---
+title: "Algorithms"
+description: "Core algorithm techniques for searching, sorting, traversal, and performance analysis."
+category: "Concepts"
+---
+
+## Getting Started
+
+Algorithms are step-by-step procedures for solving problems. The right algorithm makes code faster, more reliable, and easier to scale.
+
+### Complexity
+
+Measure performance using time and space complexity.
+
+- `O(1)` constant
+- `O(n)` linear
+- `O(n log n)` linearithmic
+- `O(n^2)` quadratic
+
+---
+
+## Searching
+
+Linear search examines every item; binary search divides the search space in half.
+
+```js
+function binarySearch(arr, target) {
+  let left = 0;
+  let right = arr.length - 1;
+
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    if (arr[mid] === target) return mid;
+    if (arr[mid] < target) left = mid + 1;
+    else right = mid - 1;
+  }
+
+  return -1;
+}
+```
+
+Use binary search on sorted data for fast lookup.
+
+---
+
+## Sorting
+
+Common sorts include quicksort, mergesort, and heapsort.
+
+- `O(n log n)` average for quicksort/mergesort
+- stable sorts preserve equal-item order
+
+JavaScript's native `array.sort()` is typically implemented as a tuned quicksort or mergesort.
+
+---
+
+## Traversal
+
+Traverse structures like trees and graphs using depth-first search (DFS) or breadth-first search (BFS).
+
+```js
+function dfs(node) {
+  if (!node) return;
+  console.log(node.value);
+  dfs(node.left);
+  dfs(node.right);
+}
+```
+
+---
+
+## Greedy algorithms
+
+Make the locally optimal choice at each step. Greedy strategies are simple and efficient but may not always produce the best global solution.
+
+---
+
+## Dynamic programming
+
+Use memoization or tabulation to avoid repeated work when subproblems overlap.
+
+```js
+const memo = {};
+function fib(n) {
+  if (n <= 1) return n;
+  if (memo[n]) return memo[n];
+  return (memo[n] = fib(n - 1) + fib(n - 2));
+}
+```
+
+---
+
+## Algorithm design
+
+Match the algorithm to the problem:
+
+- use sorting for order-related tasks
+- use search techniques for lookup tasks
+- use graph algorithms for networked data
+- use dynamic programming when overlapping subproblems appear

frontend/content/apis.mdx

@@ -0,0 +1,83 @@
+---
+title: "APIs"
+description: "Web API fundamentals for request design, REST principles, authentication, and client-server contracts."
+category: "Backend & systems"
+---
+
+## Getting Started
+
+APIs define how clients and servers communicate. HTTP-based APIs are the most common, using structured requests and responses.
+
+### HTTP Basics
+
+- `GET` for reading
+- `POST` for creating
+- `PUT` / `PATCH` for updating
+- `DELETE` for removing
+
+A typical request includes a URL, headers, and optionally a body.
+
+---
+
+## REST & Resources
+
+A RESTful API treats entities as resources and uses consistent URLs.
+
+```http
+GET /users
+POST /users
+GET /users/42
+PATCH /users/42
+DELETE /users/42
+```
+
+Use nouns for resources and avoid verb-based paths.
+
+---
+
+## Status Codes
+
+Use standardized HTTP status codes:
+
+- `200 OK` successful read
+- `201 Created` new resource created
+- `204 No Content` successful action with no body
+- `400 Bad Request` invalid input
+- `401 Unauthorized` missing credentials
+- `403 Forbidden` credentials are valid but not permitted
+- `404 Not Found` resource missing
+- `500 Internal Server Error` server failure
+
+---
+
+## Request & Response Body
+
+JSON is the most common payload format.
+
+```json
+{
+  "id": 42,
+  "name": "Alice",
+  "email": "alice@example.com"
+}
+```
+
+Include clear field names and consistent shapes.
+
+---
+
+## Authentication & Security
+
+Protect APIs with authentication and validation.
+
+- Use bearer tokens (`Authorization: Bearer <token>`)
+- Validate input on the server
+- Avoid leaking sensitive internals in error messages
+
+---
+
+## API Documentation
+
+Document available endpoints, request formats, and responses.
+
+OpenAPI/Swagger is a common standard for describing REST APIs and generating client code.