feature: scaffold data for team member

Author: bencodezen

src/.vitepress/components/TeamCard.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { computed, defineProps } from 'vue'
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    required: true
+  }
+})
+
+const imageFileName = computed(() => {
+  return props.profile.name.toLowerCase().split(' ').join('-') + '.jpeg'
+})
+
+const imageAlt = computed(() => {
+  return `${props.profile.name}'s Profile Picture`
+})
+</script>
+
+<template>
+  <div class="team-card">
+    <img :src="`../../about/images/${imageFileName}`" :alt="imageAlt" />
+    <p>{{ imageFileName }}</p>
+    <h3>{{ profile.name }}</h3>
+    <p>
+      {{ profile.title }}
+      <span v-if="profile.company">@ {{ profile.company }}</span>
+    </p>
+    <address>{{ profile.location.label }}</address>
+    <ul>
+      <li v-for="language in profile.languageList">
+        {{ language }}
+      </li>
+    </ul>
+    <a :href="profile.website.url">{{ profile.website.label }}</a>
+    <ul>
+      <li
+        v-for="(handle, platform) in profile.social"
+        :key="`${platform}-${handle}`"
+      >
+        <a :href="`https://www.${platform}.com/${handle}`">
+          {{ platform }}: {{ handle }}
+        </a>
+      </li>
+    </ul>
+    <pre>{{ profile }}</pre>
+  </div>
+</template>
+
+<style></style>

src/about/images/ben-hong.jpeg

@@ -0,0 +1,38 @@
+[
+  {
+    "name": "Evan You",
+    "title": "Creator",
+    "company": "Vue.js",
+    "projects": [],
+    "location": {
+      "label": "New Jersey, NJ, USA"
+    },
+    "languageList": ["Chinese", "English"],
+    "website": {
+      "label": "patreon.com/evanyou",
+      "url": "https://www.patreon.com/evanyou"
+    },
+    "social": {
+      "twitter": "youyuxi",
+      "github": "yyx990803"
+    }
+  },
+  {
+    "name": "Ben Hong",
+    "title": "Staff Developer Experience Engineer",
+    "company": "Netlify",
+    "projects": [],
+    "location": {
+      "label": "Washington, DC, USA"
+    },
+    "languageList": ["Chinese", "English"],
+    "website": {
+      "label": "bencodezen.io",
+      "url": "https://www.bencodezen.io"
+    },
+    "social": {
+      "twitter": "bencodezen",
+      "github": "bencodezen"
+    }
+  }
+]

src/about/images/evan-you.jpeg

@@ -1 +1,24 @@
-# Meet the Team
+<script setup>
+import TeamCard from '../.vitepress/components/TeamCard.vue'
+import teamData from './team.json'
+</script>
+
+# Meet the Team
+
+The development of Vue and its ecosystem is guided by an international team, some of whom have chosen to be featured below.
+
+[See Vue Team Charter to learn more about teams →]()
+
+## Core Team Members
+
+In general, core team members are expected to maintain a consistent presence in the project. e also look for contributions over a longer period of time, so that we know the community can depend on the members long term.
+
+<TeamCard
+  v-for="member in teamData"
+  :key="member.name"
+  :profile="member"
+/>
+
+## Team Members
+
+The Vue.js Team consists of members in the community who have provided valuable contributions to the community and are recognized for their efforts and time.