diff --git a/_includes/schedule.html b/_includes/schedule.html
new file mode 100644
index 0000000..4e1017b
--- /dev/null
+++ b/_includes/schedule.html
@@ -0,0 +1,131 @@
+{%comment%} 
+Setup course data
+    - Extract data by course
+    - Within course create units
+{%endcomment%}
+
+{% assign course = site.data[page.course] %} <!-- Load YML data -->
+{% assign units = page.units | split: ',' %}
+<h1>{{page.title}}</h1>
+<br>
+
+{%comment%} 
+Load all posts with site
+{%endcomment%}
+
+{% assign posts = null | compact %}
+{% assign posts = posts | concat:site.posts | concat:site.pages %}
+
+{%comment%} 
+<!-- Iterate through Course Units -->
+{%endcomment%}
+
+{% for unit in units %}
+{% assign unitKey = "Unit " | append: unit %}
+{% assign unitData = course[unitKey] %}
+<h2>
+  {{ unitKey }}: {{ unitData.title }}
+</h2>
+<p>  {{ unitData.description }} </p>
+
+{% assign start = unitData.start %}
+{% assign end = unitData.end %}
+
+{%comment%} 
+<!-- Output Column Headings for Blogs -->
+{%endcomment%}
+
+<table>
+  <tr>
+    <th>Week</th>
+    <th>Plans</th>
+    <th>Hacks(Todo)</th>
+    <th>Tangibles</th>
+  </tr>
+
+  {%comment%} 
+  <!-- These loops group blogs according to Row (week) and Column (category) 
+    units = empty array
+    sym = value to be used as a separator
+    deli = sym forced to array
+  -->
+  {%endcomment%}
+
+  {% assign units = null | compact %}  
+  {% assign sym = "|||" %} 
+  {% assign deli = sym | compact %} 
+
+  {% for index in (start..end) -%}
+    {% assign plans = null | compact %}
+    {% assign hacks = null | compact %}
+    {% assign tangibles = null | compact %}
+
+
+  {%comment%} 
+  <!-- looping through all posts -->
+  {%endcomment%}
+
+    {% for post in posts %}
+      {% if post.courses[page.course] %}
+  {%comment%} 
+  <!-- prepare data blog post data for evaluation -->
+  {%endcomment%}
+        {% assign week = post.courses[page.course].week | tangibles: 0 %}
+        {% assign title = post.title | compact %}
+        {% assign url = post.url | compact %}
+  
+  {%comment%} 
+  <!-- process posts for current week -->
+  {%endcomment%}
+        {% if week == index %} 
+
+  {%comment%} 
+  <!-- organizing blogs by type -->
+  {%endcomment%}
+          {% if post.type == "plans" %} 
+              {% assign plans = plans | unshift: title %}
+              {% assign plans = plans | unshift: url %}
+          {% elsif post.type == "hacks" %}
+              {% assign hacks = hacks | unshift: title %}
+              {% assign hacks = hacks | unshift: url %} 
+          {% elsif post.type == "tangibles" %}
+              {% assign tangibles = tangibles | unshift: title %}
+              {% assign tangibles = tangibles | unshift: url %} 
+          {% else %}
+              {% assign uk = uk | unshift: title %}
+              {% assign uk = uk | unshift: url %}     
+          {% endif %}
+
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+
+  {%comment%} 
+  <!-- ordering units and inserting column delimiters -->
+  {%endcomment%}
+  {% assign units = units | concat:plans | concat:deli | concat:hacks | concat:deli | concat:tangibles  %}
+
+  {%comment%} 
+  <!-- This Loop is maximum iterationss, since elements are pairs it will decrement a extra times at the end -->
+  {%endcomment%}
+  <tr>
+  <td> {{ index }} </td> 
+  <td>
+  {% for i in (0..units.size) -%} 
+    {% if units.size == 0 %}
+      {% break %}
+    {% elsif units[0] == sym %} <!-- make new column -->
+  </td>
+  <td>
+      {% assign units = units | shift %} <!-- remove delimiter -->
+    {% else %} <!-- make a link in the column -->
+      - <a href="{{site.baseurl}}/{{units[0]}}">{{units[1]}}</a> <br/> 
+      {% assign units = units | shift | shift %} <!-- remove title and url -->
+    {% endif %}
+  {% endfor %}
+  </td>
+  </tr>
+  {% endfor %}
+
+</table>
+{% endfor %}
diff --git a/_layouts/schedule.html b/_layouts/schedule.html
new file mode 100644
index 0000000..4e1017b
--- /dev/null
+++ b/_layouts/schedule.html
@@ -0,0 +1,131 @@
+{%comment%} 
+Setup course data
+    - Extract data by course
+    - Within course create units
+{%endcomment%}
+
+{% assign course = site.data[page.course] %} <!-- Load YML data -->
+{% assign units = page.units | split: ',' %}
+<h1>{{page.title}}</h1>
+<br>
+
+{%comment%} 
+Load all posts with site
+{%endcomment%}
+
+{% assign posts = null | compact %}
+{% assign posts = posts | concat:site.posts | concat:site.pages %}
+
+{%comment%} 
+<!-- Iterate through Course Units -->
+{%endcomment%}
+
+{% for unit in units %}
+{% assign unitKey = "Unit " | append: unit %}
+{% assign unitData = course[unitKey] %}
+<h2>
+  {{ unitKey }}: {{ unitData.title }}
+</h2>
+<p>  {{ unitData.description }} </p>
+
+{% assign start = unitData.start %}
+{% assign end = unitData.end %}
+
+{%comment%} 
+<!-- Output Column Headings for Blogs -->
+{%endcomment%}
+
+<table>
+  <tr>
+    <th>Week</th>
+    <th>Plans</th>
+    <th>Hacks(Todo)</th>
+    <th>Tangibles</th>
+  </tr>
+
+  {%comment%} 
+  <!-- These loops group blogs according to Row (week) and Column (category) 
+    units = empty array
+    sym = value to be used as a separator
+    deli = sym forced to array
+  -->
+  {%endcomment%}
+
+  {% assign units = null | compact %}  
+  {% assign sym = "|||" %} 
+  {% assign deli = sym | compact %} 
+
+  {% for index in (start..end) -%}
+    {% assign plans = null | compact %}
+    {% assign hacks = null | compact %}
+    {% assign tangibles = null | compact %}
+
+
+  {%comment%} 
+  <!-- looping through all posts -->
+  {%endcomment%}
+
+    {% for post in posts %}
+      {% if post.courses[page.course] %}
+  {%comment%} 
+  <!-- prepare data blog post data for evaluation -->
+  {%endcomment%}
+        {% assign week = post.courses[page.course].week | tangibles: 0 %}
+        {% assign title = post.title | compact %}
+        {% assign url = post.url | compact %}
+  
+  {%comment%} 
+  <!-- process posts for current week -->
+  {%endcomment%}
+        {% if week == index %} 
+
+  {%comment%} 
+  <!-- organizing blogs by type -->
+  {%endcomment%}
+          {% if post.type == "plans" %} 
+              {% assign plans = plans | unshift: title %}
+              {% assign plans = plans | unshift: url %}
+          {% elsif post.type == "hacks" %}
+              {% assign hacks = hacks | unshift: title %}
+              {% assign hacks = hacks | unshift: url %} 
+          {% elsif post.type == "tangibles" %}
+              {% assign tangibles = tangibles | unshift: title %}
+              {% assign tangibles = tangibles | unshift: url %} 
+          {% else %}
+              {% assign uk = uk | unshift: title %}
+              {% assign uk = uk | unshift: url %}     
+          {% endif %}
+
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+
+  {%comment%} 
+  <!-- ordering units and inserting column delimiters -->
+  {%endcomment%}
+  {% assign units = units | concat:plans | concat:deli | concat:hacks | concat:deli | concat:tangibles  %}
+
+  {%comment%} 
+  <!-- This Loop is maximum iterationss, since elements are pairs it will decrement a extra times at the end -->
+  {%endcomment%}
+  <tr>
+  <td> {{ index }} </td> 
+  <td>
+  {% for i in (0..units.size) -%} 
+    {% if units.size == 0 %}
+      {% break %}
+    {% elsif units[0] == sym %} <!-- make new column -->
+  </td>
+  <td>
+      {% assign units = units | shift %} <!-- remove delimiter -->
+    {% else %} <!-- make a link in the column -->
+      - <a href="{{site.baseurl}}/{{units[0]}}">{{units[1]}}</a> <br/> 
+      {% assign units = units | shift | shift %} <!-- remove title and url -->
+    {% endif %}
+  {% endfor %}
+  </td>
+  </tr>
+  {% endfor %}
+
+</table>
+{% endfor %}
diff --git a/_notebooks/Foundation/2024-09-05-emoji.ipynb b/_notebooks/Foundation/2024-09-05-emoji.ipynb
index de72f29..0f90aac 100644
--- a/_notebooks/Foundation/2024-09-05-emoji.ipynb
+++ b/_notebooks/Foundation/2024-09-05-emoji.ipynb
@@ -25,7 +25,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [
     {
@@ -43,7 +43,18 @@
      ]
     }
    ],
