Deploy professional portfolio landing page - CyberSec & AI

README.md

@@ -1,12 +1,32 @@
 ---
 title: Portfolio CyberSec AI
-emoji: ⚡
-colorFrom: yellow
-colorTo: yellow
+emoji: "\U0001F6E1\uFE0F"
+colorFrom: red
+colorTo: purple
 sdk: gradio
-sdk_version: 6.6.0
+sdk_version: 5.12.0
 app_file: app.py
-pinned: false
+pinned: true
+license: apache-2.0
+tags:
+  - portfolio
+  - cybersecurity
+  - ai
+  - consultant
+  - ayinedjimi-consultants
+short_description: "Senior Offensive Cybersecurity & AI Consultant Portfolio"
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Portfolio - AYI NEDJIMI
+
+Senior Offensive Cybersecurity & AI Consultant
+
+Professional portfolio showcasing 4 fine-tuned models, 40 interactive Spaces, 85 cybersecurity datasets, and published research articles on Hugging Face.
+
+## Links
+
+- Website: https://www.ayinedjimi-consultants.fr
+- LinkedIn: https://www.linkedin.com/in/ayi-nedjimi
+- GitHub: https://github.com/ayinedjimi
+- Twitter/X: https://x.com/AyiNEDJIMI
+- Collection: https://huggingface.co/collections/AYI-NEDJIMI/cybersec-ai-portfolio-datasets-models-and-spaces-699224074a478ec0feeac493

app.py

