Updates, decided not to do EightBiterator

Notebook.md

@@ -15,6 +15,7 @@ Note: _Revision 1 will be developed from 11/24/2024 to 12/11/2024._
 - [Project Section](#Project-Section) - 12/06/2024
 - [Previous Work Section](#Previous-Work-Section) - 12/07/2024
 - [Contact Section](#Contact-Section) - 12/07/2024
+- [Project Section Continued](#Project-Section-Continued) - 12/08/2024
 
 ---
 
@@ -677,4 +678,30 @@ document.getElementById("contact-form").addEventListener("submit", async functio
     alert("There was a problem submitting your form. Please try again later.");
   }
 });
-```
+```
+
+---
+
+## Project Section Continued
+
+**12/08/2024**
+
+**Capstone**
+
+I've decided to include my capstone project as one of the personal proejcts in this section. This will involve a video of the demo that I will share as a YouTube video and then embed here in the Website. We can set this up excatly the same way as our first project!
+
+**EightBiterator Continued**
+
+Although this would be really cool I've decided it is outside the scope of this project :(.
+
+---
+
+## Parallaxing Background
+
+**12/08/2024**
+
+Another fun idea I had that is defintely within the scope is to create a parallaxing background. I think this will give a really cool user experience and highlight my love of game development.
+
+As the user scrolls to the bottom of the page there will be layered background elements that move at different speeds giving the effect that the view is descending into a pixel at view of the background. The parallaxing will give a depth and movement effect that will be fun for the user experience.
+
+We have already done some of the work for this with our dynamic scrolling. 

site.html

@@ -41,7 +41,7 @@
           />
         </div>
       </section>
-      
+
       <section id="about" class="about-section">
         <div class="about-box">
           <!-- First Column: About Text -->
@@ -61,29 +61,24 @@
                     alt="About Me Images"
                     class="current-image"
                   />
-                  <p class="image-title">LunaLight Concept Work by @toastydoodles</p>
+                  <p class="image-title">
+                    LunaLight Concept Work by @toastydoodles
+                  </p>
                 </div>
                 <div class="image-container hidden-image">
-                  <img
+                  <img src="images/Clouds.png" alt="About Me Images" />
-                    src="images/Clouds.png"
-                    alt="About Me Images"
-                  />
                   <p class="image-title">Cloud Photography</p>
                 </div>
                 <div class="image-container hidden-image">
-                  <img
+                  <img src="images/SiteUpdate1.jpg" alt="About Me Images" />
-                    src="images/SiteUpdate1.jpg"
-                    alt="About Me Images"
-                  />
                   <p class="image-title">Website Update Mockup</p>
                 </div>
-                
+
                 <div class="about-buttons">
                   <button class="prev-btn">&larr;</button>
                   <button class="next-btn">&rarr;</button>
                 </div>
               </div>
-              
             </section>
           </div>
         </div>
@@ -92,7 +87,7 @@
       <section id="projects" class="projects-section">
         <div class="project-box">
           <div class="grid-container">
-            <h1 class="project-box-title">Personal Projects</h1>
+            <h1 class="project-box-title">Projects</h1>
 
             <!-- Project 1 -->
             <section class="grid-item">
@@ -118,38 +113,31 @@
                 ></iframe>
               </div>
             </section>
-
+            
             <!-- Project 2 -->
             <section class="grid-item">
-              <!-- Project 2 First Column: Project Overview Text -->
+              <!-- Project 3 First Column: Project Overview Text -->
               <div class="project-text">
                 <h1 class="project-title">
-                  EightBiterator - A Retro Game Melody Generator
+                  Capstone - A Mobile App for the CRN
                 </h1>
                 <p id="project2-paragraph" class="project-paragraph">
                   Loading...
                 </p>
               </div>
-              <!-- Project 2 Second Column: Form -->
+              <!-- Project 3 Second Column: Form -->
-              <div class="project2-form-container">
+              <div class="project2-video-container">
-                <h1 class="project-title">EightBiterator</h1>
-              </div>
-            </section>
-
-            <!-- Project 3 -->
-            <section class="grid-item">
-              <!-- Project 2 First Column: Project Overview Text -->
-              <div class="project-text">
-                <h1 class="project-title">
-                  Capstone - A Mobile App for the CRN
-                </h1>
-                <p id="project3-paragraph" class="project-paragraph">
-                  Loading...
-                </p>
-              </div>
-              <!-- Project 2 Second Column: Form -->
-              <div class="project3-video-container">
                 <h1 class="project-title">Capstone Demo</h1>
+                <iframe
+                  width="560"
+                  height="315"
+                  src="https://www.youtube.com/embed/D4xNEe4QDXE?si=pHNHbAHnsie91A7P&autoplay=1&loop=1&playlist=D4xNEe4QDXE&mute=1"
+                  title="YouTube video player"
+                  frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  referrerpolicy="strict-origin-when-cross-origin"
+                  allowfullscreen
+                ></iframe>
               </div>
             </section>
           </div>
@@ -214,7 +202,7 @@
 
       <section id="contact" class="contact-section">
         <div class="contact-box">
-          <h1 class="contact-section-title">ᛜ We'd love to hear from you! ᛜ</h1>
+          <h1 class="contact-section-title">ᛜ I'd love to hear from you! ᛜ</h1>
           <form
             id="contact-form"
             method="POST"

style.css

@@ -301,22 +301,7 @@ button:hover {
 
 /* Project 2 */
 
-.project2-form-container {
+.project2-video-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  height: 520px;
-  width: 100%;
-  overflow: hidden;
-  border-radius: 10px;
-  position: relative;
-}
-
-/* Project 3 */
-
-.project3-video-container {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -328,7 +313,7 @@ button:hover {
   position: relative;
 }
 
-.project3-video {
+.project2-video {
   width: 100%;
   height: 100%;
   border-radius: 10px;

text/project3.txt

@@ -1,3 +0,0 @@
-Hey! This section is about my retro game melody generator!
-
-Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.