feat: add gif as background to index (#15)

* create people page

* docs: 📝 add headshots and update page

added individual images and shifted content of the pages.

* style: 💄 fix index page, projects page and people page

The home page now contains the lab logo in the background. The lab welcome message has been centered to the bottom of the screen. The extra sections from the people page have been commented currently. The Projects page has been updated with official funded projects.

* feat: ✨ add publication page and make other fixes

Addressed the following issues -

1. **Add Publication Page (Closes #7)**:
   - Created a new publication page using Quarto with references sourced from a BibTeX file.
   - Publications are dynamically generated and sorted by year.
   - This addresses the feature request to create a structured, accessible, and dynamically updated publication list.

2. **Fix Issue Report Page URL Contains a Tag (Closes #6)**:
   - Resolved the issue where the "Report an Issue" link in the footer included an erroneous `<a>` tag in the `_quarto.yml` file.
   - The link is now properly formatted, without the tag, and directs users to the correct issue reporting page on GitHub.

3. **Add Alt Text to Headshots in People Page (Closes #5)**:
   - Added descriptive alt text to all headshots on the "People" page to improve accessibility.
   - Ensures that screen readers can properly interpret the images, enhancing accessibility for users with visual impairments.

4. The link colour issue has also been resolved.

* chore: use wildcard for nocite field

* chore: add a line break

* chore: add a filler text

* style: 💄 change image size and alignment in the people tab

* resolve conflicts

* feat: add gif as background to index

---------

Co-authored-by: JooYoung Seo <[email protected]>

Author: SK-143381

index.qmd

@@ -14,16 +14,16 @@ title: ""
 
   /* Set the background image to cover the entire screen */
   body {
-    background-image: url('logo/darkmode_with_hue.jpeg'); /* Path to your image */
+    background-image: url('logo/lab-logo_inverted-slow.gif'); /* Updated to use the existing GIF file */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   }
 
-  /* Text container styling for the bottom of the screen */
+  /* Text container styling for the top of the screen */
   .text-container {
     position: absolute;
-    bottom: 90px; /* Adjust the position above the footer */
+    top: 90px; /* Position at the top instead of bottom */
     left: 50%;
     transform: translateX(-50%); /* Center the text horizontally */
     z-index: 10;
@@ -60,7 +60,7 @@ title: ""
 
  <div class="overlay"></div>  <!-- Overlay to darken the background image -->
 
-<!-- Text content overlaid on the image, aligned at the bottom -->
+<!-- Text content overlaid on the image, aligned at the top -->
 <div class="text-container">
   <p>Welcome to the <strong>(x)Ability Design Lab</strong>, pronounced as "Accessibility Design" Lab, where the "x" embodies our mission to enhance user experience (UX) and learning experience (LX) by dismantling sociotechnical barriers associated with disability. At our core, we believe in focusing on the ability and experience of all individuals, moving beyond the constraints of traditional accessibility discourse.</p>
 </div>