crop and reduce image sizes. add some alt tags for accessibility.

26 files changed, 50 insertions, 42 deletions

diff --git a/.DS_Store b/.DS_Store
index 58638f6..cfaad6a 100644
--- a/.DS_Store
+++ b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
index 6c7e5f9..514c8de 100644
--- a/assets/.DS_Store
+++ b/assets/.DS_Store
diff --git a/assets/bio-photos/anika.jpeg b/assets/bio-photos/anika.jpeg
new file mode 100644
index 0000000..ed2e6b7
--- /dev/null
+++ b/assets/bio-photos/anika.jpeg
diff --git a/assets/bio-photos/anika.jpg b/assets/bio-photos/anika.jpg
deleted file mode 100644
index 7069a4a..0000000
--- a/assets/bio-photos/anika.jpg
+++ /dev/null
diff --git a/assets/bio-photos/aubrey.jpeg b/assets/bio-photos/aubrey.jpeg
new file mode 100644
index 0000000..f33ec0c
--- /dev/null
+++ b/assets/bio-photos/aubrey.jpeg
diff --git a/assets/bio-photos/aubrey.jpg b/assets/bio-photos/aubrey.jpg
deleted file mode 100644
index 43ab0c3..0000000
--- a/assets/bio-photos/aubrey.jpg
+++ /dev/null
diff --git a/assets/bio-photos/connie.jpg b/assets/bio-photos/connie.jpg
index 6fe04b8..61a4660 100644
--- a/assets/bio-photos/connie.jpg
+++ b/assets/bio-photos/connie.jpg
diff --git a/assets/bio-photos/dylan.jpg b/assets/bio-photos/dylan.jpg
new file mode 100644
index 0000000..25890a0
--- /dev/null
+++ b/assets/bio-photos/dylan.jpg
diff --git a/assets/bio-photos/dylan.png b/assets/bio-photos/dylan.png
deleted file mode 100644
index b964380..0000000
--- a/assets/bio-photos/dylan.png
+++ /dev/null
diff --git a/assets/bio-photos/jeff.jpg b/assets/bio-photos/jeff.jpg
index e219e4c..f8be13c 100644
--- a/assets/bio-photos/jeff.jpg
+++ b/assets/bio-photos/jeff.jpg
diff --git a/assets/bio-photos/jessica.jpeg b/assets/bio-photos/jessica.jpeg
new file mode 100644
index 0000000..e595557
--- /dev/null
+++ b/assets/bio-photos/jessica.jpeg
diff --git a/assets/bio-photos/jessica.jpg b/assets/bio-photos/jessica.jpg
deleted file mode 100644
index fc6c6c2..0000000
--- a/assets/bio-photos/jessica.jpg
+++ /dev/null
diff --git a/assets/bio-photos/kelly.jpg b/assets/bio-photos/kelly.jpg
new file mode 100644
index 0000000..c056042
--- /dev/null
+++ b/assets/bio-photos/kelly.jpg
diff --git a/assets/bio-photos/kelly.png b/assets/bio-photos/kelly.png
deleted file mode 100644
index 1b314d5..0000000
--- a/assets/bio-photos/kelly.png
+++ /dev/null
diff --git a/assets/bio-photos/lauren.jpeg b/assets/bio-photos/lauren.jpeg
index aa0018d..c849c1f 100644
--- a/assets/bio-photos/lauren.jpeg
+++ b/assets/bio-photos/lauren.jpeg
diff --git a/assets/bio-photos/michael.jpg b/assets/bio-photos/michael.jpg
new file mode 100644
index 0000000..0f78b57
--- /dev/null
+++ b/assets/bio-photos/michael.jpg
diff --git a/assets/bio-photos/michael.png b/assets/bio-photos/michael.png
deleted file mode 100644
index 97de5f3..0000000
--- a/assets/bio-photos/michael.png
+++ /dev/null
diff --git a/assets/bio-photos/miku.jpg b/assets/bio-photos/miku.jpg
new file mode 100644
index 0000000..b4f09ce
--- /dev/null
+++ b/assets/bio-photos/miku.jpg
diff --git a/assets/bio-photos/miku.png b/assets/bio-photos/miku.png
deleted file mode 100644
index f7b9270..0000000
--- a/assets/bio-photos/miku.png
+++ /dev/null
diff --git a/assets/bio-photos/sunny.jpeg b/assets/bio-photos/sunny.jpeg
new file mode 100644
index 0000000..4228c5b
--- /dev/null
+++ b/assets/bio-photos/sunny.jpeg
diff --git a/assets/bio-photos/sunny.jpg b/assets/bio-photos/sunny.jpg
deleted file mode 100644
index 536f25c..0000000
--- a/assets/bio-photos/sunny.jpg
+++ /dev/null
diff --git a/assets/bio-photos/tongyu.jpg b/assets/bio-photos/tongyu.jpg
new file mode 100644
index 0000000..173db6d
--- /dev/null
+++ b/assets/bio-photos/tongyu.jpg
diff --git a/assets/bio-photos/tongyu.png b/assets/bio-photos/tongyu.png
deleted file mode 100644
index e2d1795..0000000
--- a/assets/bio-photos/tongyu.png
+++ /dev/null
diff --git a/index.html b/index.html
index f066de0..7f8e26d 100644
--- a/index.html
+++ b/index.html
@@ -49,17 +49,9 @@
                     <h1>csci 1300</h1>
                     <h3 class="course-name">user interfaces and user experience</h3>
                 </article>
