Date: May 25, 2026 | Tags: CCNP, Network Lab, HTML, CSS, JavaScript, JARVIS, AI Development, Local Development

Today I’m excited to showcase one of the most visually stunning projects to come out of my home lab setup: the EMG-CCNP LAB Portal. This is a fully interactive, single-page network lab dashboard that was designed and built entirely by JARVIS – my AI assistant powered by Claude. The entire project lives locally on my MacBook Desktop and represents a new approach to how we can visualize and interact with CCNP-level networking concepts.

How JARVIS Built the EMG-CCNP LAB Portal

The EMG-CCNP LAB Portal was created by JARVIS using a structured prompt file (.jarvis_prompt.md) that outlined the desired features and design specifications. JARVIS interpreted the requirements and generated a complete, production-quality web application in a single HTML file – no frameworks, no build tools, no external dependencies. Just pure HTML, CSS, and JavaScript working together in 1,244 lines of meticulously crafted code (55KB total).

What makes this impressive is that JARVIS didn’t just write code – it made architectural decisions about color theory, animation timing, layout composition, and user interaction patterns. The result is a cohesive, professional-grade interface that looks like it came from a dedicated UI/UX team, not an AI assistant running on a local MacBook.

Beautiful Design Elements

The Color System (CSS Custom Properties)

The portal uses a sophisticated dark-mode color palette defined through CSS custom properties. The deep blue-black background (#030810) provides the perfect canvas for vibrant accent colors: electric cyan (#00d4ff) for primary elements, neon green (#00ff88) for success states, vivid orange (#ff7700) for warnings, and purple (#884cff) for decorative accents. Every color has an accompanying glow effect using multi-layered box-shadows, creating a futuristic cyberpunk aesthetic.

Animated Particle Network Background

Behind all the content, a JavaScript Canvas animation renders a continuously moving particle network. Nodes drift across the screen and connect with lines when they come within proximity of each other – a subtle but powerful visual metaphor for networking itself. Layered on top is a CSS grid overlay using barely-visible cyan lines at 60px intervals, adding depth and a technical feel to the background.

Interactive Network Topology (SVG)

The centerpiece is a fully interactive SVG network topology diagram featuring 9 nodes: 2 ISP clouds (AS 65001 and AS 65002), a core router R1-CORE (AS 65100), 2 distribution switches, and 4 access switches. The links are animated with dashed strokes and traveling packet dots – orange for eBGP connections, cyan for OSPF areas, and green for EIGRP links. This isn’t a static image; it’s a living, breathing representation of a multi-protocol enterprise network.

Lab Module Cards

Eight lab module cards cover the core CCNP ENCOR and ENARSI topics: OSPF, EIGRP, BGP, MPLS, QoS, SD-WAN, VPN, and Redistribution. Each card features color-coded status badges, animated progress bars that fill dynamically, and “LAUNCH” buttons that trigger simulated console output. The cards use semi-transparent panel backgrounds (rgba(6,15,38,0.88)) with subtle border glows that respond to hover interactions.

Device Console with Typewriter Effect

A simulated Cisco IOS terminal displays router command output using a typewriter animation effect. It cycles through real commands like show ip route summary, show bgp summary, and show ip ospf neighbor, making the interface feel alive and connected to actual networking operations. The monospace Courier New font and green-on-black color scheme perfectly capture the look of a real terminal session.

Live Event Logger

A real-time scrolling event feed displays color-coded log entries (INFO in cyan, SUCCESS in green, WARN in orange, ERROR in red, DEBUG in purple) that automatically appear every 3.8 seconds. The newest entries appear at the top with smooth animations, simulating the monitoring experience you’d see in a production NOC (Network Operations Center).

JARVIS AI Assistant Orb

In the bottom-right corner floats a glowing orb – click it and JARVIS appears as an in-page AI assistant that responds to CCNP keywords. Ask about OSPF, EIGRP, BGP, MPLS, QoS, VPN, SD-WAN, or redistribution, and JARVIS provides contextual explanations. It’s a beautiful touch that bridges the gap between a static dashboard and an intelligent learning tool.

The Technology Stack: Zero Dependencies

One of the most remarkable aspects of the EMG-CCNP LAB Portal is what it doesn’t use. There are no React components, no Tailwind classes, no npm packages, no webpack bundles. The entire application is:

• Pure HTML5 – Semantic markup with proper structure
• CSS3 – Custom properties, keyframe animations, flexbox/grid layouts, gradients, pseudo-elements, and multi-layered box-shadows
• Vanilla JavaScript – Canvas API for particle animation, setInterval for live updates, DOM manipulation for interactivity, and inline SVG animation
• Inline SVG – The network topology is rendered as scalable vector graphics directly in the HTML

Everything is contained in a single index.html file. No build step. No compilation. No server required. Just open the file and it runs.

Local Development Process: Served from Desktop

The development workflow for this project is refreshingly simple. The file lives at:

file:///Users/jczaldivar/Desktop/emg-ccnp-lab-portal/index.html

That’s it. No local server, no Docker containers, no cloud deployment. The file sits on my MacBook Desktop in its own project folder and opens directly in Chrome. This is intentional – the EMG-CCNP LAB Portal is a personal learning and visualization tool, and keeping it local means zero latency, zero dependencies on external services, and instant iteration.

When I want to make changes, JARVIS modifies the file directly on disk. I refresh the browser and the updates are live. The development cycle is measured in seconds, not minutes. This local-first approach proves that you don’t need a complex CI/CD pipeline to build something beautiful and functional.

Final Thoughts

The EMG-CCNP LAB Portal represents what’s possible when AI-assisted development meets clear design vision. JARVIS took a structured prompt and turned it into a 1,244-line masterpiece that combines real networking knowledge with stunning visual design. Every animation, every color choice, every interaction was considered and implemented with purpose.

If you’re studying for the CCNP or just love beautiful network visualizations, this project shows that learning tools don’t have to be boring. They can be cyberpunk. They can glow. They can make you feel like you’re in a sci-fi movie while you study OSPF area types and BGP path selection.

Built by JARVIS. Served from Desktop. Zero dependencies. Pure craft.