diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index c86831d..ceca3be 100644 --- a/README.md +++ b/README.md @@ -1 +1,88 @@ -# llmnetops.github.io \ No newline at end of file +# LLMNetOps + +**Strengthening Network Operations Knowledge-Base through Locally-Hosted Generative AI** + +## 🌐 Live Website + +Visit: [https://llmnetops.github.io](https://llmnetops.github.io) + +## About + +LLMNetOps is an ISIF Asia 2025 project by Universitas Brawijaya aimed at addressing the AI-literacy gap among network operations professionals in IDREN (Indonesia Research and Education Network) member institutions. + +Many IDREN member institutions struggle to adopt AI-supported network management due to limited staff, uneven expertise, and reliance on undocumented knowledge. Generative AI offers potential for improving documentation and troubleshooting, but most administrators lack training, confidence, and tools that respect data privacyβ€”creating an AI-literacy gap. + +## Project Goals + +- **Privacy-First AI Adoption** - Promote locally-hosted open-source LLM models as practical solutions for institutions concerned about data privacy and institutional autonomy +- **Contextual AI for Infrastructure** - Introduce generative AI specifically to support technical teams in managing, understanding, and documenting their own infrastructure +- **Bridging the AI Literacy Gap** - Empower network and IT staff with the knowledge and confidence to use AI in their daily tasks +- **Knowledge-Sharing Community** - Build a culture of learning and shared problem-solving through workshops and peer collaboration +- **Secure LLM Integration** - Investigate how locally-hosted LLMs can be safely integrated into network operations while ensuring security of sensitive data +- **Tailored Solutions** - Empower IDREN members to confidently assess and adopt AI solutions that align with their specific requirements + +## Website Structure + +``` +llmnetops.github.io/ +β”œβ”€β”€ index.html # Home page +β”œβ”€β”€ about.html # About the project +β”œβ”€β”€ deliverables.html # Project deliverables +β”œβ”€β”€ workshops.html # Workshop information +β”œβ”€β”€ resources.html # Learning resources +β”œβ”€β”€ contact.html # Contact page +β”œβ”€β”€ css/ +β”‚ β”œβ”€β”€ style.css # Main styles +β”‚ β”œβ”€β”€ responsive.css # Responsive styles +β”‚ └── components.css # Component styles +β”œβ”€β”€ js/ +β”‚ β”œβ”€β”€ main.js # Main JavaScript +β”‚ β”œβ”€β”€ navigation.js # Navigation functionality +β”‚ └── animations.js # Animation scripts +β”œβ”€β”€ data/ +β”‚ β”œβ”€β”€ deliverables.json +β”‚ β”œβ”€β”€ workshops.json +β”‚ └── resources.json +β”œβ”€β”€ assets/ +β”‚ β”œβ”€β”€ images/ +β”‚ β”œβ”€β”€ icons/ +β”‚ └── documents/ +β”œβ”€β”€ .nojekyll # Disable Jekyll processing +└── README.md # This file +``` + +## Project Information + +- **Funding:** APNIC Foundation / ISIF Asia 2025 +- **Implementation:** Universitas Brawijaya, Indonesia +- **Budget:** $30,000 USD +- **Target:** 20+ network operations professionals from IDREN institutions + +## Key Deliverables + +1. **Curriculum Development** ($10,000) - Training modules on locally-hosted LLMs +2. **Workshop Delivery** ($18,000) - 2 hands-on workshop sessions +3. **Survey and Analysis** ($1,000) - Research outputs and case studies +4. **Reporting** ($1,000) - Project documentation and dissemination + +## Contributing + +We welcome contributions from IDREN member institutions! Please feel free to: +- Submit issues for bugs or feature requests +- Contribute case studies from your institution +- Provide feedback on workshop materials + +## Links + +- [APNIC Foundation](https://foundation.apnic.net) +- [ISIF Asia](https://isif.asia) +- [IDREN](https://idren.id) +- [Universitas Brawijaya](https://ub.ac.id) + +## License + +This project is open source. + +--- + +Β© 2024 LLMNetOps. Funded by ISIF Asia 2025. \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..ff37f49 --- /dev/null +++ b/about.html @@ -0,0 +1,220 @@ + + + + + + + About - LLMNetOps + + + + + + + + + + + + +
+
+

Our Mission

+
+

LLMNetOps is an ISIF Asia 2025 project by Universitas Brawijaya aimed at addressing the AI-literacy gap among network operations professionals in IDREN (Indonesia Research and Education Network) member institutions.

+
+

Many IDREN member institutions struggle to adopt AI-supported network management due to limited staff, uneven expertise, and reliance on undocumented knowledge. Generative AI offers potential for improving documentation and troubleshooting, but most administrators lack training, confidence, and tools that respect data privacyβ€”creating an AI-literacy gap.

+
+

This project aims to address this gap by building foundational AI knowledge, fostering peer collaboration, and promoting locally-hosted open-source LLM models as privacy-aware solutions tailored to institutional needs in network operations.

+
+
+
+ + +
+
+

The Challenge

+

Understanding the AI adoption barriers in network operations

+
+
+
πŸ‘₯
+

Limited Staff

+

Many institutions operate with small IT teams who lack bandwidth to explore and implement new technologies like AI.

+
+
+
πŸ“Š
+

Uneven Expertise

+

Technical knowledge varies significantly across institutions, creating disparities in AI adoption readiness.

+
+
+
πŸ“
+

Undocumented Knowledge

+

Critical operational knowledge often exists only in the minds of experienced staff, making AI-assisted documentation crucial.

+
+
+
πŸ”
+

Privacy Concerns

+

Institutions are rightly concerned about sending sensitive network data to cloud-based AI services.

+
+
+
🎯
+

Lack of Training

+

Most administrators have not received formal training on AI technologies and their practical applications.

+
+
+
πŸ’­
+

Low Confidence

+

Without hands-on experience, staff lack confidence to evaluate and adopt AI solutions.

+
+
+
+
+ + +
+
+

Strategic Alignment

+

How LLMNetOps aligns with ISIF Asia's strategic themes

+
+
+
πŸŽ“
+

Building Capabilities

+

Training and empowering network professionals with AI literacy and practical skills for implementing privacy-aware LLM solutions.

+
+
+
πŸ’‘
+

Driving Digital Innovation

+

Introducing contextual AI applications for infrastructure operationsβ€”moving beyond general productivity to specialized technical support.

+
+
+
πŸš€
+

Supporting Digital Transformation

+

Enabling institutional transformation through privacy-first AI adoption that respects data sovereignty and institutional autonomy.

+
+
+
+
+ + +
+
+

Project Themes

+

Four key themes driving our approach

+
+
+
πŸ”’
+

Privacy-First AI Adoption

+

We promote locally-hosted open-source LLM models as a practical solution for institutions concerned about data privacy and institutional autonomyβ€”an issue often overlooked in AI adoption discussions.

+
+
+
πŸ–₯️
+

Contextual AI for Infrastructure

+

We introduce the use of generative AI not for general productivity, but specifically to support technical teams in managing, understanding, and documenting their own infrastructure.

+
+
+
πŸ“š
+

Bridging the AI Literacy Gap

+

We focus on empowering network and IT staff with the knowledge and confidence to use AI in their daily tasks, addressing the training and tool gaps that prevent AI adoption.

+
+
+
🀝
+

Building a Knowledge-Sharing Community

+

Through workshops and peer collaboration, we encourage a culture of learning and shared problem-solving, rather than one-off training sessions.

+
+
+
+
+ + +
+
+

Funding & Partners

+

Supported by leading organizations in the Asia-Pacific region

+
+

LLMNetOps is funded by the APNIC Foundation through the ISIF Asia 2025 grant program. The project is implemented by Universitas Brawijaya, Indonesia, in collaboration with IDREN member institutions.

+
+
+ ℹ️ +
+ About ISIF Asia
+ The Information Society Innovation Fund (ISIF Asia) supports projects that develop solutions to ICT-related issues in the Asia Pacific region, with a focus on innovation, capacity building, and community development. +
+
+
+
+
+ + +
+

Get Involved

+

Join us in building privacy-first AI capabilities for network operations

+
+ View Workshops + Contact Us +
+
+ + + + + + + + + + + + + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..2822769 --- /dev/null +++ b/contact.html @@ -0,0 +1,193 @@ + + + + + + + Contact - LLMNetOps + + + + + + + + + + + + +
+
+
+
+
πŸ“§
+

Email

+

For general inquiries and collaboration opportunities

+ llmnetops@ub.ac.id +
+ +
+
πŸ›οΈ
+

Institution

+

Universitas Brawijaya
Malang, East Java, Indonesia

+ Visit Website +
+ +
+
πŸ’»
+

GitHub

+

Project repository and technical resources

+ View GitHub +
+
+
+
+ + +
+
+

Send Us a Message

+

We'd love to hear from you

+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+ + +
+
+

Related Organizations

+

Learn more about our partners and funders

+ +
+
+
🌏
+

APNIC Foundation

+

The APNIC Foundation is a not-for-profit organization focused on enabling a global, open, and secure Internet for the Asia Pacific region.

+ Visit Website β†’ +
+ +
+
πŸ’‘
+

ISIF Asia

+

The Information Society Innovation Fund (ISIF Asia) supports projects that develop solutions to ICT-related issues in the Asia Pacific region.

+ Visit Website β†’ +
+ +
+
πŸŽ“
+

