fix Vue components

Author: cedi

docs/.vuepress/components/Contributors.vue

@@ -1,16 +1,25 @@
 <template>
-    <div v-if="hasContributors">
-        <h2>Contributors</h2>
-
-        <div class="contributors-list">
-            <div class="contributor" v-for="contributor in contributors" :key="contributor.login">
-                <img class="contributor__avatar" :src="contributor.avatar_url" :alt="'The avatar used by ' + contributor.login" width="80" height="80">
-                <a class="contributor__name" :href="contributor.html_url">{{ contributor.login }} <OutboundLink/></a>
-            </div>
-        </div>
+<div v-if="hasContributors">
+    <h2 class="title">Contributors</h2>
+    <p class="description">Your contributions matter. Here's to everyone who's helped bring this to life.</p>
+    <div class="contributors-list">
+    <div class="contributor" v-for="contributor in contributors" :key="contributor.login">
+        <img
+        class="contributor__avatar"
+        :src="contributor.avatar_url"
+        :alt="'The avatar used by ' + contributor.login"
+        width="80"
+        height="80"
+        />
+        <a class="contributor__name" :href="contributor.html_url">{{ contributor.login }} <OutboundLink/></a>
+    </div>
     </div>
+</div>
 </template>
 
+
+
+
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
 
@@ -61,28 +70,46 @@ export default defineComponent({
 </script>
 
 <style scoped>
-    .contributors-list {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        flex-wrap: wrap;
-    }
+.contributors-list {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
 
-    .contributor {
-        display: flex;
-        flex-direction: column;
-        align-content: center;
-        justify-content: space-between;
-        margin: 20px;
-    }
+.contributor {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: space-between;
+    margin: 20px;
+}
 
-    .contributor__avatar {
-        border-radius: 50%;
-        display: inline-block;
-        margin: 5px auto;
-    }
+.contributor__avatar {
+    border-radius: 50%;
+    display: inline-block;
+    margin: 5px auto;
+}
 
-    .contributor__name {
-        margin: 5px auto;
-    }
+.contributor__name {
+    margin: 5px auto;
+}
+
+.title {
+    font-size: 28px;
+    font-weight: 900;
+    margin-bottom: 20px;
+    text-align: center;
+    transition: color var(--vp-t-color);
+    color: var(--vp-c-text-1);
+}
+
+.description {
+    font-size: 18px;
+    font-weight: 400;
+    margin-bottom: 20px;
+    text-align: center;
+    transition: color var(--vp-t-color);
+    color: var(--vp-c-text-1);
+}
 </style>

docs/.vuepress/components/Projects.vue

@@ -1,5 +1,6 @@
 <template>
-  <h2>Projects</h2>
+  <h2 class="section_title">Projects</h2>
+  <p class="section_description">Built in public. Shared for everyone. Explore the repositories powering my experiments and tools.</p>
   <br/>
   <div>
     <div v-if="loading" class="loading">Loading projects...</div>
@@ -175,4 +176,22 @@ onMounted(fetchProjects)
 .link-text-icon {
   margin-left: 6px;
 }
+
+.section_title {
+    font-size: 28px;
+    font-weight: 900;
+    margin-bottom: 20px;
+    text-align: center;
+    transition: color var(--vp-t-color);
+    color: var(--vp-c-text-1);
+}
+
+.section_description {
+    font-size: 18px;
+    font-weight: 400;
+    margin-bottom: 20px;
+    text-align: center;
+    transition: color var(--vp-t-color);
+    color: var(--vp-c-text-1);
+}
 </style>