-   "source": []
+   "source": [
+    "from emoji import emojize \n",
+    "print(emojize(\":thumbs_up: Liverpool Football Club is the best soccer team in the world. :grinning_face:\"))\n",
+    "\n",
+    "print(\"\")\n",
+    "print(emojize(\"Liverpool FC is one of the most iconic football clubs in the world! :soccer_ball::red_circle:\"))\n",
+    "print(emojize(\"Known for their passionate fans, the famous Kop :musical_notes: and their rich history,\"))\n",
+    "print(emojize(\"They've won numerous Premier League :trophy: and Champions League titles :globe_showing_Europe-Africa:\"))\n",
+    "print(emojize(\"Legends like Steven Gerrard and Mohamed Salah have graced the pitch at Anfield :stadium:\"))\n",
+    "print(emojize(\"Where the atmosphere is electric! YNWA (You'll Never Walk Alone) :musical_note::fire: is not just a motto,\"))\n",
+    "print(\"It's a way of life for the Reds!\")"
+   ]
   },
   {
    "cell_type": "markdown",
diff --git a/index.md b/index.md
index 512ea99..3012ca6 100644
--- a/index.md
+++ b/index.md
@@ -6,285 +6,121 @@ image: /images/mario_animation.png
 hide: true
 ---
 
-<!-- Liquid:  statements -->
 
-<!-- Include submenu from _includes to top of pages -->
-<!--- Concatenation of site URL to frontmatter image  --->
-{% assign sprite_file = site.baseurl | append: page.image %}
-<!--- Has is a list variable containing mario metadata for sprite --->
-{% assign hash = site.data.mario_metadata %}  
-<!--- Size width/height of Sprit images --->
-{% assign pixels = 256 %} 
+<h1>Home</h1>
+<p><br /></p>
 
-<!--- HTML for page contains <p> tag named "Mario" and class properties for a "sprite"  -->
+<h2>
+  Unit 1: 
+</h2>
+<p>   </p>
+
+<table>
+  <tr>
+    <th>Week</th>
+    <th>Plans</th>
+    <th>Hacks(Todo)</th>
+    <th>Tangibles</th>
+  </tr>
 
-<p id="mario" class="sprite"></p>
   
-<!--- Embedded Cascading Style Sheet (CSS) rules, 
-        define how HTML elements look 
---->
-<style>
-
-  /*CSS style rules for the id and class of the sprite...
-  */
-  .sprite {
-    height: {{pixels}}px;
-    width: {{pixels}}px;
-    background-image: url('{{sprite_file}}');
-    background-repeat: no-repeat;
-  }
 
-  /*background position of sprite element
-  */
-  #mario {
-    background-position: calc({{animations[0].col}} * {{pixels}} * -1px) calc({{animations[0].row}} * {{pixels}}* -1px);
-  }
+    
+   
+   
 