IDREN

+

Indonesia Research and Education Network connects academic and research institutions across Indonesia for collaboration and knowledge sharing.

+ Visit Website β†’ +
+ +
+
πŸ›οΈ
+

Universitas Brawijaya

+

One of Indonesia's leading public universities, implementing the LLMNetOps project to advance AI adoption in network operations.

+ Visit Website β†’ +
+
+
+
+ + + + + + + + + + + + + diff --git a/css/components.css b/css/components.css new file mode 100644 index 0000000..553821f --- /dev/null +++ b/css/components.css @@ -0,0 +1,648 @@ +/* LLMNetOps - Component Specific Styles */ + +/* Activity Table */ +.activity-table { + width: 100%; + border-collapse: collapse; + margin: 1rem 0; +} + +.activity-table th, +.activity-table td { + padding: 0.75rem; + text-align: left; + border-bottom: 1px solid var(--border-color); +} + +.activity-table th { + background: var(--light-bg); + font-weight: 600; + color: var(--secondary-color); +} + +.activity-table tr:hover { + background: var(--light-bg); +} + +/* Key Indicators */ +.key-indicators { + background: var(--light-bg); + padding: 1.25rem; + border-radius: 8px; + margin: 1rem 0; +} + +.key-indicators h4 { + margin-bottom: 0.75rem; + font-size: 1rem; +} + +.key-indicators ul { + list-style: none; + margin: 0; +} + +.key-indicators li { + padding: 0.5rem 0; + padding-left: 1.5rem; + position: relative; +} + +.key-indicators li::before { + content: 'πŸ“Š'; + position: absolute; + left: 0; +} + +/* Pillar Cards */ +.pillar-card { + text-align: center; + padding: 2.5rem 2rem; +} + +.pillar-icon { + width: 80px; + height: 80px; + background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + font-size: 2rem; +} + +/* Feature List */ +.feature-list { + list-style: none; +} + +.feature-list li { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 1rem 0; + border-bottom: 1px solid var(--border-color); +} + +.feature-list li:last-child { + border-bottom: none; +} + +.feature-list-icon { + width: 40px; + height: 40px; + background: var(--primary-color); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +/* Team Member Card */ +.team-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.team-card { + text-align: center; + padding: 2rem; +} + +.team-avatar { + width: 120px; + height: 120px; + border-radius: 50%; + margin: 0 auto 1rem; + object-fit: cover; + border: 4px solid var(--primary-color); +} + +.team-card h3 { + margin-bottom: 0.25rem; +} + +.team-role { + color: var(--text-light); + font-size: 0.9rem; + margin-bottom: 1rem; +} + +.team-social { + display: flex; + justify-content: center; + gap: 0.75rem; +} + +.team-social a { + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--light-bg); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-color); + transition: var(--transition); +} + +.team-social a:hover { + background: var(--primary-color); + color: var(--white); +} + +/* Blog Cards */ +.blog-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; +} + +.blog-card { + border-radius: 12px; + overflow: hidden; + box-shadow: var(--shadow-md); + transition: var(--transition); +} + +.blog-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-lg); +} + +.blog-image { + width: 100%; + height: 200px; + object-fit: cover; +} + +.blog-content { + padding: 1.5rem; +} + +.blog-meta { + display: flex; + gap: 1rem; + margin-bottom: 0.75rem; + font-size: 0.85rem; + color: var(--text-light); +} + +.blog-card h3 { + margin-bottom: 0.5rem; +} + +.blog-card h3 a { + color: var(--secondary-color); +} + +.blog-card h3 a:hover { + color: var(--primary-color); +} + +.blog-excerpt { + color: var(--text-color); + font-size: 0.95rem; +} + +/* Tags */ +.tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + margin-top: 1rem; +} + +.tag { + padding: 0.25rem 0.75rem; + background: var(--light-bg); + border-radius: 4px; + font-size: 0.8rem; + color: var(--text-color); +} + +.tag:hover { + background: var(--primary-color); + color: var(--white); +} + +/* Quote/Testimonial */ +.testimonial { + background: var(--light-bg); + padding: 2rem; + border-radius: 12px; + border-left: 4px solid var(--primary-color); + margin: 2rem 0; +} + +.testimonial-text { + font-size: 1.1rem; + font-style: italic; + margin-bottom: 1rem; + color: var(--secondary-color); +} + +.testimonial-author { + display: flex; + align-items: center; + gap: 1rem; +} + +.testimonial-author img { + width: 50px; + height: 50px; + border-radius: 50%; +} + +.testimonial-info { + line-height: 1.4; +} + +.testimonial-name { + font-weight: 600; + color: var(--secondary-color); +} + +.testimonial-role { + font-size: 0.9rem; + color: var(--text-light); +} + +/* Alert/Notice Boxes */ +.alert { + padding: 1rem 1.5rem; + border-radius: 8px; + margin: 1rem 0; + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.alert-icon { + font-size: 1.25rem; +} + +.alert-info { + background: #dbeafe; + border-left: 4px solid #2563eb; + color: #1e40af; +} + +.alert-success { + background: #d1fae5; + border-left: 4px solid #10b981; + color: #065f46; +} + +.alert-warning { + background: #fef3c7; + border-left: 4px solid #f59e0b; + color: #92400e; +} + +.alert-error { + background: #fee2e2; + border-left: 4px solid #ef4444; + color: #991b1b; +} + +/* Tabs */ +.tabs { + margin: 2rem 0; +} + +.tab-buttons { + display: flex; + border-bottom: 2px solid var(--border-color); +} + +.tab-btn { + padding: 1rem 2rem; + background: none; + border: none; + cursor: pointer; + font-size: 1rem; + color: var(--text-color); + position: relative; + transition: var(--transition); +} + +.tab-btn:hover { + color: var(--primary-color); +} + +.tab-btn.active { + color: var(--primary-color); +} + +.tab-btn.active::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + right: 0; + height: 2px; + background: var(--primary-color); +} + +.tab-content { + display: none; + padding: 2rem 0; +} + +.tab-content.active { + display: block; +} + +/* Modal */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 2000; + opacity: 0; + visibility: hidden; + transition: var(--transition); +} + +.modal-overlay.active { + opacity: 1; + visibility: visible; +} + +.modal { + background: var(--white); + border-radius: 12px; + max-width: 600px; + width: 90%; + max-height: 90vh; + overflow-y: auto; + transform: scale(0.9); + transition: var(--transition); +} + +.modal-overlay.active .modal { + transform: scale(1); +} + +.modal-header { + padding: 1.5rem; + border-bottom: 1px solid var(--border-color); + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-header h3 { + margin-bottom: 0; +} + +.modal-close { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + color: var(--text-light); +} + +.modal-close:hover { + color: var(--text-color); +} + +.modal-body { + padding: 1.5rem; +} + +.modal-footer { + padding: 1.5rem; + border-top: 1px solid var(--border-color); + display: flex; + gap: 1rem; + justify-content: flex-end; +} + +/* Loading Spinner */ +.spinner { + width: 40px; + height: 40px; + border: 3px solid var(--border-color); + border-top-color: var(--primary-color); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +.loading-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.9); + display: flex; + align-items: center; + justify-content: center; + z-index: 3000; +} + +/* Tooltip */ +.tooltip { + position: relative; +} + +.tooltip::after { + content: attr(data-tooltip); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background: var(--secondary-color); + color: var(--white); + padding: 0.5rem 1rem; + border-radius: 4px; + font-size: 0.8rem; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: var(--transition); + margin-bottom: 0.5rem; +} + +.tooltip:hover::after { + opacity: 1; + visibility: visible; +} + +/* Back to Top Button */ +.back-to-top { + position: fixed; + bottom: 2rem; + right: 2rem; + width: 50px; + height: 50px; + background: var(--primary-color); + color: var(--white); + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + box-shadow: var(--shadow-md); + opacity: 0; + visibility: hidden; + transition: var(--transition); + z-index: 100; +} + +.back-to-top.visible { + opacity: 1; + visibility: visible; +} + +.back-to-top:hover { + background: var(--primary-dark); + transform: translateY(-3px); +} + +/* Image Gallery */ +.gallery { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1rem; +} + +.gallery-item { + position: relative; + overflow: hidden; + border-radius: 8px; + cursor: pointer; +} + +.gallery-item img { + width: 100%; + height: 200px; + object-fit: cover; + transition: var(--transition); +} + +.gallery-item:hover img { + transform: scale(1.05); +} + +.gallery-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: var(--transition); +} + +.gallery-item:hover .gallery-overlay { + opacity: 1; +} + +/* Video Player Container */ +.video-container { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + border-radius: 12px; + box-shadow: var(--shadow-md); +} + +.video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +/* Countdown Timer */ +.countdown { + display: flex; + justify-content: center; + gap: 1.5rem; + margin: 2rem 0; +} + +.countdown-item { + text-align: center; +} + +.countdown-number { + font-size: 3rem; + font-weight: 700; + color: var(--primary-color); + display: block; +} + +.countdown-label { + font-size: 0.9rem; + color: var(--text-light); + text-transform: uppercase; +} + +/* Registration Status Badge */ +.registration-status { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + border-radius: 50px; + font-weight: 600; +} + +.registration-open { + background: #d1fae5; + color: #059669; +} + +.registration-closed { + background: #fee2e2; + color: #dc2626; +} + +.registration-coming-soon { + background: #fef3c7; + color: #d97706; +} + +/* Pulse Animation for Live/Active Indicator */ +.pulse-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: #10b981; + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); + } +} diff --git a/css/responsive.css b/css/responsive.css new file mode 100644 index 0000000..7c80c0e --- /dev/null +++ b/css/responsive.css @@ -0,0 +1,309 @@ +/* LLMNetOps - Responsive Stylesheet */ + +/* Tablet (768px and below) */ +@media (max-width: 768px) { + /* Typography */ + h1 { font-size: 2.25rem; } + h2 { font-size: 1.75rem; } + h3 { font-size: 1.25rem; } + + /* Navigation */ + .mobile-menu-btn { + display: block; + } + + .nav-links { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--white); + flex-direction: column; + padding: 1rem; + box-shadow: var(--shadow-md); + gap: 0; + } + + .nav-links.active { + display: flex; + } + + .nav-links li { + padding: 0.75rem 0; + border-bottom: 1px solid var(--light-bg); + } + + .nav-links li:last-child { + border-bottom: none; + } + + .nav-links a.active::after { + display: none; + } + + /* Hero */ + .hero { + padding: 6rem 1.5rem 4rem; + min-height: auto; + } + + .hero h1 { + font-size: 2rem; + } + + .hero p { + font-size: 1rem; + } + + .hero-badges { + flex-direction: column; + align-items: center; + } + + .btn-group { + flex-direction: column; + align-items: center; + } + + /* Sections */ + section { + padding: 3rem 1.5rem; + } + + .section-title { + font-size: 1.75rem; + } + + /* Cards */ + .card-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .card { + padding: 1.5rem; + } + + /* Stats */ + .stats-grid { + grid-template-columns: repeat(2, 1fr); + } + + .stat-number { + font-size: 2rem; + } + + /* Workshop */ + .workshop-header { + flex-direction: column; + } + + .workshop-meta { + flex-direction: column; + align-items: flex-start; + } + + .topic-list { + grid-template-columns: 1fr; + } + + /* Timeline */ + .timeline { + padding-left: 1.5rem; + } + + .timeline-item { + padding-left: 1.5rem; + } + + /* Page Header */ + .page-header { + padding: 6rem 1.5rem 3rem; + } + + .page-header h1 { + font-size: 2rem; + } + + /* Footer */ + .footer-content { + grid-template-columns: 1fr; + text-align: center; + } + + /* Forms */ + .contact-form { + padding: 0 1rem; + } + + /* Deliverables */ + .deliverable-header { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .deliverable-title { + flex-direction: column; + align-items: flex-start; + } + + /* Resource filters */ + .resource-filters { + flex-direction: column; + align-items: center; + } + + .filter-btn { + width: 100%; + max-width: 300px; + text-align: center; + } +} + +/* Small Mobile (480px and below) */ +@media (max-width: 480px) { + /* Typography */ + h1 { font-size: 1.75rem; } + h2 { font-size: 1.5rem; } + + /* Hero */ + .hero h1 { + font-size: 1.75rem; + } + + /* Container */ + .container { + padding: 0 1rem; + } + + /* Buttons */ + .btn { + padding: 0.75rem 1.5rem; + font-size: 0.9rem; + width: 100%; + text-align: center; + } + + /* Cards */ + .card { + padding: 1.25rem; + } + + .card-icon { + font-size: 2rem; + } + + /* Stats */ + .stats-grid { + grid-template-columns: 1fr; + } + + /* Badge */ + .badge { + font-size: 0.75rem; + padding: 0.375rem 0.75rem; + } + + /* Resource Card */ + .resource-meta { + flex-direction: column; + gap: 0.5rem; + align-items: flex-start; + } +} + +/* Large Desktop (1400px and above) */ +@media (min-width: 1400px) { + .container { + max-width: 1320px; + } + + .hero h1 { + font-size: 4rem; + } + + .card-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +/* Print Styles */ +@media print { + nav, + .mobile-menu-btn, + .btn, + footer { + display: none; + } + + .hero { + min-height: auto; + padding: 2rem; + background: none; + color: #000; + } + + .hero h1, + .hero p { + color: #000; + } + + section { + padding: 1.5rem 0; + page-break-inside: avoid; + } + + .card { + box-shadow: none; + border: 1px solid #ddd; + page-break-inside: avoid; + } + + a { + text-decoration: underline; + } + + a[href^="http"]:after { + content: " (" attr(href) ")"; + font-size: 0.8em; + } +} + +/* Reduced Motion */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* Dark Mode Support (optional) */ +@media (prefers-color-scheme: dark) { + /* Uncomment to enable dark mode + :root { + --light-bg: #1e293b; + --white: #0f172a; + --text-color: #e2e8f0; + --text-light: #94a3b8; + --border-color: #334155; + } + + .card, + .workshop-card, + .resource-card, + .faq-item, + .deliverable-card { + background: #1e293b; + } + + .deliverable-header { + background: #0f172a; + } + */ +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..f9853d5 --- /dev/null +++ b/css/style.css @@ -0,0 +1,910 @@ +/* LLMNetOps - Main Stylesheet */ + +/* CSS Variables */ +:root { + --primary-color: #2563eb; + --primary-dark: #1d4ed8; + --primary-light: #3b82f6; + --secondary-color: #0f172a; + --accent-color: #10b981; + --text-color: #334155; + --text-light: #64748b; + --light-bg: #f8fafc; + --white: #ffffff; + --border-color: #e2e8f0; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); + --transition: all 0.3s ease; +} + +/* Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + line-height: 1.6; + color: var(--text-color); + background: var(--white); +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + color: var(--secondary-color); + line-height: 1.3; + margin-bottom: 1rem; +} + +h1 { font-size: 3rem; } +h2 { font-size: 2.5rem; } +h3 { font-size: 1.5rem; } +h4 { font-size: 1.25rem; } + +p { + margin-bottom: 1rem; + color: var(--text-color); +} + +a { + color: var(--primary-color); + text-decoration: none; + transition: var(--transition); +} + +a:hover { + color: var(--primary-dark); +} + +/* Container */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Navigation */ +nav { + background: var(--white); + padding: 1rem 2rem; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; + box-shadow: var(--shadow-md); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); + text-decoration: none; +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav-links a { + text-decoration: none; + color: var(--text-color); + font-weight: 500; + transition: var(--transition); + padding: 0.5rem 0; + position: relative; +} + +.nav-links a:hover, +.nav-links a.active { + color: var(--primary-color); +} + +.nav-links a.active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: var(--primary-color); +} + +/* Mobile Menu Button */ +.mobile-menu-btn { + display: none; + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; +} + +.mobile-menu-btn span { + display: block; + width: 25px; + height: 3px; + background: var(--text-color); + margin: 5px 0; + transition: var(--transition); +} + +/* Hero Section */ +.hero { + background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-dark) 100%); + color: var(--white); + padding: 8rem 2rem 6rem; + min-height: 100vh; + display: flex; + align-items: center; +} + +.hero-content { + max-width: 1200px; + margin: 0 auto; + text-align: center; +} + +.hero h1 { + font-size: 3.5rem; + margin-bottom: 1.5rem; + line-height: 1.2; + color: var(--white); +} + +.hero p { + font-size: 1.25rem; + max-width: 700px; + margin: 0 auto 2rem; + opacity: 0.9; + color: var(--white); +} + +.hero-badges { + display: flex; + justify-content: center; + gap: 1rem; + margin-bottom: 2rem; + flex-wrap: wrap; +} + +.badge { + background: rgba(255, 255, 255, 0.15); + padding: 0.5rem 1rem; + border-radius: 50px; + font-size: 0.875rem; + backdrop-filter: blur(10px); +} + +/* Buttons */ +.btn { + display: inline-block; + padding: 1rem 2.5rem; + border-radius: 8px; + font-weight: 600; + text-decoration: none; + transition: var(--transition); + cursor: pointer; + border: none; +} + +.btn-primary { + background: var(--primary-color); + color: var(--white); +} + +.btn-primary:hover { + background: var(--primary-dark); + transform: translateY(-2px); + color: var(--white); +} + +.btn-secondary { + background: transparent; + color: var(--white); + border: 2px solid var(--white); +} + +.btn-secondary:hover { + background: var(--white); + color: var(--secondary-color); +} + +.btn-outline { + background: transparent; + color: var(--primary-color); + border: 2px solid var(--primary-color); +} + +.btn-outline:hover { + background: var(--primary-color); + color: var(--white); +} + +.btn-group { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +/* Sections */ +section { + padding: 5rem 2rem; +} + +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-title { + text-align: center; + font-size: 2.5rem; + margin-bottom: 1rem; + color: var(--secondary-color); +} + +.section-subtitle { + text-align: center; + max-width: 600px; + margin: 0 auto; + color: var(--text-light); + font-size: 1.1rem; +} + +/* About Section */ +.about { + background: var(--light-bg); +} + +.about-content { + max-width: 800px; + margin: 0 auto; + text-align: center; +} + +/* Cards */ +.card-grid { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.card { + background: var(--white); + padding: 2rem; + border-radius: 12px; + box-shadow: var(--shadow-md); + transition: var(--transition); +} + +.card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-lg); +} + +.card-icon { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.card h3 { + font-size: 1.25rem; + margin-bottom: 0.75rem; + color: var(--secondary-color); +} + +.card p { + color: var(--text-color); + margin-bottom: 0; +} + +/* Stats Section */ +.stats { + background: var(--primary-color); + color: var(--white); +} + +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem; + text-align: center; +} + +.stat-item { + padding: 1.5rem; +} + +.stat-number { + font-size: 3rem; + font-weight: 700; + display: block; + margin-bottom: 0.5rem; +} + +.stat-label { + font-size: 1rem; + opacity: 0.9; +} + +/* Timeline */ +.timeline { + max-width: 800px; + margin: 0 auto; + position: relative; + padding-left: 2rem; +} + +.timeline::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 2px; + background: var(--primary-color); +} + +.timeline-item { + position: relative; + padding-bottom: 2rem; + padding-left: 2rem; +} + +.timeline-item::before { + content: ''; + position: absolute; + left: -2rem; + top: 0; + width: 12px; + height: 12px; + border-radius: 50%; + background: var(--primary-color); + transform: translateX(-5px); +} + +.timeline-item.completed::before { + background: var(--accent-color); +} + +.timeline-date { + font-size: 0.875rem; + color: var(--text-light); + margin-bottom: 0.5rem; +} + +.timeline-title { + font-weight: 600; + color: var(--secondary-color); + margin-bottom: 0.5rem; +} + +.timeline-description { + color: var(--text-color); +} + +/* Deliverables */ +.deliverable-card { + background: var(--white); + border-radius: 12px; + box-shadow: var(--shadow-md); + margin-bottom: 1.5rem; + overflow: hidden; +} + +.deliverable-header { + padding: 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + background: var(--light-bg); +} + +.deliverable-header:hover { + background: var(--border-color); +} + +.deliverable-title { + display: flex; + align-items: center; + gap: 1rem; +} + +.deliverable-title h3 { + margin-bottom: 0; +} + +.status-badge { + padding: 0.25rem 0.75rem; + border-radius: 50px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; +} + +.status-not-started { + background: #e2e8f0; + color: #64748b; +} + +.status-in-progress { + background: #dbeafe; + color: #2563eb; +} + +.status-completed { + background: #d1fae5; + color: #059669; +} + +.deliverable-content { + padding: 1.5rem; + display: none; +} + +.deliverable-content.active { + display: block; +} + +.budget-badge { + background: var(--primary-color); + color: var(--white); + padding: 0.25rem 0.75rem; + border-radius: 50px; + font-size: 0.875rem; + font-weight: 600; +} + +/* Progress Bar */ +.progress-container { + margin-bottom: 2rem; +} + +.progress-bar { + height: 8px; + background: var(--border-color); + border-radius: 4px; + overflow: hidden; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); + border-radius: 4px; + transition: width 0.5s ease; +} + +.progress-label { + display: flex; + justify-content: space-between; + margin-top: 0.5rem; + font-size: 0.875rem; + color: var(--text-light); +} + +/* Workshops */ +.workshop-card { + background: var(--white); + border-radius: 12px; + box-shadow: var(--shadow-md); + padding: 2rem; + margin-bottom: 2rem; + border-left: 4px solid var(--primary-color); +} + +.workshop-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 1.5rem; + flex-wrap: wrap; + gap: 1rem; +} + +.workshop-meta { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.workshop-meta span { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-light); + font-size: 0.875rem; +} + +.topic-list { + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 0.75rem; + margin: 1.5rem 0; +} + +.topic-list li { + display: flex; + align-items: flex-start; + gap: 0.5rem; +} + +.topic-list li::before { + content: 'βœ“'; + color: var(--accent-color); + font-weight: bold; +} + +/* Resources */ +.resource-filters { + display: flex; + gap: 1rem; + margin-bottom: 2rem; + flex-wrap: wrap; + justify-content: center; +} + +.filter-btn { + padding: 0.5rem 1.5rem; + border: 2px solid var(--border-color); + border-radius: 50px; + background: var(--white); + color: var(--text-color); + cursor: pointer; + transition: var(--transition); +} + +.filter-btn:hover, +.filter-btn.active { + border-color: var(--primary-color); + background: var(--primary-color); + color: var(--white); +} + +.resource-card { + background: var(--white); + border-radius: 12px; + box-shadow: var(--shadow-md); + padding: 1.5rem; + display: flex; + flex-direction: column; +} + +.resource-type { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 4px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + margin-bottom: 1rem; +} + +.type-module { + background: #dbeafe; + color: #2563eb; +} + +.type-case-study { + background: #fef3c7; + color: #d97706; +} + +.type-report { + background: #d1fae5; + color: #059669; +} + +.type-video { + background: #fce7f3; + color: #db2777; +} + +.resource-card h3 { + font-size: 1.1rem; + margin-bottom: 0.5rem; +} + +.resource-card p { + font-size: 0.9rem; + color: var(--text-light); + flex-grow: 1; +} + +.resource-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--border-color); +} + +.resource-meta span { + font-size: 0.8rem; + color: var(--text-light); +} + +/* Contact Section */ +.contact { + background: var(--secondary-color); + color: var(--white); + text-align: center; +} + +.contact .section-title { + color: var(--white); +} + +.contact .section-subtitle { + color: rgba(255, 255, 255, 0.8); +} + +.contact-links { + display: flex; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; + margin-top: 2rem; +} + +.contact-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(255, 255, 255, 0.1); + color: var(--white); + padding: 0.75rem 1.5rem; + border-radius: 8px; + text-decoration: none; + transition: var(--transition); +} + +.contact-link:hover { + background: rgba(255, 255, 255, 0.2); + color: var(--white); +} + +/* Contact Form */ +.contact-form { + max-width: 600px; + margin: 2rem auto 0; + text-align: left; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--white); +} + +.form-group input, +.form-group textarea, +.form-group select { + width: 100%; + padding: 0.75rem 1rem; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + color: var(--white); + font-size: 1rem; +} + +.form-group input::placeholder, +.form-group textarea::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + outline: none; + border-color: var(--primary-color); + background: rgba(255, 255, 255, 0.15); +} + +/* Footer */ +footer { + background: var(--secondary-color); + color: rgba(255, 255, 255, 0.6); + padding: 3rem 2rem 2rem; +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.footer-section h4 { + color: var(--white); + margin-bottom: 1rem; +} + +.footer-section ul { + list-style: none; +} + +.footer-section ul li { + margin-bottom: 0.5rem; +} + +.footer-section a { + color: rgba(255, 255, 255, 0.6); +} + +.footer-section a:hover { + color: var(--white); +} + +.footer-bottom { + text-align: center; + padding-top: 2rem; + margin-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.partner-logos { + display: flex; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; + margin-top: 1rem; +} + +.partner-logos img { + height: 40px; + opacity: 0.7; + transition: var(--transition); +} + +.partner-logos img:hover { + opacity: 1; +} + +/* Page Header */ +.page-header { + background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-dark) 100%); + color: var(--white); + padding: 8rem 2rem 4rem; + text-align: center; +} + +.page-header h1 { + color: var(--white); + margin-bottom: 1rem; +} + +.page-header p { + color: rgba(255, 255, 255, 0.9); + max-width: 600px; + margin: 0 auto; +} + +/* Breadcrumb */ +.breadcrumb { + display: flex; + gap: 0.5rem; + justify-content: center; + margin-bottom: 1rem; + font-size: 0.9rem; +} + +.breadcrumb a { + color: rgba(255, 255, 255, 0.7); +} + +.breadcrumb a:hover { + color: var(--white); +} + +.breadcrumb span { + color: rgba(255, 255, 255, 0.5); +} + +/* FAQ Accordion */ +.faq-item { + background: var(--white); + border-radius: 8px; + margin-bottom: 1rem; + box-shadow: var(--shadow-sm); + overflow: hidden; +} + +.faq-question { + padding: 1.25rem; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + font-weight: 500; +} + +.faq-question:hover { + background: var(--light-bg); +} + +.faq-question::after { + content: '+'; + font-size: 1.5rem; + color: var(--primary-color); + transition: var(--transition); +} + +.faq-item.active .faq-question::after { + transform: rotate(45deg); +} + +.faq-answer { + padding: 0 1.25rem; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease, padding 0.3s ease; +} + +.faq-item.active .faq-answer { + padding: 0 1.25rem 1.25rem; + max-height: 500px; +} + +/* Animations */ +.fade-in { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.6s ease, transform 0.6s ease; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} + +/* Utilities */ +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.mt-1 { margin-top: 0.5rem; } +.mt-2 { margin-top: 1rem; } +.mt-3 { margin-top: 1.5rem; } +.mt-4 { margin-top: 2rem; } +.mt-5 { margin-top: 3rem; } + +.mb-1 { margin-bottom: 0.5rem; } +.mb-2 { margin-bottom: 1rem; } +.mb-3 { margin-bottom: 1.5rem; } +.mb-4 { margin-bottom: 2rem; } +.mb-5 { margin-bottom: 3rem; } + +.py-1 { padding-top: 0.5rem; padding-bottom: 0.5rem; } +.py-2 { padding-top: 1rem; padding-bottom: 1rem; } +.py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; } +.py-4 { padding-top: 2rem; padding-bottom: 2rem; } +.py-5 { padding-top: 3rem; padding-bottom: 3rem; } diff --git a/data/deliverables.json b/data/deliverables.json new file mode 100644 index 0000000..2ab2b8d --- /dev/null +++ b/data/deliverables.json @@ -0,0 +1,156 @@ +{ + "deliverables": [ + { + "id": 1, + "title": "Curriculum Development", + "status": "not_started", + "budget": 10000, + "description": "Initial survey, curriculum design, and prototyping platform for locally-hosted LLM training materials.", + "pso": "A co-created curriculum on locally-hosted LLMs tailored for network operations, developed collaboratively with IDREN member institutions.", + "keyIndicators": [ + "At least 8 survey responses from IDREN institutions", + "1 draft curriculum developed", + "1 demo prototype shared for feedback" + ], + "activities": [ + { + "name": "Initial Needs Assessment Survey", + "description": "Distribute survey to identify technical gaps and institutional needs across IDREN members", + "target": "1 report", + "status": "not_started" + }, + { + "name": "Curriculum Design and Development", + "description": "Design comprehensive curriculum based on survey findings", + "target": "1 curriculum document", + "status": "not_started" + }, + { + "name": "Module Development", + "description": "Develop 5 training modules covering LLM fundamentals to advanced applications", + "target": "5 modules", + "status": "not_started" + }, + { + "name": "Platform Prototyping", + "description": "Build demo prototype for hands-on LLM deployment exercises", + "target": "1 prototype", + "status": "not_started" + }, + { + "name": "Pilot Feedback Collection", + "description": "Gather feedback from pilot participants to refine materials", + "target": "1 feedback report", + "status": "not_started" + }, + { + "name": "Developing a Webpage Portal", + "description": "Create web portal for hosting training resources and community engagement", + "target": "1 website", + "status": "in_progress" + } + ] + }, + { + "id": 2, + "title": "Workshop Delivery", + "status": "not_started", + "budget": 18000, + "description": "Two hands-on workshop sessions focusing on LLM fundamentals and AI agentic workflows for network operations.", + "pso": "Hands-on workshops that train at least 20 network operations professionals from IDREN institutions on privacy-aware LLM deployment.", + "keyIndicators": [ + "2 workshop sessions delivered", + "20+ participants trained", + "70% knowledge improvement demonstrated" + ], + "activities": [ + { + "name": "Workshop Planning", + "description": "Develop workshop agenda, prepare materials, and coordinate logistics", + "target": "Complete planning documentation", + "status": "not_started" + }, + { + "name": "Workshop Session 1: LLM Fundamentals", + "description": "Introduction to Large Language Models, privacy-aware AI, and local deployment concepts", + "target": "1 session delivered", + "status": "not_started" + }, + { + "name": "Workshop Session 2: AI Agentic Workflow", + "description": "Hands-on training on AI agentic workflows and RAG pipelines for network operations", + "target": "1 session delivered", + "status": "not_started" + }, + { + "name": "Workshop Documentary", + "description": "Document workshop proceedings, create recordings and materials for future reference", + "target": "Complete documentation", + "status": "not_started" + } + ] + }, + { + "id": 3, + "title": "Survey and Analysis", + "status": "not_started", + "budget": 1000, + "description": "Comprehensive survey, case studies, and whitepaper development to document project impact.", + "pso": "Research outputs including case studies and policy insights for AI adoption in network operations across IDREN.", + "keyIndicators": [ + "Final survey completed", + "3+ case studies documented", + "1 whitepaper published" + ], + "activities": [ + { + "name": "Final Survey & Data Collection", + "description": "Conduct comprehensive survey to measure project impact and knowledge improvement", + "target": "1 survey report", + "status": "not_started" + }, + { + "name": "Case Brief & Testimonial Collection", + "description": "Document real-world implementation examples from participating institutions", + "target": "3+ case studies", + "status": "not_started" + }, + { + "name": "Whitepaper on NetOps with AI", + "description": "Publish comprehensive whitepaper on AI adoption for network operations with policy insights", + "target": "1 whitepaper", + "status": "not_started" + } + ] + }, + { + "id": 4, + "title": "Reporting", + "status": "not_started", + "budget": 1000, + "description": "Project reporting and dissemination of findings to stakeholders and funding organization.", + "pso": "Comprehensive project documentation and reporting to ISIF Asia and stakeholders.", + "keyIndicators": [ + "Midterm report submitted", + "Final report completed", + "Findings disseminated" + ], + "activities": [ + { + "name": "Midterm Reporting", + "description": "Submit progress report at project midpoint", + "target": "1 midterm report", + "status": "not_started" + }, + { + "name": "Final Report Writing & Dissemination", + "description": "Complete final project report and disseminate findings", + "target": "1 final report", + "status": "not_started" + } + ] + } + ], + "totalBudget": 30000, + "projectProgress": 5 +} diff --git a/data/resources.json b/data/resources.json new file mode 100644 index 0000000..caeb99b --- /dev/null +++ b/data/resources.json @@ -0,0 +1,102 @@ +{ + "resources": [ + { + "id": 1, + "title": "Module 1: Introduction to Large Language Models", + "type": "training_module", + "category": "Training Modules", + "language": "bilingual", + "description": "Comprehensive introduction to LLMs covering architecture, capabilities, and applications in network operations.", + "fileSize": "2.5 MB", + "format": "PDF", + "status": "coming_soon", + "downloadUrl": "#" + }, + { + "id": 2, + "title": "Module 2: Privacy-Aware AI Deployment", + "type": "training_module", + "category": "Training Modules", + "language": "bilingual", + "description": "Deep dive into privacy considerations, data protection, and institutional autonomy in AI deployment.", + "fileSize": "3.0 MB", + "format": "PDF", + "status": "coming_soon", + "downloadUrl": "#" + }, + { + "id": 3, + "title": "Module 3: RAG Pipelines for Network Documentation", + "type": "training_module", + "category": "Training Modules", + "language": "bilingual", + "description": "Practical guide to building Retrieval-Augmented Generation pipelines for network documentation and troubleshooting.", + "fileSize": "4.2 MB", + "format": "PDF", + "status": "coming_soon", + "downloadUrl": "#" + }, + { + "id": 4, + "title": "Module 4: AI Agentic Workflows", + "type": "training_module", + "category": "Training Modules", + "language": "bilingual", + "description": "Advanced module on building AI agents for automated network operations tasks.", + "fileSize": "3.8 MB", + "format": "PDF", + "status": "coming_soon", + "downloadUrl": "#" + }, + { + "id": 5, + "title": "Module 5: Infrastructure Integration", + "type": "training_module", + "category": "Training Modules", + "language": "bilingual", + "description": "Guide to integrating locally-hosted LLMs with existing network infrastructure and monitoring systems.", + "fileSize": "3.5 MB", + "format": "PDF", + "status": "coming_soon", + "downloadUrl": "#" + }, + { + "id": 6, + "title": "Initial Needs Assessment Report", + "type": "report", + "category": "Reports", + "language": "english", + "description": "Survey results and analysis of AI adoption challenges across IDREN member institutions.", + "fileSize": "1.8 MB", + "format": "PDF", + "status": "coming_soon", + "downloadUrl": "#" + }, + { + "id": 7, + "title": "NetOps with AI: Policy Insights for IDREN", + "type": "whitepaper", + "category": "White Papers", + "language": "english", + "description": "Comprehensive whitepaper on AI adoption policies and recommendations for network operations in educational institutions.", + "fileSize": "2.2 MB", + "format": "PDF", + "status": "coming_soon", + "downloadUrl": "#" + } + ], + "categories": [ + "All", + "Training Modules", + "Case Studies", + "Reports", + "Videos", + "White Papers" + ], + "languages": [ + "All", + "English", + "Indonesian", + "Bilingual" + ] +} diff --git a/data/workshops.json b/data/workshops.json new file mode 100644 index 0000000..dbaac22 --- /dev/null +++ b/data/workshops.json @@ -0,0 +1,121 @@ +{ + "workshops": [ + { + "id": 1, + "title": "Session 1: Foundations of Local LLM Deployment", + "subtitle": "Introduction to Large Language Models and Privacy-Aware AI", + "date": "TBA", + "time": "TBA", + "duration": "4 hours", + "location": "TBA", + "format": "Hybrid (In-person + Online)", + "status": "coming_soon", + "description": "This foundational session introduces participants to Large Language Models, covering core concepts, privacy considerations, and the fundamentals of local deployment. Participants will learn why locally-hosted LLMs are crucial for institutional data privacy.", + "topics": [ + "Introduction to Large Language Models (LLMs)", + "Understanding AI privacy concerns", + "Local vs. cloud-based AI deployment", + "Privacy-aware AI principles", + "Introduction to open-source LLM models", + "Basic RAG (Retrieval-Augmented Generation) concepts", + "Infrastructure requirements overview" + ], + "prerequisites": [ + "Basic understanding of networking concepts", + "Familiarity with command-line interfaces", + "No prior AI/ML experience required" + ], + "outcomes": [ + "Understand core LLM concepts and terminology", + "Recognize privacy implications of AI deployment", + "Evaluate local vs. cloud AI solutions", + "Identify suitable open-source LLM models" + ], + "targetAudience": "Network operations staff, IT administrators, and technical team members from IDREN member institutions", + "materials": { + "language": "Bilingual (Indonesian/English)", + "includes": [ + "Presentation slides", + "Hands-on exercise guides", + "Reference documentation", + "Setup guides" + ] + } + }, + { + "id": 2, + "title": "Session 2: AI Agentic Workflow for Network Operations", + "subtitle": "Practical Implementation and Hands-on Exercises", + "date": "TBA", + "time": "TBA", + "duration": "4 hours", + "location": "TBA", + "format": "Hybrid (In-person + Online)", + "status": "coming_soon", + "description": "Building on Session 1, this advanced session focuses on practical implementation of AI agentic workflows for network operations. Participants will work with live prototypes and learn to integrate LLMs into their network management workflows.", + "topics": [ + "AI Agentic workflow fundamentals", + "Building RAG pipelines for network documentation", + "Live prototype demonstration", + "Contextual AI for network troubleshooting", + "Integration with existing infrastructure", + "Best practices for production deployment", + "Security considerations" + ], + "prerequisites": [ + "Completion of Session 1 (or equivalent knowledge)", + "Basic Python knowledge (helpful but not required)", + "Access to a test environment" + ], + "outcomes": [ + "Build basic RAG pipelines", + "Deploy LLMs for network operations use cases", + "Create contextual AI assistants for documentation", + "Implement security best practices" + ], + "targetAudience": "Participants who completed Session 1, network engineers, and IT staff ready for hands-on implementation", + "materials": { + "language": "Bilingual (Indonesian/English)", + "includes": [ + "Presentation slides", + "Code repositories", + "Step-by-step deployment guides", + "Troubleshooting documentation" + ] + } + } + ], + "registrationInfo": { + "status": "coming_soon", + "fee": "Free (Funded by ISIF Asia 2025)", + "capacity": "20-30 participants per session", + "eligibility": "Network operations professionals from IDREN member institutions", + "certificateProvided": true + }, + "faq": [ + { + "question": "Who can participate in the workshops?", + "answer": "The workshops are primarily designed for network operations professionals, IT administrators, and technical staff from IDREN member institutions. However, we welcome participants from other educational and research institutions in Indonesia who are interested in privacy-aware AI deployment." + }, + { + "question": "Is there a registration fee?", + "answer": "No, the workshops are free of charge. This project is funded by APNIC Foundation through the ISIF Asia 2025 grant program." + }, + { + "question": "What equipment do I need?", + "answer": "Participants should have a laptop with at least 8GB RAM. For hands-on exercises, we'll provide access to cloud-based environments. Specific setup instructions will be shared before each workshop." + }, + { + "question": "Will workshop materials be available afterwards?", + "answer": "Yes, all workshop materials including slides, recordings (when available), and hands-on guides will be made available through our Resources page. Materials are provided in both Indonesian and English." + }, + { + "question": "What language will instruction be in?", + "answer": "Instruction will be primarily in Indonesian with materials available in both Indonesian and English. English support will be available for non-Indonesian speakers." + }, + { + "question": "Do I need prior AI/ML experience?", + "answer": "No prior AI or machine learning experience is required for Session 1. Basic familiarity with networking concepts and command-line interfaces is helpful. Session 2 builds on Session 1 content." + } + ] +} diff --git a/deliverables.html b/deliverables.html new file mode 100644 index 0000000..377a35c --- /dev/null +++ b/deliverables.html @@ -0,0 +1,351 @@ + + + + + + + Deliverables - LLMNetOps + + + + + + + + + + + + +
+
+
+

Overall Project Progress

+
+
+
+
+ 5% Complete + Total Budget: $30,000 USD +
+
+
+
+ + +
+
+ +
+
+
+ Not Started +

1. Curriculum Development

+
+ $10,000 +
+
+

Initial survey, curriculum design, and prototyping platform for locally-hosted LLM training materials.

+ +
+

πŸ“Š Key Indicators

+
    +
  • At least 8 survey responses from IDREN institutions
  • +
  • 1 draft curriculum developed
  • +
  • 1 demo prototype shared for feedback
  • +
+
+ +

Activities

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ActivityTargetStatus
Initial Needs Assessment Survey1 reportNot Started
Curriculum Design and Development1 curriculumNot Started
Module Development (5 modules)5 modulesNot Started
Platform Prototyping1 prototypeNot Started
Pilot Feedback Collection1 reportNot Started
Developing a Webpage Portal1 websiteIn Progress
+
+
+ + +
+
+
+ Not Started +

2. Workshop Delivery

+
+ $18,000 +
+
+

Two hands-on workshop sessions focusing on LLM fundamentals and AI agentic workflows for network operations.

+ +
+

πŸ“Š Key Indicators

+
    +
  • 2 workshop sessions delivered
  • +
  • 20+ participants trained
  • +
  • 70% knowledge improvement demonstrated
  • +
+
+ +

Activities

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ActivityTargetStatus
Workshop PlanningComplete planningNot Started
Workshop Session 1: LLM Fundamentals1 sessionNot Started
Workshop Session 2: AI Agentic Workflow1 sessionNot Started
Workshop DocumentaryComplete documentationNot Started
+
+
+ + +
+
+
+ Not Started +

3. Survey and Analysis

+
+ $1,000 +
+
+

Comprehensive survey, case studies, and whitepaper development to document project impact.

+ +
+

πŸ“Š Key Indicators

+
    +
  • Final survey completed
  • +
  • 3+ case studies documented
  • +
  • 1 whitepaper published
  • +
+
+ +

Activities

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ActivityTargetStatus
Final Survey & Data Collection1 survey reportNot Started
Case Brief & Testimonial Collection3+ case studiesNot Started
Whitepaper on NetOps with AI1 whitepaperNot Started
+
+
+ + +
+
+
+ Not Started +

4. Reporting

+
+ $1,000 +
+
+

Project reporting and dissemination of findings to stakeholders and funding organization.

+ +
+

πŸ“Š Key Indicators

+
    +
  • Midterm report submitted
  • +
  • Final report completed
  • +
  • Findings disseminated
  • +
+
+ +

Activities

+ + + + + + + + + + + + + + + + + + + + +
ActivityTargetStatus
Midterm Reporting1 midterm reportNot Started
Final Report Writing & Dissemination1 final reportNot Started
+
+
+
+
+ + +
+
+

Budget Summary

+
+
+
πŸ“š
+

$10,000

+

Curriculum Development (33%)

+
+
+
πŸŽ“
+

$18,000

+

Workshop Delivery (60%)

+
+
+
πŸ“Š
+

$1,000

+

Survey & Analysis (3%)

+
+
+
πŸ“
+

$1,000

+

Reporting (3%)

+
+
+
+
+ + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..ecc7b61 --- /dev/null +++ b/index.html @@ -0,0 +1,206 @@ + + + + + + + + + + + + + LLMNetOps - Privacy-First AI for Network Operations + + + + + + + + + +
+
+
+ πŸŽ“ ISIF Asia 2025 + πŸ›οΈ Universitas Brawijaya +
+

Strengthening Network Operations with Privacy-First AI

+

Building foundational AI knowledge through locally-hosted open-source LLMs, fostering peer collaboration, and empowering IDREN member institutions with privacy-aware solutions for network operations.

+ +
+
+ + +
+

About LLMNetOps

+

Bridging the AI Literacy Gap in Network Operations

+
+

Many IDREN member institutions struggle to adopt AI-supported network management due to limited staff, uneven expertise, and reliance on undocumented knowledge. Generative AI offers potential for improving documentation and troubleshooting, but most administrators lack training, confidence, and tools that respect data privacyβ€”creating an AI-literacy gap.

+
+

LLMNetOps aims to address this gap by building foundational AI knowledge, fostering peer collaboration, and promoting locally-hosted open-source LLM models as privacy-aware solutions tailored to institutional needs in network operations.

+
+ Read More About Our Mission +
+
+ + +
+

Key Pillars

+

Our strategic approach to AI-enabled network operations

+
+
+
πŸŽ“
+

Building Capabilities

+

Developing AI literacy and technical skills among network operations professionals through structured training and hands-on workshops.

+
+
+
πŸ’‘
+

Driving Digital Innovation

+

Introducing contextual AI applications specifically designed for infrastructure operations, documentation, and troubleshooting.

+
+
+
πŸš€
+

Supporting Digital Transformation

+

Enabling IDREN institutions to confidently adopt privacy-first AI solutions that align with their specific requirements.

+
+
+
+ + +
+
+
+
+ 20 + Target Participants +
+
+ 2 + Workshop Sessions +
+
+ 5 + Training Modules +
+
+ 8 + IDREN Institutions +
+
+
+
+ + +
+

Project Goals

+

Empowering institutions with privacy-first AI solutions

+
+
+
πŸ”’
+

Privacy-First AI Adoption

+

Promote locally-hosted open-source LLM models as a practical solution for institutions concerned about data privacy and institutional autonomy.

+
+
+
πŸ–₯️
+

Contextual AI for Infrastructure

+

Introduce the use of generative AI specifically to support technical teams in managing, understanding, and documenting their own infrastructure.

+
+
+
πŸ“š
+

Bridging the AI Literacy Gap

+

Empower network and IT staff with the knowledge and confidence to use AI in their daily tasks.

+
+
+
🀝
+

Knowledge-Sharing Community

+

Build a culture of learning and shared problem-solving through workshops and peer collaboration.

+
+
+
πŸ›‘οΈ
+

Secure LLM Integration

+

Investigate how locally-hosted LLMs can be safely integrated into network operations while ensuring data security.

+
+
+
🎯
+

Tailored Solutions

+

Empower IDREN members to confidently assess and adopt AI solutions that align with their specific requirements.

+
+
+
+ + +
+

Get Involved

+

Interested in LLMNetOps? Join our upcoming workshops or connect with us!

+
+ View Workshops + Contact Us +
+ +
+ + + + + + + + + + + + + diff --git a/js/animations.js b/js/animations.js new file mode 100644 index 0000000..da6a518 --- /dev/null +++ b/js/animations.js @@ -0,0 +1,200 @@ +// LLMNetOps - Animations JavaScript + +// Fade in on scroll animation +function initScrollReveal() { + const revealElements = document.querySelectorAll('.reveal'); + + const revealOnScroll = () => { + revealElements.forEach(element => { + const elementTop = element.getBoundingClientRect().top; + const elementVisible = 150; + + if (elementTop < window.innerHeight - elementVisible) { + element.classList.add('revealed'); + } + }); + }; + + window.addEventListener('scroll', revealOnScroll); + revealOnScroll(); // Check on initial load +} + +// Staggered animation for card grids +function initStaggerAnimation() { + const grids = document.querySelectorAll('.card-grid, .features-grid'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const cards = entry.target.querySelectorAll('.card, .feature-card'); + cards.forEach((card, index) => { + card.style.animationDelay = `${index * 0.1}s`; + card.classList.add('animate-in'); + }); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.1 }); + + grids.forEach(grid => observer.observe(grid)); +} + +// Parallax effect for hero section +function initParallax() { + const hero = document.querySelector('.hero'); + + if (!hero) return; + + window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + hero.style.backgroundPositionY = `${scrolled * 0.5}px`; + }); +} + +// Typing effect for hero text +function typeWriter(element, text, speed = 50) { + let i = 0; + element.textContent = ''; + + function type() { + if (i < text.length) { + element.textContent += text.charAt(i); + i++; + setTimeout(type, speed); + } + } + + type(); +} + +// Number counting animation +function countUp(element, target, duration = 2000) { + const start = 0; + const startTime = performance.now(); + + function update(currentTime) { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + + // Easing function + const easeOutQuad = progress * (2 - progress); + + const current = Math.floor(easeOutQuad * target); + element.textContent = current.toLocaleString(); + + if (progress < 1) { + requestAnimationFrame(update); + } else { + element.textContent = target.toLocaleString(); + } + } + + requestAnimationFrame(update); +} + +// Initialize stats counter when visible +function initStatsCounter() { + const statNumbers = document.querySelectorAll('.stat-number[data-target]'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const target = parseInt(entry.target.dataset.target); + countUp(entry.target, target); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + statNumbers.forEach(stat => observer.observe(stat)); +} + +// Progress bar animation +function animateProgressBars() { + const progressBars = document.querySelectorAll('.progress-fill'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const targetWidth = entry.target.dataset.progress || '0'; + entry.target.style.width = targetWidth + '%'; + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + progressBars.forEach(bar => { + bar.style.width = '0%'; + observer.observe(bar); + }); +} + +// Accordion animation +function initAccordion() { + const accordionItems = document.querySelectorAll('.deliverable-card, .faq-item'); + + accordionItems.forEach(item => { + const header = item.querySelector('.deliverable-header, .faq-question'); + const content = item.querySelector('.deliverable-content, .faq-answer'); + + if (header && content) { + header.addEventListener('click', () => { + const isActive = item.classList.contains('active'); + + // Close all other items + accordionItems.forEach(otherItem => { + if (otherItem !== item) { + otherItem.classList.remove('active'); + const otherContent = otherItem.querySelector('.deliverable-content, .faq-answer'); + if (otherContent) { + otherContent.style.maxHeight = null; + } + } + }); + + // Toggle current item + item.classList.toggle('active'); + + if (!isActive) { + content.style.maxHeight = content.scrollHeight + 'px'; + } else { + content.style.maxHeight = null; + } + }); + } + }); +} + +// Smooth scroll with offset for fixed header +function smoothScrollTo(targetId) { + const target = document.querySelector(targetId); + if (target) { + const navHeight = document.querySelector('nav').offsetHeight; + const targetPosition = target.offsetTop - navHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } +} + +// Initialize all animations +function initAnimations() { + initScrollReveal(); + initStaggerAnimation(); + initStatsCounter(); + animateProgressBars(); + initAccordion(); +} + +// Run when DOM is loaded +document.addEventListener('DOMContentLoaded', initAnimations); + +// Export for module use +window.Animations = { + typeWriter, + countUp, + smoothScrollTo, + initAccordion +}; diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..9ee0bc4 --- /dev/null +++ b/js/main.js @@ -0,0 +1,139 @@ +// LLMNetOps - Main JavaScript + +document.addEventListener('DOMContentLoaded', function() { + // Initialize all components + initNavigation(); + initScrollAnimations(); + initBackToTop(); + initCurrentYear(); +}); + +// Update copyright year +function initCurrentYear() { + const yearElements = document.querySelectorAll('.current-year'); + const currentYear = new Date().getFullYear(); + yearElements.forEach(el => { + el.textContent = currentYear; + }); +} + +// Initialize scroll-based animations +function initScrollAnimations() { + const fadeElements = document.querySelectorAll('.fade-in'); + + const observerOptions = { + root: null, + rootMargin: '0px', + threshold: 0.1 + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + fadeElements.forEach(element => { + observer.observe(element); + }); +} + +// Back to top button +function initBackToTop() { + const backToTopBtn = document.querySelector('.back-to-top'); + + if (!backToTopBtn) return; + + window.addEventListener('scroll', () => { + if (window.pageYOffset > 300) { + backToTopBtn.classList.add('visible'); + } else { + backToTopBtn.classList.remove('visible'); + } + }); + + backToTopBtn.addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); +} + +// Smooth scroll for anchor links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const href = this.getAttribute('href'); + if (href === '#') return; + + e.preventDefault(); + const target = document.querySelector(href); + if (target) { + const navHeight = document.querySelector('nav').offsetHeight; + const targetPosition = target.offsetTop - navHeight; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); +}); + +// Utility function for debouncing +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +// Counter animation for statistics +function animateCounter(element, target, duration = 2000) { + let start = 0; + const increment = target / (duration / 16); + + function updateCounter() { + start += increment; + if (start < target) { + element.textContent = Math.floor(start); + requestAnimationFrame(updateCounter); + } else { + element.textContent = target; + } + } + + updateCounter(); +} + +// Initialize counters when they come into view +function initCounters() { + const counters = document.querySelectorAll('[data-counter]'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const target = parseInt(entry.target.dataset.counter); + animateCounter(entry.target, target); + observer.unobserve(entry.target); + } + }); + }, { threshold: 0.5 }); + + counters.forEach(counter => observer.observe(counter)); +} + +// Export functions for use in other modules +window.LLMNetOps = { + debounce, + animateCounter, + initCounters +}; diff --git a/js/navigation.js b/js/navigation.js new file mode 100644 index 0000000..fa4d965 --- /dev/null +++ b/js/navigation.js @@ -0,0 +1,114 @@ +// LLMNetOps - Navigation JavaScript + +function initNavigation() { + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + const navLinks = document.querySelector('.nav-links'); + const nav = document.querySelector('nav'); + + // Mobile menu toggle + if (mobileMenuBtn && navLinks) { + mobileMenuBtn.addEventListener('click', function() { + navLinks.classList.toggle('active'); + this.classList.toggle('active'); + + // Animate hamburger to X + const spans = this.querySelectorAll('span'); + if (this.classList.contains('active')) { + spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)'; + spans[1].style.opacity = '0'; + spans[2].style.transform = 'rotate(-45deg) translate(7px, -6px)'; + } else { + spans[0].style.transform = 'none'; + spans[1].style.opacity = '1'; + spans[2].style.transform = 'none'; + } + }); + + // Close mobile menu when clicking a link + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + navLinks.classList.remove('active'); + mobileMenuBtn.classList.remove('active'); + const spans = mobileMenuBtn.querySelectorAll('span'); + spans[0].style.transform = 'none'; + spans[1].style.opacity = '1'; + spans[2].style.transform = 'none'; + }); + }); + + // Close mobile menu when clicking outside + document.addEventListener('click', (e) => { + if (!nav.contains(e.target) && navLinks.classList.contains('active')) { + navLinks.classList.remove('active'); + mobileMenuBtn.classList.remove('active'); + const spans = mobileMenuBtn.querySelectorAll('span'); + spans[0].style.transform = 'none'; + spans[1].style.opacity = '1'; + spans[2].style.transform = 'none'; + } + }); + } + + // Navbar scroll effect + let lastScroll = 0; + window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + // Add shadow on scroll + if (currentScroll > 50) { + nav.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.1)'; + } else { + nav.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; + } + + lastScroll = currentScroll; + }); + + // Set active nav link based on current page + setActiveNavLink(); +} + +function setActiveNavLink() { + const currentPage = window.location.pathname.split('/').pop() || 'index.html'; + const navLinks = document.querySelectorAll('.nav-links a'); + + navLinks.forEach(link => { + const href = link.getAttribute('href'); + if (href === currentPage || + (currentPage === 'index.html' && href === 'index.html') || + (currentPage === '' && href === 'index.html')) { + link.classList.add('active'); + } else { + link.classList.remove('active'); + } + }); +} + +// Dropdown menu support (if needed) +function initDropdowns() { + const dropdowns = document.querySelectorAll('.nav-dropdown'); + + dropdowns.forEach(dropdown => { + const toggle = dropdown.querySelector('.dropdown-toggle'); + const menu = dropdown.querySelector('.dropdown-menu'); + + if (toggle && menu) { + toggle.addEventListener('click', (e) => { + e.preventDefault(); + dropdown.classList.toggle('active'); + }); + + // Close when clicking outside + document.addEventListener('click', (e) => { + if (!dropdown.contains(e.target)) { + dropdown.classList.remove('active'); + } + }); + } + }); +} + +// Export for module use +if (typeof module !== 'undefined' && module.exports) { + module.exports = { initNavigation, setActiveNavLink, initDropdowns }; +} diff --git a/resources.html b/resources.html new file mode 100644 index 0000000..01e0848 --- /dev/null +++ b/resources.html @@ -0,0 +1,273 @@ + + + + + + + Resources - LLMNetOps + + + + + + + + + + + + +
+
+
+ + + + + +
+
+
+ + +
+
+

Training Modules

+

Comprehensive curriculum on locally-hosted LLMs for network operations

+ +
+ πŸ“š +
+ Coming Soon
+ Training modules are currently in development and will be available after the first workshop session. +
+
+ +
+
+ Training Module +

Module 1: Introduction to Large Language Models

+

Comprehensive introduction to LLMs covering architecture, capabilities, and applications in network operations.

+
+ 🌐 Bilingual (ID/EN) + Coming Soon +
+
+ +
+ Training Module +

Module 2: Privacy-Aware AI Deployment

+

Deep dive into privacy considerations, data protection, and institutional autonomy in AI deployment.

+
+ 🌐 Bilingual (ID/EN) + Coming Soon +
+
+ +
+ Training Module +

Module 3: RAG Pipelines for Network Documentation

+

Practical guide to building Retrieval-Augmented Generation pipelines for network documentation and troubleshooting.

+
+ 🌐 Bilingual (ID/EN) + Coming Soon +
+
+ +
+ Training Module +

Module 4: AI Agentic Workflows

+

Advanced module on building AI agents for automated network operations tasks.

+
+ 🌐 Bilingual (ID/EN) + Coming Soon +
+
+ +
+ Training Module +

Module 5: Infrastructure Integration

+

Guide to integrating locally-hosted LLMs with existing network infrastructure and monitoring systems.

+
+ 🌐 Bilingual (ID/EN) + Coming Soon +
+
+
+
+
+ + +
+
+

Reports & White Papers

+

Research outputs and policy insights

+ +
+
+ Report +

Initial Needs Assessment Report

+

Survey results and analysis of AI adoption challenges across IDREN member institutions.

+
+ πŸ“„ PDF + Coming Soon +
+
+ +
+ White Paper +

NetOps with AI: Policy Insights for IDREN

+

Comprehensive whitepaper on AI adoption policies and recommendations for network operations in educational institutions.

+
+ πŸ“„ PDF + Coming Soon +
+
+
+
+
+ + +
+
+

Case Studies

+

Real-world implementation examples from IDREN institutions

+ +
+ πŸ“‹ +
+ Case Studies Coming Soon
+ Case studies will be developed after workshop completion, documenting real-world implementation experiences from participating institutions. +
+
+ +
+

Contribute a Case Study

+

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.

+ Contact Us to Contribute +
+
+
+ + +
+
+

Helpful External Resources

+

Recommended resources for learning about LLMs and AI deployment

+ +
+
+
πŸ¦™
+

Ollama

+

Run large language models locally. An easy way to get started with locally-hosted LLMs.

+ Visit Website β†’ +
+ +
+
πŸ€—
+

Hugging Face

+

The AI community building the future. Access thousands of open-source models and datasets.

+ Visit Website β†’ +
+ +
+
πŸ”—
+

LangChain

+

Build applications with LLMs through composability. Framework for RAG pipelines and AI agents.

+ Visit Website β†’ +
+ +
+
πŸ“–
+

APNIC Blog

+

Latest news and insights from the Asia-Pacific networking community.

+ Visit Website β†’ +
+
+
+
+ + +
+

Need Help?

+

Questions about resources or looking for specific materials?

+
+ Contact Us + View Workshops +
+
+ + + + + + + + + + + + + + diff --git a/workshops.html b/workshops.html new file mode 100644 index 0000000..eac622d --- /dev/null +++ b/workshops.html @@ -0,0 +1,303 @@ + + + + + + + Workshops - LLMNetOps + + + + + + + + + + + + +
+
+
+ πŸ“… +
+ Registration Opening Soon
+ Workshop dates and registration details will be announced shortly. Join our mailing list to be notified! +
+
+ +
+
+ 2 + Workshop Sessions +
+
+ 20+ + Target Participants +
+
+ 70% + Knowledge Improvement +
+
+ Free + No Registration Fee +
+
+
+
+ + +
+
+

Workshop Sessions

+

Two comprehensive sessions designed for network operations professionals

+ + +
+
+
+ + Coming Soon + +

Session 1: Foundations of Local LLM Deployment

+

Introduction to Large Language Models and Privacy-Aware AI

+
+
+ πŸ“… Date: TBA + ⏱️ Duration: 4 hours + πŸ“ Format: Hybrid +
+
+ +

This foundational session introduces participants to Large Language Models, covering core concepts, privacy considerations, and the fundamentals of local deployment. Participants will learn why locally-hosted LLMs are crucial for institutional data privacy.

+ +

Topics Covered

+
    +
  • Introduction to Large Language Models (LLMs)
  • +
  • Understanding AI privacy concerns
  • +
  • Local vs. cloud-based AI deployment
  • +
  • Privacy-aware AI principles
  • +
  • Introduction to open-source LLM models
  • +
  • Basic RAG (Retrieval-Augmented Generation) concepts
  • +
  • Infrastructure requirements overview
  • +
+ +

Prerequisites

+
    +
  • Basic understanding of networking concepts
  • +
  • Familiarity with command-line interfaces
  • +
  • No prior AI/ML experience required
  • +
+ +

Learning Outcomes

+
    +
  • Understand core LLM concepts and terminology
  • +
  • Recognize privacy implications of AI deployment
  • +
  • Evaluate local vs. cloud AI solutions
  • +
  • Identify suitable open-source LLM models
  • +
+
+ + +
+
+
+ + Coming Soon + +

Session 2: AI Agentic Workflow for Network Operations

+

Practical Implementation and Hands-on Exercises

+
+
+ πŸ“… Date: TBA + ⏱️ Duration: 4 hours + πŸ“ Format: Hybrid +
+
+ +

Building on Session 1, this advanced session focuses on practical implementation of AI agentic workflows for network operations. Participants will work with live prototypes and learn to integrate LLMs into their network management workflows.

+ +

Topics Covered

+
    +
  • AI Agentic workflow fundamentals
  • +
  • Building RAG pipelines for network documentation
  • +
  • Live prototype demonstration
  • +
  • Contextual AI for network troubleshooting
  • +
  • Integration with existing infrastructure
  • +
  • Best practices for production deployment
  • +
  • Security considerations
  • +
+ +

Prerequisites

+
    +
  • Completion of Session 1 (or equivalent knowledge)
  • +
  • Basic Python knowledge (helpful but not required)
  • +
  • Access to a test environment
  • +
+ +

Learning Outcomes

+
    +
  • Build basic RAG pipelines
  • +
  • Deploy LLMs for network operations use cases
  • +
  • Create contextual AI assistants for documentation
  • +
  • Implement security best practices
  • +
+
+
+
+ + +
+
+

Workshop Information

+
+
+
πŸŽ“
+

Target Audience

+

Network operations professionals, IT administrators, and technical staff from IDREN member institutions. Open to other educational and research institutions in Indonesia.

+
+
+
πŸ’°
+

Registration Fee

+

The workshops are free of charge, funded by APNIC Foundation through the ISIF Asia 2025 grant program.

+
+
+
🌐
+

Language

+

Instruction will be primarily in Indonesian with materials available in both Indonesian and English. English support available.

+
+
+
πŸ“œ
+

Certificate

+

Participants who complete both sessions will receive a certificate of completion from Universitas Brawijaya.

+
+
+
+
+ + +
+
+

Frequently Asked Questions

+

Common questions about our workshops

+ +
+
Who can participate in the workshops?
+
+

The workshops are primarily designed for network operations professionals, IT administrators, and technical staff from IDREN member institutions. However, we welcome participants from other educational and research institutions in Indonesia who are interested in privacy-aware AI deployment.

+
+
+ +
+
Is there a registration fee?
+
+

No, the workshops are free of charge. This project is funded by APNIC Foundation through the ISIF Asia 2025 grant program.

+
+
+ +
+
What equipment do I need?
+
+

Participants should have a laptop with at least 8GB RAM. For hands-on exercises, we'll provide access to cloud-based environments. Specific setup instructions will be shared before each workshop.

+
+
+ +
+
Will workshop materials be available afterwards?
+
+

Yes, all workshop materials including slides, recordings (when available), and hands-on guides will be made available through our Resources page. Materials are provided in both Indonesian and English.

+
+
+ +
+
What language will instruction be in?
+
+

Instruction will be primarily in Indonesian with materials available in both Indonesian and English. English support will be available for non-Indonesian speakers.

+
+
+ +
+
Do I need prior AI/ML experience?
+
+

No prior AI or machine learning experience is required for Session 1. Basic familiarity with networking concepts and command-line interfaces is helpful. Session 2 builds on Session 1 content.

+
+
+
+
+ + +
+

Stay Updated

+

Be the first to know when registration opens

+
+ Contact Us for Updates + View Resources +
+
+ + + + + + + + + + + + +