Refactor code structure for improved readability and maintainability

app/pages/activity.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<style scoped>
+
+</style>

app/pages/ecosystem.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<style scoped>
+
+</style>

app/pages/hobbies.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const { data: page } = await useAsyncData('hobbies', () => {
+  return queryCollection('hobbies').first()
+})
+</script>
+
+<template>
+  <main>
+    <ContentRenderer
+      v-if="page"
+      :value="page"
+      class="mt-8 md:mt-16"
+    />
+  </main>
+</template>

app/pages/index.vue

@@ -16,6 +16,9 @@ const { data: page } = await useAsyncData('index', () => {
       :value="page"
       class="mt-8 md:mt-16"
     />
+    <HomeSkills />
+    <HomeEducation />
+    <HomeExperiences />
     <HomeStats />
     <HomeActivity />
     <HomeQuote />

app/pages/projects.vue

@@ -1,13 +1,12 @@
 <script lang="ts" setup>
-
+const { data: projects } = await useAsyncData('projects', () => {
+  return queryCollection('projects').all()
+})
 </script>
 
 <template>
   <div>
     PROJECTS PAGE
+    {{ projects }}
   </div>
 </template>
-
-<style scoped>
-
-</style>

app/pages/uses.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const { data: page } = await useAsyncData('uses', () => {
+  return queryCollection('uses').first()
+})
+</script>
+
+<template>
+  <main>
+    <ContentRenderer
+      v-if="page"
+      :value="page"
+      class="mt-8 md:mt-16"
+    />
+  </main>
+</template>