diff --git a/astro.config.ts b/astro.config.ts
index 04399d2..0a13bee 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -96,5 +96,8 @@ export default defineConfig({
     build: {
       cssMinify: 'lightningcss'
     }
+  },
+  redirects: {
+    '/oss': '/oss/0'
   }
 })
diff --git a/public/oss.webp b/public/oss.webp
deleted file mode 100644
index 50a5f23..0000000
Binary files a/public/oss.webp and /dev/null differ
diff --git a/public/oss2.webp b/public/oss2.webp
new file mode 100644
index 0000000..8664037
Binary files /dev/null and b/public/oss2.webp differ
diff --git a/public/oss3.webp b/public/oss3.webp
new file mode 100644
index 0000000..3e87360
Binary files /dev/null and b/public/oss3.webp differ
diff --git a/public/oss4.webp b/public/oss4.webp
new file mode 100644
index 0000000..71dee0a
Binary files /dev/null and b/public/oss4.webp differ
diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
index 650d353..1d64102 100644
--- a/src/components/featured-and-projects/projects.tsx
+++ b/src/components/featured-and-projects/projects.tsx
@@ -1,6 +1,9 @@
 import { data } from '@data/projects.json'
-
 import { shuffle } from '@utils'
+import simpleIcons, { type toExportType } from '@components/icons/simple-icon'
+import { DoubleLeft, DoubleRight } from './icons'
+import { signal, effect } from '@preact/signals'
+import { h } from 'preact'
 
 const shuffledData = import.meta.env.DEV ? data : shuffle([...data])
 
@@ -12,8 +15,6 @@ const concatedData = featured.concat(notFeatured)
 const screenWidth = window.innerWidth
 const isScreenWidthEnough = screenWidth >= 1024
 
-import { signal, effect } from '@preact/signals'
-
 const index = signal(0)
 const imagesIndex = signal(0)
 
@@ -22,11 +23,8 @@ type ResourcesProps = {
   lang?: string
 }
 
-import simpleIcons, { type toExportType } from '@components/icons/simple-icon'
-import { DoubleLeft, DoubleRight } from './icons'
-
 export const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
-  <div class='left-1 bottom-1 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'>
+  <div class='left-1 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'>
     <button onClick={_f} title={'iterate over'}>
       <DoubleLeft />
     </button>
