Addind vuespress to project

.gitignore

-env
-venv
-.vscode
-__pycache__
-public
+node_modules
+.env
+.cache
+.temp
\ No newline at end of file

docs/.vuepress/components/TeamCard.vue

+<template>
+  <div class="card">
+    <div class="bg-image"></div>
+    <img class="profile-pic" :src="profileImage" :alt="`Profile picture of ${name}`">
+    <div class="card-content">
+      <h3><strong>{{ name }}</strong></h3>
+      <h4>{{ role }}</h4>
+      <p>Nationality: {{ nationality }}</p>
+      <p>Email: <a :href="'mailto:' + email" class="email-link">{{ email }}</a></p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    profileImage: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    role: {
+      type: String,
+      required: true
+    },
+    nationality: {
+      type: String, 
+      required: true
+    },
+    email: {
+      type: String, 
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card {
+  position: relative;
+  width: 300px;
+  height: 450px;
+  background: transparent;
+  border-radius: 10px;
+  margin: 20px;
+  overflow: hidden; /* Ensure that content does not overflow the card */
+  border: 2px solid #ddd;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  transition: box-shadow 0.1s, border-color 0.1s; /* Smooth transition for hover effects */
+}
+
+.card:hover { /* Darker border color on hover */
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
+}
+
+.bg-image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 20px;
+  left: 62px;
+  background-image: url("https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/background_images/splash_bg_pos_1.png?ref_type=heads");
+  background-size: cover;
+  z-index: 0; /* Positioned behind the profile picture */
+ /* Smooth transition for background image change */
+}
+
+.card:hover .bg-image {
+  position: absolute; 
+  width: 100%;
+  height: 100%;
+  top: 2px;
+  left: 45px;
+  background-image: url("https://gitlab.igem.org/2024/msp-maastricht/-/raw/main/wiki/images_project_description/background_images/splash_bg_pos_0.png?ref_type=heads");
+}
+
+.profile-pic {
+  position: absolute;
+  left: 20%; /* Center the profile picture horizontally */
+  width: 450vw; /* Responsive width */
+  height: auto; /* Maintain aspect ratio */
+  max-width: 450px; 
+  z-index: 1; /* Positioned above the background image */
+}
+
+.card-content {
+  position: absolute;
+  bottom: 0; /* Position at the bottom with no extra spacing */
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: auto; /* Adjust height to fit content */
+  max-height: 50%; /* Limit the maximum height to half of the card */
+  padding: 0px;
+  background: rgba(20, 118, 118, 0.7); /* Slightly darker semi-transparent background */
+  border-radius: 10px; /* Match the card border radius */
+  transform: translateX(-50%); /* Center horizontally */
+  z-index: 2; /* Positioned above both the profile picture and background image */
+  box-sizing: border-box; /* Include padding in width calculation */
+  display: flex; /* Use flexbox for layout */
+  flex-direction: column; /* Arrange children vertically */
+  justify-content: center; /* Center content vertically */
+  align-items: center; /* Center content horizontally */
+}
+
+.card-content h3 {
+  margin: 0 0 -45px 0; /* Adjust margin below the name */
+  color: #ffffff; /* Ensure text is readable */
+  font-size: 1.2em; /* Slightly larger font size for the name */
+  text-align: center; /* Center align text horizontally */
+}
+
+.card-content h4,
+.card-content p {
+  margin: 0px 0; /* Margin between elements */
+  color: #ffffff; /* Ensure text is readable */
+  font-size: 1em; /* Adjust font size as needed */
+  text-align: center; /* Center align text horizontally */
+}
+
+.card-content p {
+  font-size: 0.9em; /* Slightly smaller text for additional details */
+}
+
+.email-link {
+  color: #ffffff; /* Change color of the email link */
+  text-decoration: none; /* Optional: Remove underline from the link */
+}
+</style>
+

docs/.vuepress/config.js

+import { defineUserConfig } from 'vuepress'
+import { defaultTheme } from '@vuepress/theme-default'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { path } from '@vuepress/utils'
+import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
+
+export default defineUserConfig({
+  lang: 'en-US',
+  title: false,
+  description: 'My iGEM Wiki',
+  theme: defaultTheme({
+    logo: '/images/logo/logo_linear.png',
+    navbar: [
+      { text: 'Home', link: '/' },
+      { 
+        text: 'Team',
+        children: [
+          { text: 'Team', link: '/team' },
+          { text: 'Attributions', link: '/attributions/' }
+        ]
+      },
+      { 
+        text: 'Project',
+        children: [
+          { text: 'Contribution', link: '/contribution/' },
+          { text: 'Description', link: '/description' },
+          { text: 'Engineering', link: '/engineering/'},
+          { text: 'Experiments', link: '/experiments/'},
+          { text: 'Notebook', link: '/notebook/'},
+          { text: 'Results', link: '/results/'}
+        ]
+      },
+      { text: 'Safety', link: '/safety/' },
+      { 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/'}
+        ]
+      },
+    ],
+    sidebar: false,
+  }),
+  bundler: viteBundler(),
+  plugins: [
+    registerComponentsPlugin({
+      componentsDir: path.resolve(__dirname, './components'),
+    }),
+  ],
+  head: [
+    ['link', { rel: 'icon', href: '/images/logo/Natronaut_-_logo__no_text_.png' }],
+    ["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
+    ["link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" }],
+    ["link", { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" }],
+  ],
+})

docs/.vuepress/enhanceApp.js

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

docs/.vuepress/styles/palette.scss

+// apply font
+body {
+    font-family: "Red Hat Display", sans-serif;
+}

docs/.vuepress/theme/index.js

+import { defineClientConfig } from '@vuepress/client';
+import TeamCard from '../../components/TeamCard.vue';
+
+export default defineClientConfig({
+  enhance: ({ app }) => {
+    app.component('TeamCard', TeamCard);
+  }
+});