Loading johnnynguyen.cloud portal

Microsoft Azure · initializing blades

Virtual networks

Net+ Visual Lab · v0.1

A mini Packet Tracer I built while studying for CompTIA Network+. Drop devices on a canvas, cable them into networks, and ping. A glowing packet walks the path while the event log explains what every switch, router, and firewall is doing.

Open Net+ Visual Lab ↗ Source code ↗

The actual lab, running live. Click anywhere to open it full size and start cabling.

Why it exists

Cisco Packet Tracer teaches real networking but looks like 2004. While studying for Network+ I wanted a simulator I'd actually want to open, so I built one. Every click maps to an exam topic. Subnets, default gateways, Layer 2 vs Layer 3, and firewall rules aren't flashcards here. You watch them happen.

It runs on the same React + TypeScript stack as this portal, and the whole canvas is hand-rolled SVG. No diagram library.

What you can do

Place and drag laptops, PCs, servers, switches, routers, and firewalls
Cable devices together with real rules: hosts get one NIC, so you fan out with a switch
Subnet bubbles draw live around each Layer 2 segment with auto-assigned /24s
Ping between devices and watch the packet animate hop by hop
An event log narrates every hop: ARP, MAC-table lookups, gateway decisions, TTL
Flip a firewall to block ICMP and watch the ping die mid-path

Every Networking Concept Explained video thumbnail from Tech With Diego

The inspiration

The visual style comes from “Every Networking Concept Explained | Networking 101” by Tech With Diego, a senior DevOps engineer who built a custom animation app and explained the whole networking stack in 8 minutes. Watch the original. It's the best networking overview I've found on YouTube.

What's new v0.2.6 Beta

A running log of what shipped and when. The build history of this portal.

v0.2.6 Beta 2026-06-12 Foundry blade for the AI-103 Agent Lab

Added

New Foundry blade showcasing the AI-103 Agent Lab, an agent-building trainer for the brand-new Azure AI Apps and Agents Developer exam, with a live demo, feature rundown, and the story of why it exists: a Microsoft Cloud Solution Architect asked for it.
Added the AI-103 Agent Lab to Projects and to global search.

Changed

The Foundry preview lands on the multi-agent orchestration template, so new visitors see a built agent on the canvas instead of an empty grid.
Johnny Copilot now knows about the AI-103 Agent Lab and the Foundry blade, and can tell all three labs apart.

Infra

The lab runs on Azure Static Web Apps (Free tier) like the other labs, with its AI reviewer on the same rate-limited Azure OpenAI backend as Johnny Copilot.

v0.2.5 Beta 2026-06-11 Architecture blade for the AZ-305 Architect Lab

Added

New Architecture blade showcasing the AZ-305 Architect Lab, a drag-and-drop trainer for designing Azure solutions, with a live demo, feature rundown, and how it's built from Microsoft's official AZ-305 series.
Added the AZ-305 Architect Lab to Projects and to global search.
Both labs are now open source: the AZ-305 Architect Lab and Net+ Visual Lab repos are public, with docs on how they were built and what they cost to run.

Changed

The Architecture and Virtual networks blade previews are now the real labs running live in an embedded frame. The Architecture preview lands on a loaded reference diagram so new visitors see a built canvas.
The lab itself leveled up since the first cut: a Lucidchart-style canvas with undo/redo, snapping, and magnetic connectors, five reference architectures with guided data-flow walkthroughs, drag-to-order PBQs, full answer reasoning with Microsoft Learn links, and a live preview of this portfolio inside the lab.

Fixed

Johnny Copilot now knows the Architecture blade is the AZ-305 lab and no longer confuses it with the Net+ Visual Lab. Its knowledge moved to a master doc that updates with every release.

Infra

Deployed the AZ-305 Architect Lab to Azure Static Web Apps (Free tier), the same way the Net+ Visual Lab is hosted.
The lab's Explain and scenario-generation features run on the same Azure OpenAI backend as Johnny Copilot, with rate limiting and a bring-your-own-key fallback.

v0.2.4 Beta 2026-06-10 Virtual networks blade and a smarter Johnny Copilot

Added

New Virtual networks blade showcasing the Net+ Visual Lab, a mini Packet Tracer with a live demo, feature rundown, and the video that inspired it.
Johnny Copilot panel in the top bar. Ask public questions about my work, projects, certs, games, or cats.
Copilot suggests follow-up questions after each answer and understands follow-ups like asking for more detail.

Changed