-
-
-<!--                <aside class="business-hours">-->
-<!--                    <h3>business hours</h3>-->
-<!--                    <p>T/Th 1-2:20pm</p>-->
-<!--                    <p>MacMillan Hall 117</p>-->
-<!--                    <div><a class="link" href="https://example.com">Zoom Link</a></div>-->
-<!--                </aside>-->
             </article>
             <figure class="pastries-wrapper">
-                <iframe tabindex="-1" id="connie-pastries" src='https://my.spline.design/cs1300pastries-527b5a4ae57f8e04517708ce6f4dd80e/' frameborder='0'></iframe>
+                <iframe tabindex="-1" id="connie-pastries" src='https://my.spline.design/cs1300pastries-527b5a4ae57f8e04517708ce6f4dd80e/'></iframe>
             </figure>
         </section>
 
@@ -82,11 +74,11 @@
                 <div class="flex-column" style="margin: 0 10px;">
                     <h3 class="subtitles">websites</h3>
                     <a style="margin: 10px;" href="https://piazza.com/class/kcw25izsiei48j" target="_blank" class="button helpful-link glow-on-hover">
-                        <img src="./assets/edstem.png" class="small-icon">
+                        <img src="./assets/edstem.png" class="small-icon" alt="edstem logo">
                         <h3>edstem →</h3>
                     </a>
                     <a style="margin: 10px;" href="https://canvas.brown.edu/" target="_blank" class="button helpful-link glow-on-hover">
-                        <img src="./assets/canvas.png" class="small-icon">
+                        <img src="./assets/canvas.png" class="small-icon" alt="canvas logo">
                         <h3>canvas →</h3>
                     </a>
                     <a style="margin: 10px;" href="https://script.google.com/a/brown.edu/macros/s/AKfycbw3-4g7pzYS8dgLLu5fHImIXC0Asu7Cqn_DLEGngPdEDRmFgxs/exec" target="_blank" class="button helpful-link glow-on-hover">
@@ -231,8 +223,9 @@
                             <img
                                     src="./assets/pastry-photos/michael.png"
                                     class="ta-pastry"
+                                    alt="jeff's pastry"
                             />
-                            <img src="assets/bio-photos/jeff.jpg" class="ta-img"/>
+                            <img src="assets/bio-photos/jeff.jpg" class="ta-img" alt="jeff's image"/>
                         </div>
 
                         <div class="flex-column bio-text">
@@ -245,7 +238,7 @@
                             </h4>
                         </div>
                     </div>
-                    <img src="./assets/shelf.png" class="shelf-png" />
+                    <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/>
                 </div>
 
                 <div class="shelf flex-column">
@@ -254,7 +247,8 @@
                             <div class="flex-column bio-text">
                                 <h3>[hta] anika</h3>
                                 <h4>
-                                    Hi! I'm a senior from Minnesota studying computer science! I like tennis, word games, and trying new foods.                                </h4>
+                                    Hi! I'm a senior from Minnesota studying computer science! I like tennis, word games, and trying new foods.
+                                </h4>
                             </div>
                             <div class="img-box">
                                 <img
@@ -262,8 +256,9 @@
                                         class="ta-pastry"
                                         id="anika-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="anika's pastry"
                                 />
