= (props) => {
+ const [visible, setVisible] = createSignal(false);
+
+ return (
+
+ {props.title ? {props.title} : <>}
+ setVisible(!visible())}>
+ {visible() ? "Hide" : "Show"}
+ {props.buttonText ? `${props.buttonText}` : " Answer"}
+
+
+ {visible() && {props.children}
}
+
+ );
+};
+
+export default Spoiler;
diff --git a/00-Lesson-Site/src/components/SVGs/Moon.astro b/00-Lesson-Site/src/components/SVGs/Moon.astro
new file mode 100644
index 0000000..506fc63
--- /dev/null
+++ b/00-Lesson-Site/src/components/SVGs/Moon.astro
@@ -0,0 +1,19 @@
+---
+// Path: src/components/SVGs/Moon.astro
+---
+
+
+
+
+
diff --git a/00-Lesson-Site/src/components/SVGs/ProfileSpinner.astro b/00-Lesson-Site/src/components/SVGs/ProfileSpinner.astro
new file mode 100644
index 0000000..16589e9
--- /dev/null
+++ b/00-Lesson-Site/src/components/SVGs/ProfileSpinner.astro
@@ -0,0 +1,9 @@
+---
+// Path: src/components/SVGs/ProfileSpinner.astro
+---
+
+
+
diff --git a/00-Lesson-Site/src/components/SVGs/Sun.astro b/00-Lesson-Site/src/components/SVGs/Sun.astro
new file mode 100644
index 0000000..aeafec6
--- /dev/null
+++ b/00-Lesson-Site/src/components/SVGs/Sun.astro
@@ -0,0 +1,58 @@
+---
+// Path: src/components/SVGs/Sun.astro
+---
+
+
+
+
+
diff --git a/00-Lesson-Site/src/components/SVGs/UserSVG.astro b/00-Lesson-Site/src/components/SVGs/UserSVG.astro
new file mode 100644
index 0000000..ed872ca
--- /dev/null
+++ b/00-Lesson-Site/src/components/SVGs/UserSVG.astro
@@ -0,0 +1,7 @@
+---
+// Path: src/components/SVGs/UserSVG.astro
+---
+
+
+
diff --git a/00-Lesson-Site/src/content/lessons/01-intro.mdx b/00-Lesson-Site/src/content/lessons/01-intro.mdx
new file mode 100644
index 0000000..0d2b0d0
--- /dev/null
+++ b/00-Lesson-Site/src/content/lessons/01-intro.mdx
@@ -0,0 +1,61 @@
+---
+# Path: src/content/lessons/01-intro.mdx
+
+title: "Introduction to Web Dev"
+description: "Setting up the environment"
+style: "type-1"
+---
+
+import Spoiler from "../../components/Post/Spoiler.tsx";
+
+# Hosting a Large Language Model (LLM) Locally
+
+
+
+
+
+ Lesson 01
+ Created at: **December 2025**
+ Last Updated: **December 2025**
+
+
+
+
+ ## Lesson Objectives
+
+ - Setting up your Developer Environment
+ - Setting up a isolated Docker environment for hosting LLMs
+ - Introduction to basic Python environment setup
+ - Hosting a basic LLM model with Llama.cpp locally
+
+
+
+
+
+
+
+ Setting Up WSL (Windows Subsystem for Linux)
+ To set up WSL on your Windows machine, follow these steps:
+ 1. Open PowerShell as Administrator.
+ 2. Run the following command to enable WSL and install a Linux distribution (Ubuntu is recommended):
+
+```zsh frame="none"
+wsl --install
+```
+
+ 3. Restart your computer when prompted.
+ 4. After restarting, open the Ubuntu application from the Start menu and complete the initial setup by creating a user account.
+ 5. Update your package lists and upgrade installed packages by running:
+
+```zsh frame="none"
+sudo apt update && sudo apt upgrade -y
+```
+
+ Getting Your Environment Ready
+
+```wsl frame="none"
+
+
+
diff --git a/00-Lesson-Site/src/content/lessons/config.ts b/00-Lesson-Site/src/content/lessons/config.ts
new file mode 100644
index 0000000..ba05d19
--- /dev/null
+++ b/00-Lesson-Site/src/content/lessons/config.ts
@@ -0,0 +1,15 @@
+// Path: 00-Lesson-Site/src/content/lessons/config.ts
+
+import { defineCollection, z } from "astro:content";
+
+const lessonsCollection = defineCollection({
+ type: "content",
+ schema: z.object({
+ title: z.string(),
+ description: z.string().optional(),
+ }),
+});
+
+export const collections = {
+ lessons: lessonsCollection,
+};
diff --git a/00-Lesson-Site/src/helpers/colorMode.astro b/00-Lesson-Site/src/helpers/colorMode.astro
new file mode 100644
index 0000000..871491d
--- /dev/null
+++ b/00-Lesson-Site/src/helpers/colorMode.astro
@@ -0,0 +1,42 @@
+---
+// Path: src/helpers/colorMode.astro
+---
+
+
diff --git a/00-Lesson-Site/src/layouts/LandingLayout.astro b/00-Lesson-Site/src/layouts/LandingLayout.astro
new file mode 100644
index 0000000..3b679c2
--- /dev/null
+++ b/00-Lesson-Site/src/layouts/LandingLayout.astro
@@ -0,0 +1,36 @@
+---
+// Path: src/layouts/LandingLayout.astro
+
+import { ClientRouter } from "astro:transitions";
+
+import Navbar from "../components/Navbar/Navbar.astro";
+import ThemeScript from "../helpers/colorMode.astro";
+import "../styles/main.scss";
+---
+
+
+
+ Web Dev Lesson Notes
+
+
+
+
+
+
diff --git a/00-Lesson-Site/src/layouts/LessonLayout.astro b/00-Lesson-Site/src/layouts/LessonLayout.astro
new file mode 100644
index 0000000..97dba79
--- /dev/null
+++ b/00-Lesson-Site/src/layouts/LessonLayout.astro
@@ -0,0 +1,46 @@
+---
+// Path: src/layouts/LessonLayout.astro
+
+import { ClientRouter } from "astro:transitions";
+
+import Navbar from "../components/Navbar/Navbar.astro";
+import FloatingTOC from "../components/Post/FloatingTOC.astro";
+import ThemeScript from "../helpers/colorMode.astro";
+import "../styles/main.scss";
+
+interface Props {
+ pageTitle?: string;
+}
+
+const { pageTitle = "Web Dev Lessons" } = Astro.props;
+---
+
+
+
+ {pageTitle}
+
+
+
+
+
+
+ Welcome to the Lesson Site
+ This is the homepage of the lesson site built with Astro.
+
+ Lesson 1
+
diff --git a/00-Lesson-Site/src/pages/index.astro b/00-Lesson-Site/src/pages/index.astro
new file mode 100644
index 0000000..add46b4
--- /dev/null
+++ b/00-Lesson-Site/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+// Path: 00-Lesson-Site/src/pages/index.astro
+
+import Layout from "../layouts/LessonLayout.astro";
+---
+
+
+ Welcome to the Lesson Site
+ This is the homepage of the lesson site built with Astro.
+
+ Lesson 1
+
diff --git a/00-Lesson-Site/src/pages/lessons/[slug].astro b/00-Lesson-Site/src/pages/lessons/[slug].astro
new file mode 100644
index 0000000..1ccb1bd
--- /dev/null
+++ b/00-Lesson-Site/src/pages/lessons/[slug].astro
@@ -0,0 +1,35 @@
+---
+// Path: src/pages/lessons/[slug].astro
+
+import { getCollection, type CollectionEntry } from "astro:content";
+import LessonLayout from "../../layouts/LessonLayout.astro";
+
+import styles from "./lessonPage.module.scss";
+
+interface Props {
+ entry: CollectionEntry<"lessons">;
+}
+
+export async function getStaticPaths() {
+ const lessonEntries = await getCollection("lessons");
+
+ return lessonEntries.map((entry: CollectionEntry<"lessons">) => ({
+ params: { slug: entry.slug },
+ props: { entry },
+ }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+// Dynamically Import Lesson Style from the entry's frontmatter
+if (entry.data.style) {
+ await import(`../../styles/lessons/${entry.data.style}.scss`);
+}
+---
+
+
+
+
+
diff --git a/00-Lesson-Site/src/pages/lessons/index.astro b/00-Lesson-Site/src/pages/lessons/index.astro
new file mode 100644
index 0000000..d193d2d
--- /dev/null
+++ b/00-Lesson-Site/src/pages/lessons/index.astro
@@ -0,0 +1,12 @@
+---
+// Path: src/pages/lessons/index.astro
+
+import Layout from "../../layouts/LessonLayout.astro";
+---
+
+
+ Welcome to the Lesson Site
+ This is the homepage of the lesson site built with Astro.
+
+ Lesson 1
+
diff --git a/00-Lesson-Site/src/pages/lessons/lessonPage.module.scss b/00-Lesson-Site/src/pages/lessons/lessonPage.module.scss
new file mode 100644
index 0000000..eec64f5
--- /dev/null
+++ b/00-Lesson-Site/src/pages/lessons/lessonPage.module.scss
@@ -0,0 +1,11 @@
+/* Path: src/pages/lessons/lessonPage.module.scss */
+
+.content {
+ width: 1000px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+html {
+ scroll-behavior: smooth;
+}
diff --git a/00-Lesson-Site/src/pages/resources.astro b/00-Lesson-Site/src/pages/resources.astro
new file mode 100644
index 0000000..2a01e0d
--- /dev/null
+++ b/00-Lesson-Site/src/pages/resources.astro
@@ -0,0 +1,12 @@
+---
+// Path: src/pages/resources.astro
+
+import Layout from "../layouts/LessonLayout.astro";
+---
+
+
+ Welcome to the Lesson Site
+ This is the homepage of the lesson site built with Astro.
+
+ Lesson 1
+
diff --git a/00-Lesson-Site/src/styles/_global_fonts.scss b/00-Lesson-Site/src/styles/_global_fonts.scss
new file mode 100644
index 0000000..bd76848
--- /dev/null
+++ b/00-Lesson-Site/src/styles/_global_fonts.scss
@@ -0,0 +1,13 @@
+/* Path: src/styles/_fonts.scss */
+
+@font-face {
+ font-family: "Geist";
+ src: url("/fonts/Geist.woff2") format("woff2");
+ font-display: swap;
+}
+
+@font-face {
+ font-family: "GeistMono";
+ src: url("/fonts/GeistMono.woff2") format("woff2");
+ font-display: swap;
+}
diff --git a/00-Lesson-Site/src/styles/_global_vars.scss b/00-Lesson-Site/src/styles/_global_vars.scss
new file mode 100644
index 0000000..09c4fd4
--- /dev/null
+++ b/00-Lesson-Site/src/styles/_global_vars.scss
@@ -0,0 +1,11 @@
+/* Path: src/styles/_global_vars.scss */
+
+@use "sass:meta";
+
+@function color-adjust($color, $contrast-boost: 0, $c-offset: 0) {
+ $L: calc(var(--#{meta.inspect($color)}-base-l) - (#{$contrast-boost} * var(--theme-polarity)));
+ $C: calc(var(--#{meta.inspect($color)}-base-c) + #{$c-offset});
+ $H: var(--#{meta.inspect($color)}-base-h);
+
+ @return oklch(#{$L} #{$C} #{$H});
+}
diff --git a/00-Lesson-Site/src/styles/_reset.scss b/00-Lesson-Site/src/styles/_reset.scss
new file mode 100644
index 0000000..bf251a9
--- /dev/null
+++ b/00-Lesson-Site/src/styles/_reset.scss
@@ -0,0 +1,52 @@
+/* Path: src/styles/_reset.scss */
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+* {
+ margin: 0;
+}
+
+html,
+body {
+ height: 100%;
+}
+
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+ display: block;
+ max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+ isolation: isolate;
+}
diff --git a/00-Lesson-Site/src/styles/lessons/type-1.scss b/00-Lesson-Site/src/styles/lessons/type-1.scss
new file mode 100644
index 0000000..077e8a1
--- /dev/null
+++ b/00-Lesson-Site/src/styles/lessons/type-1.scss
@@ -0,0 +1,98 @@
+/* Path: src/styles/lessons/type-1.scss */
+
+.lesson-meta {
+ font-size: 0.9em;
+ color: #888;
+ background-color: color-adjust(background, 0.01, 0.01);
+ margin-bottom: 20px;
+ border-radius: 20px;
+
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ justify-content: space-evenly;
+}
+
+section {
+ margin-bottom: 20px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin-bottom: 10px;
+}
+
+h1 {
+ font-size: 2.5em;
+ color: #ff5e5e;
+}
+
+h2 {
+ font-size: 2em;
+ color: #ffbd72;
+}
+
+picture {
+ display: block;
+ margin: 20px auto;
+ max-width: 100%;
+
+ img {
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(252, 241, 145, 0.2);
+ }
+}
+
+p,
+li,
+blockquote {
+ line-height: 1.6;
+ margin-bottom: 15px;
+ text-align: justify;
+}
+
+strong {
+ font-weight: bold;
+ color: #ffb8b8;
+}
+
+.expressive-code {
+ margin: 20px !important;
+}
+
+.objectives {
+ background-color: #fff45e1a;
+ padding: 30px;
+ border-radius: 10px;
+
+ position: relative;
+ min-height: 100px;
+
+ picture {
+ position: absolute;
+ bottom: -10px;
+ right: -10px;
+
+ margin: 0;
+
+ width: 140px;
+ max-width: 30%;
+
+ transform: rotate(10deg);
+
+ img {
+ width: 100%;
+ height: auto;
+ box-shadow: none;
+ }
+ }
+
+ ul {
+ list-style-type: disc;
+ padding-left: 20px;
+ }
+}
diff --git a/00-Lesson-Site/src/styles/main.scss b/00-Lesson-Site/src/styles/main.scss
new file mode 100644
index 0000000..54c9a44
--- /dev/null
+++ b/00-Lesson-Site/src/styles/main.scss
@@ -0,0 +1,78 @@
+/* Path: src/styles/main.scss */
+
+:root {
+ --theme-polarity: 1;
+
+ --background-base-l: 0.99;
+ --background-base-c: 0.02;
+ --background-base-h: 100;
+
+ --text-base-l: 0.4;
+ --text-base-c: 0.015;
+ --text-base-h: 84;
+
+ --primary-base-l: 0.75;
+ --primary-base-c: 0.145;
+ --primary-base-h: 142;
+
+ --secondary-base-l: 0.75;
+ --secondary-base-c: 0.06;
+ --secondary-base-h: 60;
+}
+
+@mixin dark-values {
+ --theme-polarity: -1;
+
+ --background-base-l: 0.1;
+ --background-base-c: 0.015;
+ --background-base-h: 84;
+
+ --text-base-l: 0.95;
+ --text-base-c: 0.015;
+ --text-base-h: 84;
+}
+
+[data-theme="dark"] {
+ @include dark-values;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:not([data-theme="light"]) {
+ @include dark-values;
+ }
+}
+
+html {
+ scrollbar-gutter: stable;
+}
+
+body {
+ background-color: color-adjust(background, 0, 0);
+ color: color-adjust(text, 0, 0);
+
+ transition:
+ background-color 0.4s ease,
+ color 0.4s ease;
+
+ font-family: "Geist", sans-serif;
+ font-weight: 300;
+}
+
+nav,
+button,
+hr,
+input,
+textarea,
+.icon,
+svg {
+ transition:
+ background-color 0.4s ease,
+ color 0.4s ease,
+ border-color 0.4s ease,
+ fill 0.4s ease,
+ stroke 0.4s ease;
+}
+
+main {
+ display: flow-root;
+}
diff --git a/00-Lesson-Site/tsconfig.json b/00-Lesson-Site/tsconfig.json
new file mode 100644
index 0000000..b666154
--- /dev/null
+++ b/00-Lesson-Site/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "include": [
+ ".astro/types.d.ts",
+ "**/*"
+ ],
+ "exclude": [
+ "dist"
+ ],
+ "compilerOptions": {
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
+ }
+}
\ No newline at end of file
++