Interactivity Updates

 - Added clickable red button to homepage (functionality TBC)
 - Added youtube videos to prototype games clips page (visibility TBC)
 - Added links to social media to contact page

contact_page/contact.html

@@ -13,7 +13,7 @@
   <title> Contact - Lewis Napper </title>
 
   <link rel="icon" href="../favicon.ico" type="image/x-icon" sizes="any"> <!-- Favicon -->
-  <link rel="icon" href="icon.svg" type="image/svg+xml">
+  <link rel="icon" href="../icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="icon.png">
   <meta name="theme-color" content="#181818" />
 
@@ -166,11 +166,10 @@ <h1> Contact Me</h1>
 
         <div class="contact-row">
           <div class="contact-column-left">
-
-            If you have any questions, project proposals, or issues, please contact us using the form below.
-            Alternatively, you can also <a href="mailto:lewis.napper@surrey.ac.uk" rel="noopener noreferrer"
+            If you have any questions, project proposals, or issues, please contact me using the form on this page or <a
+              href="mailto:lewis.napper@surrey.ac.uk" rel="noopener noreferrer"
               class="external-link under-overlay under-modal-overlay"> Email Me</a> directly.
-            By contacting us, you agree that your data may be managed in-line with our <button
+            By contacting me, you agree that your data may be managed in-line with our <button
               class="abstract-link under-overlay under-modal-overlay" type="button" aria-expanded="false"
               aria-controls="Privacy_Policy" style="margin-left:0.1rem"> <i class="abstract-icon icon-angle-right"></i>
               Privacy Policy
@@ -223,6 +222,29 @@ <h1> Contact Me</h1>
 
             <div class="contact-spacer"></div>
 
+            <!-- To do: split into two sub-columns and stack on top of each other when screen too narrow (check using inspector). Also, style these to look and act the same as the submit button on this page... -->
+            You can also find me on:
+            <div class="social-buttons">
+              <a href="https://www.youtube.com/@lewisnapper"
+                class="social-link youtube-link under-overlay under-modal-overlay" rel="noopener noreferrer">
+                Youtube
+              </a>
+              <a href="https://github.com/LewisN3142/" class="social-link github-link under-overlay under-modal-overlay"
+                rel="noopener noreferrer">
+                GitHub
+              </a>
+              <a href="https://www.linkedin.com/in/lewis-napper-222711298/"
+                class="social-link linkedin-link under-overlay under-modal-overlay" rel="noopener noreferrer">
+                LinkedIn
+              </a>
+              <a href="https://www.instagram.com/lewis.napper/"
+                class="social-link instagram-link under-overlay under-modal-overlay" rel="noopener noreferrer">
+                Instagram
+              </a>
+            </div>
+
+            <div class="contact-spacer"></div>
+
           </div>
 
           <!-- Add error functionality if data of the wrong type is entered into the, say, email field-->
@@ -250,7 +272,7 @@ <h1> Contact Me</h1>
                   class="form-subject form-input under-overlay under-modal-overlay" placeholder="Subject"
                   aria-label="contact subject" required><br>
 
-                <textarea rows="10" cols="100" name="entry.839337160" id="entry.839337160"
+                <textarea rows="8" cols="100" name="entry.839337160" id="entry.839337160"
                   class="form-message form-input under-overlay under-modal-overlay" placeholder="Message"
                   aria-label="contact message" required></textarea><br>
 

games_page/video_games.html

@@ -218,25 +218,67 @@ <h1> Gaming Stuff </h1>
 
         <article> <!-- General Gameplay Section -->
           <h2> Gameplay </h2>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate, illo velit? Voluptatem aut, corporis
