sort

src/components/astro/PostCard.astro

@@ -21,12 +21,15 @@ const { post } = Astro.props
                 height={150}
                 width={300}
                 class="h-[300px] w-full rounded-lg bg-slate-400 object-cover dark:bg-slate-600"
-                transition:name="blog-image"
+                transition:name={`blog-image-${post.slug}`}
             />
         </div>
 
         <div class="mt-4 flex flex-col gap-2">
-            <p class="font-bold lg:text-lg" transition:name="blog-title">
+            <p
+                class="font-bold lg:text-lg"
+                transition:name={`blog-title-${post.slug}`}
+            >
                 {post.data.title}
             </p>
 

src/components/vue/TechStackCard.vue

@@ -31,9 +31,9 @@ defineProps<{
                     readonly
                     :cancel="false"
                     :stars="10"
-                    class="flex justify-center gap-0"
                     :pt="{
                         onicon: '!text-yellow-500',
+                        root: '!gap-0',
                     }"
                     :pt-options="{
                         mergeProps: true,
@@ -53,9 +53,9 @@ defineProps<{
                     readonly
                     :cancel="false"
                     :stars="10"
-                    class="flex justify-center gap-0"
                     :pt="{
                         onicon: '!text-yellow-500',
+                        root: '!gap-0',
                     }"
                     :pt-options="{
                         mergeProps: true,

src/components/vue/TechStackList.vue

@@ -18,13 +18,17 @@ const types = Array.from(
 const selected = ref<string | null>(null)
 
 const technologyList = computed(() => {
-    if (selected.value === null) {
-        return props.technologies
+    let filteredTech = props.technologies
+
+    if (selected.value !== null) {
+        filteredTech = filteredTech.filter((technology) =>
+            technology.data.type.includes(selected.value as string),
+        )
     }
 
-    return props.technologies.filter((technology) =>
-        technology.data.type.includes(selected.value as string),
-    )
+    return filteredTech
+        .toSorted((a, b) => b.data.skill - a.data.skill)
+        .toSorted((a, b) => b.data.interest - a.data.interest)
 })
 </script>
 

src/content/technologies/laravel.json

@@ -3,7 +3,7 @@
     "name": "Laravel",
     "type": ["Framework", "Web", "Backend"],
     "logo": "/logos/laravel.svg",
-    "skill": 9,
+    "skill": 10,
     "interest": 10,
     "opinion": "In terms of building backends and server-rendered web apps, Laravel is my favorite framework to use. It's the first web framework I learned and it's the reason I love developing full-stack applications, especially now that Laravel has a very good ecosystem and libraries that really makes my life easy."
 }

src/content/technologies/vue.json

@@ -3,7 +3,7 @@
     "name": "Vue.js",
     "type": ["Framework", "Web", "Frontend"],
     "logo": "/logos/vue.svg",
-    "skill": 9,
+    "skill": 10,
     "interest": 10,
     "opinion": "I think Vue is the UI framework that makes the most sense to me. Especially the Composition API and the `<script setup>` syntax. It's very simple to use, easy to learn, scalable, and has great community support."
 }

src/pages/blog/[slug].astro

@@ -29,12 +29,12 @@ const { Content } = await entry.render()
                 alt={entry.data.title}
                 height={300}
                 width={600}
-                transition:name="blog-image"
+                transition:name={`blog-image-${entry.slug}`}
             />
 
             <h1
                 class="mt-8 text-center text-xl font-bold md:text-2xl lg:text-left lg:text-4xl"
-                transition:name="blog-title"
+                transition:name={`blog-title-${entry.slug}`}
             >
                 {entry.data.title}
             </h1>

src/pages/blog/index.astro

@@ -21,9 +21,7 @@ posts.sort((a, b) => {
             Latest Posts
         </h1>
 
-        <div
-            class="mt-16 grid grid-cols-1 gap-x-8 gap-y-12 p-4 md:grid-cols-2 lg:grid-cols-3"
-        >
+        <div class="mt-16 flex flex-wrap justify-center gap-x-8 gap-y-12 p-4">
             {posts.map((post) => <PostCard post={post} />)}
         </div>
     </section>