feat: back to normal

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

@@ -19,7 +19,7 @@ const shuffleData = shuffle(data)
 
 const DoubleUpButton = ({ _f }: { _f: () => void }) => (
   <div
-    class={`-left-3 absolute bg-slate-900 dark:bg-slate-300 rounded-full text-cyan-950 dark:text-cyan-300 fill-current flex flex-wrap items-center justify-center p-1 shadow-md shadow-black/90 xl:hidden`}
+    class={`-left-3 absolute bg-slate-900 dark:bg-slate-300 rounded-[10px] text-cyan-950 dark:text-cyan-300 fill-current flex flex-wrap items-center justify-center p-1 shadow-md shadow-black/90 xl:hidden`}
   >
     <button onClick={_f} title={'iterate over'}>
       <DoubleUp />
@@ -29,7 +29,7 @@ const DoubleUpButton = ({ _f }: { _f: () => void }) => (
 
 const DoubleDownButton = ({ _f }: { _f: () => void }) => (
   <div
-    class={`-right-3 absolute bg-slate-900 dark:bg-slate-300 rounded-full text-cyan-950 dark:text-cyan-300 fill-current flex flex-wrap items-center justify-center p-1 shadow-md shadow-black/90 xl:hidden`}
+    class={`-right-3 absolute bg-slate-900 dark:bg-slate-300 rounded-[10px] text-cyan-950 dark:text-cyan-300 fill-current flex flex-wrap items-center justify-center p-1 shadow-md shadow-black/90 xl:hidden`}
   >
     <button onClick={_f} title={'iterate over'}>
       <DoubleDown />

src/components/main/footer.astro

@@ -1,6 +1,13 @@
 ---
 // import Copyright from '@components/icons/copyright.astro'
-import { siAstro, siPreact, siTailwindcss, siMdx, siBun } from 'simple-icons'
+import {
+  siAstro,
+  siPreact,
+  siTailwindcss,
+  siMdx,
+  siBun,
+  siDeno
+} from 'simple-icons'
 ---
 
 <style>
@@ -12,8 +19,8 @@ import { siAstro, siPreact, siTailwindcss, siMdx, siBun } from 'simple-icons'
     max-width: 100dvw;
     height: 32px;
     padding: 0.2rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
     text-align: center;
     align-items: center;
     display: flex;
@@ -60,6 +67,11 @@ import { siAstro, siPreact, siTailwindcss, siMdx, siBun } from 'simple-icons'
     set:html={siBun.svg}
     fill={`#fff`}
   />
+  <svg
+    class='w-4 h-4 md:w-6 md:h-6 xl:w-8 xl:h-8 inline'
+    set:html={siDeno.svg}
+    fill={`#fff`}
+  />
   <aside>
     <a
       href='https://github.com/jamerrq'

src/components/main/working-on.astro

@@ -8,7 +8,7 @@ const { lang = 'en' }: Props = Astro.props
 
 import Box from '@components/boxes/box.astro'
 
-// import WorkingOnTsx from './working-on.tsx'
+import WorkingOnTsx from './working-on.tsx'
 // import ThreeDots from '@components/loaders/ThreeDots.astro'
 ---
 
@@ -29,8 +29,8 @@ import Box from '@components/boxes/box.astro'
       fill={`#${siGitkraken.hex}`}
     />
   </header>
-  <!-- <WorkingOnTsx lang={lang} client:only='preact' /> -->
-  <span class='text-center px-3 [&_a]:text-emerald-300'>
+  <WorkingOnTsx lang={lang} client:only='preact' />
+  <!-- <span class='text-center px-3 [&_a]:text-emerald-300'>
     {lang === 'en' ? '#HolaMundoDay Workshop' : 'Taller #HolaMundoDay'}
   </span>
   <span class='text-center'>
@@ -56,5 +56,5 @@ import Box from '@components/boxes/box.astro'
   </span>
   <a href='/board'>
     {lang === 'en' ? 'Preview (?)' : 'Vistazo (?)'}
-  </a>
+  </a> -->
 </Box>

src/data/blog.json

@@ -6,7 +6,7 @@
       "titleEs": "Acerca de esta web",
       "href": "blog/building-this-website",
       "hrefEs": "blog/acerca-de-esta-web",
-      "readTimeMins": "15",
+      "readTimeMins": "5",
       "tags": [
         "astro",
         "tailwindcss",

src/data/working-on.json

@@ -56,24 +56,6 @@
       "preview": "https://github.com/jamerrq/roadmap-csharp",
       "start": "2024-01-01"
     },
-    {
-      "title": {
-        "en": "AI Skills Challenge - Microsoft",
-        "es": "Desafío IA - Microsoft"
-      },
-      "description": {
-        "en": "A series of challenges to test your AI skills by Microsoft.",
-        "es": "Una serie de desafíos para poner a prueba tus habilidades en IA por Microsoft."
-      },
-      "image": "/img/working-on/aichallenge.webp",
-      "technologies": [
-        "azure",
-        "microsoft"
-      ],
-      "private": "false",
-      "preview": "https://learn.microsoft.com/en-us/collections/moqrtod2e2z7?WT.mc_id=cloudskillschallenge_3ef5d197-cdef-49bc-a8bc-954bcd9e88cc&sharingId=C74FED9E989834A",
-      "start": "2024-03-27"
-    },
     {
       "title": {
         "en": "Parrot - Habits Tracker",

src/layouts/blog-layout.astro

@@ -1,16 +1,18 @@
 ---
 import Footer from '@components/main/footer.astro'
 import Layout from './layout.astro'
+
 interface Props {
   frontmatter: {
     title: string
     hrefLang: string
   }
 }
+
 const { frontmatter }: Props = Astro.props
 import Buttons from '@components/main/buttons.astro'
 
-// Mono Font
+// Mono Font for Code Blocks
 import '@fontsource/fira-mono'
 ---
 

src/pages/blog/building-this-website.mdx

@@ -5,6 +5,7 @@ hrefLang: ../es/blog/acerca-de-esta-web/
 ---
 
 import BitwiseLiminal from '@movies/bitwise-liminal.astro'
+import { Image } from 'astro:assets'
 
 <BitwiseLiminal />
 
@@ -26,9 +27,20 @@ You always can improve it later.
 - How to use MDX in Astro
 - Accessibility and SEO in Astro
 - GitHub Projects and GitHub Actions
+- I18n routing with Astro (Multilanguage)
 
 Explore the source code for this web on <a href="https://github.com/jamerrq/jamerrq.dev" target="_blank" rel="noopener noreferrer">GitHub</a>
 
+## First versions of this website
+
+These are the first versions of this same website:
+
+<Image src="/lib/snaps/v0.png" width="1366" height="768" alt="jamerrq.dev v0"/>
+
+<Image src="/lib/snaps/v1_light.png" width="1366" height="768" alt="jamerrq.dev v1"/>
+
+<Image src="/lib/snaps/v2_dark.png" width="1366" height="768" alt="jamerrq.dev v2"/>
+
 ## Some References
 
 - <a

src/pages/blog/convert-astro-app-to-pwa.mdx

@@ -188,13 +188,13 @@ import type { ManifestOptions } from "vite-plugin-pwa"
  * SEO configuration for the application.
  */
 export const seoConfig = {
-	baseURL: "yourappwebsite.com", // Production URL.
+	baseURL: "yourwebsite.com", // Production URL.
 	description:
 		"A brief description of your application.",
 	type: "website",
 	image: {
-		url: "https://jamerrq.deno.dev/og-image2.png",
-		alt: "jamerrq.dev",
+		url: "yourwebsite.com/img/og-image.png",
+		alt: "og-image",
 		width: 730,
 		height: 382,
 	},
@@ -209,8 +209,8 @@ export const seoConfig = {
  * Defines the configuration for PWA webmanifest.
  */
 export const manifest: Partial<ManifestOptions> = {
-	name: "jamerrq.dev",
-	short_name: "jamerrq.dev",
+	name: "Name of your application",
+	short_name: "A short name for your application",
 	description:
 		"A brief description of your application.",
 	theme_color: "#0F0F0F",
@@ -278,7 +278,7 @@ how you can include these tags in your `layout.astro` file:
 <!-- Sitemap -->
 <meta name="msapplication-config" content="/browserconfig.xml" />
 
-<!-- Worker Registration -->
+<!-- Worker and Manifest Registration -->
 {
   !import.meta.env.DEV && (
     <script is:inline src="/registerSW.js"></script>

src/pages/es/blog/acerca-de-esta-web.mdx

@@ -5,6 +5,7 @@ hrefLang: ../../../blog/building-this-website
 ---
 
 import BitwiseLiminal from '@movies/bitwise-liminal.astro'
+import { Image } from 'astro:assets'
 
 <BitwiseLiminal />
 
@@ -26,8 +27,21 @@ Siempre puedes mejorarlo más tarde.
 - Cómo usar MDX en Astro
 - Accesibilidad y SEO en Astro
 - GitHub Projects y GitHub Actions
+- I18n routing con Astro (Multilenguaje)
 
-Explora el código fuente de esta web en <a href="https://github.com/jamerrq/jamerrq.dev" target="_blank" rel="noopener noreferrer">GitHub</a>
+Explora el código fuente de esta web en <a
+href="https://github.com/jamerrq/jamerrq.dev" target="_blank" rel="noopener
+noreferrer">GitHub</a>
+
+## Primeras versiones de esta web
+
+Estas son las primeras versiones de esta misma web:
+
+<Image src="/lib/snaps/v0.png" width="1366" height="768" alt="jamerrq.dev v0"/>
+
+<Image src="/lib/snaps/v1.png" width="1366" height="768" alt="jamerrq.dev v1"/>
+
+<Image src="/lib/snaps/v2_dark.png" width="1366" height="768" alt="jamerrq.dev v2"/>
 
 ## Referencias
 

src/pages/oss/[page].astro

@@ -10,7 +10,7 @@ const { page = 1 } = Astro.params
 <Layout title='Open Source Para Todos'>
   <div class='w-[100dvw] h-[100dvh] fixed top-0 left-0 -z-50 bg-[#B3C8CF]/90'>
   </div>
-  <main class='w-[100dvw] h-[100dvh] grid place-content-center'>
+  <main class='w-[85dvw] min-h-[100dvh] grid place-content-center'>
     <CurrentPage index={+page} />
     <footer
       class='absolute bottom-0 left-0 w-full flex opacity-10 hover:opacity-100 transition-opacity duration-200 ease-in-out'

src/slides/oss/page10.astro

@@ -24,6 +24,6 @@ import Template from './template.astro'
   <img
     src='https://res.cloudinary.com/dm064xuo5/image/upload/f_auto,q_auto/v1/jamerrq.dev/jnux6zovz4edb39vle5f'
     alt='fork on GitHub'
-    class='rounded-lg w-1/2 mt-4'
+    class='rounded-lg xl:w-1/2 mt-4'
   />
 </Template>

src/slides/oss/page11.astro

@@ -23,6 +23,6 @@ import Template from './template.astro'
   <img
     src='https://res.cloudinary.com/dm064xuo5/image/upload/f_auto,q_auto/v1/jamerrq.dev/arrcwiisxadbkqcf9xts'
     alt='gh cli manual'
-    class='rounded-lg w-1/2 mt-4'
+    class='rounded-lg xl:w-1/2 mt-4'
   />
 </Template>

src/slides/oss/page12.astro

@@ -10,7 +10,7 @@ import Template from './template.astro'
     Source
   </h1>
   <ul
-    class='text-center text-balance [&_li]:bg-slate-800 [&_li]:px-3 [&_li]:py-2 [&_li]:rounded [&_li]:font-semibold flex gap-3 flex-col max-w-1/2 mx-auto mt-4 w-[33%] xl:w-[50%] xl:grid xl:grid-cols-2 [&_li]:text-pretty [&_li]:flex [&_li]:items-center [&_li]:justify-center'
+    class='text-center text-balance [&_li]:bg-slate-800 [&_li]:px-3 [&_li]:py-2 [&_li]:rounded [&_li]:font-semibold flex gap-3 flex-col xl:max-w-1/2 mx-auto mt-4 xl:w-[50%] xl:grid xl:grid-cols-2 [&_li]:text-pretty [&_li]:flex [&_li]:items-center [&_li]:justify-center text-xs xl:text-base'
   >
     <li>
       <span>
@@ -63,8 +63,9 @@ import Template from './template.astro'
       <span>
         <span class='font-bold'>6.</span>
         <span>
-          <span class='font-bold'>A veces es mejor abrir un issue:</span> Si no estás
-          seguro de cómo contribuir, es mejor abrir un issue y preguntar.
+          <span class='font-bold'>No te limites a los commits:</span> Si no estás
+          seguro de cómo contribuir, puedes empezar por reportar errores, sugerir
+          mejoras o ayudar a otros colaboradores.
         </span>
       </span>
     </li>

src/slides/oss/page13.astro

@@ -9,21 +9,21 @@ import Template from './template.astro'
     Algunas Referencias
   </h1>
   <ul
-    class='text-center text-balance [&_li]:bg-slate-800 [&_li]:px-3 [&_li]:py-2 [&_li]:rounded [&_li]:font-semibold flex gap-3 flex-col max-w-1/2 mx-auto mt-4 [&_li]:text-blue-400'
+    class='text-center text-balance [&_li]:bg-slate-800 [&_li]:px-3 [&_li]:py-2 [&_li]:rounded [&_li]:font-semibold flex gap-3 flex-col max-w-1/2 mx-auto mt-4 [&_li]:text-blue-200'
   >
-    <li>
+    <li class='hover:scale-105 transition-scale duration-300 hover:shadow'>
       <span>
         1. <a href='https://opensource.org/' target='_blank' rel='noreferrer'
           >Iniciativa Open Source</a
         >
       </span>
     </li>
-    <li>
+    <li class='hover:scale-105 transition-scale duration-300 hover:shadow'>
       2. <a href='https://cli.github.com/' target='_blank' rel='noreferrer'>
         GitHub Cli</a
       >
     </li>
-    <li>
+    <li class='hover:scale-105 transition-scale duration-300 hover:shadow'>
       3. <a
         href='https://github.com/mouredev/roadmap-retos-programacion'
         target='_blank'

src/slides/oss/page14.astro

@@ -10,18 +10,18 @@ import Template from './template.astro'
   </h1>
   <img
     src='https://jamerrq.deno.dev/og-image2.png'
-    class='rounded w-2/3'
+    class='rounded xl:w-2/3'
     alt='@jamerrq'
   />
-  <span class='text-slate-800 font-semibold italic [&_a]:text-blue-500'>
+  <span class='text-slate-800 font-semibold italic [&_a]:text-blue-800'>
     Presentación para el <a
       href='https://holamundo.day/'
       target='_blank'
       rel='noreferrer'>#HolaMundoDay</a
     > por <a
       href='https://www.twitch.tv/mouredev'
       target='_blank'
-      rel='noreferrer'>MoureDev</a
+      rel='noreferrer'>@MoureDev</a
     >
   </span>
 </Template>

src/slides/oss/page2.astro

@@ -9,14 +9,14 @@ import Template from './template.astro'
     Contenidos
   </h1>
   <ul
-    class='list-disc bg-blueBoard px-2 py-1 gap-4 flex flex-col rounded font-semibold'
+    class='list-disc bg-blueBoard px-6 py-1 gap-4 flex flex-col rounded font-semibold marker:text-slate-200'
   >
     <li>
       <span> Una breve introducción a la iniciativa Open Source</span>
     </li>
     <li>
       <span>¡Empezamos a picar! - Parte Práctica con el Roadmap</span>
-      <ul class='list-disc ml-6 my-1 gap-1 flex flex-col'>
+      <ul class='list-disc ml-6 my-1 gap-1 flex flex-col marker:text-blue-300'>
         <li>
           <span>
             Configuramos nuestras llaves de SSH para trabajar con GitHub
@@ -47,7 +47,7 @@ import Template from './template.astro'
       </ul>
     </li>
     <li>
-      <span> Consideraciones a tener en cuenta antes de contribuir</span>
+      <span> Consideraciones a tener en cuenta a la hora de contribuir</span>
     </li>
   </ul>
   <a class='absolute left-1 top-1/2' href='/oss/0'>

src/slides/oss/page3.astro

@@ -12,9 +12,9 @@ import Template from './template.astro'
     <img
       src='https://res.cloudinary.com/dm064xuo5/image/upload/f_auto,q_auto/ed2a8b0dvg5ltorw45eq'
       alt='open source illustration'
-      class='animate-fade-in-right animate-delay-500 w-1/3 mt-3 mb-1'
+      class='animate-fade-in-right animate-delay-500 w-1/3 mt-3 mb-1 hidden lg:block xl:block'
     />
-    <aside class='ml-8 max-w-[33%] text-balance'>
+    <aside class='ml-8 xl:max-w-[33%] text-balance'>
       <ul class='list-disc font-semibold text-slate-900'>
         <li>
           <span>
@@ -48,7 +48,7 @@ import Template from './template.astro'
       </ul>
     </aside>
     <div
-      class='absolute left-1/3 ml-2 bottom-28 bg-slate-50 px-1 py-0.5 rounded shadow-md font-medium text-slate-900 text-sm'
+      class='absolute left-1/3 ml-2 bottom-[10%] bg-slate-50 px-1 py-0.5 rounded shadow-md font-medium text-slate-900 text-sm'
     >
       <span class='italic'>
         Puedes visitar <a

src/slides/oss/page5.astro

@@ -16,6 +16,6 @@ import Template from './template.astro'
   <img
     src='https://res.cloudinary.com/dm064xuo5/image/upload/f_auto,q_auto/v1/jamerrq.dev/ma9kmtkev08n8jk6wf8e'
     alt='gpg keys example'
-    class='rounded-lg w-1/2 mt-4'
+    class='rounded-lg xl:w-1/2 mt-4'
   />
 </Template>