feature: add code icon

Author: bencodezen

src/.vitepress/components/IconCode.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.3333 12.0833C10.1583 12.0833 10.0417 12.025 9.925 11.9083C9.69167 11.675 9.69167 11.325 9.925 11.0917L13.0167 7.99999L9.925 4.90832C9.69167 4.67499 9.69167 4.32499 9.925 4.09166C10.1583 3.85832 10.5083 3.85832 10.7417 4.09166L14.2417 7.59166C14.475 7.82499 14.475 8.17499 14.2417 8.40832L10.7417 11.9083C10.625 12.025 10.5083 12.0833 10.3333 12.0833Z"
+      fill="#3C3C3C"
+      fill-opacity="0.6"
+    />
+    <path
+      d="M5.66683 12.0833C5.49183 12.0833 5.37516 12.025 5.2585 11.9083L1.7585 8.40832C1.52516 8.17499 1.52516 7.82499 1.7585 7.59166L5.2585 4.09166C5.49183 3.85832 5.84183 3.85832 6.07516 4.09166C6.3085 4.32499 6.3085 4.67499 6.07516 4.90832L2.9835 7.99999L6.07516 11.0917C6.3085 11.325 6.3085 11.675 6.07516 11.9083C5.9585 12.025 5.84183 12.0833 5.66683 12.0833Z"
+      fill="#3C3C3C"
+      fill-opacity="0.6"
+    />
+  </svg>
+</template>

src/.vitepress/components/TeamCard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, defineProps } from 'vue'
 import { VTIconGitHub, VTIconTwitter } from '@vue/theme'
+import IconCode from './IconCode.vue'
 
 const props = defineProps({
   profile: {
@@ -32,16 +33,24 @@ const imageAlt = computed(() => {
         <span v-if="profile.company">@ {{ profile.company }}</span>
       </p>
       <div class="member-details">
-        <h4 v-if="profile.projectList.length > 0" class="sr-only">Projects</h4>
-        <ul v-if="profile.projectList.length > 0" class="member-language-list">
-          <li
-            v-for="project in profile.projectList"
-            :key="`${profile.name}-project-${project}`"
-            class="member-language"
+        <div class="member-project-wrapper">
+          <h4 v-if="profile.projectList.length > 0" class="sr-only">
+            Projects
+          </h4>
+          <IconCode />
+          <ul
+            v-if="profile.projectList.length > 0"
+            class="member-language-list"
           >
-            <a :href="project.url">{{ project.label }}</a>
-          </li>
-        </ul>
+            <li
+              v-for="project in profile.projectList"
+              :key="`${profile.name}-project-${project}`"
+              class="member-language"
+            >
+              <a :href="project.url">{{ project.label }}</a>
+            </li>
+          </ul>
+        </div>
         <address>{{ profile.location.label }}</address>
         <h4 class="sr-only">Languages</h4>
         <ul class="member-language-list">
@@ -115,6 +124,9 @@ const imageAlt = computed(() => {
 .member-language {
   margin-right: 34px;
 }
+.member-language:first-child {
+  margin-left: 10px;
+}
 
 .member-language:first-child:before {
   display: none;
@@ -132,6 +144,11 @@ const imageAlt = computed(() => {
   border-radius: 50%;
 }
 
+.member-project-wrapper {
+  display: flex;
+  align-items: center;
+}
+
 .member-social-icon {
   width: 24px;
   height: 24px;