-  <style>
-    .project-submenu {
-      margin: 20px 0;
-      padding: 15px;
-      background-color: #f8f9fa;
-      border: 1px solid #ddd;
-      border-radius: 8px;
-      text-align: center;
-      transition: background-color 0.3s, box-shadow 0.3s;
-    }
-
-    .project-button {
-      display: block;
-      text-decoration: none;
-      color: #333;
-    }
-
-    .project-button h2 {
-      margin: 0;
-      font-size: 24px;
-      color: #007bff;
-    }
-
-    .project-button p {
-      margin: 10px 0 0;
-      font-size: 16px;
-      color: #555;
-    }
-
-    .project-submenu:hover {
-      background-color: #e9ecef;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-
-    .project-submenu:hover .project-button h2 {
-      color: #0056b3;
-    }
-  </style>
-
-<h1 align="center">Hi, I'm <span class="auto-type"></span></h1>
+  
+    
+    
 
 
-<br>
+  
 
-<div align="center">
-<img align="center" style="border-radius: 4px; box-shadow: 0px 0px 30px #35bde7;" src="{{site.baseurl}}/images/Freeform.png" height="300px" alt="about"/>
-<br>
-<br>
-<em>My about me picture</em>
-</div>
+    
 
-<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
+  
+  
 
-<script>
-    window.addEventListener("keydown", function(e) { if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) { e.preventDefault(); } }, false);
-  ////////// convert YML hash to javascript key:value objects /////////
+  
+  <tr>
+  <td> 0 </td> 
+  <td>
+   <!-- make new column -->
+  </td>
+  <td>
+       <!-- remove delimiter -->
+    
+   <!-- make new column -->
+  </td>
+  <td>
+       <!-- remove delimiter -->
+    
+  
+      
+  </td>
+  </tr>
+  
+
+</table>
+
+<h2>
+  Unit 2: 
+</h2>
+<p>   </p>
+
+<table>
+  <tr>
+    <th>Week</th>
+    <th>Plans</th>
+    <th>Hacks(Todo)</th>
+    <th>Tangibles</th>
+  </tr>
 
