added tableware

index.css

@@ -79,7 +79,7 @@ body {
   margin-left: 4.5%;
   clip-path: var(--default-clip-path);
   width: var(--default-wallpaper-width);
-  max-width: 900px;
+  max-width: 800px;
 }
 
 span {
@@ -134,7 +134,7 @@ a {
   overflow: scroll;
 }
 
-#yosemite, #alaska, #eastcoast {
+#yosemite, #alaska, #eastcoast, #tableware {
   display: flex;
   overflow: scroll;
   width: 800px;
@@ -155,6 +155,19 @@ a {
   width: auto;
 }
 
+#tableware div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffffbd;
+  padding: 0 10px;
+}
+
+#tableware div img {
+  height: 70%;
+  width: auto;
+}
+
 .film-heading {
   font-size: 50px;
   color: #38516a;

index.html

@@ -126,7 +126,8 @@ <h3>How</h3>
                         <p>The EEG cloud consists of two sets of LED lights suspended in the air. Each pair of lights is connected to one of the two Muse 2 (EEG sensing device) devices. Participants are invited in pairs to put on one of the Muse 2 devices, which will record their brain activity. The EEG data is sent to the Arduino paired with the LED lights via WiFi, and the LED lights reflect a different color based on the state of the participants' mind.
                         </p>
                         <h2>Conclusion</h2>
-                        <p>This was an interesting exploration of what alternate forms of communication and expression could look like. When this project was presented as part of the ITP 2023 Spring Show (for the class Intangible Interactions by Yeseul Song), we received a lot of interesting ideas from people. For example, what if we could have EEG-controlled lighting in our homes--a pre-anticipation of mood lighting? Or what if we use this as a trauma recovery therapeutic device, to guide us in our mental state on how we feel about a certain subject before we can verbalize it by allowing us to express it in a gentler, passive way?</p>
+                        <p>This was an interesting exploration of what alternate forms of communication and expression could look like. When this project was presented as part of the ITP 2023 Spring Show (for the class Intangible Interactions by Yeseul Song), we received a lot of interesting ideas from people.</p>
+                        <p>For example, what if we could have EEG-controlled lighting in our homes--a pre-anticipation of mood lighting? Or what if we use this as a trauma recovery therapeutic device, to guide us in our mental state on how we feel about a certain subject before we can verbalize it by allowing us to express it in a gentler, passive way?</p>
                         <p></p>
                         <a href="https://annaylin.notion.site/Final-Project-EEG-114233b5b4e64bcca9523cfdff4cce7e?pvs=4">Read more about it here.</a>
                     </div>
@@ -197,14 +198,36 @@ <h3>Conclusion</h3>
                         <a href="https://annaylin.notion.site/Spotify-recently-added-1311bf53622e4785951cc847889b3af8">Read more about it here.</a>
                     </div>
 
+                    <!-- TODO add # hrefs -->
+
                     <!-- PRINT -->
-                    <div id="filmotography">
-                        <h2>
-                            filmotography
-                            <input checked type="radio" name="film" title="yosemite" class="film-button">
-                            <input type="radio" name="film" title="alaska" class="film-button">
-                            <input type="radio" name="film" title="east coast" class="film-button">
-                        </h2>
+                    <div id="tableware">
+                        <div>
+                            <img loading="lazy" src="public/tableware1.png"
+                            alt=""
+                            title=""/>
+                        </div>
+                        <div>
+                            <img loading="lazy" src="public/tableware2.png"
+                            alt=""
+                            title=""/>
+                        </div>
+                        <div>
+                            <img loading="lazy" src="public/tableware3.png"
+                            alt=""
+                            title=""/>
+                        </div>
+                        <div>
+                            <img loading="lazy" src="public/tableware4.png"
+                            alt=""
+                            title=""/>
+                        </div>
+                        <div>
+                        <img loading="lazy" src="public/tableware5.png"
+                        alt=""
+                        title=""/>
+                        </div>
+                        <div></div>
                     </div>
 
                     <div id="generative">
@@ -235,7 +258,16 @@ <h2>
                             <p><a href='https://www.instagram.com/badwatercolor/'>my instagram blog, badwatercolor</a></p>
                         </span>
                     </div>
+
                     <!-- FILMOTOGRAPHY -->
+                    <div id="filmotography">
+                        <h2>
+                            filmotography
+                            <input checked type="radio" name="film" title="yosemite" class="film-button">
+                            <input type="radio" name="film" title="alaska" class="film-button">
+                            <input type="radio" name="film" title="east coast" class="film-button">
+                        </h2>
+                    </div>
                     <div id="yosemite">
                         <div class="film-heading" style="background-color: #BF9378;">
                             <h2>Yosemite</h2>

index.js

@@ -13,7 +13,7 @@ window.addEventListener("load", () => {
   let previousElementSub = greeting;
 
   const codeProjects = ["eeg cloud", "ai loves horror", "text me smth nice", "baby killer", "spotify recently added"];
-  const printProjects = ["filmotography", "generative riso poster"];
+  const printProjects = ["tableware", "filmotography", "generative riso poster"];
 
   function getRandomInt(min, max) {
     min = Math.ceil(min);
@@ -22,23 +22,26 @@ window.addEventListener("load", () => {
   }
 
   function switchFilmView(e = {target:{title:""}}) {
-    let switches = [1,0,0]; 
-    const titles = ["yosemite", "alaska", "eastcoast"];
+    let switches = [1,0,0,0];
+    const titles = ["yosemite", "alaska", "eastcoast", "tableware"];
     switch (e.target.title) {
+      case "yosemite":
+        switches = [1,0,0,0];
+        break;
       case "alaska":
-        switches = [0,1,0];
+        switches = [0,1,0,0];
         break;
-        case "east coast":
-        switches = [0,0,1];
+      case "east coast":
+        switches = [0,0,1,0];
         break;
       default:
-        switches = [1,0,0]; // yosemite by default
+        switches = [0,0,0,1];
         break;
     }
     switches.forEach((on, index) => {
       if (on) document.getElementById(titles[index]).style.display = "flex";
       else document.getElementById(titles[index]).style.display = "none";
-      radioButtons[index].selected = on == 1;
+      if (index < 3) radioButtons[index].selected = on == 1;
     })
   }
 
@@ -51,6 +54,7 @@ window.addEventListener("load", () => {
         previousElement = center; // since we got here from projects tab
       }
       // turn off previous, turn on current
+      if (previousElementSub.id.includes("filmotography")) switchFilmView();
       previousElementSub.style.display = "none";
       currentElement.style.display = "block";
       previousElementSub = currentElement;
@@ -66,7 +70,8 @@ window.addEventListener("load", () => {
       previousElement = currentElement;
     }
     greeting.style.display = currentElement == center ? "flex" : "none";
-    if (currentElement.id.includes("filmotography")) switchFilmView();
+    if (currentElement.id.includes("filmotography")) switchFilmView({target:{title:"yosemite"}});
+    if (currentElement.id.includes("tableware")) switchFilmView();
     if (currentElement == center) select.value = "center";
   }