Create LLMNetOps multi-page static website for GitHub Pages#1
Merged
Conversation
Co-authored-by: rizalespe <7615996+rizalespe@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add project website for LLMNetOps
Create LLMNetOps project website
Dec 2, 2025
Contributor
|
@copilot I want to add more context for this project: Project Name: Brief Description: 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-literate gap. This project aims to address the AI-literate gap by building foundational AI knowledge, fostering peer collaboration, and promoting locally hosted open-source LLM models, privacy-aware solutions tailored to institutional needs in network operation. The project aims to: |
Co-authored-by: rizalespe <7615996+rizalespe@users.noreply.github.com>
Contributor
Author
Updated the website in commit 31b0d1a with all the project context you provided:
|
Contributor
|
@copilot I'll refine the structure and prompts specifically for GitHub Pages deployment. Here's the optimized approach: GitHub Pages Deployment Strategy for LLMNetOps1. Repository Setup Prompt# Create a new repository structure for GitHub Pages
# Repository name: llmnetops (will be accessible at username.github.io/llmnetops)
# Prompt for GitHub Copilot:
/* Create a React project structure optimized for GitHub Pages deployment with:
- Vite as build tool (faster than Create React App)
- React Router with HashRouter (for GitHub Pages compatibility)
- Tailwind CSS for styling
- GitHub Pages deployment configuration
- Base URL configured for subdirectory deployment
- Package.json scripts for build and deploy
*/2. Initial Setup Commands# Terminal commands to set up the project
npm create vite@latest llmnetops -- --template react
cd llmnetops
npm install
npm install react-router-dom
npm install -D tailwindcss postcss autoprefixer
npm install gh-pages --save-dev
npx tailwindcss init -p3. Configuration Files Promptsvite.config.js prompt: /* Create a vite.config.js file configured for GitHub Pages with:
- Base URL set to '/llmnetops/' (replace with your repo name)
- Build output to 'dist' folder
- Proper asset handling
- React plugin configuration
Example structure:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/llmnetops/',
build: {
outDir: 'dist',
}
})
*/package.json scripts prompt: /* Add these deployment scripts to package.json:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
Also add homepage field: "homepage": "https://yourusername.github.io/llmnetops"
*/tailwind.config.js prompt: /* Create tailwind.config.js optimized for the LLMNetOps project with:
- Content paths for all React components
- Custom color scheme: primary (blue), secondary (purple), accent (green)
- Custom fonts
- Extended spacing for consistent layout
Example:
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#7c3aed',
accent: '#10b981',
}
}
}
}
*/4. Project Structure Prompt/* Create the following folder structure for GitHub Pages deployment:
src/
├── components/
│ ├── layout/
│ │ ├── Navbar.jsx
│ │ ├── Footer.jsx
│ │ └── Layout.jsx
│ ├── home/
│ │ ├── Hero.jsx
│ │ ├── ProjectOverview.jsx
│ │ ├── KeyPillars.jsx
│ │ └── Statistics.jsx
│ ├── about/
│ │ ├── Mission.jsx
│ │ ├── Strategic Alignment.jsx
│ │ └── Themes.jsx
│ ├── deliverables/
│ │ ├── DeliverableCard.jsx
│ │ ├── CurriculumSection.jsx
│ │ ├── WorkshopSection.jsx
│ │ ├── SurveySection.jsx
│ │ └── ReportingSection.jsx
│ ├── workshops/
│ │ ├── WorkshopInfo.jsx
│ │ ├── Schedule.jsx
│ │ └── RegistrationForm.jsx
│ ├── resources/
│ │ ├── ResourceCard.jsx
│ │ ├── ModulesList.jsx
│ │ └── DocumentsList.jsx
│ └── common/
│ ├── Button.jsx
│ ├── Card.jsx
│ ├── ProgressBar.jsx
│ └── Accordion.jsx
├── pages/
│ ├── Home.jsx
│ ├── About.jsx
│ ├── Deliverables.jsx
│ ├── Workshops.jsx
│ ├── Resources.jsx
│ ├── Impact.jsx
│ ├── Blog.jsx
│ └── Contact.jsx
├── data/
│ ├── deliverables.js
│ ├── workshops.js
│ └── statistics.js
├── assets/
│ ├── images/
│ └── icons/
├── App.jsx
├── main.jsx
└── index.css
All components should be modular and reusable
Use React Router HashRouter for navigation
Implement lazy loading for better performance
*/5. Main App Component Prompt/* Create App.jsx as the main routing component with:
- HashRouter (required for GitHub Pages)
- Routes for all pages: Home, About, Deliverables, Workshops, Resources, Impact, Blog, Contact
- Layout wrapper with Navbar and Footer
- Scroll to top on route change
- 404 page fallback
- Lazy loading for all page components
- Suspense with loading spinner
Example structure:
import { HashRouter, Routes, Route } from 'react-router-dom'
import { lazy, Suspense } from 'react'
import Layout from './components/layout/Layout'
const Home = lazy(() => import('./pages/Home'))
// ... other lazy imports
function App() {
return (
<HashRouter>
<Layout>
<Suspense fallback={<LoadingSpinner />}>
<Routes>
<Route path="/" element={<Home />} />
{/* other routes */}
</Routes>
</Suspense>
</Layout>
</HashRouter>
)
}
*/6. Navbar Component Prompt (GitHub Pages Optimized)/* Create a responsive Navbar component for GitHub Pages with:
- Logo: "LLMNetOps" text with icon
- Navigation links using Link from react-router-dom with hash routing
- Menu items: Home (/), About (/about), Deliverables (/deliverables),
Workshops (/workshops), Resources (/resources), Impact (/impact),
Blog (/blog), Contact (/contact)
- Mobile hamburger menu (toggle state)
- Sticky header with background blur on scroll
- Active link highlighting
- Smooth transitions
- Responsive design (mobile-first)
- APNIC/ISIF Asia logo badge
Use HashRouter Link component for all navigation:
import { Link } from 'react-router-dom'
<Link to="/">Home</Link>
<Link to="/about">About</Link>
*/7. Home Page Component Prompt/* Create Home.jsx as the landing page with:
1. Hero Section:
- Full-width gradient background (blue to purple)
- Main title: "LLMNetOps: Strengthening Network Operations Through Locally-Hosted Generative AI"
- Subtitle: "A collaborative ISIF Asia 2025 initiative by Universitas Brawijaya"
- CTA buttons: "Learn More" (scroll to overview), "View Workshops" (link to /workshops)
- Abstract network visualization or AI-themed illustration
2. Project Overview Section:
- Brief description (2-3 paragraphs)
- Key focus: privacy-aware AI, local LLM deployment, IDREN collaboration
- Funding acknowledgment with APNIC/ISIF Asia logos
3. Key Pillars (3 cards):
- Building Capabilities: icon, title, description
- Driving Digital Innovation: icon, title, description
- Supporting Digital Transformation: icon, title, description
- Hover effects and animations
4. Statistics Counter Section:
- 20+ Participants target
- 2 Workshop Sessions
- 5 Training Modules
- 8+ IDREN Institutions
- Animated counters on scroll
5. Timeline Preview:
- 4 main deliverables as timeline items
- Link to full deliverables page
- Visual progress indicator
6. CTA Section:
- "Join Our Next Workshop" with registration link
- "Explore Resources" button
Use Tailwind CSS, add scroll animations with Intersection Observer
All images should be optimized for web
Responsive design for mobile, tablet, desktop
*/8. Deliverables Page Prompt/* Create Deliverables.jsx page with:
1. Page Header:
- Title: "Project Deliverables"
- Overall progress bar showing project completion
- Total budget: $30,000
2. Deliverable Accordion/Cards (4 main sections):
A. Curriculum Development ($10,000):
- Status badge: "Not started yet" / "In progress" / "Completed"
- Description
- Project-Specific Outcome: [PSO 1]
- Key Indicators
- Activities table/cards (5 activities):
* Initial Needs Assessment Survey
* Curriculum Design and Development
* Module Development (5 modules)
* Platform Prototyping
* Pilot Feedback
* Developing a Webpage Portal
- Each activity shows: description, target/results, completion status
- Expand/collapse functionality
B. Workshop ($18,000):
- PSO 2 information
- Key Indicators: 2 workshops, 20+ participants, 70% knowledge improvement
- Activities (4 activities):
* Workshop Planning
* Workshop Delivery – Session 1 (LLM fundamentals)
* Workshop Delivery – Session 2 (AI agentic workflow)
* Workshop Documentary
- Visual calendar/schedule component
C. Survey and Analysis ($1,000):
- PSO 3 information
- Activities (3 activities):
* Final Survey & Data Collection
* Case Brief & Testimonial Collection (3 case studies)
* Whitepaper on NetOps with AI
- Download links for completed outputs
D. Reporting ($1,000):
- PSO 4 information
- Activities (2 activities):
* Final Report Writing & Dissemination
* Midterm Reporting
- Timeline for report submissions
Use accordion components with smooth animations
Color-code by status (gray: not started, blue: in progress, green: completed)
Add icons for each activity type
Responsive tables/cards for mobile
Export button to download full project plan as PDF
*/9. Workshops Page Prompt/* Create Workshops.jsx page with:
1. Workshop Overview Banner:
- "Hands-on Training on Privacy-Aware LLM Deployment"
- Key dates and locations
- Registration status
2. Workshop Session Cards (2 sessions):
Session 1: "Foundations of Local LLM Deployment"
- Date, time, duration
- Topics covered:
* Introduction to Large Language Models
* Privacy-aware AI principles
* Local vs. cloud deployment
* Agentic AI fundamentals
* RAG (Retrieval-Augmented Generation) pipelines
- Prerequisites: Basic networking knowledge
- Expected outcomes
- Target audience: Network operations staff from IDREN institutions
Session 2: "AI Agentic Workflow for Network Operations"
- Date, time, duration
- Topics covered:
* Live prototype demonstration
* Contextual network operations scenarios
* Integration with existing infrastructure
* Hands-on exercises
* Q&A and discussion
- Prerequisites: Completion of Session 1
- Expected outcomes
3. Learning Outcomes Section:
- 70% knowledge improvement target
- Pre and post-assessment methodology
- Certificate of completion
4. Registration Form:
- Fields: Full name, Email, Institution, Role, Technical background
- Consent checkboxes
- Submit button (can be mailto: or Google Forms integration)
- Form validation
5. Workshop Materials Section:
- Preview of available resources
- Post-workshop: slides, recordings, materials (downloadable)
- Bilingual materials note (Indonesian/English)
6. FAQ Accordion:
- Who can participate?
- Is there a fee?
- What equipment is needed?
- Will materials be available afterwards?
- Language of instruction?
7. Past Workshop Gallery:
- Photo grid (if available)
- Participant testimonials slider
- Video highlights
Use responsive form components
Add calendar integration button (Add to Google Calendar)
Implement form validation with error messages
Mobile-friendly layout
*/10. Resources Page Prompt/* Create Resources.jsx page with filtering and download capabilities:
1. Page Header:
- Title: "Learning Resources"
- Filter tabs: All, Training Modules, Case Studies, Reports, Videos, White Papers
2. Search and Filter Bar:
- Search input field
- Category dropdown
- Language filter (English/Indonesian/Both)
- Sort by: Date, Title, Type
3. Resource Cards Grid (responsive):
Each card shows:
- Resource thumbnail/icon
- Title
- Type badge (Module, Case Study, Report, Video, White Paper)
- Language badge
- Brief description
- File size/duration
- Download/View button
- Share button
4. Resource Categories:
A. Training Modules (5 modules):
- Module 1: Introduction to LLMs
- Module 2: Privacy-Aware AI Deployment
- Module 3: RAG Pipelines
- Module 4: Agentic Workflows
- Module 5: Infrastructure Integration
- Each with bilingual materials icon
- PDF, PPTX download options
B. Case Studies/Briefs (3+ items):
- Real-world implementation examples
- Institutional testimonials
- Lessons learned documents
- PDF format with preview
C. White Papers:
- "NetOps with AI: Policy Insights for IDREN"
- Comprehensive analysis document
- Executive summary available
D. Workshop Documentation:
- Session recordings (video player integration)
- Photo galleries
- Participant notes
- Feedback summaries
E. Survey Reports:
- Initial needs assessment results
- Final evaluation report
- Data visualizations
5. Featured Resources Section:
- Highlight 3-4 most important/recent resources
- Larger cards with more detail
6. Contributing Section:
- Call for case studies from IDREN institutions
- Submission guidelines
- Contact information
Use lazy loading for images
Implement download tracking
Add copy-to-clipboard for resource links
Responsive grid (1 col mobile, 2 col tablet, 3-4 col desktop)
Toast notifications for successful downloads
*/11. Static Assets Management Prompt/* Create a data structure for static content that can be easily updated:
1. Create src/data/deliverables.js:
export const deliverables = [
{
id: 1,
title: "Curriculum Development",
status: "not_started", // not_started, in_progress, completed
budget: 10000,
description: "Initial survey, curriculum design, and prototyping platform",
pso: "PSO 1: A co-created curriculum on locally-hosted LLMs...",
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...",
target: "1 [# of report]",
status: "not_started"
},
// ... more activities
]
},
// ... more deliverables
]
2. Create src/data/workshops.js:
export const workshops = [
{
id: 1,
title: "Session 1: Foundations of Local LLM Deployment",
date: "TBA",
duration: "4 hours",
topics: [...],
prerequisites: [...],
outcomes: [...]
},
// ... session 2
]
3. Create src/data/statistics.js:
export const statistics = [
{ label: "Participants", value: 20, prefix: "", suffix: "+" },
{ label: "Workshop Sessions", value: 2, prefix: "", suffix: "" },
{ label: "Training Modules", value: 5, prefix: "", suffix: "" },
{ label: "IDREN Institutions", value: 8, prefix: "", suffix: "+" }
]
4. Create src/data/resources.js:
export const resources = [
{
id: 1,
title: "Module 1: Introduction to LLMs",
type: "training_module",
category: "Training Modules",
language: "bilingual",
description: "...",
fileSize: "2.5 MB",
format: "PDF",
downloadUrl: "#",
thumbnailUrl: "/assets/module1-thumb.jpg"
},
// ... more resources
]
This structure allows easy updates without changing components
Use JSON or JS objects for easy maintenance
*/12. Deployment Workflow Prompt/* Create .github/workflows/deploy.yml for automated deployment:
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
workflow_dispatch:
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
Alternative: Manual deployment script in package.json already configured
Run: npm run deploy
Ensure GitHub Pages is enabled in repository settings:
Settings → Pages → Source: gh-pages branch
*/13. README.md Prompt/* Create a comprehensive README.md for the repository:
# LLMNetOps: Strengthening Network Operations Through Locally-Hosted Generative AI
## About
ISIF Asia 2025 project by Universitas Brawijaya focused on building privacy-aware AI capabilities for network operations across IDREN member institutions.
## Live Website
🌐 [https://yourusername.github.io/llmnetops](https://yourusername.github.io/llmnetops)
## Project Overview
- **Funding:** APNIC Foundation / ISIF Asia 2025
- **Duration:** [Project timeline]
- **Target:** 20+ network operations professionals from IDREN institutions
- **Budget:** $30,000 USD
## Key Features
- 🎓 Training curriculum on locally-hosted LLMs
- 🛠️ Hands-on workshops on privacy-aware AI
- 📚 Bilingual learning resources
- 📊 Case studies and white papers
- 🤝 Community of practice across IDREN
## Technologies Used
- React 18
- Vite
- React Router
- Tailwind CSS
- GitHub Pages
## Local Development
### Prerequisites
- Node.js 18+
- npm or yarn
### Installation
```bash
git clone https://github.com/yourusername/llmnetops.git
cd llmnetops
npm installRun Development Servernpm run devBuild for Productionnpm run buildDeploy to GitHub Pagesnpm run deployProject StructureContributingThis project is part of a funded research initiative. For inquiries about participation or collaboration, please contact: Universitas Brawijaya
License[Specify license - MIT, Apache 2.0, or other] Acknowledgments
Links© 2025 Universitas Brawijaya. Funded by ISIF Asia 2025. 14. Performance Optimization Prompts/* Implement performance optimizations for GitHub Pages:
1. Image Optimization:
- Use WebP format with JPEG/PNG fallbacks
- Implement lazy loading for all images
- Add responsive images with srcset
- Compress images before deployment
- Maximum image size: 500KB
2. Code Splitting:
- Lazy load all page components
- Dynamic imports for heavy components
- Separate vendor bundles
3. Caching Strategy:
- Add Cache-Control headers via .nojekyll file
- Service Worker for offline capability (optional)
- Asset fingerprinting (Vite handles this)
4. Bundle Size Optimization:
- Remove unused CSS (Tailwind purge)
- Tree shaking for unused code
- Minification in production build
- Analyze bundle with vite-bundle-visualizer
5. Loading Performance:
- Add loading skeletons for content
- Preload critical resources
- Defer non-critical scripts
- Optimize font loading
Add to vite.config.js:
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom', 'react-router-dom']
}
}
},
chunkSizeWarningLimit: 1000
}
*/15. SEO and Meta Tags Prompt/* Create a reusable SEO component for all pages:
Create src/components/common/SEO.jsx:
- Uses react-helmet-async or manual meta tag updates
- Default meta tags for the project
- Page-specific overrides
Default tags:
- Title: "LLMNetOps - Privacy-Aware AI for Network Operations"
- Description: "ISIF Asia 2025 project by Universitas Brawijaya. Training network operations professionals on locally-hosted LLMs and privacy-aware AI adoption."
- Keywords: "LLM, network operations, AI, privacy, IDREN, Indonesia, locally-hosted AI, generative AI, network management"
- Author: "Universitas Brawijaya"
- OG tags for social sharing
- Twitter card tags
- Canonical URLs using GitHub Pages domain
Usage in pages:
<SEO
title="Workshops - LLMNetOps"
description="Join our hands-on workshops..."
path="/workshops"
/>
Also create public/robots.txt:
User-agent: *
Allow: /
Sitemap: https://yourusername.github.io/llmnetops/sitemap.xml
And generate sitemap programmatically or manually
*/16. Final Deployment Checklist## Pre-Deployment Checklist
- [ ] Update vite.config.js base URL to match your repository name
- [ ] Update package.json homepage field
- [ ] Test build locally: `npm run build && npm run preview`
- [ ] Verify all routes work with HashRouter
- [ ] Check responsive design on mobile, tablet, desktop
- [ ] Optimize all images (compress, convert to WebP)
- [ ] Update all placeholder content with real data
- [ ] Add Google Analytics or tracking (if needed)
- [ ] Test all forms and interactions
- [ ] Verify external links open in new tabs
- [ ] Check accessibility (WCAG compliance)
- [ ] Add loading states for all async operations
- [ ] Test on different browsers (Chrome, Firefox, Safari, Edge)
- [ ] Remove console.logs and debug code
- [ ] Update README with correct URLs
- [ ] Add .env.example if using environment variables
- [ ] Verify APNIC/ISIF Asia logo permissions and attribution
## Deployment Steps
1. Commit all changes:
```bash
git add .
git commit -m "Initial deployment"
git push origin main
Post-Deployment
|
Copilot stopped work on behalf of
rizalespe due to an error
December 2, 2025 07:11
Contributor
|
@copilot I'll revise the entire structure for a static HTML/CSS/JS website suitable for GitHub Pages, without React or build tools. Static Website Structure for LLMNetOps (GitHub Pages)1. Repository Structure2. Basic HTML Template Structure<!-- Prompt for creating the base template -->
<!--
Create a semantic HTML5 template for index.html with:
- DOCTYPE html5
- Meta tags: charset UTF-8, viewport for responsive, description, keywords
- Title: LLMNetOps - Strengthening Network Operations Through Locally-Hosted Generative AI
- Link to CSS files: css/style.css, css/components.css, css/responsive.css
- Link to Google Fonts: Inter font family
- Font Awesome CDN for icons
- Header with navigation bar (logo + menu)
- Main content area with sections
- Footer with links, partners logos, copyright
- Script tags at bottom: js/main.js, js/navigation.js, js/animations.js
- Smooth scroll behavior
- No JavaScript frameworks, pure vanilla JS
-->
<!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: ISIF Asia 2025 project by Universitas Brawijaya - Building privacy-aware AI capabilities for network operations across IDREN institutions">
<meta name="keywords" content="LLM, Network Operations, AI, Privacy, IDREN, Indonesia, Generative AI, Universitas Brawijaya">
<meta name="author" content="Universitas Brawijaya">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="LLMNetOps - Privacy-Aware AI for Network Operations">
<meta property="og:description" content="ISIF Asia 2025 project strengthening network operations through locally-hosted generative AI">
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourusername.github.io/llmnetops/">
<title>LLMNetOps - Strengthening Network Operations Through AI</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- CSS Files -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="assets/images/favicon.png">
</head>
<body>
<!-- Navigation -->
<header id="header">
<!-- Navigation content here -->
</header>
<!-- Main Content -->
<main>
<!-- Page content here -->
</main>
<!-- Footer -->
<footer id="footer">
<!-- Footer content here -->
</footer>
<!-- JavaScript Files -->
<script src="js/data.js"></script>
<script src="js/navigation.js"></script>
<script src="js/animations.js"></script>
<script src="js/main.js"></script>
</body>
</html>3. Navigation HTML Structure<!-- Prompt for Navigation Component -->
<!--
Create a responsive navigation bar with:
- Fixed/sticky header that appears on scroll
- Logo section with text "LLMNetOps" and icon
- Desktop navigation menu with links: Home, About, Deliverables, Workshops, Resources, Impact, Blog, Contact
- Mobile hamburger menu (toggle button)
- APNIC/ISIF Asia funding badge on the right
- Smooth transitions
- Active page indicator
- HTML structure only, styling in CSS
Example structure:
-->
<header id="header" class="header">
<nav class="navbar container">
<div class="nav-brand">
<i class="fas fa-network-wired"></i>
<span>LLMNetOps</span>
</div>
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-menu" id="navMenu">
<li class="nav-item">
<a href="index.html" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="deliverables.html" class="nav-link">Deliverables</a>
</li>
<li class="nav-item">
<a href="workshops.html" class="nav-link">Workshops</a>
</li>
<li class="nav-item">
<a href="resources.html" class="nav-link">Resources</a>
</li>
<li class="nav-item">
<a href="impact.html" class="nav-link">Impact</a>
</li>
<li class="nav-item">
<a href="blog.html" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">Contact</a>
</li>
</ul>
<div class="funding-badge">
<span class="badge-text">Funded by</span>
<span class="badge-org">ISIF Asia 2025</span>
</div>
</nav>
</header>4. Homepage HTML Structure (index.html)<!-- Prompt for Homepage Content -->
<!--
Create complete homepage content with semantic HTML5 sections:
1. Hero Section:
- Full-width gradient background
- Main heading (h1): "LLMNetOps: Strengthening Network Operations Through Locally-Hosted Generative AI"
- Subheading: "A collaborative ISIF Asia 2025 initiative by Universitas Brawijaya"
- Two CTA buttons: "Learn More" and "View Workshops"
- Optional: Decorative network visualization
2. Project Overview Section:
- Section heading (h2): "About the Project"
- 2-3 paragraphs describing the project
- Highlight: privacy-aware AI, local LLM deployment, IDREN collaboration
- Partner logos (APNIC Foundation, ISIF Asia, Universitas Brawijaya)
3. Key Pillars Section:
- Section heading: "Our Strategic Pillars"
- 3 cards in a grid:
* Building Capabilities (icon, heading, description)
* Driving Digital Innovation (icon, heading, description)
* Supporting Digital Transformation (icon, heading, description)
4. Statistics Section:
- 4 statistic counters with animation:
* 20+ Participants
* 2 Workshop Sessions
* 5 Training Modules
* 8+ IDREN Institutions
5. Key Themes Section:
- Grid of theme badges/tags
- Themes: Digital Literacy & Education, Cybersecurity and Privacy, Technical Training,
Internet Stability, Collaboration, Research & Policy
6. Timeline Preview:
- Visual timeline showing 4 main deliverables
- Each item: title, brief description, status indicator
7. Call-to-Action Section:
- "Get Involved" heading
- Two options: Register for workshops, Explore resources
- Contact information
All sections should use semantic HTML, proper heading hierarchy
Add data attributes for JavaScript interactions
Include alt text for images, aria-labels where needed
-->
<main>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="container hero-content">
<h1 class="hero-title">
LLMNetOps: Strengthening Network Operations Through Locally-Hosted Generative AI
</h1>
<p class="hero-subtitle">
A collaborative ISIF Asia 2025 initiative by Universitas Brawijaya
</p>
<div class="hero-buttons">
<a href="#about" class="btn btn-primary">Learn More</a>
<a href="workshops.html" class="btn btn-secondary">View Workshops</a>
</div>
</div>
<div class="hero-decoration">
<!-- SVG or decorative element -->
</div>
</section>
<!-- Project Overview Section -->
<section class="section project-overview" id="about">
<div class="container">
<h2 class="section-title">About the Project</h2>
<div class="overview-content">
<p>
LLMNetOps is an innovative initiative funded by ISIF Asia 2025 that empowers
network operations teams across Indonesian research and education institutions
with privacy-aware, locally-hosted Large Language Model (LLM) capabilities.
</p>
<p>
Our project focuses on building inclusive technical capacity, fostering a
community of practice, and producing actionable insights for responsible AI
adoption in network operations. Through hands-on workshops, bilingual training
materials, and collaborative case studies, we support IDREN member institutions
in strengthening their technical infrastructure.
</p>
<p>
By emphasizing data sovereignty, privacy protection, and local deployment,
LLMNetOps aligns with national digital transformation goals while addressing
the unique needs of research and education networks in Indonesia.
</p>
</div>
<!-- Partner Logos -->
<div class="partners-grid">
<div class="partner-logo">
<img src="assets/images/partners/apnic-logo.png" alt="APNIC Foundation">
</div>
<div class="partner-logo">
<img src="assets/images/partners/isif-logo.png" alt="ISIF Asia">
</div>
<div class="partner-logo">
<img src="assets/images/partners/ub-logo.png" alt="Universitas Brawijaya">
</div>
<div class="partner-logo">
<img src="assets/images/partners/idren-logo.png" alt="IDREN">
</div>
</div>
</div>
</section>
<!-- Key Pillars Section -->
<section class="section pillars-section bg-light">
<div class="container">
<h2 class="section-title">Our Strategic Pillars</h2>
<div class="pillars-grid">
<div class="pillar-card">
<div class="pillar-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<h3 class="pillar-title">Building Capabilities</h3>
<p class="pillar-description">
Enhancing technical skills of network operations staff through comprehensive
training on locally-hosted LLMs and privacy-aware AI implementation.
</p>
</div>
<div class="pillar-card">
<div class="pillar-icon">
<i class="fas fa-lightbulb"></i>
</div>
<h3 class="pillar-title">Driving Digital Innovation</h3>
<p class="pillar-description">
Pioneering the use of AI agentic workflows and RAG pipelines for contextual
network operations management and decision-making.
</p>
</div>
<div class="pillar-card">
<div class="pillar-icon">
<i class="fas fa-rocket"></i>
</div>
<h3 class="pillar-title">Supporting Digital Transformation</h3>
<p class="pillar-description">
Contributing to national digital transformation goals through policy insights,
case studies, and strategic recommendations for secure AI adoption.
</p>
</div>
</div>
</div>
</section>
<!-- Statistics Section -->
<section class="section statistics-section">
<div class="container">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-users"></i>
</div>
<div class="stat-number" data-target="20">0</div>
<div class="stat-label">Participants</div>
<div class="stat-suffix">+</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="stat-number" data-target="2">0</div>
<div class="stat-label">Workshop Sessions</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-book"></i>
</div>
<div class="stat-number" data-target="5">0</div>
<div class="stat-label">Training Modules</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-university"></i>
</div>
<div class="stat-number" data-target="8">0</div>
<div class="stat-label">IDREN Institutions</div>
<div class="stat-suffix">+</div>
</div>
</div>
</div>
</section>
<!-- Key Themes Section -->
<section class="section themes-section bg-light">
<div class="container">
<h2 class="section-title">Key Theme Alignment</h2>
<div class="themes-grid">
<span class="theme-badge"><i class="fas fa-globe"></i> Affordable Connectivity</span>
<span class="theme-badge"><i class="fas fa-shield-alt"></i> Cybersecurity and Privacy</span>
<span class="theme-badge"><i class="fas fa-graduation-cap"></i> Technical Training</span>
<span class="theme-badge"><i class="fas fa-book-reader"></i> Digital Literacy & Education</span>
<span class="theme-badge"><i class="fas fa-network-wired"></i> Internet Stability</span>
<span class="theme-badge"><i class="fas fa-users"></i> Collaboration</span>
<span class="theme-badge"><i class="fas fa-file-alt"></i> Research, Regulation & Policy</span>
<span class="theme-badge"><i class="fas fa-universal-access"></i> Accessibility</span>
<span class="theme-badge"><i class="fas fa-heartbeat"></i> Health and Livelihoods</span>
</div>
</div>
</section>
<!-- Timeline Preview Section -->
<section class="section timeline-section">
<div class="container">
<h2 class="section-title">Project Timeline</h2>
<div class="timeline">
<div class="timeline-item" data-status="in-progress">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h3 class="timeline-title">Curriculum Development</h3>
<p class="timeline-description">
Initial survey, curriculum design, module development, and platform prototyping
</p>
<span class="timeline-budget">$10,000</span>
<span class="timeline-status status-in-progress">In Progress</span>
</div>
</div>
<div class="timeline-item" data-status="upcoming">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h3 class="timeline-title">Workshop Series</h3>
<p class="timeline-description">
Two hands-on workshop sessions on LLM deployment and AI agentic workflows
</p>
<span class="timeline-budget">$18,000</span>
<span class="timeline-status status-upcoming">Upcoming</span>
</div>
</div>
<div class="timeline-item" data-status="upcoming">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h3 class="timeline-title">Survey and Analysis</h3>
<p class="timeline-description">
Final survey, case brief collection, and white paper development
</p>
<span class="timeline-budget">$1,000</span>
<span class="timeline-status status-upcoming">Upcoming</span>
</div>
</div>
<div class="timeline-item" data-status="upcoming">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h3 class="timeline-title">Reporting</h3>
<p class="timeline-description">
Midterm and final reporting, dissemination to stakeholders
</p>
<span class="timeline-budget">$1,000</span>
<span class="timeline-status status-upcoming">Upcoming</span>
</div>
</div>
</div>
<div class="timeline-cta">
<a href="deliverables.html" class="btn btn-primary">View All Deliverables</a>
</div>
</div>
</section>
<!-- Call to Action Section -->
<section class="section cta-section bg-gradient">
<div class="container">
<h2 class="section-title text-white">Get Involved</h2>
<p class="cta-description text-white">
Join our community and contribute to building privacy-aware AI capabilities
for network operations in Indonesia
</p>
<div class="cta-buttons">
<a href="workshops.html" class="btn btn-white">Register for Workshops</a>
<a href="resources.html" class="btn btn-outline-white">Explore Resources</a>
</div>
</div>
</section>
</main>5. CSS Structure Promptscss/style.css: /* Prompt for main stylesheet */
/*
Create a comprehensive CSS file with:
1. CSS Variables for theming:
- Colors: primary (#2563eb), secondary (#7c3aed), accent (#10b981),
dark (#1f2937), light (#f9fafb), white (#ffffff)
- Typography: font families, sizes, weights
- Spacing: consistent spacing scale (8px base)
- Breakpoints: mobile (320px), tablet (768px), desktop (1024px), wide (1280px)
- Transitions: standard durations and easing
2. Reset and Base Styles:
- Box-sizing border-box
- Remove default margins/paddings
- Smooth scrolling
- Base typography (Inter font)
- Link styles
3. Utility Classes:
- Container (max-width, centered)
- Text alignment, colors, sizes
- Spacing utilities (margin, padding)
- Display utilities
- Background colors
4. Layout Styles:
- Grid systems (2, 3, 4 columns)
- Flexbox utilities
- Section spacing
5. Component Base Styles:
- Buttons (primary, secondary, outline variants)
- Cards
- Badges
- Forms
- Typography hierarchy
Example structure:
*/
:root {
/* Colors */
--color-primary: #2563eb;
--color-secondary: #7c3aed;
--color-accent: #10b981;
--color-dark: #1f2937;
--color-light: #f9fafb;
--color-white: #ffffff;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
/* Typography */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-size-base: 16px;
--font-size-sm: 0.875rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-2xl: 4rem;
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-base: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
--radius-full: 9999px;
/* Container */
--container-max-width: 1200px;
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: var(--font-size-base);
}
body {
font-family: var(--font-primary);
color: var(--color-gray-800);
line-height: 1.6;
background-color: var(--color-white);
}
/* Container */
.container {
width: 100%;
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--spacing-md);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }
p {
margin-bottom: var(--spacing-sm);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-secondary);
}
/* Buttons */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
font-size: var(--font-size-base);
font-weight: 600;
text-align: center;
border: 2px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
text-decoration: none;
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-primary:hover {
background-color: #1d4ed8;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background-color: var(--color-secondary);
color: var(--color-white);
}
.btn-secondary:hover {
background-color: #6d28d9;
}
.btn-outline {
background-color: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-outline:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
/* Sections */
.section {
padding: var(--spacing-2xl) 0;
}
.section-title {
text-align: center;
margin-bottom: var(--spacing-xl);
color: var(--color-dark);
}
.bg-light {
background-color: var(--color-light);
}
.bg-gradient {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}
/* Grid Layouts */
.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
}
/* Cards */
.card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
/* Utility Classes */
.text-center { text-align: center; }
.text-white { color: var(--color-white); }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
/* Continue with more specific component styles... */css/components.css: /* Prompt for component-specific styles */
/*
Create styles for specific components:
1. Navigation Bar:
- Fixed header with backdrop blur
- Logo styling
- Menu items horizontal layout
- Hover effects
- Active state indicator
- Mobile hamburger menu
- Funding badge
2. Hero Section:
- Full-width background with gradient
- Centered content
- Large typography
- Button group layout
- Decorative elements
3. Pillar Cards:
- Icon container with circular background
- Title and description
- Hover animations
- Equal height cards
4. Statistics Cards:
- Animated counters (JavaScript will handle animation)
- Icon, number, label layout
- Suffix support (+, etc.)
5. Timeline Component:
- Vertical line connector
- Timeline markers (circles)
- Content cards
- Status badges
- Alternating layout (optional)
6. Theme Badges:
- Inline badges with icons
- Rounded corners
- Hover effects
- Flexbox wrapping
7. Footer:
- Multi-column layout
- Social media icons
- Copyright text
- Partner logos
8. Forms:
- Input fields
- Textarea
- Select dropdowns
- Form validation states
9. Accordion:
- Expandable sections
- Smooth height transitions
- Icons (chevron/plus)
10. Modal/Overlay (if needed)
*/
/* Navigation */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm);
z-index: 1000;
transition: all var(--transition-base);
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm) var(--spacing-md);
height: 70px;
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-primary);
}
.nav-brand i {
font-size: 1.5rem;
}
.nav-menu {
display: flex;
list-style: none;
gap: var(--spacing-md);
margin: 0;
}
.nav-link {
padding: 0.5rem 1rem;
font-weight: 500;
color: var(--color-gray-600);
transition: color var(--transition-fast);
position: relative;
}
.nav-link:hover,
.nav-link.active {
color: var(--color-primary);
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 1rem;
right: 1rem;
height: 2px;
background-color: var(--color-primary);
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.nav-toggle span {
width: 25px;
height: 3px;
background-color: var(--color-dark);
transition: all var(--transition-base);
}
.funding-badge {
display: flex;
flex-direction: column;
align-items: flex-end;
font-size: var(--font-size-sm);
}
.badge-text {
color: var(--color-gray-600);
font-size: 0.75rem;
}
.badge-org {
color: var(--color-primary);
font-weight: 600;
}
/* Hero Section */
.hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-white);
margin-top: 70px;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: var(--spacing-2xl) 0;
}
.hero-title {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
margin-bottom: var(--spacing-md);
animation: fadeInUp 0.8s ease-out;
}
.hero-subtitle {
font-size: clamp(1rem, 2.5vw, 1.5rem);
margin-bottom: var(--spacing-xl);
opacity: 0.95;
animation: fadeInUp 0.8s ease-out 0.2s both;
}
.hero-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease-out 0.4s both;
}
.btn-white {
background-color: var(--color-white);
color: var(--color-primary);
}
.btn-white:hover {
background-color: var(--color-light);
}
.btn-outline-white {
background-color: transparent;
border-color: var(--color-white);
color: var(--color-white);
}
.btn-outline-white:hover {
background-color: var(--color-white);
color: var(--color-primary);
}
/* Pillar Cards */
.pillars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
}
.pillar-card {
background: var(--color-white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
text-align: center;
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
}
.pillar-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.pillar-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-md);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
border-radius: 50%;
color: var(--color-white);
font-size: 2rem;
}
.pillar-title {
color: var(--color-dark);
margin-bottom: var(--spacing-sm);
}
.pillar-description {
color: var(--color-gray-600);
line-height: 1.7;
}
/* Statistics Section */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-lg);
}
.stat-card {
text-align: center;
padding: var(--spacing-lg);
}
.stat-icon {
font-size: 3rem;
color: var(--color-primary);
margin-bottom: var(--spacing-sm);
}
.stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--color-dark);
line-height: 1;
}
.stat-label {
font-size: var(--font-size-lg);
color: var(--color-gray-600);
margin-top: var(--spacing-xs);
}
.stat-suffix {
font-size: 2rem;
color: var(--color-primary);
font-weight: 700;
}
/* Theme Badges */
.themes-grid {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
justify-content: center;
}
.theme-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: var(--color-white);
border: 2px solid var(--color-gray-200);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-gray-800);
transition: all var(--transition-fast);
}
.theme-badge:hover {
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-2px);
}
.theme-badge i {
font-size: 1rem;
color: var(--color-primary);
}
/* Timeline */
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: var(--spacing-lg) 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: var(--color-gray-300);
}
.timeline-item {
position: relative;
margin-bottom: var(--spacing-xl);
display: flex;
justify-content: center;
}
.timeline-marker {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background-color: var(--color-white);
border: 3px solid var(--color-primary);
border-radius: 50%;
z-index: 2;
}
.timeline-item[data-status="completed"] .timeline-marker {
background-color: var(--color-accent);
border-color: var(--color-accent);
}
.timeline-item[data-status="in-progress"] .timeline-marker {
background-color: var(--color-primary);
border-color: var(--color-primary);
animation: pulse 2s infinite;
}
.timeline-content {
width: 45%;
background: var(--color-white);
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.timeline-title {
color: var(--color-dark);
margin-bottom: var(--spacing-sm);
}
.timeline-description {
color: var(--color-gray-600);
margin-bottom: var(--spacing-sm);
}
.timeline-budget {
display: inline-block;
padding: 0.25rem 0.75rem;
background-color: var(--color-light);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-primary);
margin-right: var(--spacing-sm);
}
.timeline-status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: 600;
}
.status-completed {
background-color: #d1fae5;
color: #065f46;
}
.status-in-progress {
background-color: #dbeafe;
color: #1e40af;
}
.status-upcoming {
background-color: #f3f4f6;
color: var(--color-gray-600);
}
.timeline-cta {
text-align: center;
margin-top: var(--spacing-xl);
}
/* Partners Grid */
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
align-items: center;
justify-items: center;
}
.partner-logo img {
max-width: 150px;
height: auto;
opacity: 0.7;
transition: opacity var(--transition-base);
filter: grayscale(100%);
}
.partner-logo:hover img {
opacity: 1;
filter: grayscale(0%);
}
/* Footer */
#footer {
background-color: var(--color-dark);
color: var(--color-white);
padding: var(--spacing-2xl) 0 var(--spacing-md);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.footer-section h4 {
margin-bottom: var(--spacing-md);
color: var(--color-white);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: var(--spacing-xs);
}
.footer-links a {
color: var(--color-gray-300);
}
.footer-links a:hover {
color: var(--color-white);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--spacing-md);
text-align: center;
color: var(--color-gray-300);
font-size: var(--font-size-sm);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
}
50% {
box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
}
}css/responsive.css: /* Prompt for responsive styles */
/*
Create responsive breakpoints for:
- Mobile: max-width 767px
- Tablet: 768px to 1023px
- Desktop: 1024px and above
Handle:
- Navigation collapse to hamburger menu
- Grid adjustments (columns)
- Font size scaling
- Spacing adjustments
- Timeline layout for mobile (single column)
- Hero section height
- Button stacking
*/
/* Tablet and below */
@media (max-width: 1023px) {
:root {
--spacing-2xl: 3rem;
}
.hero-title {
font-size: 2.5rem;
}
.timeline::before {
left: 20px;
}
.timeline-marker {
left: 20px;
transform: translateX(-50%);
}
.timeline-content {
width: calc(100% - 60px);
margin-left: 60px;
}
}
/* Mobile */
@media (max-width: 767px) {
:root {
--spacing-xl: 2rem;
--spacing-2xl: 2.5rem;
--font-size-4xl: 2rem;
--font-size-3xl: 1.75rem;
}
.container {
padding: 0 var(--spacing-sm);
}
/* Navigation */
.nav-menu {
position: fixed;
top: 70px;
left: -100%;
width: 100%;
height: calc(100vh - 70px);
flex-direction: column;
background-color: var(--color-white);
padding: var(--spacing-lg);
box-shadow: var(--shadow-lg);
transition: left var(--transition-base);
}
.nav-menu.active {
left: 0;
}
.nav-toggle {
display: flex;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
.funding-badge {
display: none;
}
/* Hero */
.hero {
min-height: 70vh;
margin-top: 70px;
}
.hero-buttons {
flex-direction: column;
align-items: stretch;
}
.hero-buttons .btn {
width: 100%;
}
/* Grids */
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.pillars-grid,
.stats-grid {
grid-template-columns: 1fr;
}
/* Timeline */
.timeline::before {
left: 10px;
}
.timeline-marker {
left: 10px;
}
.timeline-content {
width: calc(100% - 40px);
margin-left: 40px;
}
/* Partners */
.partners-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
/* Footer */
.footer-content {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
/* Sections */
.section {
padding: var(--spacing-xl) 0;
}
/* Typography */
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
}
/* Small mobile */
@media (max-width: 480px) {
.hero-title {
font-size: 1.75rem;
}
.stat-number {
font-size: 2.5rem;
}
.partners-grid {
grid-template-columns: 1fr;
}
}6. JavaScript Structure Promptsjs/data.js: // Prompt for data management
/*
Create a data object containing all project data that will be used across pages:
1. Project statistics
2. Deliverables with activities
3. Workshop information
4. Resources list
5. Team members
6. Partners/institutions
7. Key themes
8. Timeline items
This allows easy content updates without changing HTML
Use this data to populate dynamic content on pages
*/
const projectData = {
statistics: [
{
icon: 'fa-users',
number: 20,
label: 'Participants',
suffix: '+'
},
{
icon: 'fa-chalkboard-teacher',
number: 2,
label: 'Workshop Sessions',
suffix: ''
},
{
icon: 'fa-book',
number: 5,
label: 'Training Modules',
suffix: ''
},
{
icon: 'fa-university',
number: 8,
label: 'IDREN Institutions',
suffix: '+'
}
],
deliverables: [
{
id: 1,
title: 'Curriculum Development',
status: 'in-progress',
budget: 10000,
description: 'Initial survey, curriculum design, and prototyping platform',
pso: 'PSO 1: A co-created curriculum on locally-hosted LLMs for network operations is developed and piloted, informed by at least 8 responses from an initial survey across IDREN 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 expectations related to LLM and AI adoption in network operations across IDREN institutions.',
target: '1 [# of report]',
status: 'completed'
},
{
name: 'Curriculum Design and Development',
description: 'Develop modular training content (bilingual) focused on privacy-aware LLM usage, agent workflows, and infrastructure integration.',
target: '1 [# training modules]',
status: 'in-progress'
},
{
name: 'Module Development',
description: 'Develop training modules (slides, materials)',
target: '[Target 5 training module X # language]',
status: 'in-progress'
},
{
name: 'Platform Prototyping',
description: 'Build a digital delivery prototype (e.g., GitBook or similar) to host curriculum content and gather initial usability feedback.',
target: '[Completed/ Not yet Completed]',
status: 'not-started'
},
{
name: 'Pilot Feedback',
description: 'Test curriculum and platform with a pilot group of technical staff; collect structured feedback to improve learning materials.',
target: '[Completed/ Not yet Completed]',
status: 'not-started'
},
{
name: 'Developing a Webpage Portal for the Project',
description: 'Design and launch a dedicated project webpage to host updates, open materials, workshop announcements, and outputs.',
target: '[Completed/ Not yet Completed]',
status: 'in-progress'
}
]
},
{
id: 2,
title: 'Workshop',
status: 'upcoming',
budget: 18000,
description: 'Conduct 2 workshop series',
pso: 'PSO 2: Two workshop sessions will be conducted with at least 20 participants from IDREN member institutions, promoting collaborative learning on privacy-aware LLM usage in network operations.',
keyIndicators: [
'2 workshops conducted',
'Minimum 20 participants trained',
'70% show improved knowledge in post-assessment'
],
activities: [
{
name: 'Workshop Planning',
description: 'Coordinate logistics and technical setup.',
target: '4 [Completed/ Not yet Completed]',
status: 'not-started'
},
{
name: 'Workshop Delivery – Session 1',
description: 'Introduce foundational concepts of local LLM deployment, and privacy-aware AI use in network operations using Agentic AI & RAG pipelines.',
target: '1 [Target 1 workshop] [# Pax – disaggregated]',
status: 'not-started'
},
{
name: 'Workshop Delivery – Session 2',
description: 'Demonstrate a prototype of how AI agentic workflow can assist contextual network operations.',
target: '1 [Target 1 workshop] [# Pax – disaggregated]',
status: 'not-started'
},
{
name: 'Workshop Documentary',
description: 'Collect and compile photos, session notes, video recordings, and participant feedback from each workshop.',
target: '[# videos]',
status: 'not-started'
}
]
},
{
id: 3,
title: 'Survey and Analysis',
status: 'upcoming',
budget: 1000,
description: 'Final survey and analysis report',
pso: 'PSO 3: At least 70% of workshop participants demonstrate increased understanding and confidence in evaluating LLM use in their institutional context, as measured by pre- and post-training assessments.',
keyIndicators: [
'Final survey collected from 80% of participants',
'1 final report produced and shared with stakeholders'
],
activities: [
{
name: 'Final Survey & Data Collection',
description: 'Conduct an endline survey to assess knowledge retention, application of skills, and adoption intent among workshop participants.',
target: '1 [# Pax – disaggregated]',
status: 'not-started'
},
{
name: 'Case Brief & Testimonial Collection',
description: 'Collect real-world examples and institutional insights on using LLMs in network operations; produce policy-relevant case briefs.',
target: '3 [# case study]',
status: 'not-started'
},
{
name: 'Whitepaper on NetOps with AI',
description: 'Create a white paper based on findings and case briefs to extract insights relevant for decision-makers, policy advisors, and institutional leaders within IDREN.',
target: '1 [Target 1 document]',
status: 'not-started'
}
]
},
{
id: 4,
title: 'Reporting',
status: 'upcoming',
budget: 1000,
description: 'Case brief documents, synthesis report, stakeholder outreach log',
pso: 'PSO 4: At least 1 policy-relevant insights are generated from workshop discussions and shared with IDREN stakeholders to inform strategies for secure and context-aware AI adoption.',
keyIndicators: [
'3 case briefs or insights documented',
'Shared with relevant stakeholders through reports or presentations'
],
activities: [
{
name: 'Final Report Writing & Dissemination',
description: 'Compile data, outcomes, case briefs, and lessons learned into a final report to be shared with stakeholders and the APNIC Foundation.',
target: '1 [Completed/ Not yet Completed]',
status: 'not-started'
},
{
name: 'Midterm Reporting',
description: 'Develop an internal progress report to summarize activities, early outcomes, challenges, and adjustments up to the mid-point of the project.',
target: '1 [Completed/ Not yet Completed]',
status: 'not-started'
}
]
}
],
workshops: [
{
id: 1,
title: 'Session 1: Foundations of Local LLM Deployment',
date: 'TBA',
duration: '4 hours',
topics: [
'Introduction to Large Language Models',
'Privacy-aware AI principles',
'Local vs. cloud deployment comparison',
'Agentic AI fundamentals',
'RAG (Retrieval-Augmented Generation) pipelines',
'Infrastructure requirements'
],
prerequisites: 'Basic understanding of network operations',
outcomes: [
'Understand core LLM concepts and terminology',
'Identify privacy considerations in AI deployment',
'Evaluate local vs. cloud deployment options',
'Recognize basic agentic AI workflows'
]
},
{
id: 2,
title: 'Session 2: AI Agentic Workflow for Network Operations',
date: 'TBA',
duration: '4 hours',
topics: [
'Live prototype demonstration',
'Contextual network operations scenarios',
'Integration with existing infrastructure',
'Hands-on exercises',
'Q&A and discussion',
'Implementation planning'
],
prerequisites: 'Completion of Session 1',
outcomes: [
'Understand practical AI agent implementation',
'Apply AI workflows to network scenarios',
'Plan integration with institutional infrastructure',
'Develop action plan for institutional adoption'
]
}
],
themes: [
{ name: 'Affordable Connectivity', icon: 'fa-globe' },
{ name: 'Cybersecurity and Privacy', icon: 'fa-shield-alt' },
{ name: 'Technical Training', icon: 'fa-graduation-cap' },
{ name: 'Digital Literacy & Education', icon: 'fa-book-reader' },
{ name: 'Internet Stability', icon: 'fa-network-wired' },
{ name: 'Collaboration', icon: 'fa-users' },
{ name: 'Research, Regulation & Policy', icon: 'fa-file-alt' },
{ name: 'Accessibility', icon: 'fa-universal-access' },
{ name: 'Health and Livelihoods', icon: 'fa-heartbeat' }
],
partners: [
{
name: 'APNIC Foundation',
logo: 'assets/images/partners/apnic-logo.png',
url: 'https://foundation.apnic.net'
},
{
name: 'ISIF Asia',
logo: 'assets/images/partners/isif-logo.png',
url: 'https://isif.asia'
},
{
name: 'Universitas Brawijaya',
logo: 'assets/images/partners/ub-logo.png',
url: 'https://ub.ac.id'
},
{
name: 'IDREN',
logo: 'assets/images/partners/idren-logo.png',
url: 'https://idren.id'
}
]
};js/main.js: // Prompt for main JavaScript functionality
/*
Create main.js with the following features:
1. Counter animation for statistics
- Animate numbers from 0 to target value
- Trigger on scroll (Intersection Observer)
- Smooth easing function
2. Scroll animations
- Fade in elements on scroll
- Add 'visible' class when in viewport
- Use Intersection Observer API
3. Smooth scrolling for anchor links
- Handle # links within page
- Offset for fixed header
4. Active navigation highlighting
- Highlight current page in navigation
- Update on scroll for single-page sections
5. Back to top button
- Show/hide based on scroll position
- Smooth scroll to top
6. Form validation (for contact/registration forms)
- Check required fields
- Email validation
- Display error messages
7. Initialize on DOM ready
- Check if elements exist before manipulating
- Event listeners
*/
// Counter Animation
function animateCounter(element) {
const target = parseInt(element.getAttribute('data-target'));
const duration = 2000; // 2 seconds
const increment = target / (duration / 16); // 60fps
let current = 0;
const updateCounter = () => {
current += increment;
if (current < target) {
element.textContent = Math.floor(current);
requestAnimationFrame(updateCounter);
} else {
element.textContent = target;
}
};
updateCounter();
}
// Intersection Observer for animations
function initScrollAnimations() {
const observerOptions = {
threshold: 0.2,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
// Animate counters if they exist
if (entry.target.classList.contains('stat-number')) {
animateCounter(entry.target);
observer.unobserve(entry.target); // Only animate once
}
}
});
}, observerOptions);
// Observe all stat numbers
document.querySelectorAll('.stat-number').forEach(el => {
observer.observe(el);
});
// Observe other animated elements
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
}
// Smooth scrolling for anchor links
function initSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const href = this.getAttribute('href');
// Don't prevent default for # only
if (href === '#') return;
e.preventDefault();
const target = document.querySelector(href);
if (target) {
const headerOffset = 70; // Height of fixed header
const elementPosition = target.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
}
// Sticky header on scroll
function initStickyHeader() {
const header = document.getElementById('header');
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll > 100) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
lastScroll = currentScroll;
});
}
// Back to top button
function initBackToTop() {
// Create button if it doesn't exist
let backToTopBtn = document.getElementById('backToTop');
if (!backToTopBtn) {
backToTopBtn = document.createElement('button');
backToTopBtn.id = 'backToTop';
backToTopBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
backToTopBtn.setAttribute('aria-label', 'Back to top');
document.body.appendChild(backToTopBtn);
}
// Show/hide based on scroll
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopBtn.classList.add('visible');
} else {
backToTopBtn.classList.remove('visible');
}
});
// Scroll to top on click
backToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
}
// Form validation
function initFormValidation() {
const forms = document.querySelectorAll('form[data-validate]');
forms.forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
const inputs = form.querySelectorAll('input[required], textarea[required]');
inputs.forEach(input => {
if (!input.value.trim()) {
isValid = false;
input.classList.add('error');
showError(input, 'This field is required');
} else {
input.classList.remove('error');
hideError(input);
}
// Email validation
if (input.type === 'email' && input.value) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(input.value)) {
isValid = false;
input.classList.add('error');
showError(input, 'Please enter a valid email');
}
}
});
if (isValid) {
// Form is valid, submit it
console.log('Form submitted successfully');
form.submit();
}
});
});
}
function showError(input, message) {
let errorDiv = input.nextElementSibling;
if (!errorDiv || !errorDiv.classList.contains('error-message')) {
errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
input.parentNode.insertBefore(errorDiv, input.nextSibling);
}
errorDiv.textContent = message;
}
function hideError(input) {
const errorDiv = input.nextElementSibling;
if (errorDiv && errorDiv.classList.contains('error-message')) {
errorDiv.remove();
}
}
// Initialize everything on DOM ready
document.addEventListener('DOMContentLoaded', () => {
initScrollAnimations();
initSmoothScroll();
initStickyHeader();
initBackToTop();
initFormValidation();
});js/navigation.js: // Prompt for navigation functionality
/*
Create navigation.js to handle:
1. Mobile menu toggle
- Hamburger button click
- Open/close menu
- Close on link click
- Close on outside click
2. Active link highlighting
- Detect current page
- Add 'active' class to current page link
3. Scroll-based header styling
- Add shadow/background on scroll
*/
// Mobile menu toggle
function initMobileMenu() {
const navToggle = document.getElementById('navToggle');
const navMenu = document.getElementById('navMenu');
if (!navToggle || !navMenu) return;
// Toggle menu
navToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
navToggle.classList.toggle('active');
document.body.classList.toggle('menu-open');
});
// Close menu when clicking on a link
const navLinks = navMenu.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
navToggle.classList.remove('active');
document.body.classList.remove('menu-open');
});
});
// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (!navMenu.contains(e.target) && !navToggle.contains(e.target)) {
navMenu.classList.remove('active');
navToggle.classList.remove('active');
document.body.classList.remove('menu-open');
}
});
}
// Highlight active page in navigation
function highlightActivePage() {
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
const linkPage = link.getAttribute('href');
if (linkPage === currentPage ||
(currentPage === '' && linkPage === 'index.html')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
// Initialize navigation
document.addEventListener('DOMContentLoaded', () => {
initMobileMenu();
highlightActivePage();
});7. Footer HTML<!-- Prompt for Footer Component -->
<!--
Create a comprehensive footer with:
- 4 columns: About, Quick Links, Resources, Connect
- About section with brief project description
- Quick links to main pages
- Resources links (documentation, downloads)
- Social media icons
- Contact information
- Partner logos
- Copyright notice
- Funding acknowledgment
-->
<footer id="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>About LLMNetOps</h4>
<p>
An ISIF Asia 2025 initiative by Universitas Brawijaya, building
privacy-aware AI capabilities for network operations across IDREN
member institutions.
</p>
<div class="footer-partners">
<img src="assets/images/partners/apnic-logo.png" alt="APNIC" class="footer-logo">
<img src="assets/images/partners/isif-logo.png" alt="ISIF Asia" class="footer-logo">
</div>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul class="footer-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="deliverables.html">Deliverables</a></li>
<li><a href="workshops.html">Workshops</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="impact.html">Impact</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul class="footer-links">
<li><a href="resources.html#modules">Training Modules</a></li>
<li><a href="resources.html#case-studies">Case Studies</a></li>
<li><a href="resources.html#white-papers">White Papers</a></li>
<li><a href="resources.html#workshop-materials">Workshop Materials</a></li>
<li><a href="blog.html">Blog & Updates</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Connect</h4>
<div class="social-links">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
<a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
</div>
<div class="footer-contact">
<p><i class="fas fa-envelope"></i> llmnetops@ub.ac.id</p>
<p><i class="fas fa-map-marker-alt"></i> Malang, Indonesia</p>
</div>
</div>
</div>
<div class="footer-bottom">
<p>
© 2025 Universitas Brawijaya. Funded by ISIF Asia 2025 / APNIC Foundation.
</p>
<p>
<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a>
</p>
</div>
</div>
</footer>8. Deployment Files.nojekyll file: README.md: # LLMNetOps Website
Static website for the LLMNetOps project: Strengthening Network Operations Through Locally-Hosted Generative AI.
## Live Site
https://yourusername.github.io/llmnetops/
## Project Information
- **Institution:** Universitas Brawijaya
- **Funding:** ISIF Asia 2025 / APNIC Foundation
- **Budget:** $30,000 USD
- **Target:** 20+ network operations professionals from IDREN institutions
## Local Development
1. Clone the repository:
```bash
git clone https://github.com/yourusername/llmnetops.git
cd llmnetops
# Using Python
python -m http.server 8000
# Using PHP
php -S localhost:8000
# Using Node.js (http-server)
npx http-server
File StructureUpdating ContentTo update project data:Edit To add new pages:
To add resources:
DeploymentGitHub Pages Deployment
git add .
git commit -m "Update website"
git push origin main
Custom Domain (Optional)
Technologies
Browser Support
License[Specify your license] ContactUniversitas Brawijaya
Acknowledgments
© 2025 Universitas Brawijaya. All rights reserved. |
Co-authored-by: rizalespe <7615996+rizalespe@users.noreply.github.com>
Contributor
Author
Converted to a multi-page static HTML/CSS/JS website in commit d0e24b1 following your structure: Pages created:
Folder structure:
Features:
|
Copilot
AI
changed the title
Create LLMNetOps project website
Create LLMNetOps multi-page static website for GitHub Pages
Dec 2, 2025
Contributor
|
@copilot Ok, now help me to deploy it in http://llmnetops.github.io/ |
Contributor
Author
The website is ready to deploy! Since this is a To deploy:
GitHub Pages will automatically deploy and the site will be live at https://llmnetops.github.io within a few minutes. Note: The website is already configured correctly:
After merging, you can check the deployment status in Settings → Pages or the Actions tab. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Multi-page static website for LLMNetOps - Strengthening Network Operations Knowledge-Base through Locally-Hosted Generative AI. An ISIF Asia 2025 project by Universitas Brawijaya.
Changes
Pages Created:
CSS Files:
css/style.css: Main styles with CSS variables, typography, cards, buttons, navigationcss/responsive.css: Mobile-first responsive design with tablet and mobile breakpointscss/components.css: Reusable component styles (tables, alerts, accordions, modals, etc.)JavaScript Files:
js/main.js: Core functionality, scroll animations, back-to-top buttonjs/navigation.js: Mobile hamburger menu, active link highlightingjs/animations.js: Scroll reveal, counter animations, progress bars, accordion functionalityData Files:
data/deliverables.json: Project deliverables data structuredata/workshops.json: Workshop sessions and FAQ datadata/resources.json: Resource catalogOther:
.nojekyll: Disables Jekyll processing for GitHub PagesFeatures
rel="noopener noreferrer"for securityScreenshot
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.