-  var mario_metadata = {}; //key, value object
-  {% for key in hash %}   
   
-  var key = "{{key | first}}"  //key
-  var values = {} //values object
-  values["row"] = {{key.row}}
-  values["col"] = {{key.col}}
-  values["frames"] = {{key.frames}}
-  mario_metadata[key] = values; //key with values added
-
-  {% endfor %}
-
-  ////////// game object for player /////////
-
-  class Mario {
-    constructor(meta_data) {
-      this.tID = null;  //capture setInterval() task ID
-      this.positionX = 0;  // current position of sprite in X direction
-      this.currentSpeed = 0;
-      this.marioElement = document.getElementById("mario"); //HTML element of sprite
-      this.pixels = {{pixels}}; //pixel offset of images in the sprite, set by liquid constant
-      this.interval = 100; //animation time interval
-      this.obj = meta_data;
-      this.marioElement.style.position = "absolute";
-    }
-
-    animate(obj, speed) {
-      let frame = 0;
-      const row = obj.row * this.pixels;
-      this.currentSpeed = speed;
-
-      this.tID = setInterval(() => {
-        const col = (frame + obj.col) * this.pixels;
-        this.marioElement.style.backgroundPosition = `-${col}px -${row}px`;
-        this.marioElement.style.left = `${this.positionX}px`;
-
-        this.positionX += speed;
-        frame = (frame + 1) % obj.frames;
-
-        const viewportWidth = window.innerWidth;
-        if (this.positionX > viewportWidth - this.pixels) {
-          document.documentElement.scrollLeft = this.positionX - viewportWidth + this.pixels;
-        }
-      }, this.interval);
-    }
-
-    startWalking() {
-      this.stopAnimate();
-      this.animate(this.obj["Walk"], 3);
-    }
-    startWalkingLeft() {
-      this.stopAnimate();
-      this.animate(this.obj["WalkL"], -3);
-    }
-
-    startRunningLeft() {
-      this.stopAnimate();
-      this.animate(this.obj["Run1L"], -6);
-    }
-
-    startRunning() {
-      this.stopAnimate();
-      this.animate(this.obj["Run1"], 6);
-    }
-
-    startPuffing() {
-      this.stopAnimate();
-      this.animate(this.obj["Puff"], 0);
-    }
-
-    startCheering() {
-      this.stopAnimate();
-      this.animate(this.obj["Cheer"], 0);
-    }
-
-    startFlipping() {
-      this.stopAnimate();
-      this.animate(this.obj["Flip"], 0);
-    }
-
-    startResting() {
-      this.stopAnimate();
-      this.animate(this.obj["Rest"], 0);
-    }
-
-    stopAnimate() {
-      clearInterval(this.tID);
-    }
-  }
 
