feat: oss presentation

astro.config.ts

@@ -96,5 +96,8 @@ export default defineConfig({
     build: {
       cssMinify: 'lightningcss'
     }
+  },
+  redirects: {
+    '/oss': '/oss/0'
   }
 })

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,16 +33,14 @@ 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 />
     </button>
   </div>
 )
 
-import { h } from 'preact'
-
 function SimpleIcon(key: string) {
   if (key === 'javascript') {
     console.log('key', key)

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 />

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>

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} />

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>

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

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>

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'

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

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>

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>

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
+>