Add Beginner-Friendly Computer Networks Documentation for Semester 4

app/components/subjects.tsx

@@ -123,7 +123,7 @@ const subjectCodes: Record<string, string> = {
 };
 
 // Available subjects
-const available = ["ep", "c", "em1", "em2", "oops","os", "ml"];
+const available = ["ep", "c", "em1", "em2", "oops", "cn", "os"];
 
 export default function SubjectsSection() {
   return (

app/sem4/cn/[chapter]/page.tsx

@@ -0,0 +1,105 @@
+import Link from "next/link";
+import { Ch0Content } from "../content/chapter0";
+import { Ch1Content } from "../content/chapter1";
+import { Ch2Content } from "../content/chapter2";
+import { ArrowBigLeft, ArrowBigRight } from "lucide-react";
+import { Righteous } from "next/font/google";
+
+const righteous = Righteous({
+      subsets: ['latin'], 
+      weight: '400', 
+      variable: '--font-righteous', 
+    });
+
+// Chapter data for Computer Networks
+const chapters = [
+  { id: "ch0", title: "Course Outline", component: Ch0Content },
+  { id: "ch1", title: "Introduction to Computer Networks & OSI Model", component: Ch1Content },
+  { id: "ch2", title: "Networking Components & Devices", component: Ch2Content },
+];
+
+type ChapterProps = {
+  params: { chapter: string };
+};
+
+export default function ChapterPage({ params }: ChapterProps) {
+  const currentIndex = chapters.findIndex((c) => c.id === params.chapter);
+  const chapter = chapters[currentIndex];
+
+  if (!chapter) {
+    return <h1 className="text-2xl font-bold">Chapter not found</h1>;
+  }
+
+  const ChapterComponent = chapter.component;
+  const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null;
+  const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null;
+
+  return (
+    <div className="flex flex-col min-h-full p-4 text-[#e2d1c1]">
+      {/* Content */}
+      <div className="flex-1">
+        <h1 className={`text-4xl font-bold ${righteous.className} mb-2`}>
+          Computer Networks
+        </h1>
+        <p className={`text-2xl mt-[-8] ${righteous.className}`}>{chapter.title}</p>
+
+        {/* Navigation Buttons */}
+        <div className="flex justify-between mt-3">
+          {prevChapter ? (
+            <Link
+              href={`/sem4/cn/${prevChapter.id}`}
+              className="px-4 py-1 text-2xl flex items-center justify-center bg-[#e2d1c1] text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
+              style={{ fontFamily: 'Rockwell, Serif, serif' }}
+            >
+              <ArrowBigLeft className="inline-block mr-1" /> Previous
+            </Link>
+          ) : (
+            <div />
+          )}
+
+          {nextChapter ? (
+            <Link
+              href={`/sem4/cn/${nextChapter.id}`}
+              className="px-4 py-1 text-2xl flex items-center justify-center bg-[#e2d1c1] text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
+              style={{ fontFamily: 'Rockwell, Serif, serif' }}
+            >
+              Next <ArrowBigRight className="inline-block ml-1" />
+            </Link>
+          ) : (
+            <div />
+          )}
+        </div>
+
+        <hr className="my-6 border-t-3" />
+        <ChapterComponent />
+      </div>
+
+      {/* Navigation Buttons (Bottom) */}
+      <div className="flex justify-between my-8">
+        {prevChapter ? (
+          <Link
+            href={`/sem4/cn/${prevChapter.id}`}
+            className="px-4 py-2 bg-[#e2d1c1] text-xl flex items-center justify-center text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
+            style={{ fontFamily: 'Rockwell, Serif, serif' }}
+          >
+            <ArrowBigLeft className="inline-block mr-1" /> {prevChapter.title}
+          </Link>
+        ) : (
+          <div />
+        )}
+
+        {nextChapter ? (
+          <Link
+            href={`/sem4/cn/${nextChapter.id}`}
+            className="px-4 py-2 bg-[#e2d1c1] text-xl flex items-center justify-center text-[#1b0d00] rounded hover:bg-[#ac9e91] transition"
+            style={{ fontFamily: 'Rockwell, Serif, serif' }}
+          >
+            {nextChapter.title} <ArrowBigRight className="inline-block ml-1" /> 
+          </Link>
+        ) : (
+          <div />
+        )}
+      </div>
+    </div>
+  );
+}

app/sem4/cn/components/sidebar.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { Righteous } from "next/font/google";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+const righteous = Righteous({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-righteous",
+});
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(true);
+
+  const chapters = [
+    { id: "ch0", title: "Course Outline" },
+    { id: "ch1", title: "Introduction to Computer Networks & OSI Model" },
+    { id: "ch2", title: "Networking Components & Devices" },
+  ];
+
+  return (
+    <div className="flex relative">
+      {/* Sidebar */}
+      <aside
+        className={`h-[100vh] sticky top-0 bg-[#fae8d7] text-[#1B0D00] p-0 flex flex-col transition-all duration-300 ${
+          open ? "w-64" : "w-0 overflow-hidden"
+        }`}
+      >
+        <h2
+          className="flex items-center text-2xl font-normal pt-3 pl-3 mb-2 bg-[#cebb9c] text-[#1B0D00] pb-2 border-b-4 border-[#1B0D00]"
+          style={{ fontFamily: "Rockwell, Serif, serif" }}
+        >
+          Chapters
+        </h2>
+        <ul className="flex-1 overflow-y-auto space-y-0">
+          {chapters.map((ch) => {
+            const active = pathname === `/sem4/cn/${ch.id}`;
+            return (
+              <li key={ch.id}>
+                <Link
+                  href={`/sem4/cn/${ch.id}`}
+                  className={`block px-3 py-2 text-xl transition ${
+                    active ? "bg-[#fccc7e]" : "hover:bg-[#ffdda7af]"
+                  } ${righteous.className}`}
+                >
+                  {ch.title}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </aside>
+
+      {/* Toggle Button (always visible) */}
+      <button
+        onClick={() => setOpen(!open)}
+        className="toggle-sidebar sticky top-[10%] left-full bg-[#ffdda7d0] h-[85vh] w-[50px] text-[#1B0D00] text-center font-semibold text-2xl border-l-4 rounded-r-2xl border-[#1B0D00] flex items-center justify-center transition-all duration-300"
+        style={{ fontFamily: "Rockwell, Serif, serif" }}
+      >
+        <p className="leading-5">
+          C<br />H<br />A<br />P<br />T<br />E<br />R<br />S
+        </p>
+      </button>
+    </div>
+  );
+}

app/sem4/cn/content/chapter0.tsx

@@ -0,0 +1,108 @@
+import Image from "next/image";
+
+export const Ch0Content = () => {
+  return (
+    <div className="course-content">
+
+      <p className="p-text">
+        Welcome to <span className="font-semibold">Computer Networks</span> — a fundamental course 
+        that explores how computers communicate and share resources. This course covers the 
+        principles, protocols, and technologies that power the internet and modern telecommunications.
+      </p>
+
+      <hr className="my-6 border-[#c7a669] opacity-40" />
+
+      {/* Module I */}
+      <section>
+        <h3 className="section-heading">
+          Module I: <span className="section-subheading">Foundations & Reference Models</span>
+        </h3>
+
+        <Image
+          src="/cn-topologies.png"
+          alt="Network Topologies"
+          className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full mx-auto"
+          width={800}
+          height={450}
+        />
+
+        <ul className="section-list">
+          <li>Introduction to computer networks and their importance</li>
+          <li>Network topologies: Star, Mesh, Bus, Ring, and Hybrid</li>
+        </ul>
+
+        <Image
+          src="/cn-network-types.png"
+          alt="Classification of Networks"
+          className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full mx-auto"
+          width={800}
+          height={400}
+        />
+
+        <ul className="section-list">
+          <li>Classification of networks: LAN, MAN, WAN, PAN</li>
+          <li>Detailed study of the OSI Reference Model (7 Layers)</li>
+          <li>Introduction to the TCP/IP Protocol Suite</li>
+          <li>Comparison between OSI and TCP/IP models</li>
+        </ul>
+      </section>
+
+
+      <hr className="my-6 border-[#c7a669] opacity-40" />
+
+      {/* Module II */}
+      <section>
+        <h3 className="section-heading">
+          Module II: <span className="section-subheading">Physical & Data Link Layers</span>
+        </h3>
+        <ul className="section-list">
+          <li>Transmission Media: Guided (Twisted pair, Coaxial, Fiber) and Unguided (Radio, Micro, Infrared)</li>
+          <li>Data Link Layer design issues: Framing, Error control, and Flow control</li>
+          <li>Error detection and correction: Parity, Checksum, CRC, and Hamming code</li>
+          <li>Media Access Control (MAC) protocols: ALOHA, CSMA/CD, CSMA/CA</li>
+          <li>Ethernet standards and Wireless LANs (802.11)</li>
+        </ul>
+      </section>
+
+      <hr className="my-6 border-[#c7a669] opacity-40" />
+
+      {/* Module III */}
+      <section>
+        <h3 className="section-heading">
+          Module III: <span className="section-subheading">Network Layer</span>
+        </h3>
+        <ul className="section-list">
+          <li>IP Addressing: IPv4 (Classful & Classless) and Introduction to IPv6</li>
+          <li>Subnetting and Supernetting basics</li>
+          <li>Routing Algorithms: Distance Vector (RIP) and Link State (OSPF)</li>
+          <li>Congestion control algorithms: Leaky Bucket and Token Bucket</li>
+          <li>Internetworking devices: Hubs, Switches, Routers, and Gateways</li>
+        </ul>
+      </section>
+
+      <hr className="my-6 border-[#c7a669] opacity-40" />
+
+      {/* Module IV */}
+      <section>
+        <h3 className="section-heading">
+          Module IV: <span className="section-subheading">Transport & Application Layers</span>
+        </h3>
+        <ul className="section-list">
+          <li>Transport layer services: Connection-oriented vs Connectionless</li>
+          <li>UDP: Header format and characteristics</li>
+          <li>TCP: Segment structure, Connection management, and Flow control</li>
+          <li>Application Layer protocols: DNS, HTTP, HTTPS, FTP, SMTP, and DHCP</li>
+          <li>Network Security basics: Cryptography, Firewalls, and VPNs</li>
+        </ul>
+      </section>
+
+      <hr className="my-6 border-[#c7a669] opacity-40" />
+
+      <p className="p-text">
+        By the end of this course, you will understand how data travels from one point to another 
+        across the globe, the intricacies of the protocols involved, and the hardware that makes 
+        it all possible.
+      </p>
+    </div>
+  );
+};