-  const mario = new Mario(mario_metadata);
-
-  ////////// event control /////////
-
-  window.addEventListener("keydown", (event) => {
-    if (event.key === "ArrowRight" || event.key === "d") {
-      event.preventDefault();
-      if (event.repeat) {
-        mario.startCheering();
-      } else {
-        if (mario.currentSpeed === 0) {
-          mario.startWalking();
-        } else if (mario.currentSpeed === 3) {
-          mario.startRunning();
-        }
-      }
-    } else if (event.key === "ArrowDown" || event.key === "s") {
-      event.preventDefault();
-      if (event.repeat) {
-        mario.stopAnimate();
-      } else {
-        mario.startPuffing();
-      }
-    } else if (event.key === "ArrowUp" || event.key === "w") {
-      event.preventDefault();
-      if (event.repeat) {
-          mario.stopAnimate();
-      } else {
-          mario.startFlipping();
-      }
-    } else if (event.key === "ArrowLeft" || event.key === "a") {
-      event.preventDefault();
-      if (event.repeat) {
-          mario.startCheering();
-      } else {
-          if (mario.currentSpeed === 0) {
-          mario.startWalkingLeft();
-        } else if (mario.currentSpeed === -3) {
-          mario.startRunningLeft();
-        } else if (mario.currentSpeed === 3) {
-          mario.startWalkingLeft();
-        } else if (mario.currentSpeed === 6) {
-          mario.startWalkingLeft();
-        }
-      }
-    }
+    
+   
+   
 
-  });
+  
+    
+    
 
-  //touch events that enable animations
-  window.addEventListener("touchstart", (event) => {
-    event.preventDefault(); // prevent default browser action
-    if (event.touches[0].clientX > window.innerWidth / 2) {
-      // move right
-      if (currentSpeed === 0) { // if at rest, go to walking
-        mario.startWalking();
-      } else if (currentSpeed === 3) { // if walking, go to running
-        mario.startRunning();
-      }
-    } else {
-      // move left
-      mario.startPuffing();
-    }
-  });
 
-  //stop animation on window blur
-  window.addEventListener("blur", () => {
-    mario.stopAnimate();
-  });
+  
 
-  //start animation on window focus
-  window.addEventListener("focus", () => {
-     mario.startFlipping();
-  });
+    
 
-  //start animation on page load or page refresh
-  document.addEventListener("DOMContentLoaded", () => {
-    // adjust sprite size for high pixel density devices
-    const scale = window.devicePixelRatio;
-    const sprite = document.querySelector(".sprite");
-    sprite.style.transform = `scale(${0.2 * scale})`;
-    mario.startResting();
-  });
+  
+  
 
-  console.log(mario_metadata)
+  
+  <tr>
+  <td> 0 </td> 
+  <td>
+   <!-- make new column -->
+  </td>
+  <td>
+       <!-- remove delimiter -->
+    
+   <!-- make new column -->
+  </td>
+  <td>
+       <!-- remove delimiter -->
+    
+  
+      
+  </td>
+  </tr>
+  
 
-  var typed = new Typed(".auto-type", {
-        strings: ["Mihir", "a Coder", "a Gamer", "a Kopite"],
-        typeSpeed: 200,
-        backSpeed: 200,
-        loop: true
-   })
-</script>
+</table>
 
