From ae50f90c6bb9ff97c686e0885e30a036ff81fb66 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 10:40:21 +0000
Subject: [PATCH 1/7] feat: add Mac sources, anchors, move portfolio to footer

- Add 6 Mac/Apple RSS sources (MacRumors, 9to5Mac, AppleInsider, Cult of Mac, MacWorld, Mac4Ever)
- Add anchor links for each category (#mac, #ai, #cybersecurity, #iot)
- Add visual separators between categories
- Move Portfolio link from header nav to footer on all pages

https://claude.ai/code/session_0138bAjho1fWwiRZju3nJFJ3
---
 about.html        |  3 ++-
 app.html          |  3 ++-
 index.html        |  3 ++-
 privacy.html      |  3 ++-
 src/aggregator.js | 29 +++++++++++++++++++++--------
 stats.html        |  3 ++-
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/about.html b/about.html
index 9b5cc7bd1..55c9abffe 100644
--- a/about.html
+++ b/about.html
@@ -68,7 +68,6 @@
         <nav class="nav-links">
             <a href="index.html">Home</a>
             <a href="app.html">Reader</a>
-            <a href="portfolio.html">Portfolio</a>
             <a href="about.html" class="active">About</a>
         </nav>
     </header>
@@ -143,6 +142,8 @@ <h2 style="color: #fff; margin-bottom: 1.5rem;">Privacy First</h2>
             <span>•</span>
             <a href="stats.html">Statistics</a>
             <span>•</span>
+            <a href="portfolio.html">Portfolio</a>
+            <span>•</span>
             <a href="about.html">ThePhoenixAgency</a>
             <span>•</span>
             <a href="https://github.com/ThePhoenixAgency/AI-Pulse" target="_blank">GitHub</a>
diff --git a/app.html b/app.html
index d7c4d29ce..6a9046d6b 100644
--- a/app.html
+++ b/app.html
@@ -36,7 +36,6 @@
         <nav class="nav-links">
             <a href="index.html">Home</a>
             <a href="app.html" class="active">Reader</a>
-            <a href="portfolio.html">Portfolio</a>
             <a href="about.html">About</a>
         </nav>
     </header>
@@ -51,6 +50,8 @@
             <span>•</span>
             <a href="stats.html">Statistics</a>
             <span>•</span>
+            <a href="portfolio.html">Portfolio</a>
+            <span>•</span>
             <a href="about.html">ThePhoenixAgency</a>
             <span>•</span>
             <a href="https://github.com/ThePhoenixAgency/AI-Pulse" target="_blank">GitHub</a>
diff --git a/index.html b/index.html
index f9118e678..da6172ab3 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,6 @@
         <nav class="nav-links">
             <a href="index.html" class="active">Home</a>
             <a href="app.html">Reader</a>
-            <a href="portfolio.html">Portfolio</a>
             <a href="about.html">About</a>
         </nav>
     </header>
@@ -95,6 +94,8 @@ <h3 style="color: var(--primary); margin-bottom: 10px;">Cybersecurity</h3>
             <span>•</span>
             <a href="stats.html">Statistics</a>
             <span>•</span>
+            <a href="portfolio.html">Portfolio</a>
+            <span>•</span>
             <a href="about.html">ThePhoenixAgency</a>
             <span>•</span>
             <a href="https://github.com/ThePhoenixAgency/AI-Pulse" target="_blank">GitHub</a>
diff --git a/privacy.html b/privacy.html
index d0abfd32d..7bfd4377a 100644
--- a/privacy.html
+++ b/privacy.html
@@ -63,7 +63,6 @@
         <nav class="nav-links">
             <a href="index.html">Home</a>
             <a href="app.html">Reader</a>
-            <a href="portfolio.html">Portfolio</a>
             <a href="about.html">About</a>
         </nav>
     </header>
@@ -161,6 +160,8 @@ <h2>7. Contact Us</h2>
             <span>•</span>
             <a href="stats.html">Statistics</a>
             <span>•</span>
+            <a href="portfolio.html">Portfolio</a>
+            <span>•</span>
             <a href="about.html">ThePhoenixAgency</a>
             <span>•</span>
             <a href="https://github.com/ThePhoenixAgency/AI-Pulse" target="_blank">GitHub</a>
diff --git a/src/aggregator.js b/src/aggregator.js
index 51e7e8521..00d7efd07 100644
--- a/src/aggregator.js
+++ b/src/aggregator.js
@@ -18,6 +18,14 @@ const parser = new Parser({
 
 // Scalable feed configuration by category
 const FEED_CATEGORIES = {
+  mac: [
+    { name: 'MacRumors', url: 'https://feeds.macrumors.com/MacRumors-All', tags: ['Mac', 'Apple', 'News'] },
+    { name: '9to5Mac', url: 'https://9to5mac.com/feed/', tags: ['Mac', 'Apple', 'iOS'] },
+    { name: 'AppleInsider', url: 'https://appleinsider.com/rss/news/', tags: ['Mac', 'Apple', 'Hardware'] },
+    { name: 'Cult of Mac', url: 'https://www.cultofmac.com/feed/', tags: ['Mac', 'Apple', 'Culture'] },
+    { name: 'MacWorld', url: 'https://www.macworld.com/feed', tags: ['Mac', 'Reviews', 'Guides'] },
+    { name: 'Mac4Ever', url: 'https://www.mac4ever.com/rss', tags: ['Mac', 'Apple', 'FR'] },
+  ],
   iot: [
     { name: 'Raspberry Pi', url: 'https://www.raspberrypi.com/news/feed/', tags: ['IoT', 'RaspberryPi', 'Tech'] },
     { name: 'Arduino Blog', url: 'https://blog.arduino.cc/feed/', tags: ['IoT', 'Arduino', 'Tech'] },
@@ -260,14 +268,21 @@ const README_FOOTER = `
 function generateREADME(categorizedArticles) {
   let readme = README_HEADER;
 
-  // Generate sections for each category
+  // Category titles mapping
+  const categoryTitles = {
+    mac: 'Mac & Apple',
+    ai: 'Artificial Intelligence',
+    cybersecurity: 'Cybersecurity',
+    iot: 'Internet of Things & Hardware'
+  };
+
+  // Generate sections for each category with anchors and visual separators
   for (const [category, articles] of Object.entries(categorizedArticles)) {
-    // No emojis
-    let title = 'General News';
-    if (category === 'ai') title = 'Artificial Intelligence';
-    else if (category === 'cybersecurity') title = 'Cybersecurity';
-    else if (category === 'iot') title = 'Internet of Things & Hardware';
+    const title = categoryTitles[category] || 'General News';
 
+    // Anchor and visual separator
+    readme += `<a id="${category}"></a>\n\n`;
+    readme += `---\n\n`;
     readme += `## ${title}\n\n`;
 
     if (articles.length === 0) {
@@ -281,8 +296,6 @@ function generateREADME(categorizedArticles) {
       readme += `**Source:** ${article.source} | **Tags:** ${tags}\n`;
       readme += `${article.summary}\n\n`;
     });
-
-    readme += `---\n\n`;
   }
 
   readme += README_FOOTER;
diff --git a/stats.html b/stats.html
index 4154861c4..dfbe267e5 100644
--- a/stats.html
+++ b/stats.html
@@ -58,7 +58,6 @@
         <nav class="nav-links">
             <a href="index.html">Home</a>
             <a href="app.html">Reader</a>
-            <a href="portfolio.html">Portfolio</a>
             <a href="about.html">About</a>
         </nav>
     </header>
@@ -129,6 +128,8 @@ <h1 style="text-align: center; margin-bottom: 3rem;">Statistics Dashboard (Local
             <span>•</span>
             <a href="stats.html">Statistics</a>
             <span>•</span>
+            <a href="portfolio.html">Portfolio</a>
+            <span>•</span>
             <a href="about.html">ThePhoenixAgency</a>
             <span>•</span>
             <a href="https://github.com/ThePhoenixAgency/AI-Pulse" target="_blank">GitHub</a>

From 38166c2377d0126498d071be3fa8661d1130b198 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 10:43:37 +0000
Subject: [PATCH 2/7] fix: remove Documentation badge linking to internal
 Supabase doc

https://claude.ai/code/session_0138bAjho1fWwiRZju3nJFJ3
---
 src/aggregator.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/aggregator.js b/src/aggregator.js
index 00d7efd07..386a5a3a5 100644
--- a/src/aggregator.js
+++ b/src/aggregator.js
@@ -227,7 +227,7 @@ const README_HEADER = `<div align="center">
 
 > Curated content from the best sources - Auto-updated every 3 hours
 
-[![GitHub Profile](https://img.shields.io/badge/GitHub-ThePhoenixAgency-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency) [![Repository](https://img.shields.io/badge/Source-Repo-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse) [![Reader](https://img.shields.io/badge/Live-Reader-blueviolet?style=for-the-badge&logo=readthedocs)](https://thephoenixagency.github.io/AI-Pulse/app.html) [![Documentation](https://img.shields.io/badge/Documentation-Technical-blue?style=for-the-badge&logo=googledocs)](https://github.com/ThePhoenixAgency/AI-Pulse/blob/main/database/SUPABASE_MIGRATION.md) [![Support](https://img.shields.io/badge/Support-Issues-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse/issues)
+[![GitHub Profile](https://img.shields.io/badge/GitHub-ThePhoenixAgency-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency) [![Repository](https://img.shields.io/badge/Source-Repo-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse) [![Reader](https://img.shields.io/badge/Live-Reader-blueviolet?style=for-the-badge&logo=readthedocs)](https://thephoenixagency.github.io/AI-Pulse/app.html) [![Support](https://img.shields.io/badge/Support-Issues-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse/issues)
 
 **Last Update:** ${new Date().toUTCString()}
 
@@ -255,7 +255,7 @@ const README_FOOTER = `
 
 ### Connect With Me
 
-[![GitHub Profile](https://img.shields.io/badge/GitHub-ThePhoenixAgency-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency) [![Repository](https://img.shields.io/badge/Source-Repo-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse) [![Reader](https://img.shields.io/badge/Live-Reader-blueviolet?style=for-the-badge&logo=readthedocs)](https://thephoenixagency.github.io/AI-Pulse/app.html) [![Documentation](https://img.shields.io/badge/Documentation-Technical-blue?style=for-the-badge&logo=googledocs)](https://github.com/ThePhoenixAgency/AI-Pulse/blob/main/database/SUPABASE_MIGRATION.md) [![Support](https://img.shields.io/badge/Support-Issues-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse/issues)
+[![GitHub Profile](https://img.shields.io/badge/GitHub-ThePhoenixAgency-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency) [![Repository](https://img.shields.io/badge/Source-Repo-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse) [![Reader](https://img.shields.io/badge/Live-Reader-blueviolet?style=for-the-badge&logo=readthedocs)](https://thephoenixagency.github.io/AI-Pulse/app.html) [![Support](https://img.shields.io/badge/Support-Issues-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse/issues)
 
 ---
 

From 6de3456d79a9eb504224721879f631acea615032 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 10:45:46 +0000
Subject: [PATCH 3/7] docs: update TECHNIQUE.md (bilingual EN/FR with flags),
 move Supabase doc to docs/, add Documentation badge

- TECHNIQUE.md: bilingual documentation (English first, French second) with flag anchors
- Moved SUPABASE_MIGRATION.md from database/ to docs/
- Documentation badge now points to docs/TECHNIQUE.md
- Updated for Mac sources and anchor navigation

https://claude.ai/code/session_0138bAjho1fWwiRZju3nJFJ3
---
 {database => docs}/SUPABASE_MIGRATION.md |   0
 docs/TECHNIQUE.md                        | 414 +++++++++++------------
 src/aggregator.js                        |   4 +-
 3 files changed, 204 insertions(+), 214 deletions(-)
 rename {database => docs}/SUPABASE_MIGRATION.md (100%)

diff --git a/database/SUPABASE_MIGRATION.md b/docs/SUPABASE_MIGRATION.md
similarity index 100%
rename from database/SUPABASE_MIGRATION.md
rename to docs/SUPABASE_MIGRATION.md
diff --git a/docs/TECHNIQUE.md b/docs/TECHNIQUE.md
index 068cfc3a8..d6eb2e8f3 100644
--- a/docs/TECHNIQUE.md
+++ b/docs/TECHNIQUE.md
@@ -1,28 +1,203 @@
-# Documentation Technique - AI-Pulse
+# AI-Pulse Technical Documentation
 
-## 📋 Vue d'ensemble
+<div align="center">
 
-AI-Pulse est un **agrégateur de flux RSS** spécialisé dans l'actualité **IA, Cybersécurité et IoT**. Le site collecte automatiquement des articles depuis des sources RSS, les nettoie, les enrichit et les publie sur une interface web moderne.
+**Language / Langue:**
+[🇬🇧 English](#english) | [🇫🇷 Français](#francais)
+
+</div>
+
+---
+
+<a id="english"></a>
+
+# 🇬🇧 English
+
+## Overview
+
+AI-Pulse is an **RSS feed aggregator** specialized in **AI, Cybersecurity, IoT, and Mac/Apple** news. The site automatically collects articles from RSS sources, cleans them, enriches them, and publishes them on a modern web interface.
+
+---
+
+## Project Architecture
+
+### File Structure
+
+```
+AI-Pulse/
+├── index.html              # Home page
+├── app.html                # Article reader
+├── about.html              # About page
+├── stats.html              # Statistics
+├── privacy.html            # Privacy policy
+├── 404.html                # Error page
+├── manifest.json           # PWA configuration
+├── css/
+│   └── style.css           # Global styles (cyberpunk theme)
+├── js/
+│   ├── ui.js               # UI interactions
+│   └── tracker.js          # Visit tracking
+├── assets/
+│   ├── banner.png          # Main banner
+│   ├── icon.png            # App icon
+│   └── logo_final.png      # Site logo
+├── src/
+│   └── aggregator.js       # Node.js RSS collection script
+├── data/
+│   └── articles/           # Extracted articles (auto-generated)
+└── .github/workflows/
+    ├── update-ai-pulse.yml # Auto-update workflow
+    └── deploy-pages.yml    # GitHub Pages deployment
+```
+
+---
+
+## How It Works
+
+### 1. Article Collection (Backend)
+
+**File:** `src/aggregator.js`
+
+#### Configured RSS Sources
+
+Sources are organized by category in `FEED_CATEGORIES`:
+
+```javascript
+const FEED_CATEGORIES = {
+  mac: [
+    { name: 'MacRumors', url: 'https://feeds.macrumors.com/MacRumors-All', tags: ['Mac', 'Apple'] },
+    { name: '9to5Mac', url: 'https://9to5mac.com/feed/', tags: ['Mac', 'Apple', 'iOS'] },
+    { name: 'Mac4Ever', url: 'https://www.mac4ever.com/rss', tags: ['Mac', 'Apple', 'FR'] },
+  ],
+  iot: [
+    { name: 'Raspberry Pi', url: 'https://www.raspberrypi.com/news/feed/', tags: ['IoT'] },
+    { name: 'Arduino Blog', url: 'https://blog.arduino.cc/feed/', tags: ['IoT', 'Arduino'] },
+  ],
+  ai: [
+    { name: 'Medium AI', url: 'https://medium.com/tag/artificial-intelligence/feed', tags: ['AI', 'ML'] },
+    { name: 'Google AI Blog', url: 'https://ai.googleblog.com/feeds/posts/default', tags: ['AI'] },
+  ],
+  cybersecurity: [
+    { name: 'The Hacker News', url: 'https://feeds.feedburner.com/TheHackersNews', tags: ['Security'] },
+    { name: 'Bleeping Computer', url: 'https://www.bleepingcomputer.com/feed/', tags: ['Security'] },
+  ]
+};
+```
+
+#### Collection Process
+
+1. **RSS Parsing**: Uses `rss-parser` to read each feed
+2. **HTML Cleaning**: `sanitize-html` removes scripts and dangerous tags
+3. **Content Extraction**: `@mozilla/readability` + `jsdom` for main text extraction
+4. **Deduplication**: MD5 hash of title to avoid duplicates
+5. **Enrichment**: Adding tags, categories, timestamps
+6. **Anchors**: Each category has an anchor link (`#mac`, `#ai`, `#cybersecurity`, `#iot`)
+
+#### Commands
+
+```bash
+npm install          # Install dependencies
+npm start            # Run collection manually
+```
 
 ---
 
-## 🏗️ Architecture du Projet
+### 2. Automatic Update (GitHub Actions)
+
+**File:** `.github/workflows/update-ai-pulse.yml`
+
+#### Triggers
+
+- **Manual**: Triggered manually via workflow_dispatch
+- **Cron**: Every 3 hours (`0 */3 * * *`)
+
+#### Workflow Steps
+
+1. Code checkout
+2. Node.js installation
+3. npm dependencies installation
+4. Execute `src/aggregator.js`
+5. Commit new README.md
+6. Auto push to `main`
+
+---
+
+### 3. User Interface (Frontend)
+
+#### Article Reader (`app.html`)
+
+**Features:**
+- Category filtering (Mac, AI, IoT, Cybersecurity)
+- Real-time search
+- Tag display
+- Links to original sources
+- Anchor navigation to each section
+
+#### Design (CSS)
+
+**Cyberpunk theme:**
+- Primary colors: Cyan (`#00d9ff`) and Violet (`#825ee4`)
+- Dark background: `#0a0e27`
+- Glow effects and gradients
+- Hover animations
+- Responsive (mobile-friendly)
+
+---
+
+## Deployment
+
+### GitHub Pages
+
+**File:** `.github/workflows/deploy-pages.yml`
+
+1. Enable in Settings → Pages → Source: GitHub Actions
+2. Workflow triggers on each push to `main`
+3. Site published at `https://thephoenixagency.github.io/AI-Pulse/`
+
+---
+
+## Technologies Used
+
+| Technology | Usage |
+|------------|-------|
+| **Node.js** | RSS collection backend |
+| **rss-parser** | RSS feed parsing |
+| **sanitize-html** | HTML cleaning |
+| **@mozilla/readability** | Content extraction |
+| **GitHub Actions** | Automation and CI/CD |
+| **GitHub Pages** | Free hosting |
+| **Vanilla JS** | Frontend (no framework) |
+| **CSS Grid/Flexbox** | Responsive layout |
+
+---
+
+<a id="francais"></a>
+
+# 🇫🇷 Français
+
+## Vue d'ensemble
+
+AI-Pulse est un **agrégateur de flux RSS** spécialisé dans l'actualité **IA, Cybersécurité, IoT et Mac/Apple**. Le site collecte automatiquement des articles depuis des sources RSS, les nettoie, les enrichit et les publie sur une interface web moderne.
+
+---
+
+## Architecture du Projet
 
 ### Structure des fichiers
 
 ```
 AI-Pulse/
 ├── index.html              # Page d'accueil
-├── app.html                # Lecteur d'articles (reader)
+├── app.html                # Lecteur d'articles
 ├── about.html              # Page À propos
 ├── stats.html              # Statistiques
 ├── privacy.html            # Politique de confidentialité
 ├── 404.html                # Page d'erreur
-├── manifest.json           # Configuration PWA (icônes, couleurs)
+├── manifest.json           # Configuration PWA
 ├── css/
-│   └── style.css           # Styles globaux (cyberpunk theme)
+│   └── style.css           # Styles globaux (thème cyberpunk)
 ├── js/
-│   ├── ui.js               # Interactions UI (scroll, animations)
+│   ├── ui.js               # Interactions UI
 │   └── tracker.js          # Tracking des visites
 ├── assets/
 │   ├── banner.png          # Bannière principale
@@ -31,7 +206,7 @@ AI-Pulse/
 ├── src/
 │   └── aggregator.js       # Script Node.js de collecte RSS
 ├── data/
-│   └── articles.json       # Articles collectés (généré automatiquement)
+│   └── articles/           # Articles extraits (généré automatiquement)
 └── .github/workflows/
     ├── update-ai-pulse.yml # Workflow de mise à jour automatique
     └── deploy-pages.yml    # Déploiement GitHub Pages
@@ -39,7 +214,7 @@ AI-Pulse/
 
 ---
 
-## 🔧 Fonctionnement Technique
+## Fonctionnement Technique
 
 ### 1. Collecte des Articles (Backend)
 
@@ -51,20 +226,22 @@ Les sources sont organisées par catégorie dans `FEED_CATEGORIES`:
 
 ```javascript
 const FEED_CATEGORIES = {
+  mac: [
+    { name: 'MacRumors', url: 'https://feeds.macrumors.com/MacRumors-All', tags: ['Mac', 'Apple'] },
+    { name: '9to5Mac', url: 'https://9to5mac.com/feed/', tags: ['Mac', 'Apple', 'iOS'] },
+    { name: 'Mac4Ever', url: 'https://www.mac4ever.com/rss', tags: ['Mac', 'Apple', 'FR'] },
+  ],
   iot: [
-    { name: 'Raspberry Pi', url: 'https://www.raspberrypi.com/news/feed/', tags: ['IoT', 'RaspberryPi'] },
+    { name: 'Raspberry Pi', url: 'https://www.raspberrypi.com/news/feed/', tags: ['IoT'] },
     { name: 'Arduino Blog', url: 'https://blog.arduino.cc/feed/', tags: ['IoT', 'Arduino'] },
-    // ... autres sources IoT
   ],
   ai: [
     { name: 'Medium AI', url: 'https://medium.com/tag/artificial-intelligence/feed', tags: ['AI', 'ML'] },
-    { name: 'Google AI Blog', url: 'https://ai.googleblog.com/feeds/posts/default', tags: ['AI', 'Research'] },
-    // ... autres sources IA
+    { name: 'Google AI Blog', url: 'https://ai.googleblog.com/feeds/posts/default', tags: ['AI'] },
   ],
   cybersecurity: [
     { name: 'The Hacker News', url: 'https://feeds.feedburner.com/TheHackersNews', tags: ['Security'] },
-    { name: 'Bleeping Computer', url: 'https://www.bleepingcomputer.com/feed/', tags: ['Security', 'Malware'] },
-    // ... autres sources Cybersécurité
+    { name: 'Bleeping Computer', url: 'https://www.bleepingcomputer.com/feed/', tags: ['Security'] },
   ]
 };
 ```
@@ -76,7 +253,7 @@ const FEED_CATEGORIES = {
 3. **Extraction de contenu** : `@mozilla/readability` + `jsdom` pour extraire le texte principal
 4. **Déduplication** : Hash MD5 du titre pour éviter les doublons
 5. **Enrichissement** : Ajout de tags, catégories, timestamps
-6. **Sauvegarde** : Écriture dans `data/articles.json`
+6. **Ancres** : Chaque catégorie a un lien ancre (`#mac`, `#ai`, `#cybersecurity`, `#iot`)
 
 #### Commandes
 
@@ -93,8 +270,8 @@ npm start            # Lancer la collecte manuellement
 
 #### Déclencheurs
 
-- **Webhook** : Déclenché manuellement ou par un service externe
-- **Cron** : Toutes les 6 heures (`0 */6 * * *`)
+- **Manuel** : Déclenché manuellement via workflow_dispatch
+- **Cron** : Toutes les 3 heures (`0 */3 * * *`)
 
 #### Étapes du workflow
 
@@ -102,44 +279,21 @@ npm start            # Lancer la collecte manuellement
 2. Installation de Node.js
 3. Installation des dépendances npm
 4. Exécution de `src/aggregator.js`
-5. Commit des nouveaux articles dans `data/articles.json`
+5. Commit du nouveau README.md
 6. Push automatique vers `main`
 
 ---
 
 ### 3. Interface Utilisateur (Frontend)
 
-#### Page d'accueil (`index.html`)
-
-- Bannière principale
-- Présentation des fonctionnalités
-- Bouton d'accès au lecteur
-- Lien vers l'application GitHub
-
 #### Lecteur d'articles (`app.html`)
 
-**Chargement dynamique :**
-
-```javascript
-fetch('./data/articles.json')
-  .then(response => response.json())
-  .then(articles => {
-    // Tri par date (plus récent en premier)
-    articles.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));
-    
-    // Affichage des cartes d'articles
-    articles.forEach(article => {
-      const card = createArticleCard(article);
-      container.appendChild(card);
-    });
-  });
-```
-
 **Fonctionnalités :**
-- Filtrage par catégorie (AI, IoT, Cybersecurity)
+- Filtrage par catégorie (Mac, AI, IoT, Cybersecurity)
 - Recherche en temps réel
 - Affichage des tags
 - Liens vers les sources originales
+- Navigation par ancres vers chaque section
 
 #### Design (CSS)
 
@@ -152,7 +306,7 @@ fetch('./data/articles.json')
 
 ---
 
-## 🚀 Déploiement
+## Déploiement
 
 ### GitHub Pages
 
@@ -162,145 +316,9 @@ fetch('./data/articles.json')
 2. Le workflow se déclenche à chaque push sur `main`
 3. Le site est publié sur `https://thephoenixagency.github.io/AI-Pulse/`
 
-### Configuration PWA (Progressive Web App)
-
-**Fichier:** `manifest.json`
-
-```json
-{
-  "name": "AI-Pulse",
-  "short_name": "AI-Pulse",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#0a0e27",
-  "theme_color": "#00d9ff",
-  "icons": [
-    {
-      "src": "./assets/icon.png",
-      "sizes": "1024x1024",
-      "type": "image/png"
-    }
-  ]
-}
-```
-
-**Permet :**
-- Installation sur l'écran d'accueil (mobile)
-- Fonctionnement en mode "app" (sans barre d'adresse)
-- Icône personnalisée
-
 ---
 
-## 🔄 Recréer un Projet Similaire
-
-### Étape 1 : Structure de base
-
-```bash
-mkdir mon-agregateur
-cd mon-agregateur
-npm init -y
-npm install rss-parser axios @octokit/rest sanitize-html @mozilla/readability jsdom
-```
-
-### Étape 2 : Configurer vos sources RSS
-
-Créez `src/aggregator.js` et définissez vos flux :
-
-```javascript
-const FEED_CATEGORIES = {
-  tech: [
-    { name: 'TechCrunch', url: 'https://techcrunch.com/feed/', tags: ['Tech', 'Startups'] },
-    { name: 'The Verge', url: 'https://www.theverge.com/rss/index.xml', tags: ['Tech', 'Reviews'] }
-  ],
-  // Ajoutez vos catégories ici
-};
-```
-
-### Étape 3 : Script de collecte
-
-Copiez la logique de `src/aggregator.js` :
-- Parser les flux RSS
-- Nettoyer le HTML
-- Sauvegarder dans `data/articles.json`
-
-### Étape 4 : Interface web
-
-Créez `index.html` et `app.html` :
-- Chargez `articles.json` avec `fetch()`
-- Affichez les articles dans des cartes
-- Ajoutez filtres et recherche
-
-### Étape 5 : Automatisation GitHub Actions
-
-Créez `.github/workflows/update.yml` :
-
-```yaml
-name: Update Articles
-on:
-  schedule:
-    - cron: '0 */6 * * *'  # Toutes les 6 heures
-  workflow_dispatch:
-
-jobs:
-  update:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-      - run: npm install
-      - run: node src/aggregator.js
-      - run: |
-          git config user.name "GitHub Actions"
-          git config user.email "actions@github.com"
-          git add data/articles.json
-          git commit -m "Update articles" || exit 0
-          git push
-```
-
-### Étape 6 : Déploiement
-
-1. Activez GitHub Pages dans Settings
-2. Créez `.github/workflows/deploy-pages.yml` (voir fichier existant)
-3. Poussez votre code → le site se déploie automatiquement
-
----
-
-## 📝 Personnalisation
-
-### Changer les sources RSS
-
-Modifiez `FEED_CATEGORIES` dans `src/aggregator.js` :
-
-```javascript
-const FEED_CATEGORIES = {
-  ma_categorie: [
-    { 
-      name: 'Mon Site Préféré', 
-      url: 'https://example.com/feed.xml', 
-      tags: ['Tag1', 'Tag2'] 
-    }
-  ]
-};
-```
-
-### Modifier le design
-
-Éditez `css/style.css` :
-- Variables CSS en haut du fichier (`--primary`, `--bg-dark`, etc.)
-- Changez les couleurs, polices, espacements
-
-### Ajouter des fonctionnalités
-
-- **Favoris** : Stockage dans `localStorage`
-- **Mode sombre/clair** : Toggle avec classe CSS
-- **Notifications** : API Notification du navigateur
-- **Partage** : API Web Share
-
----
-
-## 🛠️ Technologies Utilisées
+## Technologies Utilisées
 
 | Technologie | Usage |
 |------------|-------|
@@ -315,32 +333,4 @@ const FEED_CATEGORIES = {
 
 ---
 
-## 📊 Limites et Améliorations Possibles
-
-### Limites actuelles
-
-- Pas de base de données (tout en JSON)
-- Pas d'authentification utilisateur
-- Pas de backend temps réel
-- Dépend de GitHub Actions (quotas gratuits)
-
-### Améliorations futures
-
-1. **Backend API** : Express.js + MongoDB
-2. **Authentification** : Firebase Auth ou Supabase
-3. **Temps réel** : WebSockets pour les nouveaux articles
-4. **Recommandations** : Algorithme ML basé sur les lectures
-5. **Multilingue** : Support i18n (français, anglais, etc.)
-
----
-
-## 🔗 Ressources Utiles
-
-- [RSS Parser Documentation](https://www.npmjs.com/package/rss-parser)
-- [GitHub Actions Docs](https://docs.github.com/en/actions)
-- [PWA Guide](https://web.dev/progressive-web-apps/)
-- [Readability.js](https://github.com/mozilla/readability)
-
----
-
-**Créé par ThePhoenixAgency** | [GitHub](https://github.com/ThePhoenixAgency/AI-Pulse)
+**Created by ThePhoenixAgency** | [GitHub](https://github.com/ThePhoenixAgency/AI-Pulse)
diff --git a/src/aggregator.js b/src/aggregator.js
index 386a5a3a5..f46f699ff 100644
--- a/src/aggregator.js
+++ b/src/aggregator.js
@@ -227,7 +227,7 @@ const README_HEADER = `<div align="center">
 
 > Curated content from the best sources - Auto-updated every 3 hours
 
-[![GitHub Profile](https://img.shields.io/badge/GitHub-ThePhoenixAgency-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency) [![Repository](https://img.shields.io/badge/Source-Repo-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse) [![Reader](https://img.shields.io/badge/Live-Reader-blueviolet?style=for-the-badge&logo=readthedocs)](https://thephoenixagency.github.io/AI-Pulse/app.html) [![Support](https://img.shields.io/badge/Support-Issues-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse/issues)
+[![GitHub Profile](https://img.shields.io/badge/GitHub-ThePhoenixAgency-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency) [![Repository](https://img.shields.io/badge/Source-Repo-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse) [![Reader](https://img.shields.io/badge/Live-Reader-blueviolet?style=for-the-badge&logo=readthedocs)](https://thephoenixagency.github.io/AI-Pulse/app.html) [![Documentation](https://img.shields.io/badge/Documentation-Technical-blue?style=for-the-badge&logo=googledocs)](https://github.com/ThePhoenixAgency/AI-Pulse/blob/main/docs/TECHNIQUE.md) [![Support](https://img.shields.io/badge/Support-Issues-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse/issues)
 
 **Last Update:** ${new Date().toUTCString()}
 
@@ -255,7 +255,7 @@ const README_FOOTER = `
 
 ### Connect With Me
 
-[![GitHub Profile](https://img.shields.io/badge/GitHub-ThePhoenixAgency-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency) [![Repository](https://img.shields.io/badge/Source-Repo-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse) [![Reader](https://img.shields.io/badge/Live-Reader-blueviolet?style=for-the-badge&logo=readthedocs)](https://thephoenixagency.github.io/AI-Pulse/app.html) [![Support](https://img.shields.io/badge/Support-Issues-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse/issues)
+[![GitHub Profile](https://img.shields.io/badge/GitHub-ThePhoenixAgency-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency) [![Repository](https://img.shields.io/badge/Source-Repo-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse) [![Reader](https://img.shields.io/badge/Live-Reader-blueviolet?style=for-the-badge&logo=readthedocs)](https://thephoenixagency.github.io/AI-Pulse/app.html) [![Documentation](https://img.shields.io/badge/Documentation-Technical-blue?style=for-the-badge&logo=googledocs)](https://github.com/ThePhoenixAgency/AI-Pulse/blob/main/docs/TECHNIQUE.md) [![Support](https://img.shields.io/badge/Support-Issues-181717?style=for-the-badge&logo=github)](https://github.com/ThePhoenixAgency/AI-Pulse/issues)
 
 ---
 

From cebb32fcca9a38250363923a5ecc30a24705d94c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 10:46:38 +0000
Subject: [PATCH 4/7] docs: improve stats.html explanation (bilingual EN/FR)

Clarify that statistics are personal, stored locally in localStorage,
and no data is sent to any server.

https://claude.ai/code/session_0138bAjho1fWwiRZju3nJFJ3
---
 stats.html | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/stats.html b/stats.html
index dfbe267e5..049e82000 100644
--- a/stats.html
+++ b/stats.html
@@ -104,9 +104,16 @@ <h1 style="text-align: center; margin-bottom: 3rem;">Statistics Dashboard (Local
             </div>
         </div>
 
-        <div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 12px; margin-bottom: 40px;">
-            <p><strong>Note:</strong> Since this site runs without a backend database, statistics are tracking your
-                personal local session data stored in your browser. We cannot display data from other visitors globally.
+        <div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 12px; margin-bottom: 40px; border-left: 4px solid var(--primary);">
+            <p style="margin-bottom: 10px;"><strong>Your Personal Statistics</strong></p>
+            <p style="color: #94a3b8; margin-bottom: 15px;">
+                These statistics are stored locally in your browser (localStorage). They track only YOUR browsing activity on this site.
+                No data is sent to any server. You can clear them anytime by clearing your browser data.
+            </p>
+            <p style="margin-bottom: 10px;"><strong>Vos Statistiques Personnelles</strong></p>
+            <p style="color: #94a3b8;">
+                Ces statistiques sont stockées localement dans votre navigateur (localStorage). Elles suivent uniquement VOTRE activité sur ce site.
+                Aucune donnée n'est envoyée à un serveur. Vous pouvez les effacer à tout moment en vidant les données de votre navigateur.
             </p>
         </div>
     </div>

From a09e1307572979a771fcc6fd3fa844e0b9cae864 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 10:52:42 +0000
Subject: [PATCH 5/7] feat: add hidden backend.html for Supabase dashboard

- Sidebar menu with navigation (Dashboard, Home, Reader, Docs)
- Pages load in iframe while keeping menu visible
- Login overlay for Supabase authentication
- Stats dashboard placeholder for global analytics
- noindex/nofollow for search engine exclusion

https://claude.ai/code/session_0138bAjho1fWwiRZju3nJFJ3
---
 backend.html | 485 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 485 insertions(+)
 create mode 100644 backend.html

diff --git a/backend.html b/backend.html
new file mode 100644
index 000000000..6b6dd9683
--- /dev/null
+++ b/backend.html
@@ -0,0 +1,485 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI-Pulse</title>
+    <meta name="robots" content="noindex, nofollow">
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+    <link rel="apple-touch-icon" href="./assets/icon.png">
+    <link rel="stylesheet" href="./css/style.css">
+    <style>
+        :root {
+            --primary: #00d9ff;
+            --accent: #825ee4;
+            --text-light: #f0f0f0;
+            --text-dim: #94a3b8;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background: #0a0e27;
+            min-height: 100vh;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            color: var(--text-light);
+            display: flex;
+        }
+
+        /* Sidebar Menu */
+        .sidebar {
+            width: 220px;
+            background: rgba(0, 0, 0, 0.4);
+            border-right: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 20px 0;
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 0;
+        }
+
+        .sidebar-header {
+            padding: 0 20px 20px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            margin-bottom: 20px;
+        }
+
+        .sidebar-header img {
+            height: 40px;
+            mix-blend-mode: screen;
+        }
+
+        .sidebar-nav {
+            flex: 1;
+        }
+
+        .sidebar-nav a {
+            display: flex;
+            align-items: center;
+            padding: 12px 20px;
+            color: var(--text-dim);
+            text-decoration: none;
+            transition: all 0.2s;
+            border-left: 3px solid transparent;
+        }
+
+        .sidebar-nav a:hover,
+        .sidebar-nav a.active {
+            background: rgba(0, 217, 255, 0.1);
+            color: var(--primary);
+            border-left-color: var(--primary);
+        }
+
+        .sidebar-nav a svg {
+            width: 18px;
+            height: 18px;
+            margin-right: 12px;
+            opacity: 0.7;
+        }
+
+        .sidebar-section {
+            padding: 10px 20px 5px;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            color: var(--text-dim);
+            opacity: 0.6;
+            letter-spacing: 1px;
+        }
+
+        .sidebar-footer {
+            padding: 20px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            font-size: 0.8rem;
+            color: var(--text-dim);
+        }
+
+        /* Main Content Area */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .content-header {
+            padding: 15px 20px;
+            background: rgba(0, 0, 0, 0.3);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .content-header h2 {
+            font-size: 1.1rem;
+            color: var(--text-light);
+        }
+
+        .logout-btn {
+            padding: 8px 16px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 6px;
+            color: var(--text-light);
+            cursor: pointer;
+            font-size: 0.85rem;
+            transition: all 0.2s;
+        }
+
+        .logout-btn:hover {
+            background: rgba(255, 0, 0, 0.2);
+            border-color: rgba(255, 0, 0, 0.4);
+        }
+
+        .content-frame {
+            flex: 1;
+            border: none;
+            background: #0a0e27;
+        }
+
+        /* Login Overlay */
+        .login-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: #0a0e27;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+
+        .login-overlay.hidden {
+            display: none;
+        }
+
+        .login-container {
+            max-width: 400px;
+            width: 100%;
+            padding: 40px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .login-container h1 {
+            text-align: center;
+            margin-bottom: 30px;
+            color: var(--primary);
+        }
+
+        .login-form input {
+            width: 100%;
+            padding: 12px 16px;
+            margin-bottom: 15px;
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            color: var(--text-light);
+            font-size: 1rem;
+        }
+
+        .login-form input:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+
+        .login-form button {
+            width: 100%;
+            padding: 14px;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            border: none;
+            border-radius: 8px;
+            color: #0a0e27;
+            font-weight: 600;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .login-form button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(0, 217, 255, 0.3);
+        }
+
+        .error-message {
+            background: rgba(255, 0, 0, 0.1);
+            border: 1px solid rgba(255, 0, 0, 0.3);
+            color: #ff6b6b;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+            display: none;
+        }
+
+        .notice-box {
+            background: rgba(0, 217, 255, 0.1);
+            border: 1px solid rgba(0, 217, 255, 0.3);
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .notice-box h3 {
+            color: var(--primary);
+            margin-bottom: 10px;
+            font-size: 1rem;
+        }
+
+        /* Dashboard Content */
+        .dashboard-content {
+            padding: 30px;
+            overflow-y: auto;
+            height: 100%;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        .stat-card {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            padding: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .stat-card h3 {
+            color: var(--text-dim);
+            font-size: 0.85rem;
+            margin-bottom: 8px;
+        }
+
+        .stat-card .value {
+            color: var(--primary);
+            font-size: 2rem;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Login Overlay -->
+    <div id="login-overlay" class="login-overlay">
+        <div class="login-container">
+            <h1>Backend Access</h1>
+
+            <div class="notice-box">
+                <h3>Supabase Integration</h3>
+                <p style="color: var(--text-dim); font-size: 0.9rem;">
+                    This dashboard requires Supabase authentication.
+                    Configure your Supabase credentials in GitHub Secrets to enable global statistics tracking.
+                </p>
+            </div>
+
+            <div id="error-message" class="error-message"></div>
+
+            <form class="login-form" id="login-form">
+                <input type="email" id="email" placeholder="Email" required>
+                <input type="password" id="password" placeholder="Password" required>
+                <button type="submit">Sign In with Supabase</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Main Layout (hidden until logged in) -->
+    <aside class="sidebar" id="sidebar" style="display: none;">
+        <div class="sidebar-header">
+            <img src="./assets/logo_final.png" alt="AI-PULSE">
+        </div>
+
+        <nav class="sidebar-nav">
+            <div class="sidebar-section">Navigation</div>
+            <a href="#" data-page="dashboard" class="active">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
+                </svg>
+                Dashboard
+            </a>
+
+            <div class="sidebar-section">Site</div>
+            <a href="#" data-page="index.html">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+                </svg>
+                Home
+            </a>
+            <a href="#" data-page="app.html">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
+                </svg>
+                Reader
+            </a>
+
+            <div class="sidebar-section">Documentation</div>
+            <a href="#" data-page="docs/TECHNIQUE.md">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                </svg>
+                Technical Docs
+            </a>
+        </nav>
+
+        <div class="sidebar-footer">
+            AI-Pulse Backend
+        </div>
+    </aside>
+
+    <main class="main-content" id="main-content" style="display: none;">
+        <header class="content-header">
+            <h2 id="page-title">Dashboard</h2>
+            <button class="logout-btn" onclick="logout()">Logout</button>
+        </header>
+
+        <iframe id="content-frame" class="content-frame" style="display: none;"></iframe>
+
+        <div id="dashboard-view" class="dashboard-content">
+            <div class="notice-box">
+                <h3>Configuration Required</h3>
+                <p style="color: var(--text-dim);">
+                    To enable this dashboard, you need to:
+                </p>
+                <ol style="color: var(--text-dim); margin-left: 20px; margin-top: 10px; line-height: 1.8;">
+                    <li>Create a Supabase project at supabase.com</li>
+                    <li>Run the SQL schema from <code>docs/SUPABASE_MIGRATION.md</code></li>
+                    <li>Add <code>SUPABASE_URL</code> and <code>SUPABASE_ANON_KEY</code> to GitHub Secrets</li>
+                    <li>Update <code>tracker.js</code> to send data to Supabase</li>
+                </ol>
+            </div>
+
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <h3>Total Visitors</h3>
+                    <div class="value" id="global-visitors">—</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Page Views (30 days)</h3>
+                    <div class="value" id="global-pageviews">—</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Unique Sessions</h3>
+                    <div class="value" id="global-sessions">—</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Articles Read</h3>
+                    <div class="value" id="global-articles">—</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Top Country</h3>
+                    <div class="value" id="top-country" style="font-size: 1.2rem;">—</div>
+                </div>
+                <div class="stat-card">
+                    <h3>Active Today</h3>
+                    <div class="value" id="active-today">—</div>
+                </div>
+            </div>
+
+            <p style="color: var(--text-dim); text-align: center;">
+                Data will appear here once Supabase is configured and tracker.js is updated to send events.
+            </p>
+        </div>
+    </main>
+
+    <script>
+        const loginOverlay = document.getElementById('login-overlay');
+        const sidebar = document.getElementById('sidebar');
+        const mainContent = document.getElementById('main-content');
+        const loginForm = document.getElementById('login-form');
+        const errorMessage = document.getElementById('error-message');
+        const contentFrame = document.getElementById('content-frame');
+        const dashboardView = document.getElementById('dashboard-view');
+        const pageTitle = document.getElementById('page-title');
+
+        // Check if already logged in
+        function checkSession() {
+            const session = localStorage.getItem('supabase_session');
+            if (session) {
+                showDashboard();
+            }
+        }
+
+        // Login handler
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+
+            // Placeholder - actual Supabase auth would go here
+            errorMessage.style.display = 'block';
+            errorMessage.textContent = 'Supabase not configured. Add SUPABASE_URL and SUPABASE_ANON_KEY to enable authentication.';
+
+            /*
+            // Actual Supabase auth:
+            const { data, error } = await supabaseClient.auth.signInWithPassword({
+                email,
+                password
+            });
+
+            if (error) {
+                errorMessage.style.display = 'block';
+                errorMessage.textContent = error.message;
+            } else {
+                localStorage.setItem('supabase_session', JSON.stringify(data.session));
+                showDashboard();
+                loadStats();
+            }
+            */
+        });
+
+        function showDashboard() {
+            loginOverlay.classList.add('hidden');
+            sidebar.style.display = 'flex';
+            mainContent.style.display = 'flex';
+        }
+
+        function logout() {
+            localStorage.removeItem('supabase_session');
+            loginOverlay.classList.remove('hidden');
+            sidebar.style.display = 'none';
+            mainContent.style.display = 'none';
+        }
+
+        // Navigation handling
+        document.querySelectorAll('.sidebar-nav a').forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const page = link.dataset.page;
+
+                // Update active state
+                document.querySelectorAll('.sidebar-nav a').forEach(l => l.classList.remove('active'));
+                link.classList.add('active');
+
+                if (page === 'dashboard') {
+                    // Show dashboard view
+                    contentFrame.style.display = 'none';
+                    dashboardView.style.display = 'block';
+                    pageTitle.textContent = 'Dashboard';
+                } else {
+                    // Load page in iframe
+                    contentFrame.src = page;
+                    contentFrame.style.display = 'block';
+                    dashboardView.style.display = 'none';
+                    pageTitle.textContent = link.textContent.trim();
+                }
+            });
+        });
+
+        async function loadStats() {
+            // Placeholder - actual Supabase queries would go here
+        }
+
+        // Check session on load
+        checkSession();
+    </script>
+</body>
+
+</html>

From b05a6c1ef8bb616b9959f1d46325b2e32ab73316 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 10:57:26 +0000
Subject: [PATCH 6/7] refactor: update portfolio to AI-Pulse template

- Use cyberpunk dark theme matching site design
- Remove external iframe embedding
- Change links from EthanThePhoenix38 to ThePhoenixAgency
- Fix XSS vulnerability in dynamic project loading
- Make projects section configurable (not auto-fetched)

https://claude.ai/code/session_0138bAjho1fWwiRZju3nJFJ3
---
 portfolio.html | 595 +++++++++++++------------------------------------
 1 file changed, 159 insertions(+), 436 deletions(-)

diff --git a/portfolio.html b/portfolio.html
index 9fb59bb98..a988e4f99 100644
--- a/portfolio.html
+++ b/portfolio.html
@@ -1,99 +1,51 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Portfolio - ThePhoenixAgency</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
-        rel="stylesheet">
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+    <link rel="apple-touch-icon" href="./assets/icon.png">
+    <link rel="stylesheet" href="./css/style.css">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --primary-color: #5e72e4;
-            --secondary-color: #825ee4;
-            --accent-color: #f5365c;
-            --success-color: #2dce89;
-            --bg-primary: #ffffff;
-            --bg-secondary: #f8f9fa;
-            --bg-dark: #1a1d2e;
-            --text-primary: #2d3748;
-            --text-secondary: #64748b;
-            --text-light: #ffffff;
-            --border-color: #e2e8f0;
-            --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-            --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);
-            --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            min-height: 100vh;
-        }
-
-        /* Hero Section */
-        .hero {
-            background: var(--gradient);
-            color: white;
-            padding: 80px 20px 60px;
+        .portfolio-hero {
             text-align: center;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .hero::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="rgba(255,255,255,0.1)"></path></svg>') no-repeat bottom;
-            background-size: cover;
-            opacity: 0.3;
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 1;
-            max-width: 900px;
-            margin: 0 auto;
+            padding: 60px 20px 40px;
+            background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(130, 94, 228, 0.1));
+            border-radius: 20px;
+            margin-bottom: 40px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
 
         .profile-image {
-            width: 150px;
-            height: 150px;
+            width: 120px;
+            height: 120px;
             border-radius: 50%;
-            border: 5px solid white;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-            margin-bottom: 30px;
+            border: 4px solid var(--primary);
+            box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
+            margin-bottom: 20px;
             object-fit: cover;
         }
 
-        .hero h1 {
-            font-size: 48px;
-            font-weight: 800;
-            margin-bottom: 15px;
-            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        .portfolio-hero h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        .hero .tagline {
-            font-size: 20px;
-            opacity: 0.95;
-            margin-bottom: 30px;
-            font-weight: 400;
+        .portfolio-hero .tagline {
+            color: var(--text-dim);
+            font-size: 1.1rem;
+            margin-bottom: 25px;
         }
 
         .social-links {
             display: flex;
-            gap: 20px;
+            gap: 15px;
             justify-content: center;
             flex-wrap: wrap;
         }
@@ -101,62 +53,26 @@
         .social-link {
             display: inline-flex;
             align-items: center;
-            gap: 10px;
-            padding: 12px 24px;
-            background: rgba(255, 255, 255, 0.2);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50px;
-            color: white;
+            gap: 8px;
+            padding: 10px 20px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 30px;
+            color: var(--text-light);
             text-decoration: none;
-            font-weight: 500;
+            font-size: 0.9rem;
             transition: all 0.3s;
         }
 
         .social-link:hover {
-            background: rgba(255, 255, 255, 0.3);
-            transform: translateY(-3px);
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-        }
-
-        /* Container */
-        .container {
-            max-width: 1200px;
-            margin: -40px auto 60px;
-            padding: 0 20px;
-            position: relative;
-            z-index: 2;
+            background: rgba(0, 217, 255, 0.1);
+            border-color: var(--primary);
+            transform: translateY(-2px);
         }
 
-        /* Section Card */
-        .section-card {
-            background: white;
-            border-radius: 16px;
-            box-shadow: var(--shadow-lg);
-            padding: 40px;
-            margin-bottom: 30px;
-        }
-
-        .section-title {
-            font-size: 28px;
-            font-weight: 700;
-            margin-bottom: 10px;
-            color: var(--text-primary);
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .section-subtitle {
-            color: var(--text-secondary);
-            margin-bottom: 30px;
-            font-size: 16px;
-        }
-
-        /* Stats Grid */
         .stats-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
             gap: 20px;
             margin-bottom: 40px;
         }
@@ -164,98 +80,112 @@
         .stat-box {
             text-align: center;
             padding: 25px;
-            background: var(--bg-secondary);
+            background: rgba(255, 255, 255, 0.05);
             border-radius: 12px;
-            transition: transform 0.2s;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s;
         }
 
         .stat-box:hover {
+            border-color: var(--primary);
             transform: translateY(-5px);
         }
 
         .stat-number {
-            font-size: 32px;
+            font-size: 2rem;
             font-weight: 700;
-            color: var(--primary-color);
+            color: var(--primary);
             margin-bottom: 5px;
         }
 
         .stat-label {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
+            font-size: 0.85rem;
+            color: var(--text-dim);
+        }
+
+        .section-card {
+            background: rgba(255, 255, 255, 0.03);
+            border-radius: 16px;
+            padding: 30px;
+            margin-bottom: 30px;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+        }
+
+        .section-title {
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+            color: var(--text-light);
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
 
-        /* Project Grid */
         .projects-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 24px;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 20px;
         }
 
         .project-card {
-            background: var(--bg-secondary);
+            background: rgba(255, 255, 255, 0.05);
             border-radius: 12px;
-            padding: 24px;
-            border: 2px solid transparent;
+            padding: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
             transition: all 0.3s;
         }
 
         .project-card:hover {
-            border-color: var(--primary-color);
+            border-color: var(--primary);
             transform: translateY(-5px);
-            box-shadow: var(--shadow-lg);
+            box-shadow: 0 10px 30px rgba(0, 217, 255, 0.1);
         }
 
         .project-header {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 10px;
             margin-bottom: 12px;
         }
 
         .project-icon {
-            font-size: 32px;
+            font-size: 1.5rem;
         }
 
         .project-title {
-            font-size: 18px;
+            font-size: 1.1rem;
             font-weight: 600;
-            color: var(--text-primary);
+            color: var(--text-light);
         }
 
         .project-description {
-            color: var(--text-secondary);
-            margin-bottom: 16px;
+            color: var(--text-dim);
+            font-size: 0.9rem;
             line-height: 1.6;
-            font-size: 14px;
+            margin-bottom: 15px;
         }
 
         .project-tags {
             display: flex;
             gap: 8px;
             flex-wrap: wrap;
-            margin-bottom: 16px;
+            margin-bottom: 15px;
         }
 
         .tag {
-            background: var(--bg-primary);
-            color: var(--text-secondary);
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 12px;
-            font-weight: 500;
+            background: rgba(0, 217, 255, 0.1);
+            color: var(--primary);
+            padding: 4px 10px;
+            border-radius: 15px;
+            font-size: 0.75rem;
         }
 
         .project-link {
+            color: var(--primary);
+            text-decoration: none;
+            font-size: 0.9rem;
             display: inline-flex;
             align-items: center;
-            gap: 6px;
-            color: var(--primary-color);
-            text-decoration: none;
-            font-weight: 500;
-            font-size: 14px;
+            gap: 5px;
             transition: opacity 0.2s;
         }
 
@@ -263,113 +193,62 @@
             opacity: 0.7;
         }
 
-        /* Website Preview */
-        .website-preview {
-            width: 100%;
-            height: 600px;
-            border: none;
+        .org-info {
+            padding: 20px;
+            background: rgba(0, 217, 255, 0.05);
             border-radius: 12px;
-            box-shadow: var(--shadow-lg);
+            border-left: 4px solid var(--primary);
         }
 
-        /* Back Link */
-        .back-link {
-            text-align: center;
-            margin-top: 40px;
-            padding-bottom: 40px;
-        }
-
-        .back-link a {
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-            background: var(--gradient);
-            color: white;
-            padding: 14px 32px;
-            border-radius: 50px;
-            text-decoration: none;
-            font-weight: 600;
-            box-shadow: var(--shadow-lg);
-            transition: transform 0.2s;
-        }
-
-        .back-link a:hover {
-            transform: translateY(-3px);
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            .hero h1 {
-                font-size: 32px;
-            }
-
-            .hero .tagline {
-                font-size: 16px;
-            }
-
-            .section-card {
-                padding: 24px;
-            }
-
-            .projects-grid {
-                grid-template-columns: 1fr;
-            }
+        .org-info p {
+            color: var(--text-dim);
+            line-height: 1.8;
+            margin-bottom: 15px;
         }
     </style>
-
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LWN1RSPQMJ"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-        gtag('config', 'G-LWN1RSPQMJ');
-    </script>
-
-    <!-- DOMPurify for XSS protection -->
-    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script>
 </head>
 
 <body>
-    <!-- Hero Section -->
-    <div class="hero">
-        <div class="hero-content">
-            <img src="https://avatars.githubusercontent.com/u/EthanThePhoenix38?v=4" alt="Profile" class="profile-image"
-                onerror="this.src='https://via.placeholder.com/150'">
+    <!-- Header -->
+    <header class="site-header">
+        <div class="brand-logo">
+            <img src="./assets/logo_final.png" alt="AI-PULSE" style="height: 55px; mix-blend-mode: screen;">
+        </div>
+        <nav class="nav-links">
+            <a href="index.html">Home</a>
+            <a href="app.html">Reader</a>
+            <a href="about.html">About</a>
+        </nav>
+    </header>
+
+    <!-- Main Content -->
+    <div class="container fade-in" style="margin-top: 40px; flex: 1;">
+
+        <!-- Hero Section -->
+        <div class="portfolio-hero">
+            <img src="https://avatars.githubusercontent.com/ThePhoenixAgency?v=4" alt="Profile" class="profile-image"
+                onerror="this.src='./assets/icon.png'">
             <h1>ThePhoenixAgency</h1>
-            <p class="tagline">🚀 AI & Cybersecurity Specialist | Full Stack Developer | Open Source Contributor</p>
+            <p class="tagline">AI & Cybersecurity Specialist | Full Stack Developer | Open Source</p>
 
             <div class="social-links">
-                <a href="https://github.com/EthanThePhoenix38" target="_blank" class="social-link">
-                    <span>👤</span>
-                    <span>@EthanThePhoenix38</span>
-                </a>
                 <a href="https://github.com/ThePhoenixAgency" target="_blank" class="social-link">
-                    <span>🏢</span>
-                    <span>@ThePhoenixAgency</span>
+                    <span>GitHub</span>
                 </a>
                 <a href="https://ThePhoenixAgency.github.io" target="_blank" class="social-link">
-                    <span>🌐</span>
                     <span>Website</span>
                 </a>
             </div>
         </div>
-    </div>
 
-    <!-- Main Content -->
-    <div class="container">
         <!-- GitHub Stats -->
         <div class="section-card">
-            <h2 class="section-title">
-                <span>📊</span>
-                <span>GitHub Statistics</span>
-            </h2>
-            <p class="section-subtitle">Real-time metrics from my GitHub profile</p>
+            <h2 class="section-title">GitHub Statistics</h2>
 
             <div class="stats-grid">
                 <div class="stat-box">
                     <div class="stat-number" id="totalRepos">-</div>
-                    <div class="stat-label">Public Repositories</div>
+                    <div class="stat-label">Repositories</div>
                 </div>
                 <div class="stat-box">
                     <div class="stat-number" id="totalFollowers">-</div>
@@ -381,92 +260,53 @@ <h2 class="section-title">
                 </div>
                 <div class="stat-box">
                     <div class="stat-number" id="totalStars">-</div>
-                    <div class="stat-label">Total Stars</div>
+                    <div class="stat-label">Stars</div>
                 </div>
             </div>
         </div>
 
         <!-- Featured Projects -->
         <div class="section-card">
-            <h2 class="section-title">
-                <span>🌟</span>
-                <span>Featured Projects</span>
-            </h2>
-            <p class="section-subtitle">My most impactful open-source contributions</p>
-
-            <div class="projects-grid" id="projectsGrid">
-                <!-- AI-Pulse - Featured -->
+            <h2 class="section-title">Featured Projects</h2>
+
+            <div class="projects-grid">
+                <!-- AI-Pulse -->
                 <div class="project-card">
                     <div class="project-header">
                         <span class="project-icon">🤖</span>
                         <h3 class="project-title">AI-Pulse</h3>
                     </div>
                     <p class="project-description">
-                        Real-time AI & Cybersecurity news aggregator with anonymous analytics.
-                        Features iframe-based article reading, privacy-first tracking, and automated updates.
+                        Real-time AI & Cybersecurity news aggregator with privacy-first analytics and automated updates.
                     </p>
                     <div class="project-tags">
                         <span class="tag">JavaScript</span>
                         <span class="tag">Node.js</span>
                         <span class="tag">RSS</span>
-                        <span class="tag">Analytics</span>
                     </div>
                     <a href="https://github.com/ThePhoenixAgency/AI-Pulse" target="_blank" class="project-link">
-                        <span>View Project</span>
-                        <span>→</span>
+                        View Project →
                     </a>
                 </div>
 
-                <!-- Placeholder for other projects (will be loaded from GitHub API) -->
-                <div class="project-card" id="loadingProjects"
-                    style="grid-column: 1 / -1; text-align: center; padding: 40px;">
-                    <p style="color: var(--text-secondary);">Loading more projects from GitHub...</p>
-                </div>
+                <!-- Add more projects here as needed -->
             </div>
         </div>
 
-        <!-- Website Preview -->
-        <div class="section-card">
-            <h2 class="section-title">
-                <span>🌐</span>
-                <span>Official Website</span>
-            </h2>
-            <p class="section-subtitle">Explore ThePhoenixAgency.github.io</p>
-
-            <iframe src="https://ThePhoenixAgency.github.io" class="website-preview" title="ThePhoenixAgency Website"
-                sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
-        </div>
-
         <!-- Organization Info -->
         <div class="section-card">
-            <h2 class="section-title">
-                <span>🏢</span>
-                <span>Organization</span>
-            </h2>
-            <p class="section-subtitle">ThePhoenixAgency - Building the future of AI & Security</p>
-
-            <div style="padding: 20px; background: var(--bg-secondary); border-radius: 12px;">
-                <p style="line-height: 1.8; color: var(--text-primary); margin-bottom: 20px;">
-                    <strong>ThePhoenixAgency</strong> is dedicated to creating innovative solutions at the intersection
-                    of
+            <h2 class="section-title">About</h2>
+            <div class="org-info">
+                <p>
+                    <strong>ThePhoenixAgency</strong> creates innovative solutions at the intersection of
                     artificial intelligence and cybersecurity. Our open-source projects focus on privacy-first
-                    approaches,
-                    security by design, and accessible technology for everyone.
+                    approaches, security by design, and accessible technology.
                 </p>
                 <a href="https://github.com/ThePhoenixAgency" target="_blank" class="project-link">
-                    <span>Visit Organization</span>
-                    <span>→</span>
+                    Visit GitHub Organization →
                 </a>
             </div>
         </div>
-
-        <!-- Back to AI-Pulse -->
-        <div class="back-link">
-            <a href="index.html">
-                <span>←</span>
-                <span>Back to AI-Pulse Home</span>
-            </a>
-        </div>
     </div>
 
     <div class="elevator">
@@ -493,158 +333,41 @@ <h2 class="section-title">
         <p>&copy; 2026 AI-Pulse. All rights reserved.</p>
     </footer>
 
+    <script src="./js/tracker.js"></script>
+    <script src="./js/ui.js"></script>
     <script>
-        /**
-         * Fetch GitHub statistics
-         * Security: Only fetches public data, no authentication needed
-         */
+        // Fetch GitHub stats safely (read-only, public data)
         async function fetchGitHubStats() {
             try {
-                // Fetch user data
-                const userResponse = await fetch('https://api.github.com/users/EthanThePhoenix38');
-                const userData = await userResponse.json();
-
-                // Update stats (with fallback values)
-                document.getElementById('totalRepos').textContent = userData.public_repos || '-';
-                document.getElementById('totalFollowers').textContent = userData.followers || '-';
-                document.getElementById('totalFollowing').textContent = userData.following || '-';
-
-                // Fetch repositories for star count
-                const reposResponse = await fetch('https://api.github.com/users/EthanThePhoenix38/repos?per_page=100');
-                const repos = await reposResponse.json();
-
-                const totalStars = repos.reduce((sum, repo) => sum + (repo.stargazers_count || 0), 0);
-                document.getElementById('totalStars').textContent = totalStars;
-
-                // Load featured projects (excluding AI-Pulse which is already featured)
-                loadFeaturedProjects(repos.filter(repo => repo.name !== 'AI-Pulse'));
-
+                const response = await fetch('https://api.github.com/orgs/ThePhoenixAgency');
+                if (!response.ok) throw new Error('API error');
+                const data = await response.json();
+
+                const reposEl = document.getElementById('totalRepos');
+                const followersEl = document.getElementById('totalFollowers');
+                const followingEl = document.getElementById('totalFollowing');
+                const starsEl = document.getElementById('totalStars');
+
+                if (reposEl) reposEl.textContent = String(data.public_repos || 0);
+                if (followersEl) followersEl.textContent = String(data.followers || 0);
+                if (followingEl) followingEl.textContent = String(data.following || 0);
+
+                // Fetch repos for star count
+                const reposResponse = await fetch('https://api.github.com/orgs/ThePhoenixAgency/repos?per_page=100');
+                if (reposResponse.ok) {
+                    const repos = await reposResponse.json();
+                    if (Array.isArray(repos)) {
+                        const totalStars = repos.reduce((sum, repo) => sum + (repo.stargazers_count || 0), 0);
+                        if (starsEl) starsEl.textContent = String(totalStars);
+                    }
+                }
             } catch (error) {
-                console.error('Failed to fetch GitHub stats:', error);
-                const errP = document.createElement('p');
-                errP.style.color = 'var(--text-secondary)';
-                errP.textContent = 'Failed to load projects. Check your internet connection.';
-                document.getElementById('loadingProjects').appendChild(errP);
+                console.error('GitHub API error:', error);
             }
         }
 
-        /**
-         * Load featured projects from GitHub
-         * Security: All data is sanitized before display
-         */
-        function loadFeaturedProjects(repos) {
-            const projectsGrid = document.getElementById('projectsGrid');
-            const loadingElement = document.getElementById('loadingProjects');
-
-            // Sort by stars and get top 5
-            const featured = repos
-                .sort((a, b) => (b.stargazers_count || 0) - (a.stargazers_count || 0))
-                .slice(0, 5);
-
-            if (featured.length === 0) {
-                const noProjP = document.createElement('p');
-                noProjP.style.color = 'var(--text-secondary)';
-                noProjP.textContent = 'No additional projects found.';
-                loadingElement.appendChild(noProjP);
-                return;
-            }
-
-            // Remove loading message
-            loadingElement.remove();
-
-            // Add project cards
-            featured.forEach(repo => {
-                const card = document.createElement('div');
-                card.className = 'project-card';
-
-                // Create Header
-                const header = document.createElement('div');
-                header.className = 'project-header';
-
-                const icon = document.createElement('span');
-                icon.className = 'project-icon';
-                icon.textContent = '📦';
-
-                const title = document.createElement('h3');
-                title.className = 'project-title';
-                title.textContent = repo.name || 'Untitled';
-
-                header.appendChild(icon);
-                header.appendChild(title);
-
-                // Create Description
-                const desc = document.createElement('p');
-                desc.className = 'project-description';
-                desc.textContent = repo.description || 'No description available';
-
-                // Create Tags
-                const tagsCont = document.createElement('div');
-                tagsCont.className = 'project-tags';
-
-                const langTag = document.createElement('span');
-                langTag.className = 'tag';
-                langTag.textContent = repo.language || 'Unknown';
-
-                const starTag = document.createElement('span');
-                starTag.className = 'tag';
-                starTag.textContent = `⭐ ${repo.stargazers_count || 0}`;
-
-                const forkTag = document.createElement('span');
-                forkTag.className = 'tag';
-                forkTag.textContent = `🍴 ${repo.forks_count || 0}`;
-
-                tagsCont.appendChild(langTag);
-                tagsCont.appendChild(starTag);
-                tagsCont.appendChild(forkTag);
-
-                // Create Link
-                const link = document.createElement('a');
-                link.className = 'project-link';
-                link.target = '_blank';
-
-                // Validate URL
-                let url = '#';
-                if (repo.html_url) {
-                    try {
-                        const urlObj = new URL(repo.html_url);
-                        if (urlObj.protocol === 'http:' || urlObj.protocol === 'https:') {
-                            url = repo.html_url;
-                        }
-                    } catch (_) { }
-                }
-                link.href = url;
-
-                const linkText = document.createElement('span');
-                linkText.textContent = 'View Project';
-                const arrow = document.createElement('span');
-                arrow.textContent = '→';
-
-                link.appendChild(linkText);
-                link.appendChild(arrow);
-
-                // Assemble Card
-                card.appendChild(header);
-                card.appendChild(desc);
-                card.appendChild(tagsCont);
-                card.appendChild(link);
-
-                projectsGrid.appendChild(card);
-            });
-        }
-
-        /**
-         * Escape HTML to prevent XSS attacks
-         * Security: Essential for displaying user-generated content
-         */
-        function escapeHtml(text) {
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
-        }
-
-        // Load stats when page loads
         window.addEventListener('load', fetchGitHubStats);
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From 3ab6a75f1851ecea50f40dcda7ca319bde187780 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 10:58:36 +0000
Subject: [PATCH 7/7] feat: add configurable portfolio with fork filtering

- PORTFOLIO_CONFIG for customization
- hideForks: true by default
- featuredProjects: prioritize specific repos
- excludeProjects: hide unwanted repos
- Safe DOM manipulation (no innerHTML XSS)
- Sort by stars/updated/name

https://claude.ai/code/session_0138bAjho1fWwiRZju3nJFJ3
---
 portfolio.html | 228 ++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 187 insertions(+), 41 deletions(-)

diff --git a/portfolio.html b/portfolio.html
index a988e4f99..5c76e6a18 100644
--- a/portfolio.html
+++ b/portfolio.html
@@ -269,27 +269,10 @@ <h2 class="section-title">GitHub Statistics</h2>
         <div class="section-card">
             <h2 class="section-title">Featured Projects</h2>
 
-            <div class="projects-grid">
-                <!-- AI-Pulse -->
-                <div class="project-card">
-                    <div class="project-header">
-                        <span class="project-icon">🤖</span>
-                        <h3 class="project-title">AI-Pulse</h3>
-                    </div>
-                    <p class="project-description">
-                        Real-time AI & Cybersecurity news aggregator with privacy-first analytics and automated updates.
-                    </p>
-                    <div class="project-tags">
-                        <span class="tag">JavaScript</span>
-                        <span class="tag">Node.js</span>
-                        <span class="tag">RSS</span>
-                    </div>
-                    <a href="https://github.com/ThePhoenixAgency/AI-Pulse" target="_blank" class="project-link">
-                        View Project →
-                    </a>
+            <div class="projects-grid" id="projectsGrid">
+                <div class="project-card" id="loadingProjects">
+                    <p style="color: var(--text-dim); text-align: center; padding: 20px;">Loading projects...</p>
                 </div>
-
-                <!-- Add more projects here as needed -->
             </div>
         </div>
 
@@ -336,37 +319,200 @@ <h2 class="section-title">About</h2>
     <script src="./js/tracker.js"></script>
     <script src="./js/ui.js"></script>
     <script>
-        // Fetch GitHub stats safely (read-only, public data)
-        async function fetchGitHubStats() {
+        // ============================================
+        // PORTFOLIO CONFIGURATION - Edit this section
+        // ============================================
+        const PORTFOLIO_CONFIG = {
+            // GitHub organization or username
+            githubOrg: 'ThePhoenixAgency',
+
+            // Projects to feature (in order) - leave empty to auto-fetch
+            featuredProjects: [
+                'AI-Pulse'
+                // Add more: 'project-name'
+            ],
+
+            // Projects to exclude from display
+            excludeProjects: [
+                '.github',
+                'ThePhoenixAgency.github.io'
+            ],
+
+            // Hide forks completely
+            hideForks: true,
+
+            // Max projects to display (0 = unlimited)
+            maxProjects: 10,
+
+            // Sort by: 'stars', 'updated', 'name'
+            sortBy: 'stars'
+        };
+        // ============================================
+
+        // Escape HTML to prevent XSS
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text || '';
+            return div.innerHTML;
+        }
+
+        // Create project card safely (no innerHTML with user data)
+        function createProjectCard(repo) {
+            const card = document.createElement('div');
+            card.className = 'project-card';
+
+            const header = document.createElement('div');
+            header.className = 'project-header';
+
+            const icon = document.createElement('span');
+            icon.className = 'project-icon';
+            icon.textContent = '📦';
+
+            const title = document.createElement('h3');
+            title.className = 'project-title';
+            title.textContent = repo.name || 'Untitled';
+
+            header.appendChild(icon);
+            header.appendChild(title);
+
+            const desc = document.createElement('p');
+            desc.className = 'project-description';
+            desc.textContent = repo.description || 'No description available';
+
+            const tags = document.createElement('div');
+            tags.className = 'project-tags';
+
+            if (repo.language) {
+                const langTag = document.createElement('span');
+                langTag.className = 'tag';
+                langTag.textContent = repo.language;
+                tags.appendChild(langTag);
+            }
+
+            const starsTag = document.createElement('span');
+            starsTag.className = 'tag';
+            starsTag.textContent = '⭐ ' + (repo.stargazers_count || 0);
+            tags.appendChild(starsTag);
+
+            const link = document.createElement('a');
+            link.className = 'project-link';
+            link.href = repo.html_url || '#';
+            link.target = '_blank';
+            link.rel = 'noopener noreferrer';
+            link.textContent = 'View Project →';
+
+            card.appendChild(header);
+            card.appendChild(desc);
+            card.appendChild(tags);
+            card.appendChild(link);
+
+            return card;
+        }
+
+        // Fetch and display projects
+        async function loadPortfolio() {
+            const grid = document.getElementById('projectsGrid');
+            const loading = document.getElementById('loadingProjects');
+
             try {
-                const response = await fetch('https://api.github.com/orgs/ThePhoenixAgency');
-                if (!response.ok) throw new Error('API error');
-                const data = await response.json();
+                // Fetch org stats
+                const orgResponse = await fetch(`https://api.github.com/orgs/${PORTFOLIO_CONFIG.githubOrg}`);
+                if (orgResponse.ok) {
+                    const orgData = await orgResponse.json();
+                    const reposEl = document.getElementById('totalRepos');
+                    const followersEl = document.getElementById('totalFollowers');
+                    const followingEl = document.getElementById('totalFollowing');
+
+                    if (reposEl) reposEl.textContent = String(orgData.public_repos || 0);
+                    if (followersEl) followersEl.textContent = String(orgData.followers || 0);
+                    if (followingEl) followingEl.textContent = String(orgData.following || 0);
+                }
 
-                const reposEl = document.getElementById('totalRepos');
-                const followersEl = document.getElementById('totalFollowers');
-                const followingEl = document.getElementById('totalFollowing');
+                // Fetch repos
+                const reposResponse = await fetch(`https://api.github.com/orgs/${PORTFOLIO_CONFIG.githubOrg}/repos?per_page=100`);
+                if (!reposResponse.ok) throw new Error('Failed to fetch repos');
+
+                let repos = await reposResponse.json();
+                if (!Array.isArray(repos)) throw new Error('Invalid response');
+
+                // Calculate total stars
+                const totalStars = repos.reduce((sum, r) => sum + (r.stargazers_count || 0), 0);
                 const starsEl = document.getElementById('totalStars');
+                if (starsEl) starsEl.textContent = String(totalStars);
+
+                // Filter: hide forks
+                if (PORTFOLIO_CONFIG.hideForks) {
+                    repos = repos.filter(r => !r.fork);
+                }
+
+                // Filter: exclude specific projects
+                repos = repos.filter(r => !PORTFOLIO_CONFIG.excludeProjects.includes(r.name));
 
-                if (reposEl) reposEl.textContent = String(data.public_repos || 0);
-                if (followersEl) followersEl.textContent = String(data.followers || 0);
-                if (followingEl) followingEl.textContent = String(data.following || 0);
-
-                // Fetch repos for star count
-                const reposResponse = await fetch('https://api.github.com/orgs/ThePhoenixAgency/repos?per_page=100');
-                if (reposResponse.ok) {
-                    const repos = await reposResponse.json();
-                    if (Array.isArray(repos)) {
-                        const totalStars = repos.reduce((sum, repo) => sum + (repo.stargazers_count || 0), 0);
-                        if (starsEl) starsEl.textContent = String(totalStars);
+                // Sort
+                if (PORTFOLIO_CONFIG.sortBy === 'stars') {
+                    repos.sort((a, b) => (b.stargazers_count || 0) - (a.stargazers_count || 0));
+                } else if (PORTFOLIO_CONFIG.sortBy === 'updated') {
+                    repos.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
+                } else if (PORTFOLIO_CONFIG.sortBy === 'name') {
+                    repos.sort((a, b) => a.name.localeCompare(b.name));
+                }
+
+                // Prioritize featured projects
+                if (PORTFOLIO_CONFIG.featuredProjects.length > 0) {
+                    const featured = [];
+                    const others = [];
+
+                    for (const repo of repos) {
+                        if (PORTFOLIO_CONFIG.featuredProjects.includes(repo.name)) {
+                            featured.push(repo);
+                        } else {
+                            others.push(repo);
+                        }
                     }
+
+                    // Sort featured by config order
+                    featured.sort((a, b) => {
+                        return PORTFOLIO_CONFIG.featuredProjects.indexOf(a.name) -
+                               PORTFOLIO_CONFIG.featuredProjects.indexOf(b.name);
+                    });
+
+                    repos = [...featured, ...others];
                 }
+
+                // Limit
+                if (PORTFOLIO_CONFIG.maxProjects > 0) {
+                    repos = repos.slice(0, PORTFOLIO_CONFIG.maxProjects);
+                }
+
+                // Clear loading
+                if (loading) loading.remove();
+
+                // Display projects
+                if (repos.length === 0) {
+                    const msg = document.createElement('p');
+                    msg.style.color = 'var(--text-dim)';
+                    msg.textContent = 'No projects to display.';
+                    grid.appendChild(msg);
+                    return;
+                }
+
+                for (const repo of repos) {
+                    grid.appendChild(createProjectCard(repo));
+                }
+
             } catch (error) {
-                console.error('GitHub API error:', error);
+                console.error('Portfolio error:', error);
+                if (loading) {
+                    loading.innerHTML = '';
+                    const msg = document.createElement('p');
+                    msg.style.color = 'var(--text-dim)';
+                    msg.textContent = 'Failed to load projects.';
+                    loading.appendChild(msg);
+                }
             }
         }
 
-        window.addEventListener('load', fetchGitHubStats);
+        window.addEventListener('load', loadPortfolio);
     </script>
 </body>