fix: version issues

GonzaloHirsch · Apr 6, 2024 · 0c3969d · 0c3969d
1 parent bff003d
commit 0c3969d
Show file tree

Hide file tree

Showing 7 changed files with 12,523 additions and 16,502 deletions.
diff --git a/assets/img/edinburgh.webp b/assets/img/edinburgh.webp
diff --git a/components/experience/list.vue b/components/experience/list.vue
@@ -1,53 +1,56 @@
 <template>
-    <div>
-        <ContentList path="/experience" v-slot="{ list }">
-            <div class="grid grid-cols-10 gap-8">
-                <template v-for="item in list" :key="item._path">
-                    <div
-                        class="col-span-full md:col-span-3 lg:col-span-2 rounded-md border-2 border-brand_primary_light dark:border-brand_primary_dark overflow-x-scroll md:overflow-hidden"
-                    >
-                        <ul class="flex flex-row md:flex-col">
-                            <template v-for="(exp, index) in item.experience" :key="index">
-                                <li
-                                    @click="() => toggleIndex(index)"
-                                    :class="[
-                                        'cursor-pointer flex flex-col items-center justify-center md:text-lg md:leading-lg text-center py-2 px-4 hover:bg-brand_primary_light hover:text-typography_primary_dark dark:hover:bg-brand_primary_dark dark:hover:text-typography_primary_light',
-                                        currentIndex === index
-                                            ? 'bg-brand_primary_light text-background_light dark:text-typography_primary_light dark:bg-brand_primary_dark'
-                                            : 'text-typography_primary_light dark:text-typography_primary_dark'
-                                    ]"
-                                >
-                                    {{ exp.company.short }}
-                                </li>
-                            </template>
-                        </ul>
-                    </div>
-                </template>
-                <template v-for="item in list" :key="item._path">
-                    <div
-                        class="experience-list col-span-full md:col-span-7 lg:col-span-8 rounded-md border-2 border-brand_primary_light dark:border-brand_primary_dark p-4"
-                    >
-                        <template v-for="(exp, index) in item.experience" :key="index">
-                            <ExperienceItem :data="exp" :class="[currentIndex === index ? 'block' : 'hidden']" />
-                        </template>
-                    </div>
-                </template>
-            </div>
-        </ContentList>
+  <div>
+    <div class="grid grid-cols-10 gap-8">
+      <template v-for="item in list" :key="item._path">
+        <div
+          class="col-span-full md:col-span-3 lg:col-span-2 rounded-md border-2 border-brand_primary_light dark:border-brand_primary_dark overflow-x-scroll md:overflow-hidden"
+        >
+          <ul class="flex flex-row md:flex-col">
+            <template v-for="(exp, index) in item.experience" :key="index">
+              <li
+                @click="() => toggleIndex(index)"
+                :class="[
+                  'cursor-pointer flex flex-col items-center justify-center md:text-lg md:leading-lg text-center py-2 px-4 hover:bg-brand_primary_light hover:text-typography_primary_dark dark:hover:bg-brand_primary_dark dark:hover:text-typography_primary_light',
+                  currentIndex === index
+                    ? 'bg-brand_primary_light text-background_light dark:text-typography_primary_light dark:bg-brand_primary_dark'
+                    : 'text-typography_primary_light dark:text-typography_primary_dark',
+                ]"
+              >
+                {{ exp.company.short }}
+              </li>
+            </template>
+          </ul>
+        </div>
+      </template>
+      <template v-for="item in list" :key="item._path">
+        <div
+          class="experience-list col-span-full md:col-span-7 lg:col-span-8 rounded-md border-2 border-brand_primary_light dark:border-brand_primary_dark p-4"
+        >
+          <template v-for="(exp, index) in item.experience" :key="index">
+            <ExperienceItem
+              :data="exp"
+              :class="[currentIndex === index ? 'block' : 'hidden']"
+            />
+          </template>
+        </div>
+      </template>
     </div>
+  </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
 const currentIndex = ref(0);
 const toggleIndex = (index) => {
-    currentIndex.value = index;
+  currentIndex.value = index;
 };
+
+const list = await queryContent('/experience').find();
 </script>
 
 <style scoped>
 .experience-list {
-    min-height: 55vh;
+  min-height: 55vh;
 }
 </style>
diff --git a/components/films/item.vue b/components/films/item.vue
@@ -7,11 +7,10 @@
     class="rounded-md overflow-hidden relative group"
   >
     <NuxtImg
+      :key="movie.img"
       :src="movie.img"
       :alt="`Poster for ${movie.title}.`"
       loading="lazy"
-      width="240"
-      height="360"
     />
     <div
       class="absolute bottom-0 left-0 w-full bg-brand_primary_light text-typography_primary_dark dark:bg-brand_primary_dark dark:text-typography_primary_light px-2 py-1 movie-info translate-y-full transform transition-transform duration-200 group-hover:translate-y-0"