-<p align="center" style="color:white;">Hello! My name is Mihir Bapat. I am a Sophomore at Del Norte High School with heritage from India. The above picture is my Freeform picture. It covers the very things I find to be a part of myself. To start off, I am a massive sports fan. I like to watch and play Soccer and Cricket. I support Liverpool FC in Soccer, and the Mumbai Indians and team India in cricket. Finally, in my free time, I like to code, play the piano, and play Fortnite while listening to Spotify. </p>
 
 <br>
 
+
+
 <div align="center">
   <button id="factButton" style="background:red;">Get a Random Liverpool FC Fact</button>
 </div>
@@ -321,7 +157,9 @@ hide: true
 
 
 
-<a href="liverpool-fc/index.html" class="project-button">
-    <h2>Mini Project 1: Liverpool FC Blog</h2>
-    <p>This is my first mini project Liverpool blog!</p>
-</a>
\ No newline at end of file
+<br>
+<br>
+
+<div align="center">
+  <a href="liverpool-fc/index.html"><button>Go to Liverpool FC Blog</button></a>
+</div>
diff --git a/liverpool-fc/index.html b/liverpool-fc/index.html
index b0b2f9b..4f18180 100644
--- a/liverpool-fc/index.html
+++ b/liverpool-fc/index.html
@@ -22,7 +22,11 @@ <h1>Welcome to Liverpool FC</h1>
     <section>
         <h2>Welcome to Liverpool FC Fan Page</h2>
         <p>This is the home page. Navigate to the different sections using the menu above to explore the history, achievements, players, and contact details of Liverpool Football Club.</p>
-        <img src="images/lfc-logo.jpg" height="100px" width="100px">
+        <img src="images/lfc-logo.png" height="100px" width="100px">
+    </section>
+
+    <section>
+        <a href="/MihirCSP/"><button>Back to Home</button></a>
     </section>
 
     <footer>
diff --git a/navigation/about.md b/navigation/about.md
index a8d9863..021594f 100644
--- a/navigation/about.md
+++ b/navigation/about.md
@@ -1,7 +1,329 @@
 ---
-layout: page
+layout: base
 title: About
 permalink: /about/
+image: /images/mario_animation.png
 ---
 