-          similique necessitatibus tempora at facilis fugit vel explicabo illum, magni id ea perferendis! Repellat
-          assumenda odio modi ab quaerat sunt aut. Praesentium expedita optio consequuntur similique alias, eligendi
-          nulla ut minus unde molestiae recusandae possimus asperiores voluptatibus, laudantium necessitatibus cumque.
-          Quos debitis expedita omnis voluptatum dolorum totam, suscipit praesentium dolore sapiente nulla eius quo
-          ratione ad nostrum voluptate quis magnam, officiis autem nam atque possimus accusantium. Officiis dolorum at
-          reprehenderit accusantium, suscipit quaerat asperiores veniam aperiam eligendi repudiandae quo doloremque
-          eveniet cupiditate est error, quasi nostrum numquam ad optio necessitatibus. Necessitatibus error molestias
-          modi repudiandae provident quo qui officiis perspiciatis exercitationem est minima harum facilis facere
-          maiores, tempore ex recusandae sed vitae praesentium, eaque cupiditate cumque velit, blanditiis numquam.
-          Vitae, voluptatem fuga ad a id delectus, consequuntur dolores culpa adipisci explicabo vero expedita commodi
-          quisquam esse animi quos, recusandae cum nemo nesciunt non. Aspernatur, error exercitationem numquam inventore
-          enim quo deleniti quibusdam accusamus debitis ipsam? Voluptate rerum, vel necessitatibus quos voluptas, ullam
-          culpa deserunt laborum dolor, quas cumque aliquam sequi exercitationem veritatis beatae. Dicta esse
-          necessitatibus culpa dolor corporis eius officia! Repellat assumenda, eaque quos exercitationem, aliquid qui
-          at delectus laudantium nihil voluptate sed, voluptatem eius porro ea quam voluptas nemo repudiandae esse illum
-          excepturi ut. Ipsa hic autem quia quos illo voluptas maiores porro eius reprehenderit ducimus? Architecto
-          cumque adipisci vitae distinctio perspiciatis, porro repudiandae dolores dolorum vel facilis delectus ab quos
-          assumenda! Nihil, temporibus!
+          <p class="medium-para">
+            bla bla intro text
+          </p>
+
+          <div class="contact-spacer"></div>
+
+          <section class="Review-section Youtube-section">
+            <div class="youtube-row">
+              <div class="youtube-column-text">
+                <h3 class="youtube-title"> Returnal &ndash; Phrike Zero Damage Run </h3>
+                <p class="medium-para">
+                  Back in September of 2022, while playing Returnal on PS5 for the first time, I finally made it to
+                  Phrike, the boss of the first biome. Despite never having seen the boss before, my first attempt ended
+                  up being a zero damage run! Unfortunately, it wasn't quite a no-hit run as I was knocked over by a
+                  melee attack about half way through the fight. This game is stunning and so fun to play!
+                </p>
+              </div>
+              <div class="youtube-column-image">
+                <span style="height:100%; display: inline-block; vertical-align: middle;"></span>
+                <button class="youtube-thumb-wrapper under-modal-overlay under-overlay"
+                  aria-controls="Returnal_Youtube_Video" aria-expanded="false" aria-label="Opens Youtube Player"
+                  data-video-number="0">
+                  <img class="youtube-thumb" src="games_images/Returnal_Phrike_Thumb.webp" loading="lazy"
+                    alt="Returnal Thumbnail">
+                  <p class="youtube-thumb-caption"> Click to load video </p>
+                </button>
+              </div>
+            </div>
+          </section>
+
+          <iframe id="Returnal_Youtube_Video" class="youtube-video under-overlay under-modal-overlay" src
+            title="YouTube video player" frameborder="0"
+            allow="accelerometer; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen
+            loading="lazy"></iframe>
+
+          <section class="Review-section Youtube-section">
+            <div class="youtube-row">
+              <div class="youtube-column-text">
+                <h3 class="youtube-title"> Sifu &ndash; Above The Skyscrapers in 4 Hits </h3>
+                <p class="medium-para">
+                  Bla bla about Sifu
+                </p>
+              </div>
+              <div class="youtube-column-image">
+                <span style="height:100%; display: inline-block; vertical-align: middle;"></span>
+                <button class="youtube-thumb-wrapper under-modal-overlay under-overlay"
+                  aria-controls="Sifu_Youtube_Video" aria-expanded="false" aria-label="Opens Youtube Player"
+                  data-video-number="1">
+                  <img class="youtube-thumb" src="games_images/Sifu_Skyscraper_Thumb.webp" loading="lazy"
+                    alt="Sifu Skyscraper Thumbnail">
+                  <p class="youtube-thumb-caption"> Click to load video </p>
+                </button>
+              </div>
+            </div>
+          </section>
+
+          <iframe id="Sifu_Youtube_Video" class="youtube-video under-overlay under-modal-overlay" src
+            title="YouTube video player" frameborder="0"
+            allow="accelerometer; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen
+            loading="lazy"></iframe>
+
         </article>
 
         <div class="section-break" id="speedrunTech">
@@ -250,6 +292,7 @@ <h2> Gameplay </h2>
 
         <article> <!-- Speedrun Section -->
           <h2> Speedrun Tech </h2>
+
         </article>
 
         <div class="section-break" id="bugsGlitches">