🌐 NetFlow — Networking Fundamentals

🔴 Live Site: https://rajrathod07.github.io/netflow/

A fluid, comprehensive, and highly interactive web guide taking you from the absolute basics of data transfer to advanced global infrastructure and cybersecurity. Built with a modern glassmorphism interface, this project serves as a dynamic "Zero to Hero" study reference for IT and cybersecurity.

---

🌱 A Living Notebook

This project began as a personal study tool for cybersecurity and penetration testing. It has since evolved into a full 20-chapter interactive textbook that scales up right alongside my skills—designed to make dense, heavy networking concepts feel light, punchy, and visually alive.

✨ Key Features

• 🏆 Interactive Progress & Certification: Mark concepts as "done" to track your learning (saves locally to your browser). Complete all 20 chapters to unlock a dynamic, animated Certificate of Completion.
• 🌗 Liquid Theme Toggle: Features a buttery-smooth dark/light mode toggle utilizing the modern View Transitions API for a gorgeous expanding circular ripple effect.
• 🔍 Advanced Live Search: Instantly filter chapters and highlight specific keywords across the DOM in real-time as you type.
• ✨ "Alive" Visuals: Animated SVG network topologies that simulate flowing data, breathing icons, and interactive hover states.
• 📱 Fully Responsive: Adapts seamlessly from desktop monitors to mobile screens, featuring a dynamic, scroll-tracking mobile bottom navigation bar.
• 🧠 Knowledge Checks: Built-in interactive Q&A sections at the end of every chapter to test retention.

---

📚 The Curriculum (20 Chapters)

The guide is structured into 6 logical levels, building from physical cables up to network security:

• Level 1: Fundamentals — What is a network?, Nodes, Packets, LAN vs. WAN.
• Level 2: Hardware & Layout — Copper vs. Fiber Optic Cabling, Topologies (Star, Mesh, Bus), Switches, Routers, Modems.
• Level 3: Rules & Addressing — Data Flow (Duplex), Protocols (TCP/UDP), MAC vs. IP vs. Ports, NAT, Subnetting, DHCP, DNS.
• Level 4: Advanced Concepts — Network Metrics (Bandwidth, Latency, Jitter, Packet Loss), The 7-Layer OSI Model.
• Level 5: Global Infrastructure — Wi-Fi Frequencies & Channels, Undersea Cables & ISPs, Data Centers & The Cloud, Internet of Things (IoT).
• Level 6: Security & Practice — Firewalls & Common Threats (DDoS, MitM), VPNs & Proxies, CLI Troubleshooting Tools (Ping, Traceroute, ipconfig).

---

💻 Tech Stack

Built entirely with pure, vanilla web technologies—no frameworks, zero bloat, running at 60FPS:

• HTML5: Semantic structure and accessible content layout.
• CSS3: Custom CSS variables, Grid/Flexbox, advanced backdrop-filters (Glassmorphism), and keyframe animations.
• Vanilla JavaScript (ES6+): * IntersectionObserver for zero-lag scroll-spy navigation.
  • View Transitions API for GPU-accelerated theme switching.
  • localStorage API for persistent progress tracking.
  • Dynamic DOM manipulation for automated sidebar generation and search highlighting.

---

👤 Author

Raj Rathod GitHub: @rajrathod07 | LinkedIn: Raj Rathod

📝 License

This project is open-source and available under the MIT License.