-Creator of Student 2025
+<!-- Liquid:  statements -->
+
+<!-- Include submenu from _includes to top of pages -->
+<!--- Concatenation of site URL to frontmatter image  --->
+{% assign sprite_file = site.baseurl | append: page.image %}
+<!--- Has is a list variable containing mario metadata for sprite --->
+{% assign hash = site.data.mario_metadata %}  
+<!--- Size width/height of Sprit images --->
+{% assign pixels = 256 %} 
+
+<!--- HTML for page contains <p> tag named "Mario" and class properties for a "sprite"  -->
+
+<p id="mario" class="sprite"></p>
+  
+<!--- Embedded Cascading Style Sheet (CSS) rules, 
+        define how HTML elements look 
+--->
+<style>
+
+  /*CSS style rules for the id and class of the sprite...
+  */
+  .sprite {
+    height: {{pixels}}px;
+    width: {{pixels}}px;
+    background-image: url('{{sprite_file}}');
+    background-repeat: no-repeat;
+  }
+
+  /*background position of sprite element
+  */
+  #mario {
+    background-position: calc({{animations[0].col}} * {{pixels}} * -1px) calc({{animations[0].row}} * {{pixels}}* -1px);
+  }
+
+  <style>
+    .project-submenu {
+      margin: 20px 0;
+      padding: 15px;
+      background-color: #f8f9fa;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      text-align: center;
+      transition: background-color 0.3s, box-shadow 0.3s;
+    }
+
+    .project-button {
+      display: block;
+      text-decoration: none;
+      color: #333;
+    }
+
+    .project-button h2 {
+      margin: 0;
+      font-size: 24px;
+      color: #007bff;
+    }
+
+    .project-button p {
+      margin: 10px 0 0;
+      font-size: 16px;
+      color: #555;
+    }
+
+    .project-submenu:hover {
+      background-color: #e9ecef;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .project-submenu:hover .project-button h2 {
+      color: #0056b3;
+    }
+  </style>
+
+<h1 align="center">Hi, I'm <span class="auto-type"></span></h1>
+
+
+<br>
+
+<div align="center">
+<img align="center" style="border-radius: 4px; box-shadow: 0px 0px 30px #35bde7;" src="{{site.baseurl}}/images/Freeform.png" height="300px" alt="about"/>
+<br>
+<br>
+<em>My about me picture</em>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
+
+<script>
+    window.addEventListener("keydown", function(e) { if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) { e.preventDefault(); } }, false);
+  ////////// convert YML hash to javascript key:value objects /////////
+
+  var mario_metadata = {}; //key, value object
+  {% for key in hash %}   
+  
+  var key = "{{key | first}}"  //key
+  var values = {} //values object
+  values["row"] = {{key.row}}
+  values["col"] = {{key.col}}
+  values["frames"] = {{key.frames}}
+  mario_metadata[key] = values; //key with values added
+
+  {% endfor %}
+
+  ////////// game object for player /////////
+
+  class Mario {
+    constructor(meta_data) {
+      this.tID = null;  //capture setInterval() task ID
+      this.positionX = 0;  // current position of sprite in X direction
+      this.currentSpeed = 0;
+      this.marioElement = document.getElementById("mario"); //HTML element of sprite
+      this.pixels = {{pixels}}; //pixel offset of images in the sprite, set by liquid constant
+      this.interval = 100; //animation time interval
+      this.obj = meta_data;
+      this.marioElement.style.position = "absolute";
+    }
+
+    animate(obj, speed) {
+      let frame = 0;
+      const row = obj.row * this.pixels;
+      this.currentSpeed = speed;
+
+      this.tID = setInterval(() => {
+        const col = (frame + obj.col) * this.pixels;
+        this.marioElement.style.backgroundPosition = `-${col}px -${row}px`;
+        this.marioElement.style.left = `${this.positionX}px`;
+
+        this.positionX += speed;
+        frame = (frame + 1) % obj.frames;
+
+        const viewportWidth = window.innerWidth;
+        if (this.positionX > viewportWidth - this.pixels) {
+          document.documentElement.scrollLeft = this.positionX - viewportWidth + this.pixels;
+        }
+      }, this.interval);
+    }
+
+    startWalking() {
+      this.stopAnimate();
+      this.animate(this.obj["Walk"], 3);
+    }
+    startWalkingLeft() {
+      this.stopAnimate();
+      this.animate(this.obj["WalkL"], -3);
+    }
+
+    startRunningLeft() {
+      this.stopAnimate();
+      this.animate(this.obj["Run1L"], -6);
+    }
+
+    startRunning() {
+      this.stopAnimate();
+      this.animate(this.obj["Run1"], 6);
+    }
+
+    startPuffing() {
+      this.stopAnimate();
+      this.animate(this.obj["Puff"], 0);
+    }
+
+    startCheering() {
+      this.stopAnimate();
+      this.animate(this.obj["Cheer"], 0);
+    }
+
+    startFlipping() {
+      this.stopAnimate();
+      this.animate(this.obj["Flip"], 0);
+    }
+
+    startResting() {
+      this.stopAnimate();
+      this.animate(this.obj["Rest"], 0);
+    }
+
+    stopAnimate() {
+      clearInterval(this.tID);
+    }
+  }
+
+  const mario = new Mario(mario_metadata);
+
+  ////////// event control /////////
+
+  window.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowRight" || event.key === "d") {
+      event.preventDefault();
+      if (event.repeat) {
+        mario.startCheering();
+      } else {
+        if (mario.currentSpeed === 0) {
+          mario.startWalking();
+        } else if (mario.currentSpeed === 3) {
+          mario.startRunning();
+        }
+      }
+    } else if (event.key === "ArrowDown" || event.key === "s") {
+      event.preventDefault();
+      if (event.repeat) {
+        mario.stopAnimate();
+      } else {
+        mario.startPuffing();
+      }
+    } else if (event.key === "ArrowUp" || event.key === "w") {
+      event.preventDefault();
+      if (event.repeat) {
+          mario.stopAnimate();
+      } else {
+          mario.startFlipping();
+      }
+    } else if (event.key === "ArrowLeft" || event.key === "a") {
+      event.preventDefault();
+      if (event.repeat) {
+          mario.startCheering();
+      } else {
+          if (mario.currentSpeed === 0) {
+          mario.startWalkingLeft();
+        } else if (mario.currentSpeed === -3) {
+          mario.startRunningLeft();
+        } else if (mario.currentSpeed === 3) {
+          mario.startWalkingLeft();
+        } else if (mario.currentSpeed === 6) {
+          mario.startWalkingLeft();
+        }
+      }
+    }
+
+  });
+
+  //touch events that enable animations
+  window.addEventListener("touchstart", (event) => {
+    event.preventDefault(); // prevent default browser action
+    if (event.touches[0].clientX > window.innerWidth / 2) {
+      // move right
+      if (currentSpeed === 0) { // if at rest, go to walking
+        mario.startWalking();
+      } else if (currentSpeed === 3) { // if walking, go to running
+        mario.startRunning();
+      }
+    } else {
+      // move left
+      mario.startPuffing();
+    }
+  });
+
+  //stop animation on window blur
+  window.addEventListener("blur", () => {
+    mario.stopAnimate();
+  });
+
+  //start animation on window focus
+  window.addEventListener("focus", () => {
+     mario.startFlipping();
+  });
+
+  //start animation on page load or page refresh
+  document.addEventListener("DOMContentLoaded", () => {
+    // adjust sprite size for high pixel density devices
+    const scale = window.devicePixelRatio;
+    const sprite = document.querySelector(".sprite");
+    sprite.style.transform = `scale(${0.2 * scale})`;
+    mario.startResting();
+  });
+
+  console.log(mario_metadata)
+
+  var typed = new Typed(".auto-type", {
+        strings: ["Mihir", "a Coder", "a Gamer", "a Kopite"],
+        typeSpeed: 200,
+        backSpeed: 200,
+        loop: true
+   })
+</script>
+
+<p align="center" style="color:white;">Hello! My name is Mihir Bapat. I am a Sophomore at Del Norte High School with heritage from India. The above picture is my Freeform picture. It covers the very things I find to be a part of myself. To start off, I am a massive sports fan. I like to watch and play Soccer and Cricket. I support Liverpool FC in Soccer, and the Mumbai Indians and team India in cricket. Finally, in my free time, I like to code, play the piano, and play Fortnite while listening to Spotify. </p>
+
+<br>
+
+<div align="center">
+  <button id="factButton" style="background:red;">Get a Random Liverpool FC Fact</button>
+</div>
+
+
+<!-- Add an empty paragraph to display the fact -->
+<p id="factDisplay" align="center" style="color:white; font-weight:bold;"></p>
+
+<script>
+  // Array of random Liverpool FC facts
+  const liverpoolFacts = [
+    "Liverpool FC was founded in 1892 and is one of England’s most successful football clubs.",
+    "Anfield, Liverpool's home stadium, was originally the home of Everton FC.",
+    "Liverpool has won six European Cups, more than any other English team.",
+    "Bill Shankly, one of the most iconic managers in football history, led Liverpool from 1959 to 1974.",
+    "The famous 'You'll Never Walk Alone' anthem has been sung at Anfield since the early 1960s.",
+    "Liverpool's rivalry with Manchester United is one of the most intense in world football.",
+    "In 2020, Liverpool won their first Premier League title after a 30-year wait."
+  ];
+
+  // Function to get a random fact
+  function getRandomFact() {
+    const randomIndex = Math.floor(Math.random() * liverpoolFacts.length);
+    return liverpoolFacts[randomIndex];
+  }
+
+  // Event listener for the button
+  document.getElementById('factButton').addEventListener('click', () => {
+    const fact = getRandomFact();
+    console.log(fact)
+    document.getElementById('factDisplay').textContent = fact;
+  });
+</script>
+
+
+
+<br>
+<br>
+
+<div align="center">
+  <a href="liverpool-fc/index.html"><button>Go to Liverpool FC Blog</button></a>
+</div>
+