@@ -0,0 +1,833 @@
+"""
+Portfolio - AYI NEDJIMI
+Senior Offensive Cybersecurity & AI Consultant
+"""
+
+import gradio as gr
+import requests
+import json
+from datetime import datetime
+
+# ============================================================
+# DATA
+# ============================================================
+
+MODELS = [
+    {
+        "name": "m365-expert-v3",
+        "full": "AYI-NEDJIMI/m365-expert-v3",
+        "desc": "Expert-level Microsoft 365 administration assistant covering PowerShell, Microsoft Graph, Entra ID, SharePoint, Exchange Online, Intune, and Teams. Full GGUF quantized versions available for Ollama deployment.",
+        "base": "Qwen/Qwen3-8B",
+        "tags": ["Microsoft 365", "PowerShell", "Graph API", "Entra ID", "GGUF", "Ollama"],
+        "lang": "FR / EN",
+        "method": "QLoRA Fine-tuning",
+        "downloads": 25,
+    },
+    {
+        "name": "CyberSec-Assistant-3B",
+        "full": "AYI-NEDJIMI/CyberSec-Assistant-3B",
+        "desc": "Cybersecurity compliance assistant covering GDPR/RGPD, NIS2, DORA, AI Act, ISO 27001, MITRE ATT&CK, OWASP, pentesting, SOC operations, Zero Trust, and DevSecOps.",
+        "base": "Qwen/Qwen2.5-3B-Instruct",
+        "tags": ["Cybersecurity", "Compliance", "GDPR", "NIS2", "MITRE ATT&CK", "OWASP"],
+        "lang": "FR / EN",
+        "method": "QLoRA + LoRA Fine-tuning",
+        "downloads": 12,
+    },
+    {
+        "name": "ISO27001-Expert-1.5B",
+        "full": "AYI-NEDJIMI/ISO27001-Expert-1.5B",
+        "desc": "Specialized ISO/IEC 27001:2022 expert for information security management systems (ISMS), risk management, security controls, and audit procedures.",
+        "base": "Qwen/Qwen2.5-1.5B-Instruct",
+        "tags": ["ISO 27001", "ISMS", "Compliance", "Risk Management", "Audit"],
+        "lang": "FR / EN",
+        "method": "QLoRA Fine-tuning",
+        "downloads": 11,
+    },
+    {
+        "name": "RGPD-Expert-1.5B",
+        "full": "AYI-NEDJIMI/RGPD-Expert-1.5B",
+        "desc": "GDPR/RGPD data protection expert covering DPO, DPIA, consent management, breach notification procedures, and privacy compliance frameworks.",
+        "base": "Qwen/Qwen2.5-1.5B-Instruct",
+        "tags": ["GDPR", "RGPD", "Data Protection", "Privacy", "DPO", "DPIA"],
+        "lang": "FR / EN",
+        "method": "QLoRA + LoRA Fine-tuning",
+        "downloads": 12,
+    },
+]
+
+SPACES_BY_CATEGORY = {
+    "Security Explorers": [
+        ("iso27001-explorer", "ISO 27001 Explorer", "Interactive ISO 27001:2022 standard explorer"),
+        ("mitre-attack-explorer", "MITRE ATT&CK Explorer", "Navigate the MITRE ATT&CK framework"),
+        ("ad-attack-explorer", "AD Attack Explorer", "Active Directory attack techniques"),
+        ("owasp-top10-explorer", "OWASP Top 10 Explorer", "OWASP Top 10 vulnerabilities reference"),
+        ("zero-trust-explorer", "Zero Trust Explorer", "Zero Trust architecture principles"),
+        ("soc-analyst-explorer", "SOC Analyst Explorer", "SOC analyst operations guide"),
+        ("bug-bounty-pentest-explorer", "Bug Bounty & Pentest Explorer", "Bug bounty and penetration testing"),
+        ("devsecops-pipeline-explorer", "DevSecOps Pipeline Explorer", "DevSecOps pipeline reference"),
+    ],
+    "Security Tools": [
+        ("cve-lookup-tool", "CVE Lookup Tool", "Search and analyze CVE vulnerabilities"),
+        ("attack-path-visualizer", "Attack Path Visualizer", "Visualize attack paths with MITRE ATT&CK"),
+        ("security-assessment-generator", "Security Assessment Generator", "Generate security assessments"),
+        ("ad-attack-simulator", "AD Attack Simulator", "Simulate Active Directory attacks"),
+        ("ssrf-payload-generator", "SSRF Payload Generator", "Generate SSRF test payloads"),
+        ("ad-tiering-builder", "AD Tiering Builder", "Build Active Directory tiering models"),
+        ("kql-threat-hunting", "KQL Threat Hunting", "KQL queries for threat hunting"),
+        ("edr-evasion-explorer", "EDR Evasion Explorer", "EDR evasion techniques analysis"),
+        ("sbom-generator", "SBOM Generator", "Software Bill of Materials generator"),
+        ("forensics-timeline-builder", "Forensics Timeline Builder", "Digital forensics timeline builder"),
+    ],
+    "Compliance & GRC": [
+        ("compliance-checker", "Compliance Checker", "Multi-framework compliance assessment"),
+        ("m365-security-scorecard", "M365 Security Scorecard", "Microsoft 365 security scoring"),
+        ("ai-act-risk-classifier", "AI Act Risk Classifier", "EU AI Act risk classification"),
+        ("pqc-migration-planner", "PQC Migration Planner", "Post-quantum crypto migration planning"),
+        ("dora-assessment", "DORA Assessment", "DORA compliance assessment"),
+        ("Compliance-Assistant", "Compliance Assistant", "GDPR, ISO 27001, NIS2 compliance help"),
+        ("rgpd-gdpr-explorer", "RGPD/GDPR Explorer", "RGPD/GDPR regulation explorer"),
+        ("nis2-directive-explorer", "NIS2 Directive Explorer", "NIS2 directive requirements"),
+        ("cybersecurity-quiz", "Cybersecurity Quiz", "Interactive security training quiz"),
+    ],
+    "AI / ML Tools": [
+        ("rag-langchain-explorer", "RAG LangChain Explorer", "RAG pipeline with LangChain"),
+        ("prompt-engineering-explorer", "Prompt Engineering Explorer", "Prompt engineering techniques"),
+        ("mlops-infrastructure-explorer", "MLOps Infrastructure Explorer", "MLOps infrastructure reference"),
+        ("ai-agents-explorer", "AI Agents Explorer", "AI agents architecture patterns"),
+        ("llm-finetuning-explorer", "LLM Fine-tuning Explorer", "LLM fine-tuning methodologies"),
+        ("ai-code-multimodal-explorer", "AI Code & Multimodal Explorer", "Code generation and multimodal AI"),
+        ("ai-cybersecurity-explorer", "AI Cybersecurity Explorer", "AI for cybersecurity applications"),
+        ("ai-governance-explorer", "AI Governance Explorer", "AI governance frameworks"),
+    ],
+    "Model Demos": [
+        ("CyberSec-Models-Demo", "CyberSec Models Demo", "Interactive cybersecurity model demos"),
+        ("Model-Playground", "Model Playground", "Compare ISO27001, GDPR, RGPD models"),
+        ("CyberSec-Chat-RAG", "CyberSec Chat RAG", "RAG-powered cybersecurity chat"),
+        ("Dataset-Explorer", "Dataset Explorer", "Explore all cybersecurity datasets"),
+        ("portfolio", "Portfolio (Static)", "Original static portfolio page"),
+    ],
+}
+
+DATASETS_BY_DOMAIN = {
+    "Standards & Frameworks": [
+        "iso27001", "iso27001-en", "nist-csf-fr", "nist-csf-en",
+        "cis-controls-fr", "cis-controls-en", "mitre-attack-fr", "mitre-attack-en"
+    ],
+    "Offensive Security": [
+        "ad-attacks-fr", "ad-attacks-en", "owasp-top10-fr", "owasp-top10-en",
+        "pentest-checklist-fr", "pentest-checklist-en", "cve-top100-fr", "cve-top100-en"
+    ],
+    "EU Regulations & Compliance": [
+        "compliance-eu-fr", "compliance-eu-en", "ai-act-fr", "ai-act-en",
+        "dora-controls-fr", "dora-controls-en", "rgpd-fr", "rgpd-en"
+    ],
+    "Incident Response & DFIR": [
+        "incident-response-fr", "incident-response-en", "forensics-windows-fr",
+        "forensics-windows-en", "ransomware-playbooks-fr", "ransomware-playbooks-en"
+    ],
+    "Cloud & Infrastructure Security": [
+        "cloud-security-fr", "cloud-security-en", "k8s-security-fr", "k8s-security-en",
+        "m365-security-fr", "m365-security-en"
+    ],
+    "SOC & Threat Intelligence": [
+        "threat-hunting-soc-fr", "threat-hunting-soc-en",
+        "oauth-api-security-fr", "oauth-api-security-en"
+    ],
+    "Emerging Technologies": [
+        "post-quantum-crypto-fr", "post-quantum-crypto-en",
+        "llm-security-fr", "llm-security-en"
+    ],
+    "Supply Chain & SBOM": [
+        "sbom-compliance-fr", "sbom-compliance-en",
+        "supply-chain-attacks-fr", "supply-chain-attacks-en"
+    ],
+    "M365 & Microsoft Admin": [
+        "m365-admin-fr", "m365-admin-en", "m365-expert-v3-training"
+    ],
+}
+
+ARTICLES = [
+    {"title": "JavaScript-Code-Large - A 5M file JavaScript corpus for LLM pretraining", "slug": "551299945389829"},
+    {"title": "Casino Benchmark: Dataset + Space for evaluating LLM performance", "slug": "490691201493061"},
+    {"title": "Tiny Aya - Multilingual model release analysis", "slug": "682471247625526"},
+    {"title": "134,614 tok/sec input prefill max - Performance benchmarks", "slug": "139250541798125"},
+    {"title": "FEETECH STS3215 Stress-Test: Real backlash measurements", "slug": "621296339305286"},
+    {"title": "OpenClaw - Exploring new possibilities in robotics", "slug": "419291286474435"},
+    {"title": "GLiClass-Instruct: One Model to Classify, Verify, and Guard", "slug": "352121818088184"},
+    {"title": "AI Privacy Tool Validation Against World-Class Benchmarks", "slug": "749099860276897"},
+    {"title": "Spartacus-1B-Instruct: O(1) Inference Foundational Design", "slug": "866420978580038"},
+    {"title": "3B vs 120B: Open-Source LLMs Running Locally on Mac", "slug": "199749719779775"},
+]
+
+# ============================================================
+# CSS
+# ============================================================
+
+CUSTOM_CSS = """
+/* Global dark cybersec theme */
+:root {
+    --bg-primary: #0a0a0f;
+    --bg-secondary: #12121a;
+    --bg-card: #1a1a2e;
+    --bg-card-hover: #20203a;
+    --accent-red: #e63946;
+    --accent-purple: #9b59b6;
+    --accent-gradient: linear-gradient(135deg, #e63946 0%, #9b59b6 50%, #6c3483 100%);
+    --text-primary: #e8e8f0;
+    --text-secondary: #a0a0b8;
+    --text-muted: #6c6c88;
+    --border-color: #2a2a40;
+    --glow-red: 0 0 20px rgba(230,57,70,0.3);
+    --glow-purple: 0 0 20px rgba(155,89,182,0.3);
+}
+
+.gradio-container {
+    background: var(--bg-primary) !important;
+    max-width: 100% !important;
+    padding: 0 !important;
+}
+
+.tab-nav button {
+    color: var(--text-secondary) !important;
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    font-weight: 600 !important;
+    font-size: 0.95rem !important;
+    padding: 12px 24px !important;
+    border-radius: 8px 8px 0 0 !important;
+    transition: all 0.3s ease !important;
+}
+
+.tab-nav button:hover {
+    color: var(--accent-red) !important;
+    background: var(--bg-card) !important;
+}
+
+.tab-nav button.selected {
+    color: #fff !important;
+    background: var(--accent-gradient) !important;
+    border-color: var(--accent-red) !important;
+}
+
+footer { display: none !important; }
+"""
+
+# ============================================================
+# HTML SECTIONS
+# ============================================================
+
+def build_hero_html():
+    return """
+<div style="
+    background: linear-gradient(135deg, #0a0a0f 0%, #1a0a1e 30%, #0f0a1a 60%, #1a0510 100%);
+    padding: 80px 20px 60px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    border-bottom: 2px solid #2a2a40;
+">
+    <!-- Animated background grid -->
+    <div style="
+        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+        background-image:
+            linear-gradient(rgba(230,57,70,0.05) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(230,57,70,0.05) 1px, transparent 1px);
+        background-size: 50px 50px;
+        opacity: 0.5;
+    "></div>
+
+    <!-- Glow orbs -->
+    <div style="position:absolute;top:10%;left:15%;width:200px;height:200px;background:radial-gradient(circle,rgba(230,57,70,0.15),transparent 70%);border-radius:50%;filter:blur(40px);"></div>
+    <div style="position:absolute;bottom:10%;right:15%;width:250px;height:250px;background:radial-gradient(circle,rgba(155,89,182,0.15),transparent 70%);border-radius:50%;filter:blur(40px);"></div>
+
+    <div style="position: relative; z-index: 1;">
+        <!-- Shield icon -->
+        <div style="
+            width: 100px; height: 100px; margin: 0 auto 24px;
+            background: linear-gradient(135deg, #e63946, #9b59b6);
+            border-radius: 50%;
+            display: flex; align-items: center; justify-content: center;
+            box-shadow: 0 0 40px rgba(230,57,70,0.4), 0 0 80px rgba(155,89,182,0.2);
+            font-size: 48px; line-height: 1;
+        ">
+            <span style="filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));">&#x1F6E1;</span>
+        </div>
+
+        <h1 style="
+            font-size: 3.2rem; font-weight: 800;
+            background: linear-gradient(135deg, #fff 0%, #e63946 50%, #9b59b6 100%);
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin: 0 0 12px; letter-spacing: -1px;
+        ">AYI NEDJIMI</h1>
+
+        <p style="
+            font-size: 1.35rem; color: #e63946; font-weight: 600;
+            margin: 0 0 16px; letter-spacing: 1px; text-transform: uppercase;
+        ">Senior Offensive Cybersecurity & AI Consultant</p>
+
+        <p style="
+            font-size: 1.05rem; color: #a0a0b8; max-width: 700px; margin: 0 auto 32px;
+            line-height: 1.6;
+        ">
+            Building the bridge between offensive cybersecurity and artificial intelligence.
+            Fine-tuned models, 85+ bilingual datasets, and 40 interactive tools for the security community.
+        </p>
+
+        <!-- CTA Buttons -->
+        <div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
+            <a href="https://www.ayinedjimi-consultants.fr" target="_blank" style="
+                padding: 12px 28px; border-radius: 8px;
+                background: linear-gradient(135deg, #e63946, #9b59b6);
+                color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem;
+                box-shadow: 0 4px 20px rgba(230,57,70,0.4);
+                transition: transform 0.2s, box-shadow 0.2s;
+            ">Visit Website</a>
+            <a href="https://huggingface.co/collections/AYI-NEDJIMI/cybersec-ai-portfolio-datasets-models-and-spaces-699224074a478ec0feeac493" target="_blank" style="
+                padding: 12px 28px; border-radius: 8px;
+                border: 2px solid #e63946; background: transparent;
+                color: #e63946; text-decoration: none; font-weight: 700; font-size: 0.95rem;
+                transition: background 0.2s, color 0.2s;
+            ">View Full Collection</a>
+            <a href="https://www.linkedin.com/in/ayi-nedjimi" target="_blank" style="
+                padding: 12px 28px; border-radius: 8px;
+                border: 2px solid #9b59b6; background: transparent;
+                color: #9b59b6; text-decoration: none; font-weight: 700; font-size: 0.95rem;
+            ">LinkedIn</a>
+        </div>
+    </div>
+</div>
+"""
+
+
+def build_stats_html(stats):
+    cards = [
+        ("&#x1F916;", "Fine-tuned Models", str(stats.get("models", 4)), "Custom cybersecurity LLMs"),
+        ("&#x1F680;", "Interactive Spaces", str(stats.get("spaces", 40)), "Tools, demos & explorers"),
+        ("&#x1F4CA;", "Datasets Published", str(stats.get("datasets", 85)), "Bilingual FR/EN datasets"),
+        ("&#x2B07;", "Total Downloads", f"{stats.get('downloads', 0):,}", "Across all repositories"),
+        ("&#x2764;", "Total Likes", str(stats.get("likes", 0)), "Community engagement"),
+        ("&#x1F4DD;", "Articles Published", str(stats.get("articles", 10)), "Research & analysis posts"),
+    ]
+
+    cards_html = ""
+    for icon, label, value, sub in cards:
+        cards_html += f"""
+        <div style="
+            background: linear-gradient(145deg, #1a1a2e, #20203a);
+            border: 1px solid #2a2a40; border-radius: 16px;
+            padding: 28px 20px; text-align: center;
+            min-width: 160px; flex: 1;
+            transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
+            position: relative; overflow: hidden;
+        " onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 8px 30px rgba(230,57,70,0.2)';this.style.borderColor='#e63946'"
+           onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='none';this.style.borderColor='#2a2a40'">
+            <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#e63946,#9b59b6);"></div>
+            <div style="font-size: 2rem; margin-bottom: 8px;">{icon}</div>
+            <div style="font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 4px;
+                background: linear-gradient(135deg, #e63946, #9b59b6);
+                -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+            ">{value}</div>
+            <div style="font-size: 0.95rem; font-weight: 600; color: #e8e8f0; margin-bottom: 4px;">{label}</div>
+            <div style="font-size: 0.8rem; color: #6c6c88;">{sub}</div>
+        </div>
+        """
+
+    return f"""
+<div style="padding: 40px 20px; background: #0a0a0f;">
+    <h2 style="text-align:center; font-size: 1.8rem; font-weight: 700; margin-bottom: 8px;
+        background: linear-gradient(135deg, #e63946, #9b59b6);
+        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    ">Portfolio Statistics</h2>
+    <p style="text-align:center; color: #6c6c88; margin-bottom: 32px; font-size: 0.9rem;">
+        Live data from Hugging Face API
+    </p>
+    <div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 1100px; margin: 0 auto;">
+        {cards_html}
+    </div>
+</div>
+"""
+
+
+def build_models_html():
+    html = """
+<div style="padding: 40px 20px; background: #0a0a0f;">
+    <h2 style="text-align:center; font-size: 1.8rem; font-weight: 700; margin-bottom: 8px;
+        background: linear-gradient(135deg, #e63946, #9b59b6);
+        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    ">Fine-Tuned Models</h2>
+    <p style="text-align:center; color: #6c6c88; margin-bottom: 32px; font-size: 0.9rem;">
+        Custom cybersecurity & compliance LLMs trained with QLoRA
+    </p>
+    <div style="display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto;">
+"""
+    for m in MODELS:
+        tags_html = "".join(
+            f'<span style="display:inline-block;padding:4px 10px;background:rgba(230,57,70,0.15);color:#e63946;border:1px solid rgba(230,57,70,0.3);border-radius:20px;font-size:0.75rem;font-weight:600;">{t}</span>'
+            for t in m["tags"]
+        )
+        html += f"""
+        <div style="
+            background: linear-gradient(145deg, #1a1a2e, #20203a);
+            border: 1px solid #2a2a40; border-radius: 16px;
+            padding: 28px; position: relative; overflow: hidden;
+            transition: border-color 0.3s, box-shadow 0.3s;
+        " onmouseover="this.style.borderColor='#e63946';this.style.boxShadow='0 0 30px rgba(230,57,70,0.15)'"
+           onmouseout="this.style.borderColor='#2a2a40';this.style.boxShadow='none'">
+            <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#e63946,#9b59b6);"></div>
+
+            <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;">
+                <div>
+                    <h3 style="margin:0 0 6px;font-size:1.3rem;font-weight:700;color:#fff;">
+                        &#x1F916; {m['name']}
+                    </h3>
+                    <p style="margin:0 0 4px;font-size:0.85rem;color:#9b59b6;font-weight:600;">
+                        Base: {m['base']} | {m['method']} | {m['lang']}
+                    </p>
+                </div>
+                <a href="https://huggingface.co/{m['full']}" target="_blank" style="
+                    padding: 8px 18px; border-radius: 8px;
+                    background: linear-gradient(135deg, #e63946, #9b59b6);
+                    color: #fff; text-decoration: none; font-weight: 600; font-size: 0.85rem;
+                    white-space: nowrap;
+                ">View Model &#x2192;</a>
+            </div>
+
+            <p style="margin:12px 0;color:#a0a0b8;font-size:0.9rem;line-height:1.6;">{m['desc']}</p>
+
+            <div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;">
+                {tags_html}
+            </div>
+        </div>
+        """
+    html += "</div></div>"
+    return html
+
+
+def build_spaces_html():
+    html = """
+<div style="padding: 40px 20px; background: #0a0a0f;">
+    <h2 style="text-align:center; font-size: 1.8rem; font-weight: 700; margin-bottom: 8px;
+        background: linear-gradient(135deg, #e63946, #9b59b6);
+        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    ">Interactive Spaces</h2>
+    <p style="text-align:center; color: #6c6c88; margin-bottom: 32px; font-size: 0.9rem;">
+        40 Gradio-powered tools, explorers, and demos
+    </p>
+"""
+    category_icons = {
+        "Security Explorers": "&#x1F50D;",
+        "Security Tools": "&#x1F6E0;",
+        "Compliance & GRC": "&#x2696;",
+        "AI / ML Tools": "&#x1F9E0;",
+        "Model Demos": "&#x1F3AE;",
+    }
+
+    for cat, spaces in SPACES_BY_CATEGORY.items():
+        icon = category_icons.get(cat, "&#x1F4E6;")
+        html += f"""
+    <div style="max-width: 1100px; margin: 0 auto 32px;">
+        <h3 style="color: #e63946; font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; padding-left: 4px;
+            border-left: 3px solid #e63946; padding-left: 12px;">
+            {icon} {cat} <span style="color: #6c6c88; font-weight: 400; font-size: 0.85rem;">({len(spaces)} spaces)</span>
+        </h3>
+        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;">
+"""
+        for slug, name, desc in spaces:
+            html += f"""
+            <a href="https://huggingface.co/spaces/AYI-NEDJIMI/{slug}" target="_blank" style="
+                display: block; text-decoration: none;
+                background: linear-gradient(145deg, #1a1a2e, #1e1e32);
+                border: 1px solid #2a2a40; border-radius: 12px;
+                padding: 16px; transition: all 0.3s;
+            " onmouseover="this.style.borderColor='#9b59b6';this.style.transform='translateY(-2px)';this.style.boxShadow='0 4px 20px rgba(155,89,182,0.15)'"
+               onmouseout="this.style.borderColor='#2a2a40';this.style.transform='translateY(0)';this.style.boxShadow='none'">
+                <div style="font-size: 0.95rem; font-weight: 600; color: #e8e8f0; margin-bottom: 4px;">
+                    {name}
+                </div>
+                <div style="font-size: 0.8rem; color: #6c6c88; line-height: 1.4;">
+                    {desc}
+                </div>
+            </a>
+"""
+        html += "</div></div>"
+    html += "</div>"
+    return html
+
+
+def build_datasets_html():
+    html = """
+<div style="padding: 40px 20px; background: #0a0a0f;">
+    <h2 style="text-align:center; font-size: 1.8rem; font-weight: 700; margin-bottom: 8px;
+        background: linear-gradient(135deg, #e63946, #9b59b6);
+        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    ">Cybersecurity Datasets</h2>
+    <p style="text-align:center; color: #6c6c88; margin-bottom: 32px; font-size: 0.9rem;">
+        85 bilingual (FR/EN) datasets covering the full cybersecurity spectrum
+    </p>
+    <div style="max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;">
+"""
+    domain_icons = {
+        "Standards & Frameworks": "&#x1F3DB;",
+        "Offensive Security": "&#x2694;",
+        "EU Regulations & Compliance": "&#x1F1EA;&#x1F1FA;",
+        "Incident Response & DFIR": "&#x1F6A8;",
+        "Cloud & Infrastructure Security": "&#x2601;",
+        "SOC & Threat Intelligence": "&#x1F50E;",
+        "Emerging Technologies": "&#x1F52E;",
+        "Supply Chain & SBOM": "&#x1F517;",
+        "M365 & Microsoft Admin": "&#xF0;",
+    }
+    for domain, ds_list in DATASETS_BY_DOMAIN.items():
+        icon = domain_icons.get(domain, "&#x1F4C1;")
+        chips = ""
+        for ds in ds_list:
+            chips += f"""
+            <a href="https://huggingface.co/datasets/AYI-NEDJIMI/{ds}" target="_blank" style="
+                display: inline-block; padding: 5px 12px; margin: 3px;
+                background: rgba(155,89,182,0.1); border: 1px solid rgba(155,89,182,0.25);
+                border-radius: 20px; color: #9b59b6; text-decoration: none;
+                font-size: 0.8rem; font-weight: 500;
+                transition: background 0.2s, border-color 0.2s;
+            " onmouseover="this.style.background='rgba(155,89,182,0.25)';this.style.borderColor='#9b59b6'"
+               onmouseout="this.style.background='rgba(155,89,182,0.1)';this.style.borderColor='rgba(155,89,182,0.25)'">
+                {ds}
+            </a>"""
+
+        html += f"""
+        <div style="
+            background: linear-gradient(145deg, #1a1a2e, #20203a);
+            border: 1px solid #2a2a40; border-radius: 12px; padding: 20px;
+        ">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+                <h3 style="margin:0;color:#e8e8f0;font-size:1.05rem;font-weight:600;">
+                    {icon} {domain}
+                </h3>
+                <span style="
+                    padding: 4px 12px; border-radius: 20px;
+                    background: rgba(230,57,70,0.15); color: #e63946;
+                    font-size: 0.8rem; font-weight: 600;
+                ">{len(ds_list)} datasets</span>
+            </div>
+            <div style="display: flex; flex-wrap: wrap; gap: 2px;">
+                {chips}
+            </div>
+        </div>
+"""
+    html += "</div></div>"
+    return html
+
+
+def build_articles_html():
+    html = """
+<div style="padding: 40px 20px; background: #0a0a0f;">
+    <h2 style="text-align:center; font-size: 1.8rem; font-weight: 700; margin-bottom: 8px;
+        background: linear-gradient(135deg, #e63946, #9b59b6);
+        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    ">Published Articles</h2>
+    <p style="text-align:center; color: #6c6c88; margin-bottom: 32px; font-size: 0.9rem;">
+        Research posts, analysis, and community contributions
+    </p>
+    <div style="max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px;">
+"""
+    for i, art in enumerate(ARTICLES, 1):
+        html += f"""
+        <a href="https://huggingface.co/posts/AYI-NEDJIMI/{art['slug']}" target="_blank" style="
+            display: flex; align-items: center; gap: 16px; text-decoration: none;
+            background: linear-gradient(145deg, #1a1a2e, #1e1e32);
+            border: 1px solid #2a2a40; border-radius: 10px;
+            padding: 16px 20px; transition: all 0.3s;
+        " onmouseover="this.style.borderColor='#e63946';this.style.transform='translateX(4px)'"
+           onmouseout="this.style.borderColor='#2a2a40';this.style.transform='translateX(0)'">
+            <div style="
+                min-width: 36px; height: 36px; border-radius: 8px;
+                background: linear-gradient(135deg, #e63946, #9b59b6);
+                display: flex; align-items: center; justify-content: center;
+                font-size: 0.85rem; font-weight: 700; color: #fff;
+            ">{i:02d}</div>
+            <div style="color: #e8e8f0; font-size: 0.92rem; font-weight: 500; line-height: 1.4;">
+                {art['title']}
+            </div>
+        </a>
+"""
+    html += """
+    </div>
+    <p style="text-align:center; margin-top: 20px;">
+        <a href="https://huggingface.co/AYI-NEDJIMI" target="_blank" style="
+            color: #9b59b6; text-decoration: none; font-weight: 600; font-size: 0.9rem;
+        ">View all posts on Hugging Face &#x2192;</a>
+    </p>
+</div>
+"""
+    return html
+
+
+def build_about_html():
+    return """
+<div style="padding: 40px 20px; background: #0a0a0f;">
+    <h2 style="text-align:center; font-size: 1.8rem; font-weight: 700; margin-bottom: 32px;
+        background: linear-gradient(135deg, #e63946, #9b59b6);
+        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    ">About Me</h2>
+
+    <div style="max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px;">
+
+        <!-- Bio -->
+        <div style="
+            background: linear-gradient(145deg, #1a1a2e, #20203a);
+            border: 1px solid #2a2a40; border-radius: 16px; padding: 28px;
+            position: relative; overflow: hidden;
+        ">
+            <div style="position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#e63946,#9b59b6);"></div>
+            <h3 style="color: #e63946; margin: 0 0 16px; font-size: 1.15rem;">&#x1F464; Professional Profile</h3>
+            <p style="color: #a0a0b8; line-height: 1.7; margin: 0; font-size: 0.95rem;">
+                Senior Offensive Cybersecurity & AI Consultant with deep expertise in penetration testing,
+                red team operations, compliance frameworks, and applied artificial intelligence.
+                Specializing in bridging the gap between advanced cybersecurity practices and cutting-edge AI/ML
+                technologies to build smarter, automated security solutions.
+            </p>
+            <p style="color: #a0a0b8; line-height: 1.7; margin: 12px 0 0; font-size: 0.95rem;">
+                Creator of the largest bilingual (French/English) cybersecurity dataset collection on Hugging Face,
+                with 85+ datasets spanning MITRE ATT&CK, ISO 27001, OWASP, NIST CSF, EU regulations (NIS2, DORA, GDPR, AI Act),
+                incident response, forensics, cloud security, and more. Builder of 4 fine-tuned cybersecurity LLMs
+                and 40 interactive Gradio-powered security tools.
+            </p>
+        </div>
+
+        <!-- Expertise Grid -->
+        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;">
+            <div style="
+                background: linear-gradient(145deg, #1a1a2e, #20203a);
+                border: 1px solid #2a2a40; border-radius: 12px; padding: 20px;
+            ">
+                <h4 style="color: #e63946; margin: 0 0 12px; font-size: 1rem;">&#x2694; Offensive Security</h4>
+                <ul style="color: #a0a0b8; font-size: 0.85rem; line-height: 1.8; margin: 0; padding-left: 18px;">
+                    <li>Penetration Testing (Web, Network, AD)</li>
+                    <li>Red Team Operations</li>
+                    <li>Active Directory Attacks</li>
+                    <li>OWASP / MITRE ATT&CK</li>
+                    <li>Bug Bounty Hunting</li>
+                    <li>EDR Evasion & Bypass</li>
+                </ul>
+            </div>
+
+            <div style="
+                background: linear-gradient(145deg, #1a1a2e, #20203a);
+                border: 1px solid #2a2a40; border-radius: 12px; padding: 20px;
+            ">
+                <h4 style="color: #9b59b6; margin: 0 0 12px; font-size: 1rem;">&#x1F916; AI & Machine Learning</h4>
+                <ul style="color: #a0a0b8; font-size: 0.85rem; line-height: 1.8; margin: 0; padding-left: 18px;">
+                    <li>LLM Fine-tuning (QLoRA, LoRA)</li>
+                    <li>RAG Pipelines & LangChain</li>
+                    <li>Prompt Engineering</li>
+                    <li>MLOps & Model Deployment</li>
+                    <li>AI Security (LLM Top 10)</li>
+                    <li>Dataset Engineering</li>
+                </ul>
+            </div>
+
+            <div style="
+                background: linear-gradient(145deg, #1a1a2e, #20203a);
+                border: 1px solid #2a2a40; border-radius: 12px; padding: 20px;
+            ">
+                <h4 style="color: #e63946; margin: 0 0 12px; font-size: 1rem;">&#x1F4DC; Compliance & GRC</h4>
+                <ul style="color: #a0a0b8; font-size: 0.85rem; line-height: 1.8; margin: 0; padding-left: 18px;">
+                    <li>ISO 27001 / 27002</li>
+                    <li>GDPR / RGPD</li>
+                    <li>NIS2 Directive</li>
+                    <li>DORA Regulation</li>
+                    <li>EU AI Act</li>
+                    <li>NIST CSF / CIS Controls</li>
+                </ul>
+            </div>
+        </div>
+
+        <!-- Certifications -->
+        <div style="
+            background: linear-gradient(145deg, #1a1a2e, #20203a);
+            border: 1px solid #2a2a40; border-radius: 12px; padding: 20px;
+        ">
+            <h4 style="color: #e63946; margin: 0 0 12px; font-size: 1rem;">&#x1F3C6; Key Competencies & Frameworks</h4>
+            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+                <span style="padding:6px 14px;background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.3);border-radius:20px;color:#e63946;font-size:0.82rem;font-weight:600;">MITRE ATT&CK</span>
+                <span style="padding:6px 14px;background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.3);border-radius:20px;color:#e63946;font-size:0.82rem;font-weight:600;">OWASP Top 10</span>
+                <span style="padding:6px 14px;background:rgba(155,89,182,0.12);border:1px solid rgba(155,89,182,0.3);border-radius:20px;color:#9b59b6;font-size:0.82rem;font-weight:600;">ISO 27001</span>
+                <span style="padding:6px 14px;background:rgba(155,89,182,0.12);border:1px solid rgba(155,89,182,0.3);border-radius:20px;color:#9b59b6;font-size:0.82rem;font-weight:600;">NIST CSF</span>
+                <span style="padding:6px 14px;background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.3);border-radius:20px;color:#e63946;font-size:0.82rem;font-weight:600;">Active Directory</span>
+                <span style="padding:6px 14px;background:rgba(155,89,182,0.12);border:1px solid rgba(155,89,182,0.3);border-radius:20px;color:#9b59b6;font-size:0.82rem;font-weight:600;">GDPR/RGPD</span>
+                <span style="padding:6px 14px;background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.3);border-radius:20px;color:#e63946;font-size:0.82rem;font-weight:600;">NIS2</span>
+                <span style="padding:6px 14px;background:rgba(155,89,182,0.12);border:1px solid rgba(155,89,182,0.3);border-radius:20px;color:#9b59b6;font-size:0.82rem;font-weight:600;">DORA</span>
+                <span style="padding:6px 14px;background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.3);border-radius:20px;color:#e63946;font-size:0.82rem;font-weight:600;">AI Act</span>
+                <span style="padding:6px 14px;background:rgba(155,89,182,0.12);border:1px solid rgba(155,89,182,0.3);border-radius:20px;color:#9b59b6;font-size:0.82rem;font-weight:600;">Kubernetes Security</span>
+                <span style="padding:6px 14px;background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.3);border-radius:20px;color:#e63946;font-size:0.82rem;font-weight:600;">Cloud Security (AWS/Azure/GCP)</span>
+                <span style="padding:6px 14px;background:rgba(155,89,182,0.12);border:1px solid rgba(155,89,182,0.3);border-radius:20px;color:#9b59b6;font-size:0.82rem;font-weight:600;">Microsoft 365</span>
+                <span style="padding:6px 14px;background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.3);border-radius:20px;color:#e63946;font-size:0.82rem;font-weight:600;">DevSecOps</span>
+                <span style="padding:6px 14px;background:rgba(155,89,182,0.12);border:1px solid rgba(155,89,182,0.3);border-radius:20px;color:#9b59b6;font-size:0.82rem;font-weight:600;">QLoRA / LoRA Fine-tuning</span>
+                <span style="padding:6px 14px;background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.3);border-radius:20px;color:#e63946;font-size:0.82rem;font-weight:600;">RAG / LangChain</span>
+                <span style="padding:6px 14px;background:rgba(155,89,182,0.12);border:1px solid rgba(155,89,182,0.3);border-radius:20px;color:#9b59b6;font-size:0.82rem;font-weight:600;">Post-Quantum Crypto</span>
+            </div>
+        </div>
+
+        <!-- Links -->
+        <div style="
+            background: linear-gradient(145deg, #1a1a2e, #20203a);
+            border: 1px solid #2a2a40; border-radius: 12px; padding: 20px;
+        ">
+            <h4 style="color: #9b59b6; margin: 0 0 16px; font-size: 1rem;">&#x1F310; Connect & Follow</h4>
+            <div style="display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;">
+                <a href="https://www.ayinedjimi-consultants.fr" target="_blank" style="
+                    padding: 10px 24px; border-radius: 8px;
+                    background: linear-gradient(135deg, #e63946, #c0392b);
+                    color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem;
+                ">&#x1F310; Website</a>
+                <a href="https://www.linkedin.com/in/ayi-nedjimi" target="_blank" style="
+                    padding: 10px 24px; border-radius: 8px;
+                    background: linear-gradient(135deg, #0077b5, #005885);
+                    color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem;
+                ">&#x1F4BC; LinkedIn</a>
+                <a href="https://github.com/ayinedjimi" target="_blank" style="
+                    padding: 10px 24px; border-radius: 8px;
+                    background: linear-gradient(135deg, #333, #24292e);
+                    color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem;
+                ">&#x1F4BB; GitHub</a>
+                <a href="https://x.com/AyiNEDJIMI" target="_blank" style="
+                    padding: 10px 24px; border-radius: 8px;
+                    background: linear-gradient(135deg, #1da1f2, #0d8bd9);
+                    color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem;
+                ">&#x1F426; Twitter / X</a>
+                <a href="https://huggingface.co/AYI-NEDJIMI" target="_blank" style="
+                    padding: 10px 24px; border-radius: 8px;
+                    background: linear-gradient(135deg, #ff9d00, #e68a00);
+                    color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem;
+                ">&#x1F917; Hugging Face</a>
+                <a href="https://huggingface.co/collections/AYI-NEDJIMI/cybersec-ai-portfolio-datasets-models-and-spaces-699224074a478ec0feeac493" target="_blank" style="
+                    padding: 10px 24px; border-radius: 8px;
+                    background: linear-gradient(135deg, #9b59b6, #6c3483);
+                    color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem;
+                ">&#x1F4E6; Full Collection</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div style="text-align: center; padding: 40px 20px 20px; color: #6c6c88; font-size: 0.8rem;">
+        <p style="margin: 0;">AYI NEDJIMI &middot; Senior Offensive Cybersecurity & AI Consultant</p>
+        <p style="margin: 4px 0 0; color: #4a4a60;">Built with Gradio on Hugging Face Spaces</p>
+    </div>
+</div>
+"""
+
+
+# ============================================================
+# FETCH LIVE STATS
+# ============================================================
+
+def fetch_stats():
+    """Fetch live statistics from Hugging Face API."""
+    stats = {
+        "models": 4,
+        "spaces": 40,
+        "datasets": 85,
+        "downloads": 0,
+        "likes": 0,
+        "articles": 10,
+    }
+
+    try:
+        headers = {"Accept": "application/json"}
+
+        # Fetch models
+        resp = requests.get(
+            "https://huggingface.co/api/models",
+            params={"author": "AYI-NEDJIMI", "limit": 100},
+            headers=headers,
+            timeout=10,
+        )
+        if resp.status_code == 200:
+            models = resp.json()
+            stats["models"] = len(models)
+            for m in models:
+                stats["downloads"] += m.get("downloads", 0)
+                stats["likes"] += m.get("likes", 0)
+
+        # Fetch datasets
+        resp = requests.get(
+            "https://huggingface.co/api/datasets",
+            params={"author": "AYI-NEDJIMI", "limit": 200},
+            headers=headers,
+            timeout=10,
+        )
+        if resp.status_code == 200:
+            datasets = resp.json()
+            stats["datasets"] = len(datasets)
+            for d in datasets:
+                stats["downloads"] += d.get("downloads", 0)
+                stats["likes"] += d.get("likes", 0)
+
+        # Fetch spaces
+        resp = requests.get(
+            "https://huggingface.co/api/spaces",
+            params={"author": "AYI-NEDJIMI", "limit": 200},
+            headers=headers,
+            timeout=10,
+        )
+        if resp.status_code == 200:
+            spaces = resp.json()
+            stats["spaces"] = len(spaces)
+            for s in spaces:
+                stats["likes"] += s.get("likes", 0)
+
+    except Exception as e:
+        print(f"Stats fetch error: {e}")
+
+    return stats
+
+
+# ============================================================
+# BUILD APP
+# ============================================================
+
+def create_app():
+    stats = fetch_stats()
+
+    with gr.Blocks(
+        title="AYI NEDJIMI - CyberSec & AI Portfolio",
+        css=CUSTOM_CSS,
+        theme=gr.themes.Base(
+            primary_hue=gr.themes.colors.red,
+            secondary_hue=gr.themes.colors.purple,
+            neutral_hue=gr.themes.colors.gray,
+            font=gr.themes.GoogleFont("Inter"),
+        ),
+    ) as app:
+
+        # Hero
+        gr.HTML(build_hero_html())
+
+        # Stats
+        gr.HTML(build_stats_html(stats))
+
+        # Tabbed sections
+        with gr.Tabs():
+            with gr.TabItem("Models"):
+                gr.HTML(build_models_html())
+
+            with gr.TabItem("Spaces"):
+                gr.HTML(build_spaces_html())
+
+            with gr.TabItem("Datasets"):
+                gr.HTML(build_datasets_html())
+
+            with gr.TabItem("Articles"):
+                gr.HTML(build_articles_html())
+
+            with gr.TabItem("About"):
+                gr.HTML(build_about_html())
+
+    return app
+
+
+app = create_app()
+
+if __name__ == "__main__":
+    app.launch()

requirements.txt

@@ -0,0 +1,2 @@
+gradio>=4.0.0
+requests