feat: cooldown timer & update working on

astro.config.ts

@@ -1,3 +1,4 @@
+// Astro config file
 import { defineConfig } from 'astro/config'
 
 // PWA
@@ -37,15 +38,15 @@ export default defineConfig({
       workbox: {
         globDirectory: 'dist/client',
         globPatterns: [
-          '**/*.woff2',
+          '**/*.{woff2}',
+          'img/working_on/*.webp',
           'pizarra.webp',
           'img/this_is_fine.webp',
           'movies/bitwise_liminal_compressed_240p.webm',
           '_astro/*.module.*.js',
           '_astro/client.*.js',
           '_astro/hoisted.*.js',
           '_astro/*icons.*.js'
-          // 'offline.html',
         ],
         // Don't fallback on document based (e.g. `/some-page`) requests
         // This removes an errant console.log message from showing up.

readme.md

@@ -2,7 +2,7 @@
 
 Source code for my personal website, [jamerrq.dev](https://jamerrq.dev)
 
-![](https://img.shields.io/badge/Made%20with-Astro%20💙-orange?style=for-the-badge&logo=astro&logoColor=orange)
+![](https://img.shields.io/badge/Made%20with-Astro-orange?style=for-the-badge&logo=astro&logoColor=orange)
 
 ## Stack 🥞
 

src/components/featured-and-projects/projects.tsx

@@ -83,7 +83,27 @@ const BUTTONS_STYLES = [
   'shadow-md shadow-black/90'
 ].join(' ')
 
-import IndexPicker from './indexPicker'
+function IndexPicker({ n, reference }: { n: number; reference: any }) {
+  function goToIndex(i: number) {
+    reference.value = i
+    cooldown.value = COOLDOWN_TIME
+    imagesIndex.value = 0
+  }
+  return (
+    <div className='absolute flex bottom-3 left-1/2 transform -translate-x-1/2'>
+      {Array.from(Array(n).keys()).map((i) => (
+        <button
+          key={i}
+          onClick={() => goToIndex(i)}
+          aria-label={`subpage ${i}`}
+          className={`w-3 h-3 rounded-full mx-1 ${
+            i === reference.value ? 'bg-cyan-300' : 'bg-cyan-950'
+          }`}
+        />
+      ))}
+    </div>
+  )
+}
 
 function ImageCarousel({ images }: { images: string[] }) {
   const currentImage = images[imagesIndex.value]
@@ -141,6 +161,7 @@ function ResourceCard({
       el?.classList.remove('xl:animate-fade-in-left')
     })
     imagesIndex.value = 0
+    cooldown.value = COOLDOWN_TIME
   }
   const goLeft = () => {
     index.value--
@@ -152,11 +173,21 @@ function ResourceCard({
       el?.classList.remove('xl:animate-fade-in-left')
     })
     imagesIndex.value = 0
+    cooldown.value = COOLDOWN_TIME
   }
   return (
     <article className={PROJECT_STYLES} key={i} id='project-card'>
       {i === 0 && <DoubleLeftButton _f={goLeft} />}
       <div className='lg:w-1/2 xl:w-1/2 h-full grid place-content-center justify-items-center gap-4'>
+        <div
+          className='absolute top-2 left-2'
+          onClick={() => {
+            paused.value = !paused.value
+          }}
+        >
+          <span>{cooldown.value}</span>
+          <PauseIndicator />
+        </div>
         <h1 className='xl:text-3xl text-xl max-w-md'>{project?.title}</h1>
         {project?.featured && (
           <span className='xl:absolute top-1 right-2 dark:text-amber-300 text-amber-800 underline bg-amber-300/30 px-2 py-1 rounded border dark:border-amber-200 border-amber-800 badge'>
@@ -206,15 +237,52 @@ function ResourceCard({
   )
 }
 
+function PauseIndicator() {
+  return !paused.value ? (
+    <svg
+      id='Layer_1'
+      style='enable-background:new 0 0 512 512;'
+      version='1.1'
+      viewBox='0 0 512 512'
+      fill='currentColor'
+      width='20'
+      height='20'
+    >
+      <g>
+        <path d='M224,435.8V76.1c0-6.7-5.4-12.1-12.2-12.1h-71.6c-6.8,0-12.2,5.4-12.2,12.1v359.7c0,6.7,5.4,12.2,12.2,12.2h71.6   C218.6,448,224,442.6,224,435.8z' />
+        <path d='M371.8,64h-71.6c-6.7,0-12.2,5.4-12.2,12.1v359.7c0,6.7,5.4,12.2,12.2,12.2h71.6c6.7,0,12.2-5.4,12.2-12.2V76.1   C384,69.4,378.6,64,371.8,64z' />
+      </g>
+    </svg>
+  ) : (
+    <svg fill='none' height='20' viewBox='0 0 15 15' width='20'>
+      <path
+        clip-rule='evenodd'
+        d='M3.04995 2.74995C3.04995 2.44619 2.80371 2.19995 2.49995 2.19995C2.19619 2.19995 1.94995 2.44619 1.94995 2.74995V12.25C1.94995 12.5537 2.19619 12.8 2.49995 12.8C2.80371 12.8 3.04995 12.5537 3.04995 12.25V2.74995ZM5.73333 2.30776C5.57835 2.22596 5.39185 2.23127 5.24177 2.32176C5.0917 2.41225 4.99995 2.57471 4.99995 2.74995V12.25C4.99995 12.4252 5.0917 12.5877 5.24177 12.6781C5.39185 12.7686 5.57835 12.7739 5.73333 12.6921L14.7333 7.94214C14.8973 7.85559 15 7.68539 15 7.49995C15 7.31452 14.8973 7.14431 14.7333 7.05776L5.73333 2.30776ZM5.99995 11.4207V3.5792L13.4287 7.49995L5.99995 11.4207Z'
+        fill='currentColor'
+        fill-rule='evenodd'
+      />
+    </svg>
+  )
+}
+
 const n = concatedData.length
+const COOLDOWN_TIME = 15
+const cooldown = signal<number>(COOLDOWN_TIME)
+const paused = signal(false)
 
 effect(() => {
   let mainInterval = setInterval(() => {
-    index.value++
-    if (index.value >= n) {
-      index.value = 0
+    if (paused.value) return
+    cooldown.value--
+    if (cooldown.value <= 0) {
+      cooldown.value = COOLDOWN_TIME
+      index.value++
+      imagesIndex.value = 0
+      if (index.value >= n) {
+        index.value = 0
+      }
     }
-  }, 21000)
+  }, 1000)
   let imagesInterval = setInterval(() => {
     imagesIndex.value++
     if (imagesIndex.value >= concatedData[index.value].images.length) {

src/components/head/scripts.astro

@@ -7,7 +7,7 @@ const { lang = 'en' } = Astro.props
 import blobs from '@data/blobs/blobs.txt?raw'
 const rawBlobs = blobs.split('- SEP -')
 const index = Math.floor(Math.random() * rawBlobs.length)
-const blob = rawBlobs[index]
+const blob = rawBlobs.at(index)!
 
 // @ts-ignore
 import { pwaInfo } from 'virtual:pwa-info'

src/components/icons/icon.astro

@@ -23,7 +23,7 @@ const { svg, hex = '#000', href = '', title = 'Generic Icon' } = Astro.props
         set:html={svg}
         fill={hex}
       />
-      <span class='text-xs font-averia'>
+      <span class='text-xs font-averia ml-2'>
         {title === 'Curriculum Vitae' ? 'CV' : title}
       </span>
     </a>

src/components/main/main-bento.astro

@@ -5,21 +5,20 @@ interface Props {
 const { lang = 'en' }: Props = Astro.props
 import AboutMe from './about-me-card.astro'
 import TechTitle from './title.astro'
-// import WorkingOn from './working-on.astro'
+import WorkingOn from './working-on.astro'
 import Buttons from './buttons.astro'
 import TechStack from './tech-stack.astro'
 import Featured from './featured.astro'
 import Blog from './blog.astro'
 import Socials from './socials.astro'
 import Bento from './bento.astro'
-import WorkingOnTsx from './working-on.tsx'
 ---
 
 <Bento>
   <AboutMe lang={lang} />
   <Buttons href={lang === 'en' ? '/es' : '/'} />
   <TechStack lang={lang} />
-  <WorkingOnTsx lang={lang} client:idle />
+  <WorkingOn lang={lang} />
   <TechTitle lang={lang} />
   <Featured lang={lang} />
   <Socials lang={lang} />

src/components/main/socials.astro

@@ -16,10 +16,11 @@ import getIconsFn from '@data/socials.ts'
 const socials = getIconsFn(lang)
 ---
 
-<Box title='Contact Section' otherStyles='xl:col-span-2 xl:row-span-2 gap-3'>
-  <header
-    class='flex gap-2 justify-center items-center dark:text-emerald-300 text-slate-950'
-  >
+<Box
+  title='Contact Section'
+  otherStyles='xl:col-span-2 xl:row-span-2 justify-between min-h-48'
+>
+  <header class='flex gap-2 dark:text-emerald-300 text-slate-950'>
     <p class='font-semibold text-3xl xl:text-4xl'>Contact Links</p>
     <GenericIcon svg={siMaildotru.svg} />
   </header>

src/components/main/tech-stack.astro

@@ -86,7 +86,7 @@ const SVGS_STYLES = ['w-6', 'h-6', 'xl:w-8', 'xl:h-8', 'hover:scale-110'].join(
     </div>
     <div class={SUBTITLE_STYLES}>
       <p class='font-semibold text-xl xl:text-3xl'>
-        {lang === 'en' ? 'Languages' : 'Dialectos'}
+        {lang === 'en' ? 'Languages' : 'Lenguajes'}
       </p>
     </div>
     <div class={`${ICON_BLOCKS_STYLES} `}>
@@ -140,7 +140,7 @@ const SVGS_STYLES = ['w-6', 'h-6', 'xl:w-8', 'xl:h-8', 'hover:scale-110'].join(
       class='font-bold text-sm xl:text-base dark:text-emerald-300 text-slate-900 font-averia'
     >
       <span class='-mt-5'> ❯</span>
-      {lang === 'en' ? 'Tap to see more' : 'Toca para ver más'}
+      {lang === 'en' ? 'Tap to see more' : 'Presiona para ver más'}
     </span>
   </aside>
 </Hbox>

src/components/main/working-on.astro

@@ -6,8 +6,8 @@ interface Props {
 }
 const { lang = 'en' }: Props = Astro.props
 
-import ProjectCard from './project.astro'
 import Box from '@components/boxes/box.astro'
+import WorkingOnTsx from './working-on.tsx'
 ---
 
 <Box title="Projects I'm working on" otherStyles='xl:col-span-2 xl:row-span-4'>
@@ -24,12 +24,5 @@ import Box from '@components/boxes/box.astro'
       fill={`#${siGitkraken.hex}`}
     />
   </header>
-  <div class='h-full w-full gap-2'>
-    <ul
-      class='flex gap-2 text-base flex-col justify-around h-full font-averia font-bold py-2'
-    >
-      <ProjectCard lang={lang} index={0} />
-      <ProjectCard lang={lang} index={1} />
-    </ul>
-  </div>
+  <WorkingOnTsx lang={lang} client:only='preact' />
 </Box>

src/components/main/working-on.tsx

@@ -6,7 +6,6 @@ import {
   siSupabase,
   siNextdotjs,
   siTailwindcss,
-  siGitkraken,
   siPython,
   siJavascript,
   siCsharp,
@@ -38,22 +37,12 @@ interface ProjectCardProps {
     image: string
     technologies: string[]
     preview: string
-    time: string
     start: string
   }
 }
 
-// function getIndexBasedOnMonth() {
-//   const date = new Date().toLocaleString('es-CO', {
-//     timeZone: 'America/Bogota'
-//   })
-//   const month = +(date.replace(/,(.*)/g, '')?.split('/')?.at(1) ?? 0)
-//   const index = month % projects.length
-//   return index
-// }
-
-const index = signal(0)
 const n = projects?.length ?? 0
+const index = signal(Math.floor(Math.random() * n))
 
 import IndexPicker from '@components/featured-and-projects/indexPicker'
 
@@ -145,28 +134,17 @@ effect(() => {
 
 export default function WorkingOn({ lang = 'en' }) {
   return (
-    <article className='bg-slate-300/70 dark:bg-slate-900/95 rounded-sm flex items-center justify-center font-bold dark:text-slate-300 font-rubik-doodle w-full h-full flex-col text-base py-3 px-2 relative xl:col-span-2 xl:row-span-4'>
-      <header class='text-2xl xl:text-3xl flex gap-2 text-emerald-950 dark:text-emerald-300 items-center'>
-        <p>{lang === 'en' ? 'Working on' : 'Trabajando en'}</p>
-        <svg
-          class='w-8 h-8 inline-flex shadow bg-white/50 p-1 rounded dark:bg-slate-900/80'
-          fill={`#${siGitkraken.hex}`}
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: siGitkraken.svg }}
-        />
-      </header>
-      <div class='h-full w-full gap-2'>
-        <ul class='flex gap-2 text-base flex-col justify-around h-full font-averia font-bold py-2'>
-          {Array.from({ length: 2 }, (_, i) => i + index.value).map((i) => (
-            <ProjectCard
-              lang={lang}
-              project={projects[i % n]}
-              key={projects[i % n].title.en}
-            />
-          ))}
-        </ul>
-        <IndexPicker n={n} reference={index} />
-      </div>
-    </article>
+    <div class='h-full w-full gap-2' id='working-on-client'>
+      <ul class='flex gap-2 text-base flex-col justify-around h-full font-averia font-bold py-2'>
+        {Array.from({ length: 2 }, (_, i) => i + index.value).map((i) => (
+          <ProjectCard
+            lang={lang}
+            project={projects[i % n]}
+            key={projects[i % n].title.en}
+          />
+        ))}
+      </ul>
+      <IndexPicker n={n} reference={index} />
+    </div>
   )
 }