-                                <img src="./assets/bio-photos/anika.jpg" class="ta-img" />
+                                <img src="./assets/bio-photos/anika.jpeg" class="ta-img" alt="anika's image"/>
                             </div>
                         </div>
 
@@ -274,18 +269,19 @@
                                         class="ta-pastry"
                                         id="michael-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="michael's pastry"
                                 />
-                                <img src="./assets/bio-photos/michael.png" class="ta-img" />
+                                <img src="./assets/bio-photos/michael.jpg" class="ta-img" alt="michael's image"/>
                             </div>
                             <div class="flex-column bio-text">
                                 <h3>[hta] michael</h3>
                                 <h4>
-                                    Ciao! Ws only.
+                                    Ciao! Give me a cannoli or a sfogliatella then I'll be happy 😄😋
                                 </h4>
                             </div>
                         </div>
                     </div>
-                    <img src="./assets/shelf.png" class="shelf-png" />
+                    <img src="./assets/shelf.png" class="shelf-png" alt="self image"/>
                 </div>
 
                 <div class="shelf flex-column">
@@ -295,8 +291,9 @@
                                     src="./assets/pastry-photos/tongyu.png"
                                     class="ta-pastry"
                                     id="tongyu-pastry"
+                                    alt="tongyu's pastry"
                             />
-                            <img src="./assets/bio-photos/tongyu.png" class="ta-img" />
+                            <img src="./assets/bio-photos/tongyu.jpg" class="ta-img" alt="tongyu's image"/>
                         </div>
                         <div class="flex-column bio-text">
                             <h3>[grad ta] tongyu</h3>
@@ -308,6 +305,7 @@
                     <img
                             src="./assets/shelf.png"
                             class="shelf-png"
+                            alt="shelf image"
                     />
                 </div>
 
@@ -326,8 +324,9 @@
                                         class="ta-pastry"
                                         id="aubrey-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="aubrey's pastry"
                                 />
-                                <img src="./assets/bio-photos/aubrey.jpg" class="ta-img" />
+                                <img src="./assets/bio-photos/aubrey.jpeg" class="ta-img" alt="aubrey's image"/>
                             </div>
                         </div>
 
@@ -344,12 +343,13 @@
                                         class="ta-pastry"
                                         id="connie-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="connie's pastry"
                                 />
-                                <img src="./assets/bio-photos/connie.jpg" class="ta-img" />
+                                <img src="./assets/bio-photos/connie.jpg" class="ta-img" alt="connie's image"/>
                             </div>
                         </div>
                     </div>
-                    <img src="./assets/shelf.png" class="shelf-png" />
+                    <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/>
                 </div>
 
                 <div class="shelf flex-column">
@@ -361,8 +361,9 @@
                                         class="ta-pastry"
                                         id="dylan-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="dylan's pastry"
                                 />
-                                <img src="./assets/bio-photos/dylan.png" class="ta-img" />
+                                <img src="./assets/bio-photos/dylan.jpg" class="ta-img" alt="dylan's image"/>
                             </div>
                             <div class="flex-column bio-text">
                                 <h3>dylan</h3>
@@ -379,8 +380,9 @@
                                         class="ta-pastry"
                                         id="isaac-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="isaac's pastry"
                                 />
-                                <img src="./assets/bio-photos/isaac.jpg" class="ta-img" />
+                                <img src="./assets/bio-photos/isaac.jpg" class="ta-img" alt="isaac's image"/>
                             </div>
                             <div class="flex-column bio-text">
                                 <h3>isaac</h3>
@@ -390,7 +392,7 @@
                             </div>
                         </div>
                     </div>
-                    <img src="./assets/shelf.png" class="shelf-png" />
+                    <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/>
                 </div>
 
                 <div class="shelf flex-column">
@@ -408,8 +410,9 @@
                                         class="ta-pastry"
                                         id="jenny-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="jenny's pastry"
                                 />
-                                <img src="./assets/bio-photos/jenny.jpeg" class="ta-img" />
+                                <img src="./assets/bio-photos/jenny.jpeg" class="ta-img" alt="jenny's image"/>
                             </div>
                         </div>
 
@@ -426,12 +429,13 @@
                                         class="ta-pastry"
                                         id="jessie-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="jessie's pastry"
                                 />
