Divide project tab into sections

src/components/content/projects.vue

@@ -1,5 +1,6 @@
 <script setup>
     import ProjectPreview from "../project-preview.vue";
+    import CountHeading from "../count-heading.vue";
 
     const props = defineProps(["projects"]);
 
@@ -8,16 +9,33 @@
     const projects_sorted = projects_random.sort((a, b) => {
         return a.year == b.year ? b.rating - a.rating : b.year - a.year
     });
+
+    let pinned_projects = [], open_source_projects = [], other_projects = [];
+    for (const project of projects_sorted) {
+        if (project.rating >= 4) pinned_projects.push(project);
+        else if (project.github) open_source_projects.push(project);
+        else other_projects.push(project);
+    }
 </script>
 
 <template>
     <div class="content-inner">
         <h1>Random Project</h1>
         <ProjectPreview :project="random_project" />
 
-        <h1>All Projects</h1>
+        <CountHeading :count="pinned_projects.length">Pinned Projects</CountHeading>
+        <div class="projects">
+            <ProjectPreview v-for="(project, index) in pinned_projects" :key="index" :project="project" />
+        </div>
+
+        <CountHeading :count="open_source_projects.length">Open Source Projects</CountHeading>
+        <div class="projects">
+            <ProjectPreview v-for="(project, index) in open_source_projects" :key="index" :project="project" />
+        </div>
+
+        <CountHeading :count="other_projects.length">Other Projects</CountHeading>
         <div class="projects">
-            <ProjectPreview v-for="(project, index) in projects_sorted" :key="index" :project="project" />
+            <ProjectPreview v-for="(project, index) in other_projects" :key="index" :project="project" />
         </div>
     </div>
 </template>

src/components/count-heading.vue

@@ -0,0 +1,16 @@
+<template>
+    <h1><slot /> <span class="count faded">({{ count }})</span></h1>
+</template>
+
+<script setup>
+    defineProps({
+        count: Number
+    })
+</script>
+
+<style scoped>
+    .count {
+        font-size: 1.75rem;
+        font-weight: 600;
+    }
+</style>