@@ -35,7 +33,7 @@ export const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
 
 export const DoubleRightButton = ({ _f }: { _f: () => void }) => (
   <div
-    class={`right-1 bottom-1 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`}
+    class={`right-1 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`}
   >
     <button onClick={_f} title={'iterate over'}>
       <DoubleRight />
@@ -43,8 +41,6 @@ export const DoubleRightButton = ({ _f }: { _f: () => void }) => (
   </div>
 )
 
-import { h } from 'preact'
-
 function SimpleIcon(key: string) {
   if (key === 'javascript') {
     console.log('key', key)
diff --git a/src/components/featured-and-projects/resources.tsx b/src/components/featured-and-projects/resources.tsx
index a42c388..5ee021e 100644
--- a/src/components/featured-and-projects/resources.tsx
+++ b/src/components/featured-and-projects/resources.tsx
@@ -38,7 +38,7 @@ const DoubleDownButton = ({ _f }: { _f: () => void }) => (
 )
 
 const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
-  <div class='left-1 absolute bg-slate-900 dark:bg-slate-300 rounded-full text-cyan-950 dark:text-cyan-300 fill-current hidden xl:flex flex-wrap items-center justify-center p-1 shadow-md shadow-black/90'>
+  <div class='left-1 absolute bg-slate-900 dark:bg-slate-300 rounded-[10px] text-cyan-950 dark:text-cyan-300 fill-current hidden xl:flex flex-wrap items-center justify-center p-1 shadow-md shadow-black/90'>
     <button onClick={_f} title={'iterate over'}>
       <DoubleLeft />
     </button>
@@ -47,7 +47,7 @@ const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
 
 const DoubleRightButton = ({ _f }: { _f: () => void }) => (
   <div
-    class={`right-1 absolute bg-slate-900 dark:bg-slate-300 rounded-full text-cyan-950 dark:text-cyan-300 fill-current hidden xl:flex flex-wrap items-center justify-center p-1 shadow-md shadow-black/90`}
+    class={`right-1 absolute bg-slate-900 dark:bg-slate-300 rounded-[10px] text-cyan-950 dark:text-cyan-300 fill-current hidden xl:flex flex-wrap items-center justify-center p-1 shadow-md shadow-black/90`}
   >
     <button onClick={_f} title={'iterate over'}>
       <DoubleRight />
diff --git a/src/components/icons/tech-icon.astro b/src/components/icons/tech-icon.astro
index 53a4778..e28da3a 100644
--- a/src/components/icons/tech-icon.astro
+++ b/src/components/icons/tech-icon.astro
@@ -8,22 +8,11 @@ interface Props {
 }
 
 const { __html, href = '#', name: title = 'Icon' } = Astro.props.obj
-
-const TECH_ICON_STYLES = [
-  'xl:w-10 w-8',
-  'xl:h-10 h-8',
-  'hover:scale-110',
-  'transition-all',
-  'dark:bg-slate-300/70',
-  'bg-slate-900',
-  'p-2',
-  'rounded-md',
-  // 'border-2',
-  'fill-slate-50',
-  'dark:fill-slate-900'
-].join(' ')
 ---
 
 <a href={href} target='_blank' rel='noopener noreferrer' title={title}>
-  <svg class={TECH_ICON_STYLES} set:html={__html} />
+  <svg
+    class='xl:w-10 w-8 xl:h-10 h-8 hover:scale-110 transition-all dark:bg-slate-300/70 bg-slate-900 p-2 rounded-md fill-slate-50 dark:fill-slate-900'
+    set:html={__html}
+  />
 </a>
diff --git a/src/components/main/socials.astro b/src/components/main/socials.astro
index bef8311..066fbf7 100644
--- a/src/components/main/socials.astro
+++ b/src/components/main/socials.astro
@@ -21,7 +21,9 @@ const socials = getIconsFn(lang)
   otherStyles='xl:col-span-2 xl:row-span-2 justify-around'
 >
   <header class='flex gap-2 dark:text-emerald-300 text-slate-950'>
-    <p class='font-semibold text-3xl xl:text-4xl'>Contact Links</p>
+    <p class='font-semibold text-3xl xl:text-4xl'>
+      {lang === 'en' ? 'Contact Me' : 'Contáctame'}
+    </p>
     <GenericIcon svg={siMaildotru.svg} />
   </header>
   <EmailBadge lang={lang} />
diff --git a/src/movies/Movie.astro b/src/movies/Movie.astro
index 4a0375f..20d3e4f 100644
--- a/src/movies/Movie.astro
+++ b/src/movies/Movie.astro
@@ -18,20 +18,19 @@ const {
   href={href}
   target='_blank'
   rel='noopener noreferrer'
-  class='w-full h-full grid place-content-center'
+  class='grid place-content-center'
   title={title}
   aria-label={title}
 >
   <video
     src={src}
     autoplay
-    style='width: 100%; height: 100%;'
     muted
     loop
     playsinline
     preload='auto'
     data-abs={absolute}
-    class='object-cover rounded data-[abs]:absolute'
+    class='object-cover rounded h-48'
   >
   </video>
 </a>
diff --git a/src/pages/blog/building-this-website.mdx b/src/pages/blog/building-this-website.mdx
index 17927f7..8c61d25 100644
--- a/src/pages/blog/building-this-website.mdx
+++ b/src/pages/blog/building-this-website.mdx
@@ -4,11 +4,16 @@ title: About this website
 hrefLang: ../es/blog/acerca-de-esta-web/
 ---
 
-import CityInABottle from '@movies/city-in-a-bottle.astro'
+import BitwiseLiminal from '@movies/bitwise-liminal.astro'
 
-<CityInABottle />
+<BitwiseLiminal />
 
-## What can you learn from this project?
+## Better started than perfect
+
+Starting something is sometimes the key to get it done.
+You always can improve it later.
+
+## What can you learn from this website?
 
 - Astro Server Side Rendering with Deno and Deno Deploy
 - Astro View Transitions
@@ -17,6 +22,7 @@ import CityInABottle from '@movies/city-in-a-bottle.astro'
 - CSS Grid & Flexbox Layouts
 - PWA Development within an Astro App
 - Tailwind Tricks and Plugins
+- Dark Mode with Tailwind CSS
 - How to use MDX in Astro
 - Accessibility and SEO in Astro
 - GitHub Projects and GitHub Actions
diff --git a/src/pages/blog/convert-astro-app-to-pwa.mdx b/src/pages/blog/convert-astro-app-to-pwa.mdx
index 36f50e9..0a2c475 100644
--- a/src/pages/blog/convert-astro-app-to-pwa.mdx
+++ b/src/pages/blog/convert-astro-app-to-pwa.mdx
@@ -345,3 +345,8 @@ rel="noopener">website</a>.
 
 Thanks for reading! I hope this tutorial has been helpful to you.
 Happy coding! :p
+
+## Some References
+
+- <a href="https://vite-pwa-org.netlify.app/" target="_blank" rel="noopener noreferrer">PWA Plugin for Vite</a>
+- <a href="https://web.dev/progressive-web-apps/" target="_blank" rel="noopener noreferrer">Progressive Web Apps</a>
diff --git a/src/pages/board.astro b/src/pages/board.astro
index b916631..bcb4aa9 100644
--- a/src/pages/board.astro
+++ b/src/pages/board.astro
@@ -84,7 +84,6 @@ import Page1 from '@slides/oss/page1.astro'
           Board
         </h1>
       </header>
-      <!-- svg: first layer -->
       <Page1 />
       <footer
         class='absolute bottom-0 left-0 w-full flex opacity-10 hover:opacity-100 transition-opacity duration-200 ease-in-out'
diff --git a/src/pages/es/blog/acerca-de-esta-web.mdx b/src/pages/es/blog/acerca-de-esta-web.mdx
index 6c4b4e6..04f438a 100644
--- a/src/pages/es/blog/acerca-de-esta-web.mdx
+++ b/src/pages/es/blog/acerca-de-esta-web.mdx
@@ -4,9 +4,14 @@ title: Sobre esta web
 hrefLang: ../../../blog/building-this-website
 ---
 
-import CityInABottle from '@movies/city-in-a-bottle.astro'
+import BitwiseLiminal from '@movies/bitwise-liminal.astro'
 
-<CityInABottle />
+<BitwiseLiminal />
+
+## Mejor empezar que perfecto
+
+Empezar algo es a veces la clave para terminarlo.
+Siempre puedes mejorarlo más tarde.
 
 ## ¿Qué puedes aprender de este proyecto?
 
@@ -17,6 +22,7 @@ import CityInABottle from '@movies/city-in-a-bottle.astro'
 - Diseños con CSS Grid y Flexbox
 - Desarrollo de PWA dentro de una aplicación Astro
 - Trucos y plugins de Tailwind
+- Modo oscuro con Tailwind CSS
 - Cómo usar MDX en Astro
 - Accesibilidad y SEO en Astro
 - GitHub Projects y GitHub Actions
diff --git a/src/pages/es/blog/convertir-astro-app-en-pwa.mdx b/src/pages/es/blog/convertir-astro-app-en-pwa.mdx
index 40ba36d..52d33c7 100644
--- a/src/pages/es/blog/convertir-astro-app-en-pwa.mdx
+++ b/src/pages/es/blog/convertir-astro-app-en-pwa.mdx
@@ -393,3 +393,8 @@ web](https://lumina-sigma.vercel.app/) directamente.
 </a>
 
 Gracias por leer! Espero que este tutorial te haya sido útil :p
+
+## Algunas Referencias
+
+- <a href="https://vite-pwa-org.netlify.app/" target="_blank" rel="noopener noreferrer">PWA Plugin for Vite</a>
+- <a href="https://web.dev/progressive-web-apps/" target="_blank" rel="noopener noreferrer">Progressive Web Apps</a>
diff --git a/src/pages/oss/[page].astro b/src/pages/oss/[page].astro
new file mode 100644
index 0000000..eac588b
--- /dev/null
+++ b/src/pages/oss/[page].astro
@@ -0,0 +1,21 @@
+---
+import Layout from '@layouts/layout.astro'
+import Buttons from '@components/main/buttons.astro'
+
+import CurrentPage from '@slides/oss/currentPage.astro'
+
+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'>
+    <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'
+    >
+      <Buttons rounded={false} />
+    </footer>
+  </main>
+</Layout>
diff --git a/src/slides/oss/currentPage.astro b/src/slides/oss/currentPage.astro
new file mode 100644
index 0000000..5226257
--- /dev/null
+++ b/src/slides/oss/currentPage.astro
@@ -0,0 +1,44 @@
+---
+interface Props {
+  index?: number
+}
+
+import Page1 from './page1.astro'
+import Page2 from './page2.astro'
+import Page3 from './page3.astro'
+import Page4 from './page4.astro'
+import Page5 from './page5.astro'
+import Page6 from './page6.astro'
+import Page7 from './page7.astro'
+import Page8 from './page8.astro'
+import Page9 from './page9.astro'
+import Page10 from './page10.astro'
+import Page11 from './page11.astro'
+import Page12 from './page12.astro'
+import Page13 from './page13.astro'
+import Page14 from './page14.astro'
+import Page15 from './page15.astro'
+
+const { index = 0 } = Astro.props
+---
+
+{index === 0 && <Page1 />}
+{index === 1 && <Page2 />}
+{index === 2 && <Page3 />}
+{index === 3 && <Page4 />}
+{index === 4 && <Page5 />}
+{index === 5 && <Page6 />}
+{index === 6 && <Page7 />}
+{index === 7 && <Page8 />}
+{index === 8 && <Page9 />}
+{index === 9 && <Page10 />}
+{index === 10 && <Page11 />}
+{index === 11 && <Page12 />}
+{index === 12 && <Page13 />}
+{index === 13 && <Page14 />}
+{index === 14 && <Page15 />}
+
+<span
+  class='bg-indigo-100 text-indigo-800 text-xs font-firaSans font-bold px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300 absolute right-0.5 top-0.5'
+  >Page {+index + 1}</span
+>
diff --git a/src/slides/oss/page1.astro b/src/slides/oss/page1.astro
index 3d84cea..8a35f95 100644
--- a/src/slides/oss/page1.astro
+++ b/src/slides/oss/page1.astro
@@ -1,7 +1,11 @@
-<article class='text-gray-100 font-primary flex gap-2 flex-col items-center'>
+---
+import Template from './template.astro'
+---
+
+<Template index={0}>
   <style>
     .wave {
-      animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
+      animation-name: wave-animation;
       animation-duration: 2.5s; /* Change to speed up or slow down */
       animation-iteration-count: infinite; /* Never stop waving :) */
       transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
@@ -14,7 +18,7 @@
       }
       10% {
         transform: rotate(14deg);
-      } /* The following five values can be played with to make the waving more or less extreme */
+      }
       20% {
         transform: rotate(-8deg);
       }
@@ -45,117 +49,40 @@
     }
   </style>
   <span
-    class='px-2 py-1 rounded text-center font-primary font-bold animate-slide-in-top text-xl bg-[#153448] w-fit'
+    class='px-2 py-1 rounded text-center font-primary font-bold animate-slide-in-top text-xl bg-blueBoard w-fit'
   >
     ¡Hola! <span class='wave'>👋🏾</span><br /> Bienvenidos a
   </span>
   <img
-    src='oss.webp'
+    src='https://res.cloudinary.com/dm064xuo5/image/upload/f_auto,q_auto/v1/jamerrq.dev/z41jwrqiwb3yuy91j4gu'
     alt='open source illustration'
-    class='animate-fade-in-right animate-delay-500 w-24 drop-shadow-lg'
+    class='animate-fade-in-right animate-delay-500 w-[100px] mt-3 mb-1'
   />
   <h1
-    class='text-5xl font-bold animate-slide-in-bottom bg-[#153448] rounded px-2 py-1'
+    class='text-5xl font-bold animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
     id='slide-title'
   >
-    Open Source Para Principiantes
+    Open Source Para Todos
   </h1>
   <h2
-    class='text-base text-center font-semibold font-secondary animate-fade-in-left animate-delay-500 bg-[#153448] rounded px-2 py-1'
+    class='text-base text-center font-semibold font-secondary animate-fade-in-left animate-delay-500 bg-blueBoard rounded px-2 py-1'
   >
     Aprendamos acerca del mundo del código abierto, cómo contribuir y colaborar
     en proyectos de software libre
   </h2>
-  <h3
-    class='text-base text-center font-semibold font-secondary animate-fade-in-right animate-delay-800 bg-[#153448] rounded px-2 py-1'
-  >
-    👾 ¿Conoces el código Konami? 🎮
-  </h3>
-</article>
-<aside class='mx-auto justify-center items-center blur' id='player-section'>
-  <img src='music_disc.webp' alt='strad' class='w-24 mx-auto' />
-  <marquee class='font-bold font-primary bg-[#153448] text-gray-100 rounded'>
-    Now Playing: Strad - C418</marquee
-  >
-</aside>
+</Template>
 <script>
   const h1 = document.querySelector('#slide-title')!
-  // add the class animate-blink after 2 seconds
-  // and also remove the class animate-slide-in-bottom while
-  // adding the class animate-iteration-count-thrice
+  const h1ClassList = h1?.classList
   setTimeout(() => {
-    if (h1?.classList.contains('animate-slide-in-bottom')) {
-      h1?.classList.remove('animate-slide-in-bottom')
+    if (h1ClassList.contains('animate-slide-in-bottom')) {
+      h1ClassList.remove('animate-slide-in-bottom')
     }
-    h1?.classList.add('animate-blink')
-    h1?.classList.remove('animate-slide-in-bottom')
-    if (h1?.classList.contains('animate-iteration-count-thrice')) {
-      h1?.classList.remove('animate-iteration-count-thrice')
+    h1ClassList.add('animate-blink')
+    h1ClassList.remove('animate-slide-in-bottom')
+    if (h1ClassList.contains('animate-iteration-count-thrice')) {
+      h1ClassList.remove('animate-iteration-count-thrice')
     }
-    h1?.classList.add('animate-iteration-count-thrice')
+    h1ClassList.add('animate-iteration-count-thrice')
   }, 1000)
-
-  // every 5 seconds, recreate the blinking effect
-  setInterval(() => {
-    // if the class is already there, remove it
-    if (h1?.classList.contains('animate-blink')) {
-      h1?.classList.remove('animate-blink')
-    }
-    h1?.classList.add('animate-blink')
-  }, 5000)
-
-  // konami code will play a sound
-  const konamiCode = [
-    'ArrowUp',
-    'ArrowUp',
-    'ArrowDown',
-    'ArrowDown',
-    'ArrowLeft',
-    'ArrowRight',
-    'ArrowLeft',
-    'ArrowRight',
-    'b',
-    'a'
-  ]
-  let konamiCodePosition = 0
-  const boardBackground = document.getElementById('board-background')
-  const playerSection = document.getElementById('player-section')
-  document.addEventListener('keydown', (e) => {
-    if (e.key === konamiCode[konamiCodePosition]) {
-      konamiCodePosition++
-      if (konamiCodePosition === konamiCode.length) {
-        playKonamiSound()
-        boardBackground?.classList.toggle('hidden')
-        playerSection?.classList.remove('blur')
-        playerSection?.classList.add('animate-slide-in-top')
-        const image = document.querySelector('#player-section img')
-        image?.classList.add('animate-spin-clockwise')
-        konamiCodePosition = 0
-      }
-    } else {
-      konamiCodePosition = 0
-    }
-  })
-
-  const audio = new Audio('/songs/strad.mp3')
-
-  const playKonamiSound = () => {
-    audio.volume = 0.25
-    audio.play()
-  }
-
-  // on click in the player section, the music will stop
-  playerSection?.addEventListener('click', () => {
-    audio.pause()
-    audio.currentTime = 0
-    playerSection?.classList.add('blur')
-    playerSection?.classList.remove('animate-slide-in-top')
-    playerSection?.classList.add('animate-slide-out-top')
-    const image = document.querySelector('#player-section img')
-    image?.classList.remove('animate-spin-clockwise')
-    setTimeout(() => {
-      boardBackground?.classList.toggle('hidden')
-      playerSection?.classList.remove('animate-slide-out-top')
-    }, 1000)
-  })
 </script>
diff --git a/src/slides/oss/page10.astro b/src/slides/oss/page10.astro
new file mode 100644
index 0000000..ae7db99
--- /dev/null
+++ b/src/slides/oss/page10.astro
@@ -0,0 +1,29 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={9}>
+  <h1
+    class='text-4xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    Branch: ZSH Plugin for GIT branch aliases
+  </h1>
+  <p class='text-balance text-center text-slate-900'>
+    Si usas ZSH puedes agregar este plugin que en lo personal me hace la vida
+    más fácil. Con este, podrías ahora tener un comando más familiar como <code
+      class='text-blue-300 italic px-1 py-0.5 rounded bg-slate-900'
+      >branch new branch-name
+    </code>
+    puedes clonar tu fork en tu máquina local. Ejemplo:
+  </p>
+  <span>
+    <code class='text-blue-300 italic px-1 py-0.5 rounded bg-slate-900'
+      >branch new roadmap-17
+    </code>
+  </span>
+  <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'
+  />
+</Template>
diff --git a/src/slides/oss/page11.astro b/src/slides/oss/page11.astro
new file mode 100644
index 0000000..debec93
--- /dev/null
+++ b/src/slides/oss/page11.astro
@@ -0,0 +1,28 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={10}>
+  <h1
+    class='text-4xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    ¿Qué es y cómo hacer una Pull Request?
+  </h1>
+  <p class='text-balance text-center text-slate-900'>
+    Una <strong>Pull Request</strong> es una petición que se hace a un repositorio
+    para que se incorporen los cambios que se han hecho en una rama. Es la forma
+    más común de contribuir a un proyecto en GitHub.
+  </p>
+  <span class='text-slate-800 italic'>
+    Si tienes el cli de GitHub instalado, puedes hacer una Pull Request con el
+    siguiente comando:
+    <code class='text-blue-300 italic px-1 py-0.5 rounded bg-slate-900'
+      >gh pr create
+    </code>
+  </span>
+  <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'
+  />
+</Template>
diff --git a/src/slides/oss/page12.astro b/src/slides/oss/page12.astro
new file mode 100644
index 0000000..73349f9
--- /dev/null
+++ b/src/slides/oss/page12.astro
@@ -0,0 +1,72 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={11}>
+  <h1
+    class='text-xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1 text-center text-pretty max-w-1/2'
+  >
+    Recomendaciones a tener en cuenta a la hora de contribuir a un proyecto Open
+    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'
+  >
+    <li>
+      <span>
+        <span class='font-bold'>1.</span>
+        <span>
+          <span class='font-bold'>Conocer el proyecto:</span> Antes de contribuir
+          a un proyecto, es importante conocerlo y entender su propósito.
+        </span>
+      </span>
+    </li>
+    <li>
+      <span>
+        <span class='font-bold'>2.</span>
+        <span>
+          <span class='font-bold'>Leer la documentación:</span> Es importante leer
+          la documentación del proyecto para entender cómo funciona y cómo contribuir.
+        </span>
+      </span>
+    </li>
+    <li>
+      <span>
+        <span class='font-bold'>3.</span>
+        <span>
+          <span class='font-bold'>No todo es código:</span> No es necesario ser un
+          experto en programación para contribuir a un proyecto Open Source. Hay
+          muchas formas de contribuir. Sólo asegúrate de aportar valor.
+        </span>
+      </span>
+    </li>
+    <li>
+      <span>
+        <span class='font-bold'>4.</span>
+        <span>
+          <span class='font-bold'>Respetar las normas:</span> Cada proyecto tiene
+          sus propias normas y guías de contribución. Es importante respetarlas.
+        </span>
+      </span>
+    </li>
+    <li>
+      <span>
+        <span class='font-bold'>5.</span>
+        <span>
+          <span class='font-bold'>Ser amable y respetuoso:</span> Al contribuir a
+          un proyecto Open Source, es importante ser amable y respetuoso con los
+          demás colaboradores.
+        </span>
+      </span>
+    </li>
+    <li>
+      <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>
+      </span>
+    </li>
+  </ul>
+</Template>
diff --git a/src/slides/oss/page13.astro b/src/slides/oss/page13.astro
new file mode 100644
index 0000000..3cf3b4b
--- /dev/null
+++ b/src/slides/oss/page13.astro
@@ -0,0 +1,36 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={12}>
+  <h1
+    class='text-xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1 text-center text-pretty max-w-1/2'
+  >
+    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'
+  >
+    <li>
+      <span>
+        1. <a href='https://opensource.org/' target='_blank' rel='noreferrer'
+          >Iniciativa Open Source</a
+        >
+      </span>
+    </li>
+    <li>
+      2. <a href='https://cli.github.com/' target='_blank' rel='noreferrer'>
+        GitHub Cli</a
+      >
+    </li>
+    <li>
+      3. <a
+        href='https://github.com/mouredev/roadmap-retos-programacion'
+        target='_blank'
+        rel='noreferrer'
+      >
+        Roadmap de la comunidad
+      </a>
+    </li>
+  </ul>
+</Template>
diff --git a/src/slides/oss/page14.astro b/src/slides/oss/page14.astro
new file mode 100644
index 0000000..153e1b4
--- /dev/null
+++ b/src/slides/oss/page14.astro
@@ -0,0 +1,27 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={13} last>
+  <h1
+    class='text-xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1 text-center text-pretty max-w-1/2'
+  >
+    ¡Muchas gracias!
+  </h1>
+  <img
+    src='https://jamerrq.deno.dev/og-image2.png'
+    class='rounded w-2/3'
+    alt='@jamerrq'
+  />
+  <span class='text-slate-800 font-semibold italic [&_a]:text-blue-500'>
+    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
+    >
+  </span>
+</Template>
diff --git a/src/slides/oss/page15.astro b/src/slides/oss/page15.astro
new file mode 100644
index 0000000..e69de29
diff --git a/src/slides/oss/page2.astro b/src/slides/oss/page2.astro
new file mode 100644
index 0000000..d9df67a
--- /dev/null
+++ b/src/slides/oss/page2.astro
@@ -0,0 +1,75 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={1}>
+  <h1
+    class='text-5xl font-bold animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    Contenidos
+  </h1>
+  <ul
+    class='list-disc bg-blueBoard px-2 py-1 gap-4 flex flex-col rounded font-semibold'
+  >
+    <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'>
+        <li>
+          <span>
+            Configuramos nuestras llaves de SSH para trabajar con GitHub
+          </span>
+        </li>
+        <li>
+          <span>
+            Adaptamos Visual Studio Code para trabajar con Git y GitHub
+          </span>
+        </li>
+        <li>
+          <span> Fork del repositorio</span>
+        </li>
+        <li>
+          <span> Clonar el repositorio en tu máquina local</span>
+        </li>
+        <li>
+          <span> Crea tu rama de trabajo</span>
+        </li>
+        <li>
+          <span> Realiza los cambios necesarios y sube tu rama</span>
+        </li>
+        <li>
+          <span>
+            Creamos nuestro primer Pull Request y esperamos la revisión
+          </span>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <span> Consideraciones a tener en cuenta antes de contribuir</span>
+    </li>
+  </ul>
+  <a class='absolute left-1 top-1/2' href='/oss/0'>
+    <svg
+      viewBox='0 0 448 512'
+      class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M77.25 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C175.6 444.9 183.8 448 192 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L77.25 256zM269.3 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C367.6 444.9 375.8 448 384 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L269.3 256z'
+      ></path>
+    </svg>
+  </a>
+  <a class='absolute right-1 top-1/2' href='/oss/2'>
+    <svg
+      viewBox='0 0 448 512'
+      class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M246.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L178.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C47.63 444.9 55.81 448 64 448s16.38-3.125 22.62-9.375l160-160C259.1 266.1 259.1 245.9 246.6 233.4zM438.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L370.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C239.6 444.9 247.8 448 256 448s16.38-3.125 22.62-9.375l160-160C451.1 266.1 451.1 245.9 438.6 233.4z'
+      ></path>
+    </svg>
+  </a>
+</Template>
diff --git a/src/slides/oss/page3.astro b/src/slides/oss/page3.astro
new file mode 100644
index 0000000..2bfc7c7
--- /dev/null
+++ b/src/slides/oss/page3.astro
@@ -0,0 +1,65 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={2}>
+  <h1
+    class='text-4xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    Breve introducción a la Iniciativa Open Source
+  </h1>
+  <div class='flex flex-row items-center justify-center'>
+    <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'
+    />
+    <aside class='ml-8 max-w-[33%] text-balance'>
+      <ul class='list-disc font-semibold text-slate-900'>
+        <li>
+          <span>
+            Nace en 1998 con la creación de la Open Source Initiative (OSI)
+          </span>
+        </li>
+        <li>
+          <span>
+            Se basa en la colaboración y la transparencia en el desarrollo de
+            software
+          </span>
+        </li>
+        <li>
+          <span>
+            Permite a cualquier persona acceder al código fuente de un programa
+            y modificarlo a tu gusto
+          </span>
+        </li>
+        <li>
+          <span>
+            Se rige por una licencia que establece las condiciones de uso y
+            distribución
+          </span>
+        </li>
+        <li>
+          <span>
+            Hoy en día existen miles de proyectos de código abierto en todo el
+            mundo con grandes comunidades de desarrolladores y usuarios
+          </span>
+        </li>
+      </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'
+    >
+      <span class='italic'>
+        Puedes visitar <a
+          href='https://github.com/firstcontributions/first-contributions/blob/main/translations/README.es.md'
+          target='_blank'
+          rel='noopener noreferrer'
+          class='text-blue-500'>First Contributions</a
+        > un proyecto patrocinado por
+        <a href='https://www.digitalocean.com/'> Digital Ocean</a>
+        , para dar un vistazo a proyectos para primeras contribuciones
+      </span>
+    </div>
+  </div>
+</Template>
diff --git a/src/slides/oss/page4.astro b/src/slides/oss/page4.astro
new file mode 100644
index 0000000..0c3b69e
--- /dev/null
+++ b/src/slides/oss/page4.astro
@@ -0,0 +1,188 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={3}>
+  <h1
+    class='text-4xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    ¡Empezamos a Picar!
+  </h1>
+  <span class='font-bold text-slate-900'> ¿Qué necesitas para empezar?</span>
+  <div class='text-slate-900 flex gap-4'>
+    <a
+      href='https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home'
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      <svg
+        viewBox='0 0 256 250'
+        width='77'
+        height='77'
+        fill='currentColor'
+        xmlns='http://www.w3.org/2000/svg'
+        preserveAspectRatio='xMidYMid'
+        class='hover:scale-110 transition-scale duration-300 hover:drop-shadow-lg'
+      >
+        <path
+          d='M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z'
+        ></path>
+      </svg>
+    </a>
+    <a
+      href='https://git-scm.com/downloads'
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        preserveAspectRatio='xMidYMid'
+        viewBox='0 0 256 256'
+        width='77'
+        height='77'
+        class='hover:scale-110 transition-scale duration-300 hover:drop-shadow-lg'
+      >
+        <path
+          d='M251.17 116.6 139.4 4.82a16.49 16.49 0 0 0-23.31 0l-23.21 23.2 29.44 29.45a19.57 19.57 0 0 1 24.8 24.96l28.37 28.38a19.61 19.61 0 1 1-11.75 11.06L137.28 95.4v69.64a19.62 19.62 0 1 1-16.13-.57V94.2a19.61 19.61 0 0 1-10.65-25.73L81.46 39.44 4.83 116.08a16.49 16.49 0 0 0 0 23.32L116.6 251.17a16.49 16.49 0 0 0 23.32 0l111.25-111.25a16.5 16.5 0 0 0 0-23.33'
+          fill='#DE4C36'></path>
+      </svg>
+    </a>
+    <a
+      href='https://code.visualstudio.com/'
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      <svg
+        viewBox='0 0 256 254'
+        xmlns='http://www.w3.org/2000/svg'
+        xmlns:xlink='http://www.w3.org/1999/xlink'
+        width='77'
+        height='77'
+        preserveAspectRatio='xMidYMid'
+        class='hover:scale-110 transition-scale duration-300 hover:drop-shadow-lg'
+        ><defs
+          ><linearGradient id='c' x1='50%' x2='50%' y1='0%' y2='100%'
+            ><stop offset='0%' stop-color='#FFF'></stop><stop
+              offset='100%'
+              stop-color='#FFF'
+              stop-opacity='0'></stop></linearGradient
+          ><path
+            id='a'
+            d='M180.828 252.605a15.872 15.872 0 0 0 12.65-.486l52.501-25.262a15.94 15.94 0 0 0 9.025-14.364V41.197a15.939 15.939 0 0 0-9.025-14.363l-52.5-25.263a15.877 15.877 0 0 0-18.115 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233 100.507 91.695a15.853 15.853 0 0 0 5.464 3.571Zm10.464-183.649-76.262 57.889 76.262 57.888V68.956Z'
+          ></path></defs
+        ><mask id='b' fill='#fff'><use xlink:href='#a'></use></mask><path
+          fill='#0065A9'
+          d='M246.135 26.873 193.593 1.575a15.885 15.885 0 0 0-18.123 3.08L3.466 161.482c-4.626 4.219-4.62 11.502.012 15.714l14.05 12.772a10.625 10.625 0 0 0 13.569.604L238.229 33.436c6.949-5.271 16.93-.315 16.93 8.407v-.61a15.938 15.938 0 0 0-9.024-14.36Z'
+        ></path><path
+          fill='#007ACC'
+          d='m246.135 226.816-52.542 25.298a15.887 15.887 0 0 1-18.123-3.08L3.466 92.207c-4.626-4.218-4.62-11.502.012-15.713l14.05-12.773a10.625 10.625 0 0 1 13.569-.603l207.132 157.135c6.949 5.271 16.93.315 16.93-8.408v.611a15.939 15.939 0 0 1-9.024 14.36Z'
+        ></path><path
+          fill='#1F9CF0'
+          d='M193.428 252.134a15.892 15.892 0 0 1-18.125-3.083c5.881 5.88 15.938 1.715 15.938-6.603V11.273c0-8.318-10.057-12.483-15.938-6.602a15.892 15.892 0 0 1 18.125-3.084l52.533 25.263a15.937 15.937 0 0 1 9.03 14.363V212.51c0 6.125-3.51 11.709-9.03 14.363l-52.533 25.262Z'
+        ></path><path
+          fill='url(#c)'
+          fill-opacity='.25'
+          d='M180.828 252.605a15.874 15.874 0 0 0 12.65-.486l52.5-25.263a15.938 15.938 0 0 0 9.026-14.363V41.197a15.939 15.939 0 0 0-9.025-14.363L193.477 1.57a15.877 15.877 0 0 0-18.114 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233 100.506 91.695a15.857 15.857 0 0 0 5.465 3.571Zm10.464-183.65-76.262 57.89 76.262 57.888V68.956Z'
+        ></path></svg
+      >
+    </a>
+    <a href='https://python.org' target='_blank' rel='noopener noreferrer'>
+      <svg
+        style='enable-background:new 0 0 512 512;'
+        version='1.1'
+        viewBox='0 0 512 512'
+        xml:space='preserve'
+        width='77'
+        height='77'
+        class='hover:scale-110 transition-scale duration-300 hover:drop-shadow-lg'
+        ><g id='_x32_67-python'
+          ><g
+            ><path
+              d='M194.005,240.252h105.054c29.216,0,52.529-24.101,52.529-53.414V86.603    c0-28.525-24.002-49.871-52.529-54.691c-35.214-5.804-73.478-5.509-105.054,0.097c-44.462,7.87-52.527,24.298-52.527,54.693    v21.453H246.63v31.959H102.033c-30.591,0-57.349,18.394-65.709,53.315c-9.64,40.035-10.033,65.02,0,106.826    c7.476,31.085,25.28,53.314,55.872,53.314h36.101v-48.001C128.296,270.845,158.298,240.252,194.005,240.252L194.005,240.252z'
+              style='fill:#347AB4;'></path><path
+              d='M474.975,209.372c-7.575-30.395-21.935-53.315-52.527-53.315h-39.443v46.626    c0,36.199-30.692,66.691-65.71,66.691H212.24c-28.724,0-52.528,24.594-52.528,53.414v100.138    c0,28.524,24.788,45.246,52.528,53.413c33.247,9.737,65.215,11.509,105.054,0c26.462-7.675,52.529-23.116,52.529-53.413v-20.997    H264.867v-32.417h157.58c30.593,0,41.904-21.346,52.527-53.314C485.992,283.244,485.501,251.57,474.975,209.372L474.975,209.372z'
+              style='fill:#FFCA1D;'></path><path
+              d='M187.415,89.594c-10.479,0-18.975-8.591-18.975-19.164c0.094-10.668,8.496-19.259,18.975-19.259    c10.385,0,18.976,8.685,18.976,19.259C206.39,81.003,197.894,89.594,187.415,89.594z'
+              style='fill:#FFFFFF;'></path><path
+              d='M314.908,460.076c-10.479,0-18.976-8.591-18.976-19.164c0.095-10.668,8.496-19.259,18.976-19.259    c10.385,0,18.976,8.685,18.976,19.259C333.884,451.485,325.388,460.076,314.908,460.076z'
+              style='fill:#FFFFFF;'></path></g
+          ></g
+        ><g id='Layer_1'></g></svg
+      >
+    </a>
+  </div>
+  <span
+    class='text-blue-900 text-sm italic m-2 [&_a]:text-slate-900 [&_a]:underline'
+  >
+    Logos patrocinados por <a
+      href='https://svgl.app/'
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      svgl.app,
+    </a>
+    desarrollada por <a
+      href='https://pheralb.dev/'
+      target='_blank'
+      rel='noopener noreferrer'>@pheralb</a
+    >
+  </span>
+  <ul class='list-disc text-slate-900'>
+    <li>
+      <span>
+        Una cuenta de
+        <a
+          href='https://github.com/signup'
+          target='_blank'
+          rel='noopener noreferrer'
+          class='text-blue-800 font-bold'>GitHub</a
+        >
+      </span>
+    </li>
+    <li>
+      <span>
+        Tener instalado
+        <a
+          href='https://git-scm.com/downloads'
+          target='_blank'
+          rel='noopener noreferrer'
+          class='text-blue-800 font-bold'>Git</a
+        >
+        y
+        <a
+          href='https://code.visualstudio.com/'
+          target='_blank'
+          rel='noopener noreferrer'
+          class='text-blue-800 font-bold'>Visual Studio Code</a
+        >
+      </span>
+    </li>
+    <li>
+      Vamos a estar haciendo un ejemplo con
+      <a href='https://python.org' class='text-blue-800 font-bold'>Python</a>
+      pero puedes usar el lenguaje que prefieras
+    </li>
+  </ul>
+  <a class='absolute left-1 top-1/2' href='/oss/2'>
+    <svg
+      viewBox='0 0 448 512'
+      class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M77.25 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C175.6 444.9 183.8 448 192 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L77.25 256zM269.3 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C367.6 444.9 375.8 448 384 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L269.3 256z'
+      ></path>
+    </svg>
+  </a>
+  <a class='absolute right-1 top-1/2' href='/oss/4'>
+    <svg
+      viewBox='0 0 448 512'
+      class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M246.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L178.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C47.63 444.9 55.81 448 64 448s16.38-3.125 22.62-9.375l160-160C259.1 266.1 259.1 245.9 246.6 233.4zM438.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L370.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C239.6 444.9 247.8 448 256 448s16.38-3.125 22.62-9.375l160-160C451.1 266.1 451.1 245.9 438.6 233.4z'
+      ></path>
+    </svg>
+  </a>
+</Template>
diff --git a/src/slides/oss/page5.astro b/src/slides/oss/page5.astro
new file mode 100644
index 0000000..760d5d0
--- /dev/null
+++ b/src/slides/oss/page5.astro
@@ -0,0 +1,21 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={4}>
+  <h1
+    class='text-4xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    Configuración de llaves SSH en GitHub
+  </h1>
+  <p class='text-balance text-center text-slate-900'>
+    Tener configuradas las llaves SSH en GitHub es una buena práctica para
+    evitar tener que ingresar tu usuario y contraseña cada vez que haces un push
+    a tu repositorio, además de que es más seguro de esta manera
+  </p>
+  <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'
+  />
+</Template>
diff --git a/src/slides/oss/page6.astro b/src/slides/oss/page6.astro
new file mode 100644
index 0000000..fbe7647
--- /dev/null
+++ b/src/slides/oss/page6.astro
@@ -0,0 +1,212 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={5}>
+  <h1
+    class='text-4xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    Visual Studio Code
+  </h1>
+  <svg
+    viewBox='0 0 256 254'
+    xmlns='http://www.w3.org/2000/svg'
+    xmlns:xlink='http://www.w3.org/1999/xlink'
+    width='35'
+    height='35'
+    preserveAspectRatio='xMidYMid'
+    class='hover:scale-110 transition-scale duration-300 hover:drop-shadow-lg'
+    ><defs
+      ><linearGradient id='c' x1='50%' x2='50%' y1='0%' y2='100%'
+        ><stop offset='0%' stop-color='#FFF'></stop><stop
+          offset='100%'
+          stop-color='#FFF'
+          stop-opacity='0'></stop></linearGradient
+      ><path
+        id='a'
+        d='M180.828 252.605a15.872 15.872 0 0 0 12.65-.486l52.501-25.262a15.94 15.94 0 0 0 9.025-14.364V41.197a15.939 15.939 0 0 0-9.025-14.363l-52.5-25.263a15.877 15.877 0 0 0-18.115 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233 100.507 91.695a15.853 15.853 0 0 0 5.464 3.571Zm10.464-183.649-76.262 57.889 76.262 57.888V68.956Z'
+      ></path></defs
+    ><mask id='b' fill='#fff'><use xlink:href='#a'></use></mask><path
+      fill='#0065A9'
+      d='M246.135 26.873 193.593 1.575a15.885 15.885 0 0 0-18.123 3.08L3.466 161.482c-4.626 4.219-4.62 11.502.012 15.714l14.05 12.772a10.625 10.625 0 0 0 13.569.604L238.229 33.436c6.949-5.271 16.93-.315 16.93 8.407v-.61a15.938 15.938 0 0 0-9.024-14.36Z'
+    ></path><path
+      fill='#007ACC'
+      d='m246.135 226.816-52.542 25.298a15.887 15.887 0 0 1-18.123-3.08L3.466 92.207c-4.626-4.218-4.62-11.502.012-15.713l14.05-12.773a10.625 10.625 0 0 1 13.569-.603l207.132 157.135c6.949 5.271 16.93.315 16.93-8.408v.611a15.939 15.939 0 0 1-9.024 14.36Z'
+    ></path><path
+      fill='#1F9CF0'
+      d='M193.428 252.134a15.892 15.892 0 0 1-18.125-3.083c5.881 5.88 15.938 1.715 15.938-6.603V11.273c0-8.318-10.057-12.483-15.938-6.602a15.892 15.892 0 0 1 18.125-3.084l52.533 25.263a15.937 15.937 0 0 1 9.03 14.363V212.51c0 6.125-3.51 11.709-9.03 14.363l-52.533 25.262Z'
+    ></path><path
+      fill='url(#c)'
+      fill-opacity='.25'
+      d='M180.828 252.605a15.874 15.874 0 0 0 12.65-.486l52.5-25.263a15.938 15.938 0 0 0 9.026-14.363V41.197a15.939 15.939 0 0 0-9.025-14.363L193.477 1.57a15.877 15.877 0 0 0-18.114 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233 100.506 91.695a15.857 15.857 0 0 0 5.465 3.571Zm10.464-183.65-76.262 57.89 76.262 57.888V68.956Z'
+    ></path></svg
+  >
+  <p class='text-balance text-center text-slate-900'>
+    Aquí tenemos una lista de las mejores extensiones que puedes usar en Visual
+    Studio Code para proyectos de Open Source.
+  </p>
+  <ul
+    class='[&_li]:bg-slate-800 [&_li]:px-2 [&_li]:py-1 [&_li]:rounded [&_li]:font-semibold flex flex-col gap-1 [&_li]:grid items-center [&_li]:w-[50dvw] [&_li]:grid-cols-[1fr,1fr,40px]'
+  >
+    <li>
+      <span>
+        <a href='https://github.com/gitkraken/vscode-gitlens'>
+          GitLens - Supercharge Git inside VS Code</a
+        >
+      </span>
+      <span class='me-2 bg-white/10 rounded px-1 py-0.5'>
+        ext install eamodio.gitlens</span
+      >
+      <button
+        class='bg-blue-500 text-white px-2 py-0.5 rounded'
+        onclick='copyText("ext install eamodio.gitlens")'
+      >
+        <svg
+          class='feather feather-copy'
+          fill='none'
+          height='24'
+          stroke='currentColor'
+          stroke-linecap='round'
+          stroke-linejoin='round'
+          stroke-width='2'
+          viewBox='0 0 24 24'
+          width='24'
+          xmlns='http://www.w3.org/2000/svg'
+          ><rect height='13' rx='2' ry='2' width='13' x='9' y='9'></rect><path
+            d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'
+          ></path></svg
+        >
+      </button>
+    </li>
+    <!-- Data Size Count -->
+    <li>
+      <span>
+        <a href='https://github.com/R35007/data-size-count-vscode-extension'>
+          Data Size Count (Opcional)</a
+        >
+      </span>
+      <span class='me-2 bg-white/10 rounded px-1 py-0.5'>
+        ext install Thinker.data-size-count</span
+      >
+      <button
+        class='bg-blue-500 text-white px-2 py-0.5 rounded'
+        onclick='copyText("ext install Thinker.data-size-count")'
+      >
+        <svg
+          class='feather feather-copy'
+          fill='none'
+          height='24'
+          stroke='currentColor'
+          stroke-linecap='round'
+          stroke-linejoin='round'
+          stroke-width='2'
+          viewBox='0 0 24 24'
+          width='24'
+          xmlns='http://www.w3.org/2000/svg'
+          ><rect height='13' rx='2' ry='2' width='13' x='9' y='9'></rect><path
+            d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'
+          ></path></svg
+        >
+      </button>
+    </li>
+    <!-- Git History -->
+    <li>
+      <span>
+        <a
+          href='https://github.com/DonJayamanne/gitHistoryVSCode'
+          target='_blank'
+          rel='noreferrer'>Git History</a
+        >
+      </span>
+      <span class='me-2 bg-white/10 rounded px-1 py-0.5'>
+        ext install donjayamanne.githistory</span
+      >
+      <button
+        class='bg-blue-500 text-white px-2 py-0.5 rounded'
+        onclick='copyText("ext install donjayamanne.githistory")'
+      >
+        <svg
+          class='feather feather-copy'
+          fill='none'
+          height='24'
+          stroke='currentColor'
+          stroke-linecap='round'
+          stroke-linejoin='round'
+          stroke-width='2'
+          viewBox='0 0 24 24'
+          width='24'
+          xmlns='http://www.w3.org/2000/svg'
+          ><rect height='13' rx='2' ry='2' width='13' x='9' y='9'></rect><path
+            d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'
+          ></path></svg
+        >
+      </button>
+    </li>
+    <!-- GitHub Pull Requests -->
+    <li>
+      <span>
+        <a
+          href='https://github.com/Microsoft/vscode-pull-request-github'
+          target='_blank'
+          rel='noreferrer'>GitHub Pull Requests</a
+        >
+      </span>
+      <span class='me-2 bg-white/10 rounded px-1 py-0.5 text-sm'>
+        ext install GitHub.vscode-pull-request-github</span
+      >
+      <button
+        class='bg-blue-500 text-white px-2 py-0.5 rounded'
+        onclick='copyText("ext install GitHub.vscode-pull-request-github")'
+      >
+        <svg
+          class='feather feather-copy'
+          fill='none'
+          height='24'
+          stroke='currentColor'
+          stroke-linecap='round'
+          stroke-linejoin='round'
+          stroke-width='2'
+          viewBox='0 0 24 24'
+          width='24'
+          xmlns='http://www.w3.org/2000/svg'
+          ><rect height='13' rx='2' ry='2' width='13' x='9' y='9'></rect><path
+            d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'
+          ></path></svg
+        >
+      </button>
+    </li>
+    <!-- GitHub Repositories (Opcional) -->
+    <li>
+      <span>
+        <a
+          href='https://github.com/microsoft/vscode-remote-repositories-github'
+          target='_blank'
+          rel='noreferrer'>GitHub Repositories</a
+        ></span
+      >
+      <span class='me-2 bg-white/10 rounded px-1 py-0.5'>
+        ext install GitHub.remotehub</span
+      >
+      <button
+        class='bg-blue-500 text-white px-2 py-0.5 rounded'
+        onclick='copyText("ext install GitHub.remotehub")'
+      >
+        <svg
+          class='feather feather-copy'
+          fill='none'
+          height='24'
+          stroke='currentColor'
+          stroke-linecap='round'
+          stroke-linejoin='round'
+          stroke-width='2'
+          viewBox='0 0 24 24'
+          width='24'
+          xmlns='http://www.w3.org/2000/svg'
+          ><rect height='13' rx='2' ry='2' width='13' x='9' y='9'></rect><path
+            d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'
+          ></path></svg
+        >
+      </button>
+    </li>
+  </ul>
+</Template>
diff --git a/src/slides/oss/page7.astro b/src/slides/oss/page7.astro
new file mode 100644
index 0000000..931d01a
--- /dev/null
+++ b/src/slides/oss/page7.astro
@@ -0,0 +1,21 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={6}>
+  <h1
+    class='text-4xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    ¿Qué es y cómo hacer un Fork en GitHub?
+  </h1>
+  <p class='text-balance text-center text-slate-900'>
+    Un Fork no es más que una copia de un repositorio ajeno en tu cuenta de
+    GitHub. Es una forma de contribuir a proyectos de código abierto sin tener
+    que pedir permiso al dueño del repositorio original directamente.
+  </p>
+  <img
+    src='https://res.cloudinary.com/dm064xuo5/image/upload/f_auto,q_auto/v1/jamerrq.dev/pk8uxicy1cxsp3nai0ud'
+    alt='fork on GitHub'
+    class='rounded-lg w-1/2 mt-4'
+  />
+</Template>
diff --git a/src/slides/oss/page8.astro b/src/slides/oss/page8.astro
new file mode 100644
index 0000000..2131538
--- /dev/null
+++ b/src/slides/oss/page8.astro
@@ -0,0 +1,27 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={7}>
+  <h1
+    class='text-4xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    Clona tu fork en tu máquina local
+  </h1>
+  <p class='text-balance text-center text-slate-900'>
+    Con el comando <code
+      class='text-blue-300 italic px-1 py-0.5 rounded bg-slate-900'
+      >git clone</code
+    > puedes clonar tu fork en tu máquina local. Ejemplo:
+  </p>
+  <span>
+    <code class='text-blue-300 italic px-1 py-0.5 rounded bg-slate-900'
+      >git clone git@github.com:jamerrq/roadmap-csharp.git
+    </code>
+  </span>
+  <img
+    src='https://res.cloudinary.com/dm064xuo5/image/upload/f_auto,q_auto/v1/jamerrq.dev/idfg22ucidlu2bix8as5'
+    alt='fork on GitHub'
+    class='rounded-lg w-1/2 mt-4'
+  />
+</Template>
diff --git a/src/slides/oss/page9.astro b/src/slides/oss/page9.astro
new file mode 100644
index 0000000..fb06179
--- /dev/null
+++ b/src/slides/oss/page9.astro
@@ -0,0 +1,28 @@
+---
+import Template from './template.astro'
+---
+
+<Template index={8}>
+  <h1
+    class='text-4xl font-bold text-gray-100 animate-slide-in-bottom bg-blueBoard rounded px-2 py-1'
+  >
+    Crea una rama de trabajo para tus cambios
+  </h1>
+  <p class='text-balance text-center text-slate-900'>
+    Con el comando <code
+      class='text-blue-300 italic px-1 py-0.5 rounded bg-slate-900'
+      >git checkout -b nombre-de-la-rama
+    </code>
+    puedes clonar tu fork en tu máquina local. Ejemplo:
+  </p>
+  <span>
+    <code class='text-blue-300 italic px-1 py-0.5 rounded bg-slate-900'
+      >git checkout -b roadmap-17
+    </code>
+  </span>
+  <img
+    src='https://res.cloudinary.com/dm064xuo5/image/upload/f_auto,q_auto/v1/jamerrq.dev/pviicckgv11xqwmiokfw'
+    alt='fork on GitHub'
+    class='rounded-lg w-1/2 mt-4'
+  />
+</Template>
diff --git a/src/slides/oss/template.astro b/src/slides/oss/template.astro
new file mode 100644
index 0000000..3f1e917
--- /dev/null
+++ b/src/slides/oss/template.astro
@@ -0,0 +1,38 @@
+---
+interface Props {
+  index?: number
+  last?: boolean
+}
+
+const { index = 0, last = false } = Astro.props
+---
+
+<article class='text-gray-100 font-primary flex gap-2 flex-col items-center'>
+  <slot />
+  {
+    index !== 0 && (
+      <a class='absolute left-1 top-1/2' href={`/oss/${index - 1}`}>
+        <svg
+          viewBox='0 0 448 512'
+          class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path d='M77.25 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C175.6 444.9 183.8 448 192 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L77.25 256zM269.3 256l137.4-137.4c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0l-160 160c-12.5 12.5-12.5 32.75 0 45.25l160 160C367.6 444.9 375.8 448 384 448s16.38-3.125 22.62-9.375c12.5-12.5 12.5-32.75 0-45.25L269.3 256z' />
+        </svg>
+      </a>
+    )
+  }
+  {
+    !last && (
+      <a class='absolute right-1 top-1/2' href={`/oss/${index + 1}`}>
+        <svg
+          viewBox='0 0 448 512'
+          class='w-4 h-4 xl:w-6 xl:h-6 fill-emerald-300 dark:fill-emerald-900'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <path d='M246.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L178.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C47.63 444.9 55.81 448 64 448s16.38-3.125 22.62-9.375l160-160C259.1 266.1 259.1 245.9 246.6 233.4zM438.6 233.4l-160-160c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L370.8 256l-137.4 137.4c-12.5 12.5-12.5 32.75 0 45.25C239.6 444.9 247.8 448 256 448s16.38-3.125 22.62-9.375l160-160C451.1 266.1 451.1 245.9 438.6 233.4z' />
+        </svg>
+      </a>
+    )
+  }
+</article>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 501452e..fd60095 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -44,6 +44,9 @@ export default {
         firaMono: ['Fira Mono', 'monospace'],
         primary: ['Fira Sans', 'sans-serif'], // <- primary font
         secondary: ['Fira Sans', 'system-ui'] // <- secondary font
+      },
+      colors: {
+        blueBoard: '#153448'
       }
     }
   },