update: change the structure

apps/web/assets/styles/globals.css

@@ -41,7 +41,7 @@
   @apply flex justify-center items-center;
 }
 
-[animation^='text-word'] {
+[animation^='text-'] {
   font-kerning: none;
 }
 
@@ -56,7 +56,7 @@
 }
 
 .word {
-  @apply -my-5;
+  @apply -my-6;
 }
 
 .line-mask {

apps/web/components/base/modal/DonationModal.vue

@@ -21,6 +21,7 @@
             class="flex gap-3 w-full"
             :to="link"
             :external="link.includes('http')"
+            :target="link.includes('http') ? '_blank' : '_self'"
           >
             <i :class="icon"></i>
 

apps/web/components/base/modal/MainMenuModal.vue

@@ -22,6 +22,7 @@
             class="flex gap-3 w-full"
             :to="path"
             :external="path.includes('http')"
+            :target="path.includes('http') ? '_blank' : '_self'"
           >
             {{ label }}</NuxtLink
           >

apps/web/components/service/ServiceItem.vue

@@ -1,30 +1,32 @@
 <template>
   <div
-    class="flex gap-16 mt-32 service-item"
+    class="flex flex-col laptop:flex-row gap-10 laptop:gap-16 mt-20 laptop:mt-32 service-item"
     :class="[position % 2 == 0 ? 'flex-row' : 'flex-row-reverse']"
     ref="itemRef"
+    animation="slide-up"
   >
     <div
-      class="flex w-5/12 h-[560px] relative rounded-3xl overflow-hidden cursor-pointer mx-10 image"
+      class="flex w-full laptop:w-5/12 h-80 laptop:h-[560px] relative rounded-3xl overflow-hidden cursor-pointer laptop:mx-10 image"
       data-cursor-icon="fi fi-sr-video-camera-alt"
       data-cursor-size="80"
+      animation-target
     >
       <NuxtImg
         :src="data.image"
         class="flex h-full w-full object-cover transition-all duration-500 hover:scale-105"
       />
     </div>
-    <div class="flex flex-col w-1/2 gap-10 pt-16 content">
+    <div class="flex flex-col laptop:w-1/2 gap-10 pt-16 content">
       <h2
-        class="text-7xl font-medium leading-tight"
+        class="text-4xl laptop:text-7xl font-medium leading-tight"
         data-cursor-size="200"
         data-cursor-exclusion
-        animation="text-line-mask-opacity-scrub"
+        animation="text-char-slide-down"
       >
         {{ data.title }}
       </h2>
 
-      <div animation="text-slide-up">
+      <div animation="slide-up">
         <p class="leading-relaxed text-xl" animation-target>
           {{ data.desc }}
         </p>

apps/web/lib/queries.ts

@@ -0,0 +1,140 @@
+export const homeQuery = `
+  {
+    "posts": *[_type == "blog"] | order(_updatedAt desc)[0...3]{
+      "slug": slug.current,
+      title,
+      "thumbnail": thumbnail.asset -> url,
+      "tag": tags[0],
+      _createdAt,
+      featured,
+      "isIncoming": "Incoming" in tags[],
+    },
+    "projects": *[_type == "project"] | order(_updatedAt desc) [0...3]{
+      ...,
+      "thumbnail": thumbnail.asset -> url,
+      "slug": slug.current,
+      "tag": tags[0]
+    },
+    "apps": *[_type == "app"] | order(_created desc){
+      ...,
+      "thumbnail": thumbnail.asset -> url,
+    },
+    "products": *[_type == "product"] | order(_createdAt desc){
+      title,
+      initialPrice,
+      "thumbnail":images[0].asset->url,
+      "slug": slug.current,
+    }
+  }
+`
+
+export const aboutQuery = `
+{
+  "timelines": *[_type == "timeline"] | order(_createdAt asc){
+    ...,
+    "image": image.asset -> url,
+  },
+  "contributions": *[_type == "contribute"] | order(_updatedAt desc) [0...6]{
+    "image": image.asset ->url,
+    title,
+    desc,
+    url,
+  }
+}
+`
+
+export const bioQuery = `
+*[_type == "page" && slug.current == $slug][0]{
+  content[0]{
+    ...,
+    "avatar": avatar.asset -> url,
+    links[]{
+      ...,
+      "customColor": customColor.hex,
+    }
+  }
+}
+`
+
+export const faqQuery = `*[_type == "faq"] | order(_createdAt asc){
+  ...
+}`
+
+export const appsQuery = `*[_type == "app"] | order(_created desc){
+  ...,
+  "thumbnail": thumbnail.asset -> url,
+}`
+
+export const blogDetailQuery = `
+{
+  "post": *[_type == "blog" && slug.current == $slug][0]{
+    ...,
+    "thumbnail": thumbnail.asset -> url,
+  },
+  "related": *[_type == "blog" && slug.current != $slug && !("Incoming" in tags)] | order(_createdAt desc) [0...3]{
+    "slug": slug.current,
+    title,
+    "thumbnail": thumbnail.asset -> url,
+    "tag": tags[0],
+    _createdAt,
+    featured,
+  }
+}
+`
+
+export const blogQuery = `
+{
+  "featured": *[_type == "blog" && featured == true][0...2]{
+    "slug": slug.current,
+    title,
+    "thumbnail": thumbnail.asset -> url,
+    "tag": tags[0],
+    _createdAt,
+    featured,
+    "isIncoming": "Incoming" in tags[],
+  },
+  "latest": *[_type == "blog"] | order(_updatedAt desc){
+    "slug": slug.current,
+    title,
+    "thumbnail": thumbnail.asset -> url,
+    "tag": tags[0],
+    _createdAt,
+    featured,
+    "isIncoming": "Incoming" in tags[],
+  }
+}
+`
+
+export const projectQuery = `
+{
+  "projects": *[_type == "project"]{
+    ...,
+    "thumbnail": thumbnail.asset -> url,
+    "slug": slug.current,
+    "tag": tags[0]
+  }
+}
+`
+
+export const productDetailQuery = `*[_type == "product" && slug.current == $slug][0]{
+  ...,
+  "slug": slug.current,
+  "images": images[].asset -> url,
+}`
+
+export const productsQuery = `
+{
+  "recomendeds": *[_type == "product"] | order(_createdAt desc)[0...4]{
+    title,
+    initialPrice,
+    "thumbnail":images[0].asset->url,
+    "slug": slug.current,
+  },
+  "products": *[_type == "product"] | order(_createdAt desc){
+    title,
+    initialPrice,
+    "thumbnail":images[0].asset->url,
+    "slug": slug.current,
+  }
+}
+`

apps/web/pages/about.vue

@@ -34,7 +34,7 @@
       <div
         class="flex flex-col laptop:w-8/12 text-xl leading-relaxed gap-10 mt-36"
       >
-        <div animation="text-slide-up" class="flex-none">
+        <div animation="slide-up" class="flex-none">
           <p animation-target>
             Hello, My name is Nyoman Sunima, a product designer and creative
             developer with a passion for solving problems. My journey as a
@@ -49,7 +49,7 @@
             impression.
           </p>
         </div>
-        <div animation="text-slide-up" class="flex-none">
+        <div animation="slide-up" class="flex-none">
           <p animation-target>
             But my expertise doesn't stop at design. I'm also a creative
             developer equipped with technical skills to bring ideas to life.
@@ -83,7 +83,7 @@
       <div
         class="grid grid-cols-1 laptop:grid-cols-2 text-xl leading-relaxed gap-10 mt-20 laptop:mt-36"
       >
-        <div animation="text-slide-up">
+        <div animation="slide-up">
           <p animation-target>
             My daily activities revolve around the exciting process of
             transforming concepts into fully-fledged applications. From the very
@@ -95,7 +95,7 @@
             process.
           </p>
         </div>
-        <div animation="text-slide-up">
+        <div animation="slide-up">
           <p animation-target>
             Design is where the magic happens. With a keen eye for aesthetics
             and an understanding of user experience, I create captivating
@@ -109,7 +109,7 @@
             forms the backbone of the final product.
           </p>
         </div>
-        <div animation="text-slide-up">
+        <div animation="slide-up">
           <p animation-target>
             I believe in the power of shipping products that make a real impact.
             With careful testing, bug fixes, and optimizations, I ensure that
@@ -208,7 +208,7 @@
         class="text-5xl laptop:text-8xl text-center !leading-tight"
         data-cursor-size="200"
         data-cursor-text="Contact Now"
-        animation="text-slide-up"
+        animation="slide-up"
       >
         <div animation-target>
           Let's make your idea become reality. We can discuss anything.
@@ -222,6 +222,7 @@
 import { AboutDetail } from '~/types/content'
 import data from '~/assets/data/about.json'
 import AboutCareerItem from '~/components/about/AboutCareerItem.vue'
+import { aboutQuery } from '~/lib/queries'
 
 definePageMeta({
   layout: 'main',
@@ -235,22 +236,9 @@ useSeoMeta({
 
 const {
   data: {
-    value: { stories, timelines, contributions },
+    value: { timelines },
   },
-} = await useSanityQuery<AboutDetail>(`
-  {
-    "timelines": *[_type == "timeline"] | order(_createdAt asc){
-      ...,
-      "image": image.asset -> url,
-    },
-    "contributions": *[_type == "contribute"] | order(_updatedAt desc) [0...6]{
-      "image": image.asset ->url,
-      title,
-      desc,
-      url,
-    }
-  }
-`)
+} = await useSanityQuery<AboutDetail>(aboutQuery)
 
 // animate the elements
 onMounted(() => {

apps/web/pages/apps/index.vue

@@ -74,6 +74,7 @@
 <script setup lang="ts">
 import { gsap } from 'gsap'
 import { MotionPathPlugin } from 'gsap/all'
+import { appsQuery } from '~/lib/queries'
 import { App } from '~/types/content'
 
 definePageMeta({
@@ -87,10 +88,7 @@ useSeoMeta({
 
 const {
   data: { value: apps },
-} = await useSanityQuery<App[]>(`*[_type == "app"] | order(_created desc){
-  ...,
-  "thumbnail": thumbnail.asset -> url,
-}`)
+} = await useSanityQuery<App[]>(appsQuery)
 
 // animate the everything element inside
 onMounted(() => {

apps/web/pages/bio.vue

@@ -157,24 +157,13 @@
 </template>
 
 <script setup lang="ts">
+import { bioQuery } from '~/lib/queries'
 import { BioContent } from '~/types/content'
-const query = `
-  *[_type == "page" && slug.current == $slug][0]{
-    content[0]{
-      ...,
-      "avatar": avatar.asset -> url,
-      links[]{
-        ...,
-        "customColor": customColor.hex,
-      }
-    }
-  }
-`
 const {
   data: {
     value: { content },
   },
-} = await useSanityQuery<{ content: BioContent }>(query, {
+} = await useSanityQuery<{ content: BioContent }>(bioQuery, {
   slug: 'bio',
 })
 

apps/web/pages/blog/[slug].vue

@@ -53,6 +53,7 @@
 </template>
 
 <script setup lang="ts">
+import { blogDetailQuery } from '~/lib/queries'
 import { BlogDetail } from '~/types/content'
 
 definePageMeta({
@@ -66,27 +67,11 @@ const {
 
 // fetching the post including with
 // related posts
-const query = `
-  {
-    "post": *[_type == "blog" && slug.current == $slug][0]{
-      ...,
-      "thumbnail": thumbnail.asset -> url,
-    },
-    "related": *[_type == "blog" && slug.current != $slug && !("Incoming" in tags)] | order(_createdAt desc) [0...3]{
-      "slug": slug.current,
-      title,
-      "thumbnail": thumbnail.asset -> url,
-      "tag": tags[0],
-      _createdAt,
-      featured,
-    }
-  }
-`
 const {
   data: {
     value: { post, related },
   },
-} = await useSanityQuery<BlogDetail>(query, {
+} = await useSanityQuery<BlogDetail>(blogDetailQuery, {
   slug: route.params.slug,
 })