chore: some fixes and styles

jamerrq · Mar 19, 2024 · 3ed99ca · 3ed99ca
1 parent df851d9
commit 3ed99ca
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 19 deletions.
diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
@@ -70,7 +70,8 @@ const BUTTONS_STYLES = [
   'rounded-md',
   'flex',
   'items-center',
-  'p-1'
+  'p-1',
+  'shadow-md shadow-black/90'
 ].join(' ')
 
 const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
@@ -103,13 +104,25 @@ function ResourceCard({
   const goRight = () => {
     index.value++
     if (index.value > data.length - 1) index.value = 0
+    // insert the 'animate-fade-in-left' class
+    const el = document.querySelector('#project-card')
+    el?.classList.add('animate-fade-in-left')
+    el?.addEventListener('animationend', () => {
+      el?.classList.remove('animate-fade-in-left')
+    })
   }
   const goLeft = () => {
     index.value--
     if (index.value < 0) index.value = data.length - 1
+    // insert the 'animate-fade-in-left' class
+    const el = document.querySelector('#project-card')
+    el?.classList.add('animate-fade-in-left')
+    el?.addEventListener('animationend', () => {
+      el?.classList.remove('animate-fade-in-left')
+    })
   }
   return (
-    <article class={PROJECT_STYLES} key={i}>
+    <article class={PROJECT_STYLES} key={i} id='project-card'>
       {i === 0 && <DoubleLeftButton _f={goLeft} />}
       {project?.featured && (
         <span class='absolute top-1 right-2 dark:text-amber-300 text-amber-800 underline'>

diff --git a/src/components/featured-and-projects/resources.tsx b/src/components/featured-and-projects/resources.tsx
@@ -4,7 +4,7 @@ const RESOURCE_STYLES: string = [
   'col-span-2',
   'row-span-4',
   'rounded-sm',
-  'shadow-[0_0_0.3rem_rgb(8_51_68)]', // rgb(8, 51, 68)
+  'shadow-[0_0_0.1rem_rgb(8_51_68)]', // rgb(8, 51, 68)
   'flex',
   'flex-col',
   'gap-2',
@@ -49,7 +49,8 @@ const BUTTONS_STYLES = [
   'items-center',
   'justify-center',
   'py-1',
-  'px-0.5'
+  'px-0.5',
+  'shadow-md shadow-black/90'
 ].join(' ')
 
 import { shuffle } from '@utils'
@@ -92,10 +93,20 @@ export default function Resources({ n = 3 }: ResourceProps) {
   const goRight = () => {
     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?.addEventListener('animationend', () => {
+      lastResource?.classList.remove('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?.addEventListener('animationend', () => {
+      firstResource?.classList.remove('animate-fade-in-right')
+    })
   }
 
   return (
@@ -107,6 +118,15 @@ export default function Resources({ n = 3 }: ResourceProps) {
           <article
             class={`${RESOURCE_STYLES} ${i === 1 ? 'px-5' : ''}`}
             key={i}
+            id={
+              i == 2
+                ? 'last-resource'
+                : i == 1
+                  ? 'middle-resource'
+                  : i == 0
+                    ? 'first-resource'
+                    : ''
+            }
           >
             {i === 0 && <DoubleLeftButton _f={goLeft} />}
             {i === 1 && <DoubleUpButton _f={goLeft} />}

diff --git a/src/components/main/project.astro b/src/components/main/project.astro
@@ -35,20 +35,15 @@ import { Image } from 'astro:assets'
   class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>*]:rounded-sm [&>span]:text-sm [&>span]:xl:text-base'
 >
   <div
-    class='absolute bottom-0 right-2 font-mono text-xs bg-emerald-400 text-emerald-950 px-1'
+    class='absolute bottom-0 right-2 font-rubik-doodle text-xs dark:bg-emerald-900 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'
   >
     {project?.time}+ {lang === 'en' ? 'months' : 'meses'}
   </div>
-  <a
-    href='https://pinturas-app-back.onrender.com/'
-    target='_blank'
-    rel='noopener noreferrer'
-    class='w-full'
+  <h1
+    class='text-sm xl:text-base font-rubik-doodle dark:text-emerald-100 text-emerald-950 bg-emerald-400 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90'
   >
-    <h1 class='text-sm xl:text-base'>
-      {lang === 'en' ? project?.title.en : project?.title.es}
-    </h1>
-  </a>
+    {lang === 'en' ? project?.title.en : project?.title.es}
+  </h1>
   <section class='bg-transparent w-full flex justify-center items-center'>
     <Image
       src={project?.image}

diff --git a/src/components/main/socials.astro b/src/components/main/socials.astro
@@ -55,7 +55,9 @@ const ICONS_STYLES = [
   'xl:h-8',
   'inline-flex',
   'fill-slate-950',
-  'dark:fill-emerald-300'
+  'dark:fill-emerald-300',
+  'drop-shadow-sm',
+  'drop-shadow-black'
 ].join(' ')
 
 interface Props {
@@ -71,13 +73,13 @@ const { lang }: Props = Astro.props
   </header>
   <div class='flex h-fit w-full items-center justify-center gap-2'>
     <span
-      class='font-merriweather font-bold text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-300 p-2 rounded border-2 border-slate-900'
+      class='font-merriweather font-bold text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-300 p-2 rounded shadow-sm shadow-black'
     >
       [email protected]
     </span>
     <button id='copyMailButton' aria-label='copy mail button'>
       <Copy
-        class='w-8 h-8 dark:bg-slate-300 bg-slate-950 fill-slate-300 dark:fill-slate-950 p-2 rounded-sm cursor-pointer hover:scale-110 transition-all'
+        class='w-8 h-8 dark:bg-slate-300 bg-slate-950 fill-slate-300 dark:fill-slate-950 p-1.5 rounded-full cursor-pointer hover:scale-110 transition-all shadow-sm shadow-black'
       />
     </button>
   </div>

diff --git a/src/components/main/tech-stack.astro b/src/components/main/tech-stack.astro
@@ -22,7 +22,7 @@ const TECH_STACK_STYLES: string = [
   'dark:bg-slate-900',
   'hover:scale-[1.02]',
   'hover:transition-all',
-  'text-2xl'
+  'text-2xl',
   // 'animate-blurred-fade-in',
   // 'animate-delay-300'
 ].join(' ')

diff --git a/src/data/blog.json b/src/data/blog.json
@@ -79,7 +79,7 @@
       "date": "2024-Mar-14",
       "titleEs": "Cómo convertir tu app de astro en una PWA",
       "href": "blog/convert-astro-app-to-pwa",
-      "hrefEs": "blog/convertir-app-astro-a-pwa",
+      "hrefEs": "blog/convertir-astro-app-en-pwa",
       "readTimeMins": "5",
       "tags": [
         "astro",