feat: optimizations

.gitignore

@@ -27,3 +27,6 @@ tmp.json
 
 # action file (for now)
 _studio.yml
+
+# ignored files
+ignored/

astro.config.ts

@@ -1,14 +1,14 @@
-import { defineConfig } from 'astro/config';
-import tailwind from '@astrojs/tailwind';
-import deno from '@astrojs/deno';
-import robotsTxt from 'astro-robots-txt';
-import preact from '@astrojs/preact';
-import pageInsight from 'astro-page-insight';
-import sitemap from '@astrojs/sitemap';
-import compress from 'astro-compress';
-import { VitePWA } from 'vite-plugin-pwa';
-import { manifest } from './src/utils/seoConfig';
-import mdx from '@astrojs/mdx';
+import { defineConfig } from 'astro/config'
+import tailwind from '@astrojs/tailwind'
+import deno from '@astrojs/deno'
+import robotsTxt from 'astro-robots-txt'
+import preact from '@astrojs/preact'
+import pageInsight from 'astro-page-insight'
+import sitemap from '@astrojs/sitemap'
+import compress from 'astro-compress'
+import { VitePWA } from 'vite-plugin-pwa'
+import { manifest } from './src/utils/seoConfig'
+import mdx from '@astrojs/mdx'
 
 // https://astro.build/config
 export default defineConfig({
@@ -19,9 +19,9 @@ export default defineConfig({
     preact(),
     pageInsight(),
     sitemap({
-      filter: page =>
-      page !== 'https://jamerrq.deno.dev/board/' &&
-      page !== 'https://jamerrq.deno.dev/es/board/'
+      filter: (page) =>
+        page !== 'https://jamerrq.deno.dev/board/' &&
+        page !== 'https://jamerrq.deno.dev/es/board/'
     }),
     mdx(),
     compress()
@@ -43,16 +43,20 @@ export default defineConfig({
     // ssr: {
     //   external:[]
     // },
-    plugins: [VitePWA({
-      registerType: 'autoUpdate',
-      manifest,
-      workbox: {
-        globDirectory: 'dist/client',
-        globPatterns: ['**/*.{js,css,svg,png,jpg,jpeg,gif,webp,woff,woff2,ttf,eot,ico}'],
-        // Don't fallback on document based (e.g. `/some-page`) requests
-        // This removes an errant console.log message from showing up.
-        navigateFallback: null
-      }
-    })]
+    plugins: [
+      VitePWA({
+        registerType: 'autoUpdate',
+        manifest,
+        workbox: {
+          globDirectory: 'dist/client',
+          globPatterns: [
+            '**/*.{js,css,svg,png,jpg,jpeg,gif,webp,woff,woff2,ttf,eot,ico}'
+          ],
+          // Don't fallback on document based (e.g. `/some-page`) requests
+          // This removes an errant console.log message from showing up.
+          navigateFallback: null
+        }
+      })
+    ]
   }
-});
+})

src/components/main/title.astro

@@ -6,22 +6,36 @@ const { lang = 'en' }: Props = Astro.props
 ---
 
 <div
-  class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-emerald-900/80 text-emerald-300 bg-emerald-400/50 p-2 rounded-sm w-full flex items-center flex-row animate-blurred-fade-in relative'
+  class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-slate-900/80 text-emerald-400 bg-slate-400/50 p-2 rounded-sm w-full flex items-center flex-row animate-blurred-fade-in relative'
 >
-  <div class='flex flex-col animate-fade-in z-10'>
+  <div class='flex flex-col gap-1 animate-fade-in z-10'>
     <a href={lang !== 'en' ? '/' : 'es'}>
-      <p class='font-rubik-doodle font-semibold text-2xl xl:text-4xl'>
+      <p
+        class='font-rubik-doodle font-semibold text-2xl xl:text-4xl dark:bg-gray-500/70 bg-gray-600/80 px-2 py-1 rounded'
+      >
         @jamerrq.dev
       </p>
     </a>
-    <span class='block font-averia text-sm text-center'>
+    <span
+      class='block font-averia text-sm rounded w-fit mx-auto px-1 py-0.5 text-center dark:bg-gray-500/70 bg-gray-600/80'
+    >
       {lang === 'en' ? 'Software Dev' : 'Desarrollador Backend'}
     </span>
   </div>
   <div
-    class='fixed -z-10 top-0 left-0 origin-top-left w-full xl:flex place-content-center flex overflow-hidden h-[200%]'
+    class='fixed -z-10 top-0 left-0 origin-top-left w-full xl:flex place-content-center flex overflow-hidden h-full bg-opacity-10'
     id='animation-container'
   >
+    <video
+      src='/img/movies/lost_loop_comp.webm'
+      autoplay
+      style='width: 100%; height: 100%'
+      muted
+      loop
+      playsinline
+      preload='auto'
+      class='object-cover w-full h-full'
+      id='animation'></video>
   </div>
 </div>
 

src/layouts/layout.astro

@@ -11,6 +11,9 @@ import '@fontsource/merriweather'
 import '@fontsource/rubik-doodle-shadow'
 import '@fontsource/averia-serif-libre'
 
+// Styles
+import '@styles/index.css'
+
 import { ViewTransitions } from 'astro:transitions'
 import Background from '@components/main/background.astro'
 import SEO from '@components/head/seo.astro'
@@ -205,7 +208,8 @@ import { Image } from 'astro:assets'
     </a>
     <script is:inline defer>
       // if screen is too small, don't render the animation
-      if (window.innerWidth > 1) {
+      const disabled = true
+      if (!disabled && window.innerWidth > 240) {
         const x = document.createElement('canvas')
         x.id = 'c'
         x.setAttribute('class', 'grow')

src/styles/index.css

@@ -0,0 +1,3 @@
+#title-movie {
+    opacity: 0.75;
+}

tsconfig.json

@@ -27,6 +27,9 @@
       "@movies/*": [
         "src/movies/*"
       ],
+      "@styles/*": [
+        "src/styles/*"
+      ],
     },
     "jsx": "preserve",
     "jsxImportSource": "preact",