feat: refine portfolio content, contact, and supporting media

src/composables/useLazyMedia.ts

@@ -13,6 +13,7 @@ export const MEDIA_ACTIVATION_MARGIN = '300px 0px 300px 0px';
 export function useLazyMedia(
   target: Readonly<Ref<Element | null>>,
   allowAutomatic: MaybeRef<boolean>,
+  activationMargin = MEDIA_ACTIVATION_MARGIN,
 ): LazyMediaState {
   const nearby = shallowRef(false);
   const explicitRequested = shallowRef(false);
@@ -44,7 +45,7 @@ export function useLazyMedia(
         const inActivationRange = entries.some((entry) => entry.isIntersecting);
         nearby.value = inActivationRange;
         if (!inActivationRange) clearExplicit();
-      }, { root, rootMargin: MEDIA_ACTIVATION_MARGIN, threshold: 0 });
+      }, { root, rootMargin: activationMargin, threshold: 0 });
       observer.observe(element);
     };
     observe();