Copilot answers pick the best-matching topic instead of the first keyword hit, and type out as they arrive.
Copilot now slides in under the top bar and squeezes just the page content, the way Azure Portal does.
New Copilot icon built from the site's Azure-style A mark with an AI sparkle.
Removed the dead conversation-list button from the Copilot header.
Rewrote the Virtual networks copy and enlarged the video thumbnail to match the rest of the site.

Fixed

Copilot no longer stalls for two seconds before every answer when the model API is unavailable.
The video credit card on Virtual networks now lays out side by side on desktop.

Infra

Wired up Cloudflare Web Analytics. The beacon activates once its token lands.
Johnny Copilot now runs on Azure OpenAI (gpt-5-mini) with real reasoning, rate limiting, and the local engine as backup.

v0.2.3 Beta 2026-06-03 Dashboard, tenant views, and skills refresh

Added

All services is now a pinned-tile dashboard. Each tile previews its blade, and the Regions tile shows the US map.
The Regions tile on All services is now a solid 3D map with real thickness. Drag it to spin and tilt the view.
Added a first-visit chooser for Recruiter view versus Administrator view.
The top-right profile menu now switches portfolio tenants like Azure Portal directory switching.
Tenant switching now shows an Azure-style loading screen and returns visitors to Home.
Recruiter view gets a simplified home page focused on skills, experience, certifications, projects, and resume actions.
The Users blade now includes an Administrator visitor role.

Changed

Recruiter view now leads with a refreshed cloud, security, and AI skills snapshot from the current resume.
Guided tours are now view-specific, with separate recruiter and administrator walkthroughs.
Refreshed the Security blade's recommendations.
Removed the hover-tilt from the dashboard tiles.
Reorganized this changelog into date-based releases grouped by Added, Changed, and Fixed.

Fixed

Fixed the search results dropdown: icons no longer render oversized and the rows are styled correctly.
The What's new drawer scrolls with the mouse wheel again.
Cleaned up the initials avatar alignment in the top-right profile control.

v0.2.2 Beta 2026-06-02 Portal polish, mobile support, and core blades

Added

A working light/dark theme picker in Settings that remembers your choice and matches Azure's dark portal.
The loading splash now follows your theme.
App launcher (top-left grid) with links to MS Learn, Azure Portal, GitHub, LinkedIn, VS Code, and my resume.
Virtual machines blade listing my lab VMs.
Resume is a real download, plus an az vm list command in Cloud Shell.
Regions blade: a US map of where I'm based and where I'd relocate, with a regions table.
Storage blobs open a viewer to browse the photos inside.
Security blade lists my lab backlog: Sentinel, Conditional Access, PIM, Defender, Key Vault, and a honeypot VM.
A custom social card and clearer link preview when the site is shared.
Added Network+ to Certifications (exam scheduled June 2026).
The « button collapses the left nav to an icon rail, and it remembers your choice.

Changed

Merged Resume and Contact into one blade. The public resume leaves out my phone and email.
Rewrote the site copy in my own voice.
Tidied the search results: type icons, cleaner rows, a Run tag on commands, and a result count.
Shortened the search box placeholder so it fits on a laptop.
Dropped the hover-tilt from the tiles; cards keep a subtle lift.

Fixed

Made the whole portal responsive. On phones the left nav slides in from a menu button and nothing runs off the screen.
The Security+ Verify credential link now goes straight to the CompTIA record.
The notification bell clears once you open What's new, and returns only for a new release.
Removed the duplicate Dashboard nav item.
Scrollbars now match the page colors.

v0.1.0 Beta 2026-06-01 First public release

Added

Azure Portal shell: blue top bar, left resource nav, boot splash, and Cloud Shell drawer.
Guided first-visit tour of the portal. Replay it from the Help (?) button.
This What's new drawer and a version pill in the top bar.
Global search across pages, projects, certs, storage, and CLI commands (Ctrl + /).
Mock az CLI Cloud Shell (Ctrl + `) that answers against the site's data.
Content blades: Projects, Certifications, Storage, Security, Users, Resume, and About.
Certification cards with Verify credential links.
SEO and social: per-page titles, OpenGraph and Twitter cards, and a sitemap.

Changed

Set the light theme as the default to match Azure Portal; dark is opt-in.

Infra

Deployed to Azure Static Web Apps with a GitHub Actions pipeline; every push to main ships.
Connected johnnynguyen.cloud through Cloudflare DNS with automatic SSL.