responsive fix

HugoRCD · Jan 24, 2025 · b387f3e · b387f3e
1 parent 4d85fb7
commit b387f3e
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 24 deletions.
diff --git a/apps/lp/app/components/ParticlesImg.vue b/apps/lp/app/components/ParticlesImg.vue
@@ -3,25 +3,17 @@
 import { NextParticle } from '~/assets/scripts/particles.js'
 
 type ParticleProps = {
-  // Image source
   src: string
-  // Image alt text
   alt?: string
-  // Particle color
   color?: string
-  // Width of the particle effect
   width?: number
-  // Maximum width of the particle effect
-  maxWidth?: number
-  // Gravity effect on particles
+  height?: number
+  mobileWidth?: number
+  mobileHeight?: number
   gravity?: number
-  // Mouse force effect on particles
   mouseForce?: number
-  // Noise level for particle movement
   noise?: number
-  // Gap between particles
   particleGap?: number
-  // Additional class names for the image
   imageClass?: string
 }
 
@@ -32,27 +24,63 @@ const props = withDefaults(defineProps<ParticleProps>(), {
   noise: 4,
   particleGap: 2,
   alt: '',
+  width: 400,
+  height: 150,
+  mobileWidth: 200,
+  mobileHeight: 100,
 })
 
 const img = ref()
+const particleInstance = ref()
+
+const isMobile = ref(false)
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
+
+const updateParticleSize = () => {
+  if (!particleInstance.value) return
+
+  const width = isMobile.value ? props.mobileWidth : props.width
+  const height = isMobile.value ? props.mobileHeight : props.height
+
+  particleInstance.value.width = width
+  particleInstance.value.height = height
+  particleInstance.value.start()
+}
 
 onMounted(() => {
+  checkMobile()
+
   // @ts-expect-error - This is not typed
-  new NextParticle({
+  particleInstance.value = new NextParticle({
     color: props.color,
     image: img.value,
-    width: props.width,
-    maxWidth: props.maxWidth,
+    width: isMobile.value ? props.mobileWidth : props.width,
+    height: isMobile.value ? props.mobileHeight : props.height,
     gravity: props.gravity,
     mouseForce: props.mouseForce,
     noise: props.noise,
     particleGap: props.particleGap
   })
+
+  window.addEventListener('resize', () => {
+    const wasMobile = isMobile.value
+    checkMobile()
+    if (wasMobile !== isMobile.value) {
+      updateParticleSize()
+    }
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
 })
 </script>
 
 <template>
-  <div>
+  <div class="particle-container">
     <img
       ref="img"
       class="hidden"
@@ -61,3 +89,10 @@ onMounted(() => {
     >
   </div>
 </template>
+
+<style scoped>
+.particle-container {
+  width: fit-content;
+  margin: 0 auto;
+}
+</style>
diff --git a/apps/lp/app/pages/about.vue b/apps/lp/app/pages/about.vue
@@ -7,15 +7,15 @@ const data = await queryCollection('about').first()
 </script>
 
 <template>
-  <div class="relative">
+  <div class="relative overflow-hidden">
     <div class="fixed z-0 inset-0">
       <div class="max-w-5xl w-full mx-auto px-4 h-screen">
         <div class="text-center w-full h-full flex flex-col italic font-mono items-center justify-center">
           <CrossedDiv line>
             <div class="p-8 pointer-events-auto flex flex-col items-center justify-center">
-              <ParticlesImg src="/shelve.svg" alt="Shelve Logo" />
-              <ScrambleText class="mt-8 mb-2 main-gradient text-6xl" label="About Shelve" />
-              <p class="max-w-lg text-center text-sm text-neutral-500 sm:text-base">
+              <ParticlesImg src="/shelve.svg" alt="Shelve Logo" :max-width="200" />
+              <ScrambleText class="mt-8 mb-2 main-gradient text-4xl sm:text-5xl" label="About Shelve" />
+              <p class="max-w-lg text-center text-xs text-neutral-500 sm:text-base">
                 Discover the story behind the project, its origins, and the journey to where we are today.
               </p>
             </div>
@@ -30,7 +30,7 @@ const data = await queryCollection('about').first()
       <USeparator />
       <div class="relative w-full pt-10 sm:pt-20 bg-neutral-950 z-10">
         <div v-for="(section, index) in data.about" :key="index" class="group max-w-5xl mx-auto px-4 pointer-events-auto">
-          <div class="grid sm:grid-cols-12 gap-16 grid-cols-1 py-16 group-last:pb-0">
+          <div class="flex flex-col sm:grid sm:grid-cols-12 gap-16 py-16 group-last:pb-0">
             <div class="col-span-5 relative">
               <ProseImg
                 :src="section.image"
@@ -40,20 +40,20 @@ const data = await queryCollection('about').first()
             </div>
             <div class="col-span-7">
               <div class="space-y-3 mb-16">
-                <div class="text-neutral-500 font-mono italic">
+                <div class="text-neutral-500 text-center sm:text-left font-mono italic">
                   Part {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}
                 </div>
-                <h2 class="text-5xl font-serif italic">
+                <h2 class="text-4xl sm:text-5xl text-center sm:text-left font-serif italic">
                   {{ section.title }}
                 </h2>
-                <MDC class="leading-relaxed text-neutral-400" :value="section.content" unwrap="p" />
+                <MDC class="text-sm leading-relaxed text-neutral-400" :value="section.content" unwrap="p" />
               </div>
             </div>
           </div>
           <USeparator class="group-last:hidden" />
         </div>
       </div>
-      <UContainer class="flex items-center justify-end py-16 bg-neutral-950">
+      <UContainer class="flex items-center justify-center sm:justify-end py-16 bg-neutral-950">
         <Signature />
       </UContainer>
     </div>