feat: sunday - funday

astro.config.ts

@@ -36,14 +36,17 @@ export default defineConfig({
       workbox: {
         globDirectory: 'dist/client',
         globPatterns: [
-          // '**/*.{woff2}',
+          '_astro/*.{woff2}',
           // '_astro/*.module.*.js',
           // '_astro/client.*.js',
           // '_astro/hoisted.*.js',
           // '_astro/*icons.*.js',
           // '_astro/preload-helper.*.js',
-          // '_astro/workbox-*.js'
-          '**/*'
+          // '_astro/workbox-*.js',
+          // '_astro/sw.js',
+          // '_astro/jsxRuntime.module.*.js',
+          '_astro/*.js'
+          // '**/*'
         ],
         // Don't fallback on document based (e.g. `/some-page`) requests
         // This removes an errant console.log message from showing up.

src/components/head/seo.astro

@@ -1,17 +1,22 @@
 ---
 import { SEO } from 'astro-seo'
 import RichResults from './richResults.astro'
+
+const url = Astro.url
+const isInDeno = url.toString().includes('.deno.dev')
 ---
 
 <meta charset='UTF-8' />
-<meta name='description' content='jamerrq.dev' />
+<meta name='description' content='Jamer José: Software Development' />
 <meta
   name='viewport'
   content='width=device-width,initial-scale=1,viewport-fit=cover'
 />
 <link rel='icon' type='image/png' href='/favicon.png' />
-<!-- Cannonical -->
-<link rel='canonical' href='https://jamerrq.dev' />
+<!-- Go to cannonical if needed -->
+<script is:inline define:vars={{ isInDeno }}>
+  if (isInDeno) window.location.href = 'https://jamerrq.dev'
+</script>
 <meta name='generator' content={Astro.generator} />
 <!-- Open Graph -->
 <meta name='twitter:card' content='summary_large_image' />
@@ -114,8 +119,8 @@ import RichResults from './richResults.astro'
 }
 
 <SEO
-  title='Jamer José - Backend Developer'
-  description="I'm a backend developer with a focus on Node.js, Python, C# (.NET) and TypeScript. I am passionate about building scalable and maintainable systems."
+  title='Jamer José - Software Development'
+  description="Hi! I'm Jamer José. A software (backend) developer with a focus on Node.js, Python, C# (.NET) and TypeScript. I am passionate about building scalable and maintainable systems."
   openGraph={{
     basic: {
       title: 'jamerrq.dev',
@@ -127,7 +132,7 @@ import RichResults from './richResults.astro'
     creator: '@jamerrq',
     card: 'summary_large_image',
     description:
-      "I'm a backend developer with a focus on Node.js, Python, C# (.NET) and TypeScript. I am passionate about building scalable and maintainable systems.",
+      "Hi! I'm Jamer José. A software (backend) developer with a focus on Node.js, Python, C# (.NET) and TypeScript. I am passionate about building scalable and maintainable systems.",
     image: 'https://jamerrq.dev/og-image2.png',
     site: '@jamerrq',
     title: 'jamerrq.dev'

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

@@ -7,24 +7,10 @@ interface Props {
 }
 
 const { lang = 'en' }: Props = Astro.props
-const paragraphs: Array<Record<string, string>> = [
-  {
-    es: '¡Hola 👋! Soy Jamer José, un Ingeniero Matemático de 24 años egresado de la Universidad EAFIT. Me encuentro actualmente en proceso de construcción de mi experiencia como Desarrollador Backend de tiempo parcial en Dium, donde estoy aprendiendo y desarrollando mis habilidades en el apasionante mundo del desarrollo backend.',
-    en: 'Hi there 👋! I am Jamer José, a 24-year-old Mathematical Engineer graduated from Universidad EAFIT. I am currently in the process of building my experience as a part-time Backend Developer at Dium, where I am learning and developing my skills in the exciting world of backend development.'
-  },
-  {
-    es: 'Fiel a la frase «la mejor (y única) forma de lograr algo es comenzándolo», me encuentro en constante búsqueda de nuevos retos y oportunidades que me permitan ampliar mis conocimientos y habilidades en el área de la programación.',
-    en: 'True to the phrase "the best (and only) way to achieve something is to start it", I am constantly looking for new challenges and opportunities that allow me to expand my knowledge and skills in the field of programming.'
-  },
-  {
-    es: 'Me apasionan los algoritmos, el código abierto y el desarrollo web en general, y considero que el aprendizaje continuo es una parte fundamental del crecimiento profesional. Además del desarrollo backend, disfruto del ajedrez y de explorar nuevas tecnologías relacionadas con el desarrollo web.',
-    en: 'I am passionate about algorithms, open source and web development in general, and I consider that continuous learning is a fundamental part of professional growth. In addition to backend development, I enjoy chess and exploring new technologies related to web development.'
-  },
-  {
-    es: 'Soy una persona entusiasta, proactiva y con gran capacidad de aprendizaje, siempre dispuesto a asumir nuevos desafíos y contribuir de manera positiva en los proyectos en los que me involucro. ¿Te gustaría saber más sobre mí? ¡No dudes en contactarme!',
-    en: 'I am an enthusiastic, proactive person with a great capacity for learning, always willing to take on new challenges and contribute positively to the projects I am involved in. Would you like to know more about me? Do not hesitate to contact me!'
-  }
-]
+const firstParagraph = {
+  es: '¡Hola 👋! Soy Jamer José, un Ingeniero Matemático de 24 años egresado de la Universidad EAFIT. Me encuentro actualmente en proceso de construcción de mi experiencia como Desarrollador Backend de tiempo parcial en Dium, donde estoy aprendiendo y desarrollando mis habilidades en el apasionante mundo del desarrollo backend.',
+  en: 'Hi there 👋! I am Jamer José, a 24-year-old Mathematical Engineer graduated from Universidad EAFIT. I am currently in the process of building my experience as a part-time Backend Developer at Dium, where I am learning and developing my skills in the exciting world of backend development.'
+}[lang]
 ---
 
 <Box
@@ -44,13 +30,31 @@ const paragraphs: Array<Record<string, string>> = [
       class='text-[95%] text-pretty md:w-[90%] pt-2 text-slate-900 dark:text-slate-300'
       id='about-me-paragraph'
     >
-      {paragraphs.at(0)![lang]}
+      {firstParagraph}
     </p>
   </div>
   <div class='xl:absolute bottom-1 right-2'>
     <span class='text-xs' id='index-indicator'>1/4</span>
   </div>
-  <script define:vars={{ lang, paragraphs }} is:inline>
+  <script define:vars={{ lang }} is:inline>
+    const paragraphs = [
+      {
+        es: '¡Hola 👋! Soy Jamer José, un Ingeniero Matemático de 24 años egresado de la Universidad EAFIT. Me encuentro actualmente en proceso de construcción de mi experiencia como Desarrollador Backend de tiempo parcial en Dium, donde estoy aprendiendo y desarrollando mis habilidades en el apasionante mundo del desarrollo backend.',
+        en: 'Hi there 👋! I am Jamer José, a 24-year-old Mathematical Engineer graduated from Universidad EAFIT. I am currently in the process of building my experience as a part-time Backend Developer at Dium, where I am learning and developing my skills in the exciting world of backend development.'
+      },
+      {
+        es: 'Fiel a la frase «la mejor (y única) forma de lograr algo es comenzándolo», me encuentro en constante búsqueda de nuevos retos y oportunidades que me permitan ampliar mis conocimientos y habilidades en el área de la programación.',
+        en: 'True to the phrase "the best (and only) way to achieve something is to start it", I am constantly looking for new challenges and opportunities that allow me to expand my knowledge and skills in the field of programming.'
+      },
+      {
+        es: 'Me apasionan los algoritmos, el código abierto y el desarrollo web en general, y considero que el aprendizaje continuo es una parte fundamental del crecimiento profesional. Además del desarrollo backend, disfruto del ajedrez y de explorar nuevas tecnologías relacionadas con el desarrollo web.',
+        en: 'I am passionate about algorithms, open source and web development in general, and I consider that continuous learning is a fundamental part of professional growth. In addition to backend development, I enjoy chess and exploring new technologies related to web development.'
+      },
+      {
+        es: 'Soy una persona entusiasta, proactiva y con gran capacidad de aprendizaje, siempre dispuesto a asumir nuevos desafíos y contribuir de manera positiva en los proyectos en los que me involucro. ¿Te gustaría saber más sobre mí? ¡No dudes en contactarme!',
+        en: 'I am an enthusiastic, proactive person with a great capacity for learning, always willing to take on new challenges and contribute positively to the projects I am involved in. Would you like to know more about me? Do not hesitate to contact me!'
+      }
+    ]
     let index = 0
     const domParagraph = document.getElementById('about-me-paragraph')
     const domIndex = document.getElementById('index-indicator')

src/components/main/container.astro

@@ -12,7 +12,7 @@
     font-family: 'Fira Sans', sans-serif;
     text-align: center;
     padding: 1rem;
-    /* box-shadow: 0 0.05rem 0 0.1rem #000; */
+    box-shadow: 0 0.05rem 0 0.1rem #000;
     border: 2px solid white;
     font-weight: 600;
     gap: 0.5rem;

src/components/tech-stack/title.astro

@@ -22,8 +22,8 @@ const { lang = 'en' }: Props = Astro.props
     <p class='font-semibold text-balance text-sm xl:text-base'>
       {
         lang === 'en'
-          ? 'Painters have brushes, I got these <3'
-          : 'Los pintores tienen pinceles, yo tengo estas <3'
+          ? 'Painters have brushes, I got these 🦜'
+          : 'Los pintores tienen pinceles, yo tengo estas 🦜'
       }
     </p>
   </div>

src/layouts/blog-layout.astro

@@ -39,7 +39,7 @@ import '@fontsource/fira-mono'
   <div
     class='dark:bg-gray-900/95 py-8 bg-[#76ABAE] xl:h-[100dvh] h-[95dvh] lg:w-[80dvw] md:w-[95dvw] w-[65dvw] xs:w-[95dvw] mx-auto px-4 dark:text-emerald-50 [&>*]:text-balance overflow-y-auto max-h-[100dvh] [scrollbar-width:thin] relative'
   >
-    <aside class='sticky -top-5'>
+    <aside class='sticky -top-5 z-50'>
       <Buttons href={frontmatter.hrefLang} border />
     </aside>
     <br />
@@ -48,13 +48,13 @@ import '@fontsource/fira-mono'
       class='flex font-secondary bg-slate-300/90 p-2 cursor-pointer font-bold rounded'
       onclick='window.history.back()'
     >
-      <h1 class='-z-10 text-slate-950'>
+      <h1 class='text-slate-950'>
         {frontmatter.title}
       </h1>
     </header>
     <br />
     <div
-      class='[&>h1]:font-bold font-secondary font-semibold text-sm [&_h1]:text-emerald-950 [&_h1]:dark:text-emerald-300 [&_h2]:text-emerald-950 [&_h2]:dark:text-emerald-300 [&_h3]:text-emerald-900 [&_h3]:dark:text-emerald-300 [&_h1]:text-xl [&_h1]:xl:text-3xl [&_h1]:font-bold [&_h2]:font-semibold [&_h2]:text-lg [&_h2]:xl:text-2xl [&_h3]:text-base [&_h3]:xl:text-xl [&_h3]:font-semibold [&_p]:text-pretty [&_ul]:m-4 [&_ul]:list-disc max-w-[800px] [&_a]:font-semibold [&_a]:text-[#153448] [&_a]:dark:text-cyan-300 flex flex-col gap-5 mb-8 [&_blockquote]:[font-secondary] [&_code]:[font-firaMono] [&_a]:underline [&_a]:[target=_blank] [&_pre]:p-2 [&_pre]:overflow-x-hidden px-2 [&_table]:border [&_table]:rounded [&_table]:text-center [&_thead]:border [&_table]:p-2'
+      class='[&>h1]:font-bold font-secondary font-semibold text-sm [&_h1]:text-emerald-950 [&_h1]:dark:text-emerald-300 [&_h2]:text-slate-950 [&_h2]:dark:text-emerald-300 [&_h3]:text-emerald-900 [&_h3]:dark:text-emerald-300 [&_h1]:text-xl [&_h1]:xl:text-3xl [&_h1]:font-bold [&_h2]:font-semibold [&_h2]:text-lg [&_h2]:xl:text-2xl [&_h3]:text-base [&_h3]:xl:text-xl [&_h3]:font-semibold [&_p]:text-pretty [&_ul]:m-4 [&_ul]:list-disc max-w-[800px] [&_a]:font-semibold [&_a]:text-cyan-950 [&_a]:dark:text-cyan-300 flex flex-col gap-5 mb-8 [&_blockquote]:[font-secondary] [&_code]:[font-firaMono] [&_a]:underline [&_a]:[target=_blank] [&_pre]:p-2 [&_pre]:overflow-x-hidden px-2 [&_table]:border [&_table]:rounded [&_table]:text-center [&_thead]:border [&_table]:p-2'
       id='mdx-content'
     >
       <slot />

src/layouts/layout.astro

@@ -7,8 +7,8 @@ interface Props {
 const { title, lang = 'en' }: Props = Astro.props
 
 // Fonts
-import '@fontsource/averia-serif-libre'
-import '@fontsource/calistoga'
+// import '@fontsource/averia-serif-libre'
+// import '@fontsource/calistoga'
 import '@fontsource/fira-sans'
 
 // Styles

src/movies/Movie.astro

@@ -30,7 +30,7 @@ const {
     playsinline
     preload='auto'
     data-abs={absolute}
-    class='object-cover rounded h-48'
+    class='object-cover rounded-md h-48 shadow shadow-black'
   >
   </video>
 </a>

src/pages/404.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '@layouts/layout.astro'
 import Container from '@components/main/container.astro'
+import { Image } from 'astro:assets'
 ---
 
 <style>
@@ -12,7 +13,7 @@ import Container from '@components/main/container.astro'
     justify-items: center;
     color: white;
     border-radius: 0.5rem;
-    background-color: #1b383c;
+    /* background-color: #1b383c; */
     font-family: 'Averia', sans-serif;
     /* font-size: 2rem; */
     text-align: center;
@@ -25,7 +26,6 @@ import Container from '@components/main/container.astro'
 
   .go-home-button {
     text-decoration: none;
-    border: 1px solid white;
     padding: 0.5rem 1rem;
     border-radius: 0.5rem;
     box-shadow: 0 0.05rem 0 0.1rem #000;
@@ -42,25 +42,56 @@ import Container from '@components/main/container.astro'
   #_404_background {
     filter: blur(1px);
     z-index: -1;
-    /* width: 100vw;
-    height: 100vh; */
+    width: 100vw;
+    height: 100vh;
     position: fixed;
-    background-image: url('/pizarra.webp');
+    background-image: url('/mandelbrot.webp');
+  }
+
+  img {
+    --a: 8deg; /* control the angle of rotation (the smaller, the better) */
+    transform: perspective(400px)
+      rotate3d(var(--r, 1, -1), 0, calc(var(--i, 1) * var(--a)));
+    -webkit-mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100%/250%
+      250%;
+    transition: 0.4s;
+    cursor: pointer;
+  }
+  .alt {
+    --r: 1, 1;
+    -webkit-mask: linear-gradient(45deg, #000c 40%, #000, #000c 60%) 0 100%/250%
+      250%;
+  }
+  img:hover {
+    --i: -1;
+    -webkit-mask-position: 0 0;
+  }
+  .alt:hover {
+    -webkit-mask-position: 100% 0;
   }
 </style>
 
 <Layout title='Resource Not Found - jamerrq.dev'>
-  <div id='_404_background' class='hidden xl:grid'></div>
+  <div id='_404_background'></div>
   <main class='grid place-content-center [&>div>p]:text-balance'>
     <Container>
       <h1 class='text-emerald-300 text-2xl'>Page Not Found!</h1>
       <p class='text-sm xl:text-base font-secondary'>
-        Sorry, the resource you are looking for does not exist (yet?).
+        Sorry, the resource you are looking for does not exist (yet?) 🗿
       </p>
+      <Image
+        src='/img/this_is_fine.webp'
+        alt='404'
+        width='200'
+        height='200'
+        class='rounded'
+      />
       <p class='text-sm xl:text-base font-secondary'>
-        Please check the URL and try again or go back.
+        Please check the URL and try again or go back 🗣️
       </p>
-      <div class='flex gap-2 text-emerald-300'>
+      <div
+        class='flex flex-col xl:flex-row justify-center w-full gap-2 text-emerald-300'
+      >
         <button class='text-base go-home-button' onclick='window.history.back()'
           >Go Back</button
         >

src/pages/blog/linux-tools-improve-workflow.mdx

@@ -34,7 +34,6 @@ Linux terminal.
     alt='fzf logo'
     width='2560'
     height='1600'
-	class='shadow-md rounded shadow-black'
   />
 </a>
 
@@ -144,3 +143,4 @@ recap of the tools mentioned in this post:
 | Zoxide  | A faster way to navigate your filesystem | <a href='https://github.com/ajeetdsouza/zoxide' target='_blank' rel='noopener'>ajeetdsouza/zoxide</a> |
 
 Thanks for reading! I hope you found this post useful :P
+More tools will be added in the future, so stay tuned!