fix: jumps

jamerrq · Mar 23, 2024 · d45cc0e · d45cc0e
1 parent 9faaca7
commit d45cc0e
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 32 deletions.
diff --git a/src/components/blog/blog-about.astro b/src/components/blog/blog-about.astro
@@ -13,7 +13,7 @@ const ABOUT_STYLES = [
   'text-black',
   'font-rubik-doodle',
   'w-full',
-  'h-full',
+  'xl:h-full',
   'transition-all',
   'hover:border-2',
   'dark:border-amber-300',

diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx
@@ -13,10 +13,8 @@ const LAST_ENTRIES_STYLES = [
   'w-full',
   'h-full',
   'transition-all',
-  // 'border-2',
   'dark:border-slate-300',
   'border-slate-950',
-  'responsive-text-xs',
   'gap-2',
   'text-slate-900',
   'dark:text-slate-300',
@@ -87,11 +85,11 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
       <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-4xl text-center'>
         - {lang === 'en' ? 'Last Entries' : 'Últimas Entradas'} -
       </h1>
-      <ul class='grid grid-cols-[1fr_5fr] gap-3 w-full h-full p-2 responsive-text-sm'>
-        <li />
-        <li class='dark:text-cyan-400 text-cyan-950 text-xl' />
+      <ul class='xl:grid xl:grid-cols-[1fr_5fr] flex flex-col gap-5 w-full h-full p-2'>
         {entries
-          .filter((entry) => entry.active !== 'false')
+          .filter(
+            (entry) => entry.active !== 'false' && entry.date !== 'Coming soon'
+          )
           .sort((a, b) => {
             const dateA = new Date(a.date).getTime()
             if (isNaN(dateA)) return 1
@@ -102,10 +100,12 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
           .map((entry, index) => {
             return (
               <Fragment key={index}>
-                <li class='font-merriweather text-sm xl:text-base text-center'>
-                  {entry.date}
+                <li class='font-averia uppercase text-sm xl:text-base text-center rounded-sm xl:h-full dark:text-emerald-100 text-emerald-950 items-center flex w-full'>
+                  <span class='grow dark:bg-emerald-300/60 bg-emerald-800/60 p-2 rounded'>
+                    {entry.date}
+                  </span>
                 </li>
-                <li class='font-merriweather text-sm xl:text-base  py-1 px-2 rounded-sm cursor-pointer hover:border-2 transition-all ease-in-out flex flex-col gap-2'>
+                <li class='font-averia uppercase text-sm xl:text-base py-2 px-2 rounded-sm cursor-pointer hover:bg-emerald-300/40 border-emerald-200 transition-all ease-in-out flex flex-col gap-2'>
                   <a href={`${lang === 'en' ? entry.href : entry.hrefEs}`}>
                     <div class='flex flex-col xl:flex-row gap-4'>
                       <span>{lang === 'en' ? entry.title : entry.titleEs}</span>

diff --git a/src/components/featured-and-projects/about.astro b/src/components/featured-and-projects/about.astro
@@ -13,7 +13,7 @@ const ABOUT_STYLES = [
   'text-black',
   'font-rubik-doodle',
   'w-full',
-  'h-full',
+  'xl:h-full',
   'transition-all',
   'text-3xl',
   'flex-row',

diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
@@ -22,7 +22,7 @@ const PROJECT_STYLES: string = [
   'font-bold',
   'font-rubik-doodle',
   'w-full',
-  'xl:h-[400px] h-[300px]',
+  'h-[50%]',
   'xl:h-full',
   'transition-all',
   'text-emerald-950',
@@ -100,21 +100,21 @@ function ResourceCard({
   const goRight = () => {
     index.value++
     if (index.value > data.length - 1) index.value = 0
-    // insert the 'animate-fade-in-left' class
+    // insert the 'xl:animate-fade-in-left' class
     const el = document.querySelector('#project-card')
-    el?.classList.add('animate-fade-in-left')
+    el?.classList.add('xl:animate-fade-in-left')
     el?.addEventListener('animationend', () => {
-      el?.classList.remove('animate-fade-in-left')
+      el?.classList.remove('xl:animate-fade-in-left')
     })
   }
   const goLeft = () => {
     index.value--
     if (index.value < 0) index.value = data.length - 1
-    // insert the 'animate-fade-in-left' class
+    // insert the 'xl:animate-fade-in-left' class
     const el = document.querySelector('#project-card')
-    el?.classList.add('animate-fade-in-left')
+    el?.classList.add('xl:animate-fade-in-left')
     el?.addEventListener('animationend', () => {
-      el?.classList.remove('animate-fade-in-left')
+      el?.classList.remove('xl:animate-fade-in-left')
     })
   }
   return (

diff --git a/src/components/featured-and-projects/resources.tsx b/src/components/featured-and-projects/resources.tsx
@@ -13,7 +13,8 @@ const RESOURCE_STYLES: string = [
   'font-bold',
   'font-rubik-doodle',
   'w-full',
-  'h-full',
+  'xl:h-full',
+  'h-[10%]',
   'transition-all',
   'text-cyan-950',
   'dark:text-cyan-300',
@@ -91,18 +92,18 @@ export default function Resources({ n = 3 }: ResourceProps) {
     index.value++
     if (index.value > data.length - 1) index.value = 0
     const lastResource = document.getElementById('last-resource')
-    lastResource?.classList.add('animate-fade-in-left')
+    lastResource?.classList.add('xl:animate-fade-in-left')
     lastResource?.addEventListener('animationend', () => {
-      lastResource?.classList.remove('animate-fade-in-left')
+      lastResource?.classList.remove('xl:animate-fade-in-left')
     })
   }
   const goLeft = () => {
     index.value--
     if (index.value < 0) index.value = data.length - 1
     const firstResource = document.getElementById('first-resource')
-    firstResource?.classList.add('animate-fade-in-right')
+    firstResource?.classList.add('xl:animate-fade-in-right')
     firstResource?.addEventListener('animationend', () => {
-      firstResource?.classList.remove('animate-fade-in-right')
+      firstResource?.classList.remove('xl:animate-fade-in-right')
     })
   }
 

diff --git a/src/components/main/bento.astro b/src/components/main/bento.astro
@@ -1,5 +1,5 @@
 <section
-  class='bg-transparent flex flex-col xl:grid items-center justify-center xl:h-[95dvh] w-[95dvw] lg:w-[85dvw] rounded-sm shadow-xl auto-cols-auto grid-cols-6 grid-rows-6 gap-2 px-2 py-8 xl:py-4'
+  class='bg-transparent flex flex-col xl:grid items-center justify-center xl:h-[95dvh] w-[95dvw] lg:w-[85dvw] rounded-sm shadow-xl auto-cols-auto grid-cols-6 grid-rows-6 gap-2 px-2 py-8 xl:py-4 min-h-[90dvh]'
 >
   <slot />
 </section>
diff --git a/src/components/main/buttons.astro b/src/components/main/buttons.astro
@@ -17,7 +17,7 @@ const BUTTONS_STYLES = [
   'text-slate-950',
   'font-rubik-doodle',
   'w-full',
-  'h-full',
+  'xl:h-full',
   'transition-all',
   'duration-200',
   'dark:bg-slate-900/95',

diff --git a/src/components/main/project.astro b/src/components/main/project.astro
@@ -27,8 +27,8 @@ const project = projects.at(index) as Project
 const SVGS_STYLES = [
   'w-5',
   'h-5',
-  'xl:w-7',
-  'xl:h-7',
+  'xl:w-8',
+  'xl:h-8',
   'hover:scale-110',
   'shadow bg-white/50 p-1 rounded dark:bg-slate-900/80'
 ].join(' ')
@@ -49,13 +49,14 @@ import { Image } from 'astro:assets'
   >
     {lang === 'en' ? project?.title.en : project?.title.es}
   </h1>
-  <section class='bg-transparent w-full flex justify-center items-center'>
+  <section class='bg-transparent w-full flex items-center'>
     <Image
       src={project?.image}
       alt={`snap for ${project?.title.en}`}
-      width='150'
-      height='50'
+      width='960'
+      height='720'
       loading='eager'
+      class='aspect-[4/3] w-40'
     />
     <aside class='flex flex-col items'>
       <div class='flex gap-2 items-center justify-center'>
@@ -74,7 +75,7 @@ import { Image } from 'astro:assets'
           })
         }
       </div>
-      <span>
+      <span class='font-averia'>
         Demo: {project?.preview ? '' : 'coming soon'}
       </span>
     </aside>

diff --git a/src/data/blog.json b/src/data/blog.json
@@ -11,7 +11,8 @@
         "astro",
         "tailwindcss",
         "preact",
-        "portfolio"
+        "portfolio",
+        "ssr"
       ]
     },
     {