resources.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="LLMNetOps Resources - Training modules, case studies, reports, and documentation for privacy-aware AI in network operations.">
    <title>Resources - LLMNetOps</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/components.css">
</head>
<body>
    <!-- Navigation -->
    <nav>
        <div class="nav-container">
            <a href="index.html" class="logo">
                <img src="images/llmnetops-logo-formal.png" alt="LLMNetOps Logo">
            </a>
            <button class="mobile-menu-btn" aria-label="Toggle navigation menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul class="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="activities.html">Activities</a></li>
                <li class="has-dropdown">
                <a href="workshops.html">Workshops
                    <svg class="nav-dropdown-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
                </a>
                <ul class="nav-dropdown">
                    <li><a href="workshops.html">
                        <svg class="nav-dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                        Overview
                    </a></li>
                    <li><a href="pilot-test.html">
                        <svg class="nav-dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v11m0 0H5a2 2 0 0 1-2-2V9m6 5h10a2 2 0 0 0 2-2V9m-6 9v3m0 0H9m3 0h3"/></svg>
                        Pilot Test
                    </a></li>
                    <li><a href="resources.html" class="active">
                        <svg class="nav-dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                        Resources
                    </a></li>
                    <li><a href="register.html">
                        <svg class="nav-dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        Registration
                    </a></li>
                </ul>
            </li>
                <li><a href="news.html">News</a></li>
            </ul>
            <a href="https://github.com/LLMNetOps" class="nav-github" target="_blank" rel="noopener noreferrer" aria-label="LLMNetOps on GitHub" title="LLMNetOps on GitHub">
                <svg viewBox="0 0 16 16" width="22" height="22" aria-hidden="true" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
            </a>
        </div>
    </nav>

    <!-- Page Header -->
    <section class="page-header">
        <div class="breadcrumb">
            <a href="index.html">Home</a>
            <span>/</span>
            <span>Resources</span>
        </div>
        <h1>Learning Resources</h1>
        <p>Training modules, case studies, and documentation for privacy-aware AI deployment</p>
    </section>

    <!-- Resource Filters -->
    <section>
        <div class="container">
            <div class="resource-filters">
                <button class="filter-btn active" data-filter="all">All</button>
                <button class="filter-btn" data-filter="training_module">Training Modules</button>
                <button class="filter-btn" data-filter="case_study">Case Studies</button>
                <button class="filter-btn" data-filter="report">Reports</button>
                <button class="filter-btn" data-filter="whitepaper">White Papers</button>
            </div>
        </div>
    </section>

    <!-- Training Modules -->
    <section class="about">
        <div class="container">
            <h2 class="section-title">Training Modules</h2>
            <p class="section-subtitle">Comprehensive curriculum on locally-hosted LLMs for network operations</p>

            <div class="alert alert-info mb-4">
                <span class="alert-icon">🧪</span>
                <div>
                    <strong>Pilot Test Materials Available</strong><br>
                    Slides and the hands-on module from our pilot test are now online. <a href="pilot-test.html">View the pilot test materials →</a>
                </div>
            </div>

            <div class="alert alert-info mb-4">
                <span class="alert-icon">📚</span>
                <div>
                    <strong>Coming Soon</strong><br>
                    Training modules are currently in development and will be available after the first workshop session.
                </div>
            </div>

            <div class="card-grid">
                <div class="resource-card">
                    <span class="resource-type type-module">Training Module</span>
                    <h3>Module 1: Introduction to Large Language Models</h3>
                    <p>Comprehensive introduction to LLMs covering architecture, capabilities, and applications in network operations.</p>
                    <div class="resource-meta">
                        <span>🌐 Bilingual (ID/EN)</span>
                        <span class="status-badge status-not-started">Coming Soon</span>
                    </div>
                </div>

                <div class="resource-card">
                    <span class="resource-type type-module">Training Module</span>
                    <h3>Module 2: Privacy-Aware AI Deployment</h3>
                    <p>Deep dive into privacy considerations, data protection, and institutional autonomy in AI deployment.</p>
                    <div class="resource-meta">
                        <span>🌐 Bilingual (ID/EN)</span>
                        <span class="status-badge status-not-started">Coming Soon</span>
                    </div>
                </div>

                <div class="resource-card">
                    <span class="resource-type type-module">Training Module</span>
                    <h3>Module 3: RAG Pipelines for Network Documentation</h3>
                    <p>Practical guide to building Retrieval-Augmented Generation pipelines for network documentation and troubleshooting.</p>
                    <div class="resource-meta">
                        <span>🌐 Bilingual (ID/EN)</span>
                        <span class="status-badge status-not-started">Coming Soon</span>
                    </div>
                </div>

                <div class="resource-card">
                    <span class="resource-type type-module">Training Module</span>
                    <h3>Module 4: AI Agentic Workflows</h3>
                    <p>Advanced module on building AI agents for automated network operations tasks.</p>
                    <div class="resource-meta">
                        <span>🌐 Bilingual (ID/EN)</span>
                        <span class="status-badge status-not-started">Coming Soon</span>
                    </div>
                </div>

                <div class="resource-card">
                    <span class="resource-type type-module">Training Module</span>
                    <h3>Module 5: Infrastructure Integration</h3>
                    <p>Guide to integrating locally-hosted LLMs with existing network infrastructure and monitoring systems.</p>
                    <div class="resource-meta">
                        <span>🌐 Bilingual (ID/EN)</span>
                        <span class="status-badge status-not-started">Coming Soon</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Reports & White Papers -->
    <section>
        <div class="container">
            <h2 class="section-title">Reports & White Papers</h2>
            <p class="section-subtitle">Research outputs and policy insights</p>

            <div class="card-grid">
                <div class="resource-card">
                    <span class="resource-type type-report">Report</span>
                    <h3>Initial Needs Assessment Report</h3>
                    <p>Survey results and analysis of AI adoption challenges across IDREN member institutions.</p>
                    <div class="resource-meta">
                        <span>📄 PDF</span>
                        <span class="status-badge status-not-started">Coming Soon</span>
                    </div>
                </div>

                <div class="resource-card">
                    <span class="resource-type" style="background: #e0e7ff; color: #4338ca;">White Paper</span>
                    <h3>NetOps with AI: Policy Insights for IDREN</h3>
                    <p>Comprehensive whitepaper on AI adoption policies and recommendations for network operations in educational institutions.</p>
                    <div class="resource-meta">
                        <span>📄 PDF</span>
                        <span class="status-badge status-not-started">Coming Soon</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Case Studies -->
    <section class="about">
        <div class="container">
            <h2 class="section-title">Case Studies</h2>
            <p class="section-subtitle">Real-world implementation examples from IDREN institutions</p>

            <div class="alert alert-info">
                <span class="alert-icon">📋</span>
                <div>
                    <strong>Case Studies Coming Soon</strong><br>
                    Case studies will be developed after workshop completion, documenting real-world implementation experiences from participating institutions.
                </div>
            </div>

            <div class="card mt-4">
                <h3>Contribute a Case Study</h3>
                <p>Are you implementing locally-hosted LLMs in your institution? We welcome case study contributions from IDREN member institutions. Your experience could help others on their AI adoption journey.</p>
                <a href="contact.html" class="btn btn-outline mt-2">Contact Us to Contribute</a>
            </div>
        </div>
    </section>

    <!-- External Resources -->
    <section>
        <div class="container">
            <h2 class="section-title">Helpful External Resources</h2>
            <p class="section-subtitle">Recommended resources for learning about LLMs and AI deployment</p>

            <div class="card-grid">
                <div class="card">
                    <div class="card-icon">🦙</div>
                    <h3>Ollama</h3>
                    <p>Run large language models locally. An easy way to get started with locally-hosted LLMs.</p>
                    <a href="https://ollama.ai" target="_blank" rel="noopener noreferrer" class="btn btn-outline mt-2">Visit Website →</a>
                </div>

                <div class="card">
                    <div class="card-icon">🤗</div>
                    <h3>Hugging Face</h3>
                    <p>The AI community building the future. Access thousands of open-source models and datasets.</p>
                    <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer" class="btn btn-outline mt-2">Visit Website →</a>
                </div>

                <div class="card">
                    <div class="card-icon">🔗</div>
                    <h3>LangChain</h3>
                    <p>Build applications with LLMs through composability. Framework for RAG pipelines and AI agents.</p>
                    <a href="https://langchain.com" target="_blank" rel="noopener noreferrer" class="btn btn-outline mt-2">Visit Website →</a>
                </div>

                <div class="card">
                    <div class="card-icon">📖</div>
                    <h3>APNIC Blog</h3>
                    <p>Latest news and insights from the Asia-Pacific networking community.</p>
                    <a href="https://blog.apnic.net" target="_blank" rel="noopener noreferrer" class="btn btn-outline mt-2">Visit Website →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="contact">
        <h2 class="section-title">Need Help?</h2>
        <p class="section-subtitle">Questions about resources or looking for specific materials?</p>
        <div class="btn-group">
            <a href="contact.html" class="btn btn-primary">Contact Us</a>
            <a href="workshops.html" class="btn btn-secondary">View Workshops</a>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>LLMNetOps</h4>
                <p>Strengthening Network Operations Knowledge-Base through Locally-Hosted Generative AI</p>
                <p><a href="https://apnic.foundation/projects/llmnetops/" target="_blank">View Project on APNIC Foundation</a></p>
            </div>
            <div class="footer-section">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="about.html">About</a></li>
                    <li><a href="activities.html">Activities</a></li>
                    <li class="has-dropdown">
                <a href="workshops.html">Workshops
                    <svg class="nav-dropdown-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
                </a>
                <ul class="nav-dropdown">
                    <li><a href="workshops.html">
                        <svg class="nav-dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                        Overview
                    </a></li>
                    <li><a href="pilot-test.html">
                        <svg class="nav-dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v11m0 0H5a2 2 0 0 1-2-2V9m6 5h10a2 2 0 0 0 2-2V9m-6 9v3m0 0H9m3 0h3"/></svg>
                        Pilot Test
                    </a></li>
                    <li><a href="resources.html" class="active">
                        <svg class="nav-dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                        Resources
                    </a></li>
                    <li><a href="register.html">
                        <svg class="nav-dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        Registration
                    </a></li>
                </ul>
            </li>
                    <li><a href="news.html">News</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>Contact</h4>
                <ul>
                    <li><a href="mailto:llmnetops@ub.ac.id">llmnetops@ub.ac.id</a></li>
                    <li>Universitas Brawijaya</li>
                    <li>Malang, East Java, Indonesia</li>
                    <li><a href="https://ub.ac.id" target="_blank" rel="noopener noreferrer">ub.ac.id</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>Funded By</h4>
                <div class="partner-logos">
                    <img src="images/APNIC-Foundation-and-ISIF-Logo-white-stacked-01.svg" alt="APNIC Foundation and ISIF Asia">
                </div>
            </div>
            <div class="footer-section">
                <h4>Implemented By</h4>
                <div class="partner-logos">
                    <img src="images/Logo_Universitas_Brawijaya.png" alt="Universitas Brawijaya">
                    <img src="images/logo-idren.png" alt="IDREN">
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; <span class="current-year">2024</span> LLMNetOps. All rights reserved.</p>
        </div>
    </footer>

    <!-- Back to Top Button -->
    <button class="back-to-top" aria-label="Back to top">↑</button>

    <!-- Scripts -->
    <script src="js/navigation.js"></script>
    <script src="js/animations.js"></script>
    <script src="js/main.js"></script>
    <script>
        // Resource filter functionality
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                // Add filter logic here when resources are available
            });
        });
    </script>
</body>
</html>