feat: add class list and cs169a notes

public/assets/css/itemList.css

@@ -0,0 +1,40 @@
+.itemListContainer{
+    display:flex;
+    gap:40px;
+    flex-wrap:wrap;
+    justify-content:center;
+}
+.listItemContents{
+    position:relative;
+    display:flex;
+    flex-direction:column;
+    justify-content: space-between;
+    padding:30px;
+    gap:30px;
+    background:black;
+    border-radius:15px;
+    max-width:700px;
+    margin:3px;
+}
+.clickable{
+    cursor: pointer;
+}
+
+.pillBox{
+    display:flex;
+    flex-direction:row;
+    gap:15px;
+}
+.pill{
+    padding:5px 8px;
+    color:var(--tertiary-pink);
+    background-color: rgba(211, 112, 219, 0.15);
+    border-radius:10px;
+}
+
+@media screen and (max-width:700px){
+    .listItem{
+        padding:20px;
+        height: fit-content !important;
+    }
+}

public/assets/css/master.css

@@ -17,6 +17,7 @@ html{
 html, body{
     margin:0;
     padding:0;
+    min-height: 100vh;
     overflow-x:hidden;
     -ms-overflow-style:none;
     scrollbar-width:none;
@@ -56,9 +57,6 @@ p{
 section:not(:first-of-type){
     margin:100px 0 100px;
 }
-section:first-child{
-    background-color:red;
-}
 
 button{
     width:188px;
@@ -100,50 +98,22 @@ button{
 }
 
 @keyframes loader {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-} 
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
 
 body{
+    position: relative;
     background-color: black;
 }
 
-/* .blur{
-    position:absolute;
-    z-index: -1;
-}
-.blur > img{
-    width:100%;
-}
-
-#blur1{
-    width: 60vw;
-    top:50%;
-    left:5%;
-    opacity:60%;
-}
-#blur2{
-    top:4;
-    width: 60vw;
-    opacity:40%;
-    right:0vw;
-}
-#blur3{
-    top:400%;
-    width: 100vw;
-    left:-20vw;
-}
-#blur4{
-    top:700%;
-} */
-
 header{
     background-color:black;
-    width:100%;
+    width:100vw;
     height:90px;
     position:fixed;
     top:0;
@@ -169,19 +139,20 @@ header{
     margin-top:10px;
 }
 
-.rainbowHover{
+/* This is enabled only for webkit, so disabling it until fully featured.*/
+/* .rainbowHover{
     background:var(--gradient-3);
     background-clip:text;
     -webkit-background-clip:text;
-}
+} */
 .navItem > a{
     color:white;
     font-family: var(--copy-font);
     text-decoration:none;
     font-size:20px;
 }
 .navItem a:hover{
-    color:transparent;
+    color:var(--accent);
 }
 .hamburger{
     display:none; 
@@ -226,7 +197,9 @@ footer{
     position:absolute;
     bottom:0;
     z-index:1;
+    background-color: black;
 }
+
 .socialIcons{
     display:flex;
     flex-direction:row;
@@ -300,4 +273,15 @@ footer{
     .socialIcons{
         width:auto;
     }
+}
+
+@media screen and (max-width:700px){
+    .rainbowBorder{
+        width:100%;
+        margin:0;
+    }
+    .portfolioItem{
+        padding:20px;
+        height: fit-content !important;
+    }
 }

public/assets/js/index.js

@@ -59,6 +59,7 @@ function __initHamburger__(){
 // });
 __initHamburger__();
 
+
 addEventListener("load", () => {
     document.querySelector("#loaderPage").style.display = "none";
     document.querySelector("header").style.position = "fixed";

public/assets/js/portfolio.js

@@ -1,6 +1,6 @@
 /**
  * Populates the Portfolio items with content.
- * @param {JSON Array} portfolioData 
+ * @param {Array<Object>} portfolioData
  */
 function populatePortfolio(portfolioData){
     const portfolioItemInjectPoint = document.querySelector("#portfolioItems");

public/classes/assets/js/classListPopulator.js

@@ -0,0 +1,50 @@
+/**
+ * Populates the class list.
+ * @param {Array<Object>} classListData the json decoded class list data.
+ */
+function populateClassList(classListData) {
+    const classList = document.getElementById('classList');
+    classListData.forEach(classData => {
+        classList.appendChild(getClassListItem(classData));
+    });
+}
+
+/**
+ * Gets a new class item instance.
+ * @param {Object} classInfo the class information.
+ * @return {DocumentFragment} the class list item to be rendered.
+ */
+function getClassListItem(classInfo) {
+    const classItem = document.querySelector('[listItemTemplate].classes')
+        .content
+        .cloneNode(true)
+        .children[0];
+    classItem.querySelector('.itemTitle').textContent = classInfo.name;
+    classItem.querySelector('.itemBody').textContent = `${classInfo.class}: ${classInfo.description}`;
+    const pillBox = classItem.querySelector('.pillBox');
+    classInfo.tags.forEach(tag => {
+        pillBox.appendChild(getPill(classItem, tag));
+    });
+    classItem.addEventListener('click', () => {
+        window.location = `./${classInfo.name}`;
+    })
+    return classItem;
+}
+
+/**
+ * Gets a new pill instance.
+ * @param {DocumentFragment} parent the parent node that defines the pill template.
+ * @param {string} pillValue value of the pill.
+ * @return {DocumentFragment} the pill to be rendered.
+ */
+function getPill(parent, pillValue) {
+    const pill = parent.querySelector('[PillTemplate]').content.cloneNode(true).children[0];
+    pill.textContent = pillValue;
+    return pill;
+}
+
+fetch("./assets/json/classes.json").then(res => {
+    res.json().then(classListData => {
+        populateClassList(classListData);
+    });
+});

public/classes/assets/json/classes.json

@@ -0,0 +1,8 @@
+[
+    {
+        "class": "Introduction to Software Engineering",
+        "name": "cs169a",
+        "description": "Ideas and techniques for designing, developing, and modifying large software systems.",
+        "tags": ["ruby", "agile", "saas"]
+    }
+]

public/classes/cs169a/assets/js/classOptionListPopulator.js

@@ -0,0 +1,62 @@
+/**
+ * Populates the list.
+ * @param {string} listName the name of the list being populated.
+ * @param {Array<Object>} listData the json decoded list data.
+ * @param {function} itemPopulator a function that populates the blank item instance.
+ */
+function populateList(listName, listData, itemPopulator) {
+    const listRef = document.getElementById(`${listName}List`);
+    listData.forEach(listItemData => {
+        listRef.appendChild(getListItem(listName, listItemData, itemPopulator));
+    });
+}
+
+/**
+ * Gets a new list item instance.
+ * @param {string} listName the name of the list being populated.
+ * @param {Object} itemData the item's information.
+ * @param {function} populate a function that populates the blank item instance.
+ * @return {Element} the class list item to be rendered.
+ */
+function getListItem(listName, itemData, populate=()=>{}) {
+    const itemInstance = document.querySelector(`[listItemTemplate].${listName}`)
+        .content
+        .cloneNode(true)
+        .children[0];
+    const pillBox = itemInstance.querySelector('.pillBox');
+    itemData.tags?.forEach(tag => {
+        pillBox.appendChild(getPill(itemInstance, tag));
+    });
+    if (itemData.title) {
+        itemInstance.querySelector('.itemTitle').textContent = itemData.title;
+    }
+    if (itemData.body) {
+        itemInstance.querySelector('.itemBody').textContent = itemData.body;
+    }
+    if (itemData.ref) {
+        itemInstance.classList.add('clickable');
+        itemInstance.addEventListener('click', () => {
+            window.location = itemData.ref;
+        });
+    }
+    populate(itemInstance, itemData);
+    return itemInstance;
+}
+
+/**
+ * Gets a new pill instance.
+ * @param {Element} parent the parent node that defines the pill template.
+ * @param {string} pillValue value of the pill.
+ * @return {DocumentFragment} the pill to be rendered.
+ */
+function getPill(parent, pillValue) {
+    const pill = parent.querySelector('[PillTemplate]').content.cloneNode(true).children[0];
+    pill.textContent = pillValue;
+    return pill;
+}
+
+fetch("./assets/json/options.json").then(res => {
+    res.json().then(listData => {
+        populateList('classOptions', listData);
+    });
+});