feat: styles & enhancement

astro.config.ts

@@ -58,7 +58,7 @@ export default defineConfig({
         workbox: {
           globDirectory: 'dist/client',
           globPatterns: [
-            '**/*.{webm,woff2}',
+            '**/*.{woff2}',
             'pizarra.webp',
             'bitwise_liminal_compressed_240p.webm'
           ],

readme.md

@@ -43,3 +43,4 @@ CSS](https://img.shields.io/badge/-Tailwind%20CSS-lightblue?style=flat-square&lo
 - [Vite Plugin PWA](https://vite-pwa-org.netlify.app/)
 - [Fontsource](https://fontsource.org/)
 - [Tiny Code by Killedbyapixel](https://github.com/KilledByAPixel/TinyCode)
+- [Shots - Create Amazing Mockups](https://shots.so/)

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

@@ -87,6 +87,7 @@ export function IndexPicker({
         <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'
           }`}

src/components/head/scripts.astro

@@ -4,9 +4,14 @@ interface Props {
 }
 
 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]
 ---
 
-<script defer is:inline define:vars={{ lang }}>
+<script defer is:inline define:vars={{ lang, blob }}>
+  console.log(blob)
   // Theme switch
   function setTheme() {
     const darkIcon = document.getElementById('theme-toggle-dark-icon')

src/components/main/about-me-card.astro

@@ -8,6 +8,19 @@ const { lang = 'en' }: Props = Astro.props
 ---
 
 <Box title='Get to know me' otherStyles='xl:col-span-4 xl:row-span-2'>
+  <style>
+    .phrase {
+      font-style: italic;
+    }
+
+    .phrase::before {
+      content: '« ';
+    }
+
+    .phrase::after {
+      content: ' »';
+    }
+  </style>
   <header class='flex flex-col xl:flex-row gap-1 items-center'>
     <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-3xl'>
       {lang === 'en' ? 'Get To Know Me' : 'Conóceme'}
@@ -53,14 +66,30 @@ const { lang = 'en' }: Props = Astro.props
         </p>
       </li>
       <li>
-        <p>
+        <p class='phrase dark:text-emerald-200'>
           {
             lang === 'en'
-              ? 'Big fan of the open source and the web, as well as the great possibilities they offer'
-              : 'Gran fan del código abierto y la web, así como de las grandes posibilidades que ofrecen'
+              ? 'The best way to achieve something is by starting it'
+              : 'La mejor forma de lograr algo es comenzándolo'
           }
         </p>
       </li>
     </ul>
   </div>
+  <!-- <script define:vars={{ lang }}>
+    const phrases = [
+      {
+        en: 'As long as I can continue learning, i will feel alive',
+        es: 'Mientras pueda seguir aprendiendo, me sentiré vivo'
+      },
+      {
+        en: 'Open source has become the best way to learn and share knowledge',
+        es: 'El código abierto se ha convertido en la mejor forma de aprender y compartir conocimiento'
+      }
+    ]
+    setInterval(() => {
+      const phrase = phrases[Math.floor(Math.random() * phrases.length)]
+      document.querySelector('.phrase').textContent = phrase[lang]
+    }, 5000)
+  </script> -->
 </Box>

src/components/main/working-on.tsx

@@ -1,5 +1,5 @@
 import { projects } from '@data/working-on.json'
-import { signal } from '@preact/signals'
+import { signal, effect } from '@preact/signals'
 
 import {
   siAstro,
@@ -17,13 +17,15 @@ import {
   siMarkdown
 } from 'simple-icons'
 
+siMicrosoft.hex = siMicrosoftazure.hex
+
 const SVGS_STYLES = [
-  'w-5',
-  'h-5',
+  'w-7',
+  'h-7',
   'xl:w-8',
   'xl:h-8',
   'hover:scale-110',
-  'shadow bg-white/50 p-1 rounded dark:bg-emerald-950/80'
+  'shadow bg-white/80 p-1 rounded'
 ].join(' ')
 
 interface ProjectCardProps {
@@ -41,15 +43,16 @@ interface ProjectCardProps {
   }
 }
 
-function getRandomBasedOnDay() {
+function getIndexBasedOnDay() {
   const date = new Date().toLocaleString('es-CO', {
     timeZone: 'America/Bogota'
   })
-  const day = +(date?.at(0) ?? 0)
+  const day = +(date.replace(/,(.*)/g, '')?.split('/')?.at(0) ?? 0)
   return day % projects.length
 }
 
-const index = signal(getRandomBasedOnDay())
+const index = signal(getIndexBasedOnDay())
+const n = projects?.length ?? 0
 
 import { IndexPicker } from '@components/featured-and-projects/projects'
 
@@ -62,7 +65,7 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
       <div class='absolute bottom-0 right-2 font-averia text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'>
         {days}+ {lang === 'en' ? 'days' : 'días'}
       </div>
-      <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 font-rubik-doodle dark:text-emerald-100 text-emerald-950 bg-emerald-500 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90'>
         {lang === 'en' ? project?.title.en : project?.title.es}
       </h1>
       <section class='bg-transparent w-full flex items-center'>
@@ -74,7 +77,7 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
           loading='lazy'
           class='aspect-[4/3] w-40'
         />
-        <aside class='flex flex-col items'>
+        <aside class='flex flex-col gap-2 items-center'>
           <div class='flex gap-2 items-center justify-center'>
             {project.technologies.map((t) => {
               const a =
@@ -104,29 +107,38 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
               )
             })}
           </div>
-          <span class='font-averia'>
-            {lang === 'en' ? 'Preview' : 'Vista previa'}:{' '}
+          <span class='font-averia hover:scale-105 ease-in-out transition-transform text-emerald-950 bg-white/50 dark:bg-white/10 px-2 py-1 rounded dark:text-emerald-300'>
             {project?.preview ? (
               <a
                 href={project.preview}
                 target='_blank'
                 rel='noopener noreferrer'
-                class='text-emerald-950 dark:text-emerald-300'
+                class=''
+                aria-label={`Preview for ${project.title.en}`}
+                title={`Preview for ${project.title.en}`}
               >
-                {lang === 'en' ? 'here' : 'aquí'}
+                {lang === 'en' ? 'Project Preview' : 'Demo del Proyecto'}
               </a>
-            ) : lang === 'en' ? (
-              'soon'
-            ) : (
-              'próximamente'
-            )}
+            ) : null}
           </span>
         </aside>
       </section>
     </li>
   )
 }
 
+effect(() => {
+  let interval = setInterval(() => {
+    index.value++
+    if (index.value >= n) {
+      index.value = 0
+    }
+  }, 7000)
+  return function () {
+    clearInterval(interval)
+  }
+})
+
 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'>
@@ -141,19 +153,15 @@ export default function WorkingOn({ lang = 'en' }) {
       </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'>
-          {/* Show only two, use index to get the right items */}
-          {Array.from({ length: 2 }, (_, i) => i + index.value).map(
-            (i) =>
-              i < projects.length && (
-                <ProjectCard
-                  lang={lang}
-                  project={projects[i]}
-                  key={projects[i].title.en}
-                />
-              )
-          )}
+          {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={projects.length} reference={index} />
+        <IndexPicker n={n} reference={index} />
       </div>
     </article>
   )

src/data/blobs/blob.txt

@@ -0,0 +1,28 @@
+       ,
+       \`-._           __
+        \\  `-..____,.'  `.
+         :`.         /    \`.
+         :  )       :      : \
+          ;'        '   ;  |  :
+          )..      .. .:.`.;  :
+         /::...  .:::...   ` ;
+         ; _ '    __        /:\
+         `:o>   /\o_>      ;:. `.
+        `-`.__ ;   __..--- /:.   \
+        === \_/   ;=====_.':.     ;
+         ,/'`--'...`--....        ;
+              ;                    ;
+            .'                      ;
+          .'                        ;
+        .'     ..     ,      .       ;
+       :       ::..  /      ;::.     |
+      /      `.;::.  |       ;:..    ;
+     :         |:.   :       ;:.    ;
+     :         ::     ;:..   |.    ;
+      :       :;      :::....|     |
+      /\     ,/ \      ;:::::;     ;
+    .:. \:..|    :     ; '.--|     ;
+   ::.  :''  `-.,,;     ;'   ;     ;
+.-'. _.'\      / `;      \,__:      \
+`---'    `----'   ;      /    \,.,,,/
+                   `----`

src/data/blobs/blob2.txt

@@ -0,0 +1,9 @@
+    =/\                 /\=
+    / \'._   (\_/)   _.'/ \       (_                   _)
+   / .''._'--(o.o)--'_.''. \       /\                 /\
+  /.' _/ |`'=/ " \='`| \_ `.\     / \'._   (\_/)   _.'/ \
+ /` .' `\;-,'\___/',-;/` '. '\   /_.''._'--('.')--'_.''._\
+/.-'       `\(-V-)/`       `-.\  | \_ / `;=/ " \=;` \ _/ |
+             "   "               \/  `\__|`\___/`|__/`  \/
+                                  `       \(/|\)/       `
+                                           " ` "

src/data/blobs/blob3.txt

@@ -0,0 +1,10 @@
+    .--.              .--.
+   : (\ ". _......_ ." /) :
+    '.    `        `    .'
+     /'   _        _   `\
+    /     0}      {0     \
+   |       /      \       |
+   |     /'        `\     |
+    \   | .  .==.  . |   /
+     '._ \.' \__/ './ _.'
+     /  ``'._-''-_.'``  \