diff --git a/components/images/grid.vue b/components/images/grid.vue
@@ -1,52 +1,86 @@
 <template>
-    <div class="grid grid-cols-8 grid-rows-8 gap-2">
-        <div class="grid-image-wrapper row-start-5 row-span-1 col-start-3 col-span-3">
-            <img :src="props.imageTL.src" :alt="props.imageTL.alt" srcset="" class="grid-image"/>
-            <div class="image-overlay bg-brand_primary_light dark:bg-brand_primary_dark"/>
-        </div>
-        <div class="grid-image-wrapper row-start-6 row-span-5 col-span-5">
-            <img :src="props.imageBL.src" :alt="props.imageBL.alt" srcset="" class="grid-image" />
-            <div class="image-overlay bg-brand_primary_light dark:bg-brand_primary_dark"/>
-        </div>
-        <div class="grid-image-wrapper row-start-1 row-[span_7_/_span_7] col-start-6 col-span-3">
-            <img :src="props.imageTR.src" :alt="props.imageTR.alt" srcset="" class="grid-image" />
-            <div class="image-overlay bg-brand_primary_light dark:bg-brand_primary_dark"/>
-        </div>
-        <div class="grid-image-wrapper row-start-8 row-span-2 col-start-6 col-span-2">
-            <img :src="props.imageBR.src" :alt="props.imageBR.alt" srcset="" class="grid-image" />
-            <div class="image-overlay bg-brand_primary_light dark:bg-brand_primary_dark"/>
-        </div>
+  <div class="grid grid-cols-8 grid-rows-8 gap-2">
+    <div
+      class="grid-image-wrapper row-start-2 row-span-3 col-start-2 col-span-3"
+    >
+      <img
+        :src="props.imageTL.src"
+        :alt="props.imageTL.alt"
+        srcset=""
+        class="grid-image"
+      />
+      <div
+        class="image-overlay bg-brand_primary_light dark:bg-brand_primary_dark"
+      />
     </div>
+    <div class="grid-image-wrapper row-start-5 row-span-4 col-span-4">
+      <img
+        :src="props.imageBL.src"
+        :alt="props.imageBL.alt"
+        srcset=""
+        class="grid-image"
+      />
+      <div
+        class="image-overlay bg-brand_primary_light dark:bg-brand_primary_dark"
+      />
+    </div>
+    <div
+      class="grid-image-wrapper row-start-1 row-span-5 col-start-5 col-span-3"
+    >
+      <img
+        :src="props.imageTR.src"
+        :alt="props.imageTR.alt"
+        srcset=""
+        class="grid-image"
+      />
+      <div
+        class="image-overlay bg-brand_primary_light dark:bg-brand_primary_dark"
+      />
+    </div>
+    <div
+      class="grid-image-wrapper row-start-6 row-span-2 col-start-5 col-span-2"
+    >
+      <img
+        :src="props.imageBR.src"
+        :alt="props.imageBR.alt"
+        srcset=""
+        class="grid-image"
+      />
+      <div
+        class="image-overlay bg-brand_primary_light dark:bg-brand_primary_dark"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
 const props = defineProps({
-    imageTR: {
-        type: Object
-    },
-    imageTL: {
-        type: Object
-    },
-    imageBR: {
-        type: Object
-    },
-    imageBL: {
-        type: Object
-    }
+  imageTR: {
+    type: Object,
+  },
+  imageTL: {
+    type: Object,
+  },
+  imageBR: {
+    type: Object,
+  },
+  imageBL: {
+    type: Object,
+  },
 });
 </script>
 
 <style scoped>
 .grid-image {
-    @apply object-cover z-[1] w-full h-full;
+  @apply object-cover z-[1] w-full h-full;
 }
 .grid-image-wrapper:hover {
-    @apply shadow-lg;
+  @apply shadow-lg;
 }
 .image-overlay {
   @apply w-full h-full opacity-25 absolute top-0 left-0 z-[2];
 }
 .grid-image-wrapper {
-    @apply relative overflow-hidden z-[1] rounded-sm duration-300 transition-all;
+  @apply relative overflow-hidden z-[1] rounded-sm duration-300 transition-all;
 }
-</style>
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -68,7 +68,12 @@ for (let i = 1; i <= blogPageCount; i++) {
 }
 
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss', '@nuxt/content', '@nuxtjs/color-mode'],
+  modules: [
+    '@nuxtjs/tailwindcss',
+    '@nuxt/content',
+    '@nuxtjs/color-mode',
+    '@nuxt/image',
+  ],
   colorMode: {
     classSuffix: '',
     preference: 'light',