updated pages

docs/.vuepress/components/Attributions.vue

+<template>
+    <div class="row mt-4">
+      <!--
+        ======================================================================
+        == VERY IMPORTANT                                                   ==
+        ======================================================================
+        LEAVE THE IFRAME CODE BELOW AS IT IS, THE ATTRIBUTION FORM OF YOUR TEAM
+        WILL BE DISPLAYED ON THIS PAGE. DO NOT REMOVE IT, OTHERWISE YOU RISK OF
+        NOT MEETING BRONZE MEDAL CRITERION #2
+      -->
+      <iframe
+        style="width: 100%;"
+        id="igem-attribution-form"
+        src="https://teams.igem.org/wiki/5306/attributions"
+      ></iframe>
+      <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    mounted() {
+      // Listen to size change and update form height
+      window.addEventListener("message", function (e) {
+        if (e.origin === "https://teams.igem.org") {
+          const { type, data } = JSON.parse(e.data);
+          if (type === "igem-attribution-form") {
+            const element = document.getElementById("igem-attribution-form");
+            if (element) {
+              element.style.height = `${data + 100}px`;
+            }
+          }
+        }
+      });
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .row {
+    margin-top: 16px; /* Adjust as necessary */
+  }
+  </style>
+  
\ No newline at end of file

docs/.vuepress/components/TeamCard.vue

 <template>
-  <div class="card" @click="toggleFlip" :class="{ 'is-flipped': isFlipped }">
+  <!-- Main card container with event listeners -->
+  <div @mousemove="moveTooltip" @mouseleave="hideTooltip" class="card" @click="toggleFlip" :class="{ 'is-flipped': isFlipped }">
+    <!-- Card inner content that flips -->
     <div class="card-inner">
+      <!-- Front side of the card -->
       <div class="card-front">
         <div class="bg-image"></div>
         <img class="profile-pic" :src="profileImage" :alt="`Profile picture of ${name}`">
@@ -10,6 +13,7 @@
           <a :href="'mailto:' + email" class="email-link">{{ email }}</a>
         </div>
       </div>
+      <!-- Back side of the card -->
       <div class="card-back">
         <div class="back-content-wrapper">
           <div class="back-content">
@@ -21,8 +25,11 @@
           </div>
         </div>
       </div>
-    </div>
-  </div>
+    </div> <!-- Closing tag for .card-inner -->
+  </div> <!-- Closing tag for .card -->
+
+  <!-- Click Me Tooltip -->
+  <div ref="tooltip" class="click-me-tooltip" v-show="!isFlipped">Click Me</div>
 </template>
 
 <script>
@@ -69,6 +76,18 @@ data() {
 methods: {
   toggleFlip() {
     this.isFlipped = !this.isFlipped;
+  },
+  moveTooltip(event) {
+    // Update the position of the tooltip based on mouse coordinates
+    const tooltip = this.$refs.tooltip;
+    tooltip.style.left = `${event.pageX + 10}px`; // Offset tooltip position from the cursor
+    tooltip.style.top = `${event.pageY + 10}px`; // Offset tooltip position from the cursor
+    tooltip.style.opacity = 1; // Make the tooltip visible
+  },
+  hideTooltip() {
+    // Hide the tooltip when the mouse leaves the card
+    const tooltip = this.$refs.tooltip;
+    tooltip.style.opacity = 0; // Hide the tooltip
     }
   }
 }
@@ -232,5 +251,17 @@ methods: {
   text-align: left;
 }
 
-</style>
-
+/* Click Me Tooltip Styles */
+.click-me-tooltip {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 12px;
+  pointer-events: none; /* Prevent interaction with tooltip */
+  opacity: 0;
+  transition: opacity 0.1s ease-in-out;
+  z-index: 999; /* Make sure it is on top */
+}
+</style>
\ No newline at end of file

docs/.vuepress/config.js

@@ -27,27 +27,16 @@ export default defineUserConfig({
       { 
         text: 'Project',
         children: [
-          { text: 'Contribution', link: '/contribution/' },
+          { text: 'Contribution', link: '/contribution' },
           { text: 'Description', link: '/description' },
-          { text: 'Engineering', link: '/engineering/'},
-          { text: 'Experiments', link: '/experiments/'},
-          { text: 'Sponsors', link: '/sponsors'},
-          { text: 'Results', link: '/results/'}
+          { text: 'Engineering', link: '/engineering'},
         ]
       },
-      { text: 'Safety', link: '/safety/' },
-      { text: 'Human Practices', link: '/human-practices/' },
+      { text: 'Human Practices', link: '/human-practices' },
       { 
         text: 'Awards',
         children: [
           { text: 'Education', link: '/education' },
-          { text: 'Entrepreneurship', link: '/entrepreneurship/' },
-          { text: 'Hardware', link: '/hardware/'},
-          { text: 'Inclusivity', link: '/inclusivity/'},
-          { text: 'Measurement', link: '/measurement/'},
-          { text: 'Model', link: '/model/'},
-          { text: 'Plant', link: '/plant/'},
-          { text: 'Software', link: '/software/'},
           { text: 'Sustainable', link: '/sustainable'}
         ]
       },

docs/.vuepress/enhanceApp.js

 import { defineClientAppEnhance } from '@vuepress/client'
 import TeamCard from './components/TeamCard.vue'
+import Attributions from './components/Attributions.vue' // Import the Attributions component
 
 export default defineClientAppEnhance(({ app }) => {
   app.component('TeamCard', TeamCard)
+  app.component('Attributions', Attributions) // Register the Attributions component globally
+
 })

docs/attributions.md

+---
+title: Attributions
+---
+
+# Project Attributions
+
 Teams must use the standard Attributions form. To meet the attributions requirement, you must display the standard form on your Wiki by following the instructions here: [Project Attribution page](https://competition.igem.org/deliverables/project-attribution).
 
 ---
@@ -10,35 +16,5 @@ The form that has been embedded in an iframe below shows your team's Project Att
 
 If you use a different website framework, make sure to embed the right URL for your team's form.
 
----
-
-<!--
+<!-- Use the Attributions component to embed the form -->
+<Attributions />
\ No newline at end of file
-  ======================================================================
-  == VERY IMPORTANT                                                   ==
-  ======================================================================
-  LEAVE THE IFRAME CODE BELOW AS IT IS, THE ATTRIBUTION FORM OF YOUR TEAM
-  WILL BE DISPLAYED ON THIS PAGE. DO NOT REMOVE IT, OTHERWISE YOU RISK OF
-  NOT MEETING BRONZE MEDAL CRITERION #2
--->
-
-<div class="row mt-4">
-  <script type="text/javascript">
-    // Listen to size change and update form height
-    window.addEventListener("message", function (e) {
-      if (e.origin === "https://teams.igem.org") {
-        const {type, data} = JSON.parse(e.data);
-        if (type === "igem-attribution-form") {
-          const element = document.getElementById("igem-attribution-form");
-          element.style.height = `${data + 100}px`;
-        }
-      }
-    });
-  </script>
-  <iframe
-    style='width: 100%'
-    id="igem-attribution-form"
-    src="https://teams.igem.org/wiki/5306/attributions">
-  >
-  </iframe>
-  <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
-</div>

docs/engineering.md

+---
+title: Engineering Success
+---
+  
+# Engineering Success
+Demonstrate engineering success in a technical aspect of your project by going through at least one iteration of the engineering design cycle. This achievement should be distinct from your Contribution for Bronze.
+
+## Silver Medal Criterion #1
+Demonstrate engineering success in a part of your project by going through at least one iteration of the engineering design cycle. This achievement should be distinct from your Contribution for Bronze.
+
+If you plan to show engineering success by creating a new Part that has been shown to work as expected, you must document your contribution on the Part's Main Page on the [Registry](https://parts.igem.org/Main_Page) for your team to be eligible for this criteria.
+
+Please see the [2024 Medals Page](https://competition.igem.org/judging/medals) for more information.
\ No newline at end of file

docs/human-practices.md

+---
+title: Human Practices
+---
+
+# Human Practices
+We ask every team to think deeply and creatively about whether their project is responsible and good for the world. Consider how the world affects your work and how your work affects the world.
+
+--- 
+
+## Silver Medal Criterion 
+Explain how you have determined your work is responsible and good for the world.
+
+Please see the [2024 Medals Page](https://competition.igem.org/judging/medals) for more information.
+
+---
+
+## Best Integrated Human Practices
+How does your project affect society and how does society influence the direction of your project? How might ethical considerations and stakeholder input guide your project purpose and design and the experiments you conduct in the lab? How does this feedback enter into the process of your work all through the iGEM competition? Document a thoughtful and creative approach to exploring these questions and how your project evolved in the process to compete for this award!
+
+To compete for the Best Integrated Human Practices prize, select the prize on the [judging form](https://competition.igem.org/deliverables/judging-form) and describe your work on this page.
+      
+Please see the [2024 Awards Page](https://competition.igem.org/judging/awards) for more information.
+
+---
+
+## Overview
+At iGEM we believe societal considerations should be upfront and integrated throughout the design and execution of synthetic biology projects. “Human Practices” refers to iGEM teams' efforts to actively consider how the world affects their work and their work affects the world. Through your Human Practices activities, your team should demonstrate how you have thought carefully and creatively about whether your project is responsible and good for the world. We invite you to explore issues relating (but not limited) to the ethics, safety, security, and sustainability of your project, and to show how this exploration feeds back into your project purpose, design, and execution.
+
+Please note you can compete for the Silver Medal criterion #2 and the Best Integrated Human Practices prize with this page.
+
+For more information, please see the [Human Practices Hub](https://responsibility.igem.org/human-practices/what-is-human-practices).
+
+On this page, your team should document all of your Human Practices work and activities. You should write about the Human Practices topics you considered in your project, document any activities you conducted to explore these topics (such as engaging with experts and stakeholders), describe why you took a particular approach (including referencing any work you built upon), and explain if and how you integrated takeaways from your Human Practices work back into your project purpose, design and/or execution.
+
+---
+
+## Inspirations 
+-[2019 Thessaly](https://2019.igem.org/Team:Thessaly/Human_Practices)
+
+-[2019 Linkoping Sweden](https://2019.igem.org/Team:Linkoping_Sweden/Human_Practices)
+
+-[2019 FDR HB Peru](https://2019.igem.org/Team:FDR-HB_Peru/Human_Practices)
+
+-[2020 Rochester](https://2020.igem.org/Team:William_and_Mary/Human_Practices)
+
+-[2020 Leiden](https://2020.igem.org/Team:Leiden/Human_Practices)
+
+-[2020 Baltimore BioCrew](https://2020.igem.org/Team:Baltimore_BioCrew/Human_Practices)
\ No newline at end of file

package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@vuepress/bundler-vite": "2.0.0-rc.14",
     "@vuepress/plugin-register-components": "2.0.0-rc.37",
+    "@vuepress/utils": "2.0.0-rc.2",
     "vue": "^3.4.37",
     "vuepress": "^2.0.0-rc.14"
   },