diff --git a/winsTest/wins-card-template.html b/winsTest/wins-card-template.html
new file mode 100644
index 0000000000..26b10016e4
--- /dev/null
+++ b/winsTest/wins-card-template.html
@@ -0,0 +1,34 @@
+<template id="wins-card-template">
+  <li class="project-card wins-card">
+    <div class="wins-card-top">
+      <img class="wins-card-profile-img" />
+      <div class="project-inner wins-card-top-right">
+        <div class="wins-card-title project-card-inner">
+          <span class="wins-card-name"> </span>
+          <span class="wins-card-icons">
+            <a target="_blank" class="wins-card-linkedin-icon"><img class="linkedin-icon" /></a>
+            <a target="_blank" class="wins-card-github-icon"><img class="github-icon" /></a>
+          </span>
+        </div>
+        <div class="project-inner wins-card-team"></div>
+        <div class="project-inner wins-card-role"></div>
+      </div>
+    </div>
+    <div class="wins-card-bottom">
+      <img class="wins-card-big-quote" />
+      <div class="project-inner wins-card-text">
+        <p class="wins-card-overview"></p>
+        <p class="wins-card-info"></p>
+        <div class="project-inner wins-see-more-div">
+          <span
+            id="0"
+            onclick="seeMore(id)"
+            expandable
+            class="see-more-div"
+            >...see more</span
+          >
+        </div>
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/winsTest/wins-filter-template.html b/winsTest/wins-filter-template.html
new file mode 100644
index 0000000000..573ff503ad
--- /dev/null
+++ b/winsTest/wins-filter-template.html
@@ -0,0 +1,18 @@
+<ul class="filter-list wins-filter" id="filter-list">
+  <li class="filter-item">
+    <a>Role<span class="labelArrow"> ∟ </span></a>
+    <ul class="dropdown" id="role-dropdown"></ul>
+  </li>
+  <li class="filter-item">
+    <a>Team<span class="labelArrow"> ∟ </span></a>
+    <ul class="dropdown" id="team-dropdown"></ul>
+  </li>
+</ul>
+<template id="wins-filter-template-repeat">
+  <li>
+    <div>
+      <input type="checkbox" class="filter-checkbox" />
+      <span id=""></span>
+    </div>
+  </li>
+</template>
diff --git a/winsTest/wins-hero.html b/winsTest/wins-hero.html
new file mode 100644
index 0000000000..c6243a2b37
--- /dev/null
+++ b/winsTest/wins-hero.html
@@ -0,0 +1,11 @@
+<div class='home-getting-started-container content-section section-hack-nights wins-hero'>
+    <img src="/assets/images/wins-page/wins-trophy.png" alt="image of a person being celebrated and holding a trophy">
+    <div>
+    <h1>Let's celebrate together!</h1>
+    <a href='https://docs.google.com/forms/d/e/1FAIpQLSdF0MgS-M_Soi77qTp-MNfxMGqq85yqsHwvfHDngHAMyDQ8uQ/viewform'><button class='btn btn-primary btn-xl btn--wins'>Share your wins</button></a>
+    <!-- <a href='/share-your-wins'><button class='btn btn-primary btn-xl btn--wins'>Share your wins</button></a> -->
+
+    
+    </div>
+</div>
+
diff --git a/winsTest/wins-overlay.html b/winsTest/wins-overlay.html
new file mode 100644
index 0000000000..e485ba6373
--- /dev/null
+++ b/winsTest/wins-overlay.html
@@ -0,0 +1,26 @@
+<div class="overlay" onclick="hideOverlay()">
+  <div id="overlay-project-card" class="modal-container">
+    <div class="top-buffer" onclick="hideOverlay()"></div>
+    <div class="project-card wins-card center-screen">
+      <div class="wins-card-top">
+        <img class="wins-card-profile-img" src="/assets/images/wins-page/avatar-default.svg">
+        <div class="wins-card-top-right">
+          <div class="wins-card-title project-card-inner">
+            <span id="overlay-name" class="wins-card-name">Blank</span>
+            <span id="overlay-icons" class="wins-card-icons"></span>
+          </div>
+          <div id="overlay-teams" class="project-inner wins-card-team">Team(s): Blank</div>
+          <div id="overlay-roles" class="project-inner wins-card-team">Role(s): Blank</div>
+        </div>
+      </div>
+      <div class="wins-card-bottom">
+        <img class="wins-card-big-quote" src="/assets/images/wins-page/quote-icon.svg">
+        <div class="project-inner overlay-card-text">
+          <p id="overlay-overview">Blank</p>
+          <p id="overlay-info" class="wins-card-info">Blank</p>
+        </div>
+      </div>
+    </div>
+    <div class="bottom-buffer" onclick="hideOverlay()"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/winsTest/wins-share-form.html b/winsTest/wins-share-form.html
new file mode 100644
index 0000000000..f1ebac5b03
--- /dev/null
+++ b/winsTest/wins-share-form.html
@@ -0,0 +1,550 @@
+---
+layout: null
+permalink: /share-your-wins/
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+      #professionalLinkForm {
+        display: none;
+      }
+      #teamsRolesForm {
+        display: none;
+      }
+      #celebrationsForm {
+        display: none;
+      }
+
+      #linkedinPhotoPermission {
+        display: none;
+      }
+      #githubPhotoPermission {
+        display: none;
+      }
+      .form-group {
+        margin-bottom: 1rem;
+      }
+      label {
+        display: inline-block;
+        margin-bottom: 0.5rem;
+      }
+      .form-control {
+        display: block;
+        width: 100%;
+        height: calc(1.5em + 0.75rem + 2px);
+        padding: 0.375rem 0.75rem;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #495057;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+      }
+      .container-fluid {
+        width: 100%;
+        padding-right: 30px;
+        padding-left: 30px;
+      }
+    </style>
+    <title>Share your wins with us!</title>
+  </head>
+
+  <body class="container-fluid">
+    <form id="nameEmailForm">
+      <div class="form-group">
+        <label for="fullName">Full name</label>
+        <input
+          type="text"
+          class="form-control"
+          id="fullName"
+          placeholder="Enter fullname"
+          required
+        />
+      </div>
+      <div class="form-group">
+        <label for="email">Email address</label>
+        <input
+          type="email"
+          class="form-control"
+          id="email"
+          placeholder="Enter email"
+          required
+        />
+      </div>
+
+      <button type="submit" id="nameEmailNextButton">Next</button>
+    </form>
+
+    <form id="professionalLinkForm">
+      <div class="form-group">
+        <label for="linkedinurl">LinkedIn URL(optional)</label>
+        <input
+          type="text"
+          class="form-control"
+          id="linkedinurl"
+          placeholder="Enter LinkedIn URL"
+          pattern="https:\/\/www\.linkedin\.com\/.+"
+          title="https://www.linkedin.com/in/<your-username>"
+        />
+      </div>
+
+      <div class="form-group" id="linkedinPhotoPermission">
+        <p>Can we use the photo in your linkedin profile picture?</p>
+        <input
+          type="radio"
+          name="linkedinPhotoPermission"
+          id="linkedInYes"
+          value="yes"
+          disabled
+        />
+        <label for="linkedInYes">Yes</label>
+
+        <input
+          type="radio"
+          name="linkedinPhotoPermission"
+          id="linkedInNo"
+          value="no"
+          disabled
+        />
+        <label for="linkedInNo">No</label>
+      </div>
+
+      <p>OR</p>
+
+      <div class="form-group">
+        <label for="githuburl">Github URL(optional)</label>
+        <input
+          type="text"
+          class="form-control"
+          id="githuburl"
+          placeholder="Enter GitHub URL"
+          pattern='https:\/\/www\.github\.com\/.+'
+          title="https://www.github.com/<your-username>"
+        />
+      </div>
+
+      <div class="form-group" id="githubPhotoPermission">
+        <p>Can we use the photo in your github profile picture?</p>
+        <input
+          type="radio"
+          name="githubPhotoPermission"
+          id="githubYes"
+          value="yes"
+          disabled
+        />
+        <label for="githubYes">Yes</label>
+
+        <input
+          type="radio"
+          name="githubPhotoPermission"
+          id="githubNo"
+          value="no"
+          disabled
+        />
+        <label for="githubNo">No</label>
+      </div>
+
+      <button type="submit" id="professionalLinkNextButton" disabled>
+        Next
+      </button>
+    </form>
+
+    <form id="teamsRolesForm">
+      <section id="teams">
+        <p>Select the team(s) you're on</p>
+        <template id="teamsCheckBoxTemplate">
+          <input type="checkbox" data-type="teams" />
+          <label></label><br />
+        </template>
+      </section>
+      <section id="roles">
+        <p>Select the role(s) you're on</p>
+        <template id="rolesCheckBoxTemplate">
+          <input type="checkbox" data-type="roles" />
+          <label> </label><br />
+        </template>
+      </section>
+      <div class="form-group">
+        <label for="specificRole">What is/was your specific role</label>
+        <input
+          type="text"
+          class="form-control"
+          id="specificRole"
+          placeholder="Your Role..."
+          required
+        />
+      </div>
+      <section id="joinDate">
+        <label for="joinDateInput">Join date</label>
+        <input
+          type="date"
+          id="joinDateInput"
+          name="join-date-input"
+          min="2018-01-01"
+        />
+      </section>
+
+      <button type="submit" id="teamsRolesNextButton">Next</button>
+    </form>
+
+    <form id="celebrationsForm">
+      <section id="wins">
+        <p>What do you want to celebrate (select all that apply)?</p>
+        <template id="winsCheckboxTemplate">
+          <input type="checkbox" data-type="wins" />
+          <label> </label><br />
+        </template>
+      </section>
+      <div class="form-group">
+        <label for="winsOverview">Give us a brief overview</label>
+        <textarea name="winsOverview" id="winsOverview" form="celebrationsForm">
+Enter text here...</textarea
+        >
+      </div>
+
+      <button id="submitButton" type="submit" class="btn btn-primary">
+        Submit
+      </button>
+    </form>
+  </body>
+  <script>
+    /**
+     * Resources:
+     *  1. The google sheet that is being populated: https://docs.google.com/spreadsheets/d/1zkr_dEyiT-WTksUkVyL4jYQuYC5_YvJCLrUIfBf1CeE/edit?usp=sharing
+     *  2. The github issue this is related to :[
+     *                                            "https://github.com/hackforla/website/issues/1060",
+     *                                            "https://github.com/hackforla/website/issues/1066"
+     *                                          ]
+     *
+     * TODOS:
+     *  1. Error checking things in try block statements
+     *  2. Redirect back to wins page on successfull forms submission
+     *  3. Look into liquid templating on how to get the current date to be set for max value for the DOM element #joinDateInput
+     *
+     */
+
+    //Create formObject with the nessecary keys as specified by the google sheet and store it in local storage
+    const formObj = {
+      time: "",
+      email: "",
+      name: "",
+      linkedin_url: "",
+      linkedin_permission: "",
+      github_url: "",
+      github_permission: "",
+      team: "",
+      role: "",
+      specific_role: "",
+      join_date: "",
+      win: "",
+      overview: "",
+    };
+    localStorage.setItem("form", JSON.stringify(formObj));
+
+    //Event listner that populates the teamsRoles form on page ready by calling the function populateTeamsRolesForm
+    document.addEventListener("DOMContentLoaded", populateTeamsRolesForm);
+    function populateTeamsRolesForm() {
+      //Checkbox items creations
+      const availableTeams = [
+        "311 Data",
+        "Civic Tech Index",
+        "Engage",
+        "Food Oasis",
+        "HackforLA Website",
+        "HelloGov",
+        "Home Unite Us",
+        "The LA TDM Calculator",
+        "Lucky Parking",
+        "New Schools Today",
+        "Not Today",
+        "Public Tree Map",
+        "Record Clearance Project",
+        "Undebate",
+        "VRMS",
+      ];
+      const availableRoles = [
+        "Buisness Analyst",
+        "Content",
+        "Data",
+        "Development",
+        "PM",
+        "Operations",
+        "QA",
+        "SEO/Marketing",
+        "UI/UX",
+      ];
+
+      //Grab checkbox templates from the DOM
+      const teamsCheckBoxTemplate = document.querySelector(
+        "#teamsCheckBoxTemplate"
+      );
+      const rolesCheckBoxTemplate = document.querySelector(
+        "#rolesCheckBoxTemplate"
+      );
+
+      //Create and append teams checkboxes
+      for (const team of availableTeams) {
+        let cloneteamsCheckBoxTemplate = teamsCheckBoxTemplate.content.cloneNode(
+          true
+        );
+        cloneteamsCheckBoxTemplate.querySelector("input").id = team.replaceAll(
+          " ",
+          ""
+        );
+        cloneteamsCheckBoxTemplate.querySelector(
+          "input"
+        ).name = team.replaceAll(" ", "");
+        cloneteamsCheckBoxTemplate.querySelector(
+          "label"
+        ).htmlFor = team.replaceAll(" ", "");
+        cloneteamsCheckBoxTemplate.querySelector("label").textContent = team;
+        cloneteamsCheckBoxTemplate.querySelector("input").value = team;
+        document.querySelector("#teams").append(cloneteamsCheckBoxTemplate);
+      }
+
+      //Create and append roles checkboxes
+      for (const role of availableRoles) {
+        let clonerolesCheckBoxTemplate = rolesCheckBoxTemplate.content.cloneNode(
+          true
+        );
+        clonerolesCheckBoxTemplate.querySelector("input").id = role.replaceAll(
+          " ",
+          ""
+        );
+        clonerolesCheckBoxTemplate.querySelector(
+          "input"
+        ).name = role.replaceAll(" ", "");
+        clonerolesCheckBoxTemplate.querySelector(
+          "label"
+        ).htmlFor = role.replaceAll(" ", "");
+        clonerolesCheckBoxTemplate.querySelector("label").textContent = role;
+        clonerolesCheckBoxTemplate.querySelector("input").value = role;
+        document.querySelector("#roles").append(clonerolesCheckBoxTemplate);
+      }
+    }
+
+    //Event listner that populates the wins/celebration form on page ready by calling the function populateCelebrationsForm
+    document.addEventListener("DOMContentLoaded", populateCelebrationsForm);
+    function populateCelebrationsForm() {
+      //celebrations/wins array creation
+      const celebrations = [
+        "I got a new job",
+        "I produced something for my portfolio",
+        "I improved my Linkedin",
+        "I learned how to work better on a team",
+        "I increased the number of commits on my github profile",
+        "I learned a new language",
+        "I became proficient at GitHub",
+        "I setup 2FA",
+        "I worked on an enterprise project",
+        "I migrated google forms to personalized forms",
+        "I worked on a project that will help the people of Los Angeles",
+        "I worked on two or more projects",
+        "I taught or mentored a person on my team",
+        "I taught or mentored a person on another team",
+        "My team delievered software to a stakeholder",
+        "My team launched our MVP",
+      ];
+
+      //Grab celebrations/wins checkbox template from the DOM
+      const winsCheckBoxTemplate = document.querySelector(
+        "#winsCheckboxTemplate"
+      );
+
+      //Create and append celebreations/wins checkbox template
+      for (const celebration of celebrations) {
+        let cloneWinsCheckBoxTemplate = winsCheckBoxTemplate.content.cloneNode(
+          true
+        );
+        cloneWinsCheckBoxTemplate.querySelector(
+          "input"
+        ).id = celebration.replaceAll(" ", "");
+        cloneWinsCheckBoxTemplate.querySelector(
+          "input"
+        ).name = celebration.replaceAll(" ", "");
+        cloneWinsCheckBoxTemplate.querySelector(
+          "label"
+        ).htmlFor = celebration.replaceAll(" ", "");
+        cloneWinsCheckBoxTemplate.querySelector(
+          "label"
+        ).textContent = celebration;
+        cloneWinsCheckBoxTemplate.querySelector("input").value = celebration;
+        document.querySelector("#wins").append(cloneWinsCheckBoxTemplate);
+      }
+    }
+
+    //1st Form -> On next hide 1st form show 2nd form
+    document
+      .querySelector("#nameEmailForm")
+      .addEventListener("submit", function (e) {
+        e.preventDefault();
+
+        form = JSON.parse(localStorage.getItem("form"));
+        form.name = this.fullName.value;
+        form.email = this.email.value;
+        localStorage.setItem("form", JSON.stringify(form));
+
+        this.style.display = "none";
+        document.querySelector("#professionalLinkForm").style.display = "block";
+      });
+
+    //2nd Form -> On next hide 2nd form show 3rd form
+    document
+      .querySelector("#professionalLinkForm")
+      .addEventListener("submit", function (e) {
+        e.preventDefault();
+
+        const form = JSON.parse(localStorage.getItem("form"));
+        form.linkedin_url = this.linkedinurl.value || "";
+        form.linkedin_permission = this.linkedinPhotoPermission.value || "";
+        form.github_url = this.githuburl.value || "";
+        form.github_permission = this.githubPhotoPermission.value || "";
+        localStorage.setItem("form", JSON.stringify(form));
+
+        this.style.display = "none";
+        document.querySelector("#teamsRolesForm").style.display = "block";
+      });
+
+    //3rd Form -> On next hide 3rd form show 4th form
+    document
+      .querySelector("#teamsRolesForm")
+      .addEventListener("submit", function (e) {
+        e.preventDefault();
+
+        //creates a static NodeList of all the teams checkboxes that are checked
+        const teams = document.querySelectorAll(
+          'input[data-type="teams"]:checked'
+        );
+        let teamsArray = [];
+        teams.forEach((team) => {
+          teamsArray.push(team.value);
+        });
+
+        //creates a static NodeList of all the roles checkboxes that are checked
+        const roles = document.querySelectorAll(
+          'input[data-type="roles"]:checked'
+        );
+        let rolesArray = [];
+        roles.forEach((role) => {
+          rolesArray.push(role.value);
+        });
+
+        const form = JSON.parse(localStorage.getItem("form"));
+        form.team = teamsArray;
+        form.role = rolesArray;
+        form.specific_role = document.querySelector("#specificRole").value;
+        form.join_date = Date.parse(
+          document.querySelector("#joinDateInput").value
+        );
+        localStorage.setItem("form", JSON.stringify(form));
+
+        this.style.display = "none";
+        document.querySelector("#celebrationsForm").style.display = "block";
+      });
+
+    //4th form -> On submit calls submitFormToGoogleSheets()
+    document
+      .querySelector("#celebrationsForm")
+      .addEventListener("submit", function (e) {
+        e.preventDefault();
+
+        //creates a static NodeList of all the wins checkboxes that are checked
+        const wins = document.querySelectorAll(
+          'input[data-type="wins"]:checked'
+        );
+        const winsArray = [];
+        wins.forEach((win) => {
+          winsArray.push(win.value);
+        });
+
+        const form = JSON.parse(localStorage.getItem("form"));
+        form.win = winsArray;
+        form.overview = document.querySelector("#winsOverview").value;
+        localStorage.setItem("form", JSON.stringify(form));
+
+        submitFormToGoogleSheets();
+      });
+
+    //linked in photo permission
+    document
+      .querySelector("#linkedinurl")
+      .addEventListener("input", function (e) {
+        //If it is a valid linkedin url
+        const str = e.target.value;
+        if (str.match(/https:\/\/www\.linkedin\.com\/.+/g).length >0) {
+          //display the linkedIn photo permission question
+          document.querySelector("#linkedinPhotoPermission").style.display =
+            "block";
+
+          //default photo usage to yes
+          document.querySelector("#linkedInYes").checked = true;
+
+          //enable the linnkedin photo permissions input
+          document.querySelector("#linkedInYes").disabled = false;
+          document.querySelector("#linkedInNo").disabled = false;
+
+          //enable the next button
+          document.querySelector(
+            "#professionalLinkNextButton"
+          ).disabled = false;
+        }
+      });
+
+    //github photo permission
+    document
+      .querySelector("#githuburl")
+      .addEventListener("input", function (e) {
+        //If it is a valid linkedin url
+        const str = e.target.value;
+        if (str.match(/https:\/\/www\.github\.com\/.+/g).length >0) {
+          //display the github photo permission question
+          document.querySelector("#githubPhotoPermission").style.display =
+            "block";
+
+          //default photo usage to yes
+          document.querySelector("#githubYes").checked = true;
+
+          //enable the linnkedin photo permissions input
+          document.querySelector("#githubYes").disabled = false;
+          document.querySelector("#githubNo").disabled = false;
+
+          //enable the next button
+          document.querySelector(
+            "#professionalLinkNextButton"
+          ).disabled = false;
+        }
+      });
+
+    //Finalize form data and submit to google
+    function submitFormToGoogleSheets() {
+      //The google app script url to call to populate the google sheets
+      const googleFormUri =
+        "https://script.google.com/macros/s/AKfycbza-c14TyNZ1l8SIzOOZJZH7KYyhIT_4WXUlPYHB_DFsyYto742YelpHA/exec";
+
+      const form = JSON.parse(localStorage.getItem("form"));
+      form.time = new Date().getTime();
+      let queryString = Object.keys(form)
+        .map((key) => key + "=" + form[key])
+        .join("&")
+        .replaceAll(" ", "+");
+
+      fetch(`${googleFormUri}?${queryString}`)
+        .then((response) => {
+          response.json().then((data) => {
+            console.log(data);
+            alert(
+              `This is submission success debug alert that you can comment out: ${JSON.stringify(
+                data
+              )}`
+            );
+          });
+        })
+        .catch((error) => console.error("Error!", error.message));
+    }
+  </script>
+</html>
diff --git a/winsTest/wins.html b/winsTest/wins.html
new file mode 100644
index 0000000000..f4aed00b36
--- /dev/null
+++ b/winsTest/wins.html
@@ -0,0 +1,427 @@
+---
+layout: default
+title: Wins
+permalink: /wins-test/
+
+---
+
+{%- include_relative wins-hero.html -%}
+{% include_relative wins-overlay.html %}
+<a class="anchor" id="projects"></a>
+<section class="content-section projects">
+	<div   class="wins-page-contain projects-inner" >
+
+		{% include_relative wins-filter-template.html %}
+		{% include_relative wins-card-template.html %}
+
+		<ul id="responses" class="project-list unstyled-list"></ul>
+	</div>
+</section>
+
+<script>
+
+  //assigning the google form questions to variables for readability
+  //these variables correspond with a question on the google form
+  //these variables can be used as a key to access the data
+  const time = "Timestamp"
+  const email = "Email Address"
+  const name = "Full name"
+  const linkedin_url = "Linkedin URL (optional)"
+  const linkedin_permission = "Could we use your Linkedin profile picture next to your story?"
+  const github_url = "Github URL (optional)"
+  const github_permission = "Could we use your Github profile picture next to your story?"
+  const team = "Select the team(s) you're on"
+  const role = "Select your role(s) on the team"
+  const specific_role = "What is/was your specific role? (optional)"
+  const join_date = "When did you join Hack for LA? (optional)"
+  const win = "What do you want to celebrate (select all that apply)?"
+  const overview = "Give us a brief overview"
+  const display = "Display?"
+
+
+
+  function main() {
+  	{% assign localData = site.data.wins-data | jsonify %}
+  	let localData = {{ localData }};
+  	const rawData = localData.values;
+  	//creates an array of objects where each question is the key and the answer is the value
+  	//cardData[index][question_str] = answer_str
+  	let cardData = []
+  	const keys = rawData[0]
+  	rawData.slice(1).forEach((data) => {
+  		let cardObj = {}
+  		for (let i = 0; i < keys.length; i++) {
+  			cardObj[keys[i]] = data[i];
+  		}
+  		cardData.push(cardObj)
+
+
+
+  	})
+
+  	//createFilter();
+  	window.localStorage.setItem('data', JSON.stringify(cardData));
+  	makeCards(cardData);
+  	ifPageEmpty();
+
+
+
+  }
+
+  //Create The Filters From The Displayed Cards On Page Load
+  document.addEventListener("DOMContentLoaded", createFilter);
+  function createFilter(){
+
+  	const roleArr = [];
+  	const teamArr = [];
+  	const responses = document.querySelector("#responses");
+  	responses.querySelectorAll('.wins-card-team:not([style*="display:none"]):not([style*="display: none"]').forEach(item =>{
+  		let value = item.textContent.replace("Team(s):","").trim();
+  		let team = value.split(",").map(x=>x.trim());
+
+  		Array.isArray(team) ? teamArr.push(...team)  :  teamArr.push(team);
+
+  	})
+  	responses.querySelectorAll('.wins-card-role:not([style*="display:none"]):not([style*="display: none"]').forEach(item =>{
+  		let value = item.textContent.replace("Role(s):","").trim();
+  		let role = value.split(",").map(x=>x.trim());
+  		Array.isArray(role) ? roleArr.push(...role)  :  roleArr.push(role);
+
+
+  	})
+
+
+  	//Create dropdown key,values where the keys are name of the drops downs and the values are the number of occurences of each key
+  	const roleHash =  Object.fromEntries([ ...roleArr.reduce((map, key) => map.set(key, (map.get(key) || 0) + 1), new Map()) ]);
+  	const teamHash =  Object.fromEntries([ ...teamArr.reduce((map, key) => map.set(key, (map.get(key) || 0) + 1), new Map()) ]);
+
+
+	const filterTemplate = document.getElementById("wins-filter-template-repeat");
+  	const roleDropwDown =  document.getElementById("role-dropdown");
+  	const teamDropDown = document.getElementById("team-dropdown");
+
+
+  	for(const [key,value] of Object.entries(roleHash) ){
+  		let cloneFilterTemplate = filterTemplate.content.firstElementChild.cloneNode(true);
+  		cloneFilterTemplate.querySelector("span").textContent = `${key}`;
+  		cloneFilterTemplate.querySelector("span").id=`role_${key.replace(/\s+/g, '')}`
+  		cloneFilterTemplate.querySelector("input").value = `role_${key}`;
+  		cloneFilterTemplate.querySelector("input").addEventListener("click",checkboxClickHandler)
+  		roleDropwDown.append(cloneFilterTemplate);
+
+  	}
+  	for(const [key,value] of Object.entries(teamHash) ){
+  		let cloneFilterTemplate = filterTemplate.content.firstElementChild.cloneNode(true);
+  		cloneFilterTemplate.querySelector("span").textContent = `${key}`;
+  		cloneFilterTemplate.querySelector("span").id=`team_${key.replace(/\s+/g, '')}`
+  		cloneFilterTemplate.querySelector("input").value = `team_${key}`;
+  		cloneFilterTemplate.querySelector("input").addEventListener("click",checkboxClickHandler)
+  		teamDropDown.append(cloneFilterTemplate);
+
+  	}
+
+  }
+
+  //Update History State / URL on checkbox click
+  function checkboxClickHandler(event){
+
+  	let incomingFilterData = document.querySelectorAll("input");
+  	let queryObj = { };
+
+  	//Calculate and Create Updated Query String
+  	incomingFilterData.forEach(function(e){
+  		//Find boxes that are checked
+  		if(e.checked){
+  			let data = e.value.split("_");
+
+  			if(data[0] == 'role'){
+
+  				if(data[0] in queryObj){
+  					queryObj[data[0]].push(data[1].trim());
+  				}
+  				else{
+  					queryObj[data[0]] = [];
+  					queryObj[data[0]].push(data[1].trim());
+  				}
+
+  			}
+  			if(data[0]=='team'){
+  				if(data[0] in queryObj){
+  					queryObj[data[0]].push(data[1].trim());
+  				}
+  				else{
+  					queryObj[data[0]] = [];
+  					queryObj[data[0]].push(data[1].trim());
+  				}
+
+  			}
+  		}
+  	})
+  	let questionSymbol = '?';
+  	let queryString = Object.keys(queryObj).map(key => key + '=' + queryObj[key]).join('&').replaceAll(" ","+");
+  	let urlParameter = `${questionSymbol}${queryString}`;
+
+  	//Update URL parameters
+  	window.history.replaceState(null, '', urlParameter.replaceAll(" ","+"));
+
+
+
+
+  }
+
+  //Update UI on URL history change and on DomContent loaded
+  window.addEventListener('DOMContentLoaded',updateUI)
+  window.addEventListener('locationchange',updateUI)
+  function updateUI(){
+  	const filterParams = Object.fromEntries(new URLSearchParams(window.location.search));
+  	const winsCards = document.querySelectorAll("#responses > .wins-card");
+  	const checkboxes = document.querySelectorAll("input");
+
+  	//If there are no entries in URL display all Cards
+  	if(Object.keys(filterParams).length === 0){
+  		winsCards.forEach(card=>{card.style.display='flex';})
+  		return;
+  	}
+
+  	//Ensure that checkboxes are marked according to the url query
+  	checkboxes.forEach(checkbox =>{
+  		let checkboxData = checkbox.value;
+  		let checkboxType  = checkboxData.split("_")[0];
+  		let checkboxValue = checkboxData.split('_')[1];
+  		if(checkboxType in filterParams){
+  			let args = filterParams[checkboxType].split(',');
+  			args.includes(checkboxValue) ? checkbox.checked = true : checkbox.checked = false;
+  	}
+  	})
+
+
+  	//Card Display/Hide Logic
+  	winsCards.forEach(card=>{
+  		let teamsInCard = (card.querySelector('.wins-card-team').textContent.replace("Team(s):","")).trim();
+  			teamsInCard = teamsInCard.split(",").map(x=>x.trim());
+  		let rolesInCard = (card.querySelector('.wins-card-role').textContent.replace("Role(s):","")).trim();
+  			rolesInCard = rolesInCard.split(",").map(x=>x.trim());
+  		let cardUnion = [...rolesInCard,...teamsInCard];
+
+
+  		if(('role' in filterParams) && ('team' in filterParams)){
+  			let roleInURL = filterParams.role.split(',');
+  			let teamInURL = filterParams.team.split(',');
+  			let roleIntersection = rolesInCard.filter(x => roleInURL.includes(x));
+  			let teamIntersection = teamsInCard.filter(x => teamInURL.includes(x));
+  			((roleIntersection.length == 0)  || (teamIntersection.length == 0)) ? card.style.display='none' : card.style.display='flex'
+  		}
+  		else if('role' in filterParams){
+  			let roleInURL = filterParams.role.split(',');
+  			let roleIntersection = rolesInCard.filter(x => roleInURL.includes(x));
+  			roleIntersection.length == 0 ? card.style.display='none' : card.style.display='flex';
+  		}
+  		else if('team' in filterParams){
+  			let teamInURL = filterParams.team.split(',');
+  			let teamIntersection = teamsInCard.filter(x => teamInURL.includes(x));
+  			teamIntersection.length == 0 ? card.style.display='none' : card.style.display='flex';
+
+  		}
+
+
+  	})
+
+  }
+
+  function formatMessage(win) {
+  	let str = '';
+  	let lastCommaIndex = win.lastIndexOf(",");
+  	if (lastCommaIndex != -1) {
+  		str += win.slice(0, lastCommaIndex + 1) + " and" + win.slice(lastCommaIndex + 1) + '!';
+  	} else {
+  		str += win + '!';
+  	}
+  	return str;
+  }
+
+  function ifPageEmpty() {
+  	if (document.querySelectorAll('.wins-card').length == 0) {
+  		const page = document.querySelector('.wins-page-contain');
+  		const p = document.createElement('p');
+  		page.appendChild(p);
+  		p.innerHTML = "No one has shared a win yet...be the first!";
+  	}
+  }
+
+
+
+
+
+  function makeCards(data) {
+  	{% assign githubData = site.data.github-data | jsonify %}
+  	let githubData = {{ githubData }};
+
+	const cards = data.reverse();
+	const cardTemplate = document.getElementById("wins-card-template");
+	const QUOTE_ICON_PATH = '/assets/images/wins-page/quote-icon.svg'
+	const AVATAR_DEFAULT_PATH = "/assets/images/wins-page/avatar-default.svg"
+	const GITHUB_ICON = '/assets/images/wins-page/icon-github-small.svg';
+	const LINKEDIN_ICON = '/assets/images/wins-page/icon-linkedin-small.svg'
+	const winsCardContainer  = document.querySelector('#responses');
+
+	cards.forEach((card, index) => {
+		if (card[display] != "TRUE") return;
+		let cloneCardTemplate = cardTemplate.content.firstElementChild.cloneNode(true);
+		let ghId;
+		if(card[github_url] && card[github_permission] === "Yes"){
+			githubData.slice(1).map(item=>{
+				item.contributorsComplete.data.map(contributors=>{
+					if(contributors.github_url == card[github_url]){
+						ghId = contributors.id;
+					}
+				})
+
+			})
+
+		} 
+		let profileImgSrc = ghId ?
+			`https://avatars1.githubusercontent.com/u/${ghId}?v=4` :
+			AVATAR_DEFAULT_PATH;
+		
+		cloneCardTemplate.querySelector('.wins-card-profile-img').src = profileImgSrc;
+
+		cloneCardTemplate.querySelector('.wins-card-big-quote').src = QUOTE_ICON_PATH;
+		cloneCardTemplate.querySelector('.wins-card-name').textContent = card[name];
+	
+		if (card[linkedin_url].length > 0) {
+			cloneCardTemplate.querySelector('.wins-card-linkedin-icon').href = card[linkedin_url];
+			cloneCardTemplate.querySelector('.linkedin-icon').src = LINKEDIN_ICON ;
+		} else {
+			cloneCardTemplate.querySelector('.wins-card-linkedin-icon').setAttribute('hidden', 'true')
+		};
+
+		if (card[github_url].length > 0){
+			cloneCardTemplate.querySelector('.wins-card-github-icon').href = card[github_url];
+			cloneCardTemplate.querySelector('.github-icon').src = GITHUB_ICON ;
+		} else {
+			cloneCardTemplate.querySelector('.wins-card-github-icon').setAttribute('hidden', 'true')
+		}
+
+		cloneCardTemplate.querySelector('.project-inner.wins-card-team').textContent = `Team(s): ${card[team]}`;
+		cloneCardTemplate.querySelector('.project-inner.wins-card-role').textContent = `Role(s): ${card[role]}`;
+
+		cloneCardTemplate.querySelector('.wins-card-overview').textContent = card[overview];
+		cloneCardTemplate.querySelector('.wins-card-info').textContent = card[win];
+		cloneCardTemplate.querySelector('span.see-more-div').id = index;
+
+		
+		winsCardContainer.append(cloneCardTemplate);
+		
+		const winText = cloneCardTemplate.querySelector('.wins-card-text')
+		function addSeeMore() {
+			let innerHeight = Array.from(winText.childNodes).reduce((acc, el) => (el.offsetHeight || 0) + acc, 0) - 22
+
+			//makes the see more span on the bottom of the card
+			if (innerHeight <= winText.offsetHeight) { //checks if see more is needed.
+				winText.querySelector('.wins-see-more-div').setAttribute('hidden', 'true')
+			} else {
+				winText.querySelector('.wins-see-more-div').removeAttribute('hidden')
+			}
+		}
+		addSeeMore()
+
+		new ResizeObserver(addSeeMore).observe(winText)
+	})
+
+
+  }
+  function seeMore(id){
+  	screenWidth = window.innerWidth;
+  	if (screenWidth > 960){
+  		updateOverlay(id);
+  	}else{
+  		mobileSeeMore(id);
+  	}
+  }
+  function mobileSeeMore(id){
+  	let span = document.getElementById(id);
+  	let parent = span.parentElement.parentElement
+  	parent.classList.toggle('expanded')
+  	if (parent.classList.contains('expanded')) {
+  		span.innerHTML = "see less"
+  	}
+  	else {
+  		span.innerHTML = "...see more"
+  	}
+  }
+  // need to delete makeElement and makeIcon
+  function makeElement(elementType, parent, className) {
+		let child = document.createElement(elementType);
+		child.classList.add(className);
+		parent.appendChild(child);
+		return child;
+	}
+  function makeIcon(href, parent, className, src) {
+		let icon = makeElement('a', parent, 'wins-card-icon');
+		icon.setAttribute("href", href);
+		let iconImg = makeElement('img', icon, className);
+		iconImg.setAttribute("src", src);
+	}
+  function updateOverlay(i) {
+  		let stringData = window.localStorage.getItem("data");
+  		let data = JSON.parse(stringData).reverse();
+
+  		const overlayIcons = document.querySelector('#overlay-icons');
+  		overlayIcons.innerHTML = "";
+
+  		if (data[i][linkedin_url].length > 0) {
+  			makeIcon(data[i][linkedin_url], overlayIcons, 'linkedin-icon', '/assets/images/wins-page/icon-linkedin-small.svg');
+  		} if (data[i][github_url].length > 0) {
+  			makeIcon(data[i][github_url], overlayIcons, 'github-icon', '/assets/images/wins-page/icon-github-small.svg');
+  		}
+
+  		const overlayName = document.querySelector('#overlay-name');
+  		overlayName.innerHTML = data[i][name];
+
+  		const overlayTeams = document.querySelector('#overlay-teams');
+  		overlayTeams.innerHTML = `Team(s): ${data[i][team]}`;
+
+  		const overlayRoles = document.querySelector('#overlay-roles');
+  		overlayRoles.innerHTML = `Role(s): ${data[i][role]}`;
+
+  		const overlayOverview = document.querySelector('#overlay-overview');
+  		overlayOverview.innerHTML = data[i][overview];
+
+  		const overlayInfo = document.querySelector('#overlay-info');
+  		overlayInfo.innerHTML = formatMessage(data[i][win]);
+
+  		const overlayProjectCard = document.querySelector('#overlay-project-card');
+  		overlayProjectCard.parentNode.classList.add("display-initial");
+  	}
+  function hideOverlay(e) {
+  	e = e || window.event;
+  	if (e.target !== e.currentTarget)
+  		return;
+
+  	const overlayProjectCard = document.querySelector('#overlay-project-card');
+  	overlayProjectCard.parentNode.classList.remove("display-initial");
+  }
+
+  main();
+
+
+
+
+  history.pushState = ( f => function pushState(){
+     var ret = f.apply(this, arguments);
+     window.dispatchEvent(new Event('pushstate'));
+     window.dispatchEvent(new Event('locationchange'));
+     return ret;
+  })(history.pushState);
+
+  history.replaceState = ( f => function replaceState(){
+  	var ret = f.apply(this, arguments);
+  	window.dispatchEvent(new Event('replacestate'));
+  	window.dispatchEvent(new Event('locationchange'));
+  	return ret;
+  })(history.replaceState);
+
+  window.addEventListener('popstate',()=>{
+  	window.dispatchEvent(new Event('locationchange'))
+  });
+</script>