-                                <img src="./assets/bio-photos/jessica.jpg" class="ta-img" />
+                                <img src="./assets/bio-photos/jessica.jpeg" class="ta-img" alt="jessie's image"/>
                             </div>
                         </div>
                     </div>
-                    <img src="./assets/shelf.png" class="shelf-png" />
+                    <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/>
                 </div>
 
                 <div class="shelf flex-column">
@@ -443,8 +447,9 @@
                                         class="ta-pastry"
                                         id="kelly-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="kelly's pastry"
                                 />
-                                <img src="./assets/bio-photos/kelly.png" class="ta-img" />
+                                <img src="./assets/bio-photos/kelly.jpg" class="ta-img" alt="kelly's image"/>
                             </div>
                             <div class="flex-column bio-text">
                                 <h3>kelly</h3>
@@ -461,8 +466,9 @@
                                         class="ta-pastry"
                                         id="lauren-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="lauren's pastry"
                                 />
-                                <img src="./assets/bio-photos/lauren.jpeg" class="ta-img" />
+                                <img src="./assets/bio-photos/lauren.jpeg" class="ta-img" alt="lauren's image"/>
                             </div>
                             <div class="flex-column bio-text">
                                 <h3>lauren</h3>
@@ -472,7 +478,7 @@
                             </div>
                         </div>
                     </div>
-                    <img src="./assets/shelf.png" class="shelf-png" />
+                    <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/>
                 </div>
 
                 <div class="shelf flex-column">
@@ -488,8 +494,9 @@
                                         class="ta-pastry"
                                         id="melissa-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="melissa's pastry"
                                 />
-                                <img src="./assets/bio-photos/melissa.jpg" class="ta-img" />
+                                <img src="./assets/bio-photos/melissa.jpg" class="ta-img" alt="melissa's image"/>
                             </div>
                         </div>
 
@@ -506,12 +513,13 @@
                                         class="ta-pastry"
                                         id="miku-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="miku's pastry"
                                 />
-                                <img src="./assets/bio-photos/miku.png" class="ta-img" />
+                                <img src="./assets/bio-photos/miku.jpg" class="ta-img" alt="miku's image"/>
                             </div>
                         </div>
                     </div>
-                    <img src="./assets/shelf.png" class="shelf-png" />
+                    <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/>
                 </div>
 
                 <div class="shelf flex-column">
@@ -521,10 +529,11 @@
                                 <img
                                         src="./assets/pastry-photos/nick.png"
                                         class="ta-pastry"
-                                        id="nick-pastry" id="nick-pastry"
+                                        id="nick-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="nick's pastry"
                                 />
-                                <img src="./assets/bio-photos/nick.png" class="ta-img" />
+                                <img src="./assets/bio-photos/nick.png" class="ta-img" alt="nick's image"/>
                             </div>
                             <div class="flex-column bio-text">
                                 <h3>nick</h3>
@@ -544,12 +553,13 @@
                                         class="ta-pastry"
                                         id="sunny-pastry"
                                         style="margin-bottom: 3px"
+                                        alt="sunny's pastry"
                                 />
-                                <img src="./assets/bio-photos/sunny.jpg" class="ta-img" />
+                                <img src="./assets/bio-photos/sunny.jpeg" class="ta-img" alt="sunny's image"/>
                             </div>
                         </div>
                     </div>
-                    <img src="./assets/shelf.png" class="shelf-png" />
+                    <img src="./assets/shelf.png" class="shelf-png" alt="shelf image"/>
                 </div>
             </article>
         </section>
diff --git a/script.js b/script.js
index 7365d05..5706edc 100644
--- a/script.js
+++ b/script.js
@@ -2,7 +2,6 @@ const THRESHOLD_FIDELITY = 150;
 
 // accessibility tab index
 const sectionsAndHeaders = document.querySelectorAll('section, header');
-console.log(sectionsAndHeaders)
 sectionsAndHeaders.forEach(ele => ele.tabIndex = "1");
 
 // mutation observer for the video element
diff --git a/styles.css b/styles.css
index 6a112e3..3663d10 100644
--- a/styles.css
+++ b/styles.css
@@ -624,10 +624,9 @@ staff area
     transition: .5s ease;
     opacity: 0;
     position: absolute;
-    top: calc(50% - 5px);
+    top: calc(50% - 25px);
     left: 50%;
-    height: 100px;
-    width: auto;
+    height: 150px;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);