feat: optimizations

jamerrq · Apr 2, 2024 · a1caf84 · a1caf84
1 parent 695beed
commit a1caf84
Show file tree

Hide file tree

Showing 79 changed files with 182 additions and 88 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -17,6 +17,7 @@ import mdx from '@astrojs/mdx'
 // https://astro.build/config
 export default defineConfig({
   adapter: deno(),
+  compressHTML: true,
   integrations: [
     tailwind(),
     robotsTxt(),
@@ -43,20 +44,51 @@ export default defineConfig({
   image: {
     domains: ['https://github.com/']
   },
+  build: {
+    inlineStylesheets: 'always'
+  },
   vite: {
-    // ssr: {
-    //   external:[]
+    // build: {
+    //   cssMinify: "lightningcss"
     // },
     plugins: [
       VitePWA({
         registerType: 'autoUpdate',
         manifest,
         workbox: {
           globDirectory: 'dist/client',
-          globPatterns: ['**/*.{js,css,woff2}'],
+          globPatterns: [
+            '**/*.{webm,woff2}',
+            'pizarra.webp',
+            'bitwise_liminal_compressed_240p.webm'
+          ],
           // Don't fallback on document based (e.g. `/some-page`) requests
           // This removes an errant console.log message from showing up.
-          navigateFallback: null
+          navigateFallback: null,
+          runtimeCaching: [
+            {
+              urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|avif)$/,
+              handler: 'CacheFirst',
+              options: {
+                cacheName: 'images',
+                expiration: {
+                  maxEntries: 100,
+                  maxAgeSeconds: 30 * 24 * 60 * 60
+                }
+              }
+            },
+            {
+              urlPattern: /\.(?:woff|woff2|ttf|eot|ico)$/,
+              handler: 'CacheFirst',
+              options: {
+                cacheName: 'fonts',
+                expiration: {
+                  maxEntries: 10,
+                  maxAgeSeconds: 30 * 24 * 60 * 60
+                }
+              }
+            }
+          ]
         }
       })
     ]

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -51,7 +51,6 @@
     "prettier": "^3.1.1",
     "prettier-config-standard": "^7.0.0",
     "prettier-plugin-astro": "^0.12.3",
-    "prettier-plugin-tailwindcss": "^0.5.12",
     "sass": "^1.69.7",
     "tailwindcss-debug-screens": "^2.2.1"
   }

diff --git a/postcss.config.mjs b/postcss.config.mjs
@@ -0,0 +1,7 @@
+export default {
+    plugins: {
+        // "tailwindcss/nesting": "postcss-nesting",
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}
diff --git a/public/img/working-on/aichallenge.webp b/public/img/working-on/aichallenge.webp
diff --git a/public/img/working-on/fcc.png b/public/img/working-on/fcc.png
diff --git a/public/img/working-on/fcc.webp b/public/img/working-on/fcc.webp
diff --git a/public/img/working-on/leetcode.webp b/public/img/working-on/leetcode.webp
diff --git a/public/img/working-on/parrot.png b/public/img/working-on/parrot.png
diff --git a/public/img/working-on/parrot.webp b/public/img/working-on/parrot.webp
diff --git a/public/img/working-on/roadmap.webp b/public/img/working-on/roadmap.webp
diff --git a/public/movies/bitwise_liminal_compressed.webm b/public/movies/bitwise_liminal_compressed.webm
diff --git a/public/movies/bitwise_liminal_compressed_240p.webm b/public/movies/bitwise_liminal_compressed_240p.webm
diff --git a/src/components/badges/featured.astro b/src/components/badges/featured.astro
@@ -0,0 +1,15 @@
+---
+import Badge from './badge.astro'
+
+interface Props {
+  lang?: string
+}
+
+const { lang = 'en' } = Astro.props
+---
+
+<Badge
+  class='animate-fade-in group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md font-medium text-neutral-200 duration-500'
+>
+  {lang === 'en' ? 'Featured' : 'Destacado'}
+</Badge>
diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
@@ -167,7 +167,7 @@ function ResourceCard({
       <div className='lg:w-1/2 xl:w-1/2 h-full grid place-content-center justify-items-center gap-4'>
         <h1 className='xl:text-3xl text-xl max-w-md'>{project?.title}</h1>
         {project?.featured && (
-          <span className='xl:absolute top-1 right-2 dark:text-amber-300 text-amber-800 underline bg-amber-300/30 px-2 py-1 rounded'>
+          <span className='xl:absolute top-1 right-2 dark:text-amber-300 text-amber-800 underline bg-amber-300/30 px-2 py-1 rounded border dark:border-amber-200 border-amber-800 badge'>
             {lang === 'es' ? 'Destacado' : 'Featured'}
           </span>
         )}

diff --git a/src/components/main/working-on.tsx b/src/components/main/working-on.tsx
@@ -12,7 +12,9 @@ import {
   siCsharp,
   siDotnet,
   siMicrosoftazure,
-  siMicrosoft
+  siMicrosoft,
+  siFreecodecamp,
+  siMarkdown
 } from 'simple-icons'
 
 const SVGS_STYLES = [
@@ -21,7 +23,7 @@ const SVGS_STYLES = [
   'xl:w-8',
   'xl:h-8',
   'hover:scale-110',
-  'shadow bg-white/50 p-1 rounded dark:bg-slate-900/80'
+  'shadow bg-white/50 p-1 rounded dark:bg-emerald-950/80'
 ].join(' ')
 
 interface ProjectCardProps {
@@ -35,18 +37,27 @@ interface ProjectCardProps {
     technologies: string[]
     preview: string
     time: string
+    start: string
   }
 }
 
-const index = signal(0)
+function getRandomBasedOnDay() {
+  const date = new Date()
+  return date.getDate() % projects.length
+}
+
+const index = signal(getRandomBasedOnDay())
 
 import { IndexPicker } from '@components/featured-and-projects/projects'
 
 function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
+  const date = new Date(project.start)
+  // get number of days since the project started
+  const days = Math.floor((Date.now() - date.getTime()) / (1000 * 60 * 60 * 24))
   return (
     <li class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>*]:rounded-sm [&>span]:text-sm [&>span]:xl:text-base'>
       <div class='absolute bottom-0 right-2 font-averia text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'>
-        {project?.time}+ {lang === 'en' ? 'months' : 'meses'}
+        {days}+ {lang === 'en' ? 'days' : 'días'}
       </div>
       <h1 class='text-sm xl:text-base font-rubik-doodle dark:text-emerald-100 text-emerald-950 bg-emerald-400 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90'>
         {lang === 'en' ? project?.title.en : project?.title.es}
@@ -74,7 +85,9 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
                   csharp: siCsharp,
                   dotnet: siDotnet,
                   azure: siMicrosoftazure,
-                  microsoft: siMicrosoft
+                  microsoft: siMicrosoft,
+                  freecodecamp: siFreecodecamp,
+                  markdown: siMarkdown
                 }[t.toLowerCase().replaceAll(' ', '')] || siAstro
               return (
                 <svg
@@ -83,6 +96,7 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
                   // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{ __html: a.svg }}
                   fill={`#${a.hex}`}
+                  title={t}
                 />
               )
             })}
@@ -124,11 +138,17 @@ export default function WorkingOn({ lang = 'en' }) {
       </header>
       <div class='h-full w-full gap-2'>
         <ul class='flex gap-2 text-base flex-col justify-around h-full font-averia font-bold py-2'>
-          {/* Show only two in loop, use index to get the right items */}
-          {Array.from(Array(2).keys()).map((i) => {
-            const project = projects[(i + index.value) % projects.length]
-            return <ProjectCard key={i} lang={lang} project={project} />
-          })}
+          {/* Show only two, use index to get the right items */}
+          {Array.from({ length: 2 }, (_, i) => i + index.value).map(
+            (i) =>
+              i < projects.length && (
+                <ProjectCard
+                  lang={lang}
+                  project={projects[i]}
+                  key={projects[i].title.en}
+                />
+              )
+          )}
         </ul>
         <IndexPicker n={projects.length} reference={index} />
       </div>

diff --git a/src/data/projects.json b/src/data/projects.json
@@ -14,8 +14,8 @@
       "demo": "https://json-forms-app.vercel.app/",
       "repository": "https://github.com/jamerrq/json-forms-app",
       "images": [
-        "json-forms-app-1.png",
-        "json-forms-app-2.png"
+        "json-forms-app-1.webp",
+        "json-forms-app-2.webp"
       ]
     },
     {
@@ -31,9 +31,9 @@
       "demo": "https://rocket-launches.deno.dev/",
       "repository": "https://github.com/jamerrq/rocket-launches",
       "images": [
-        "rocket-launches-1.png",
-        "rocket-launches-2.png",
-        "rocket-launches-3.png"
+        "rocket-launches-1.webp",
+        "rocket-launches-2.webp",
+        "rocket-launches-3.webp"
       ]
     },
     {
@@ -49,10 +49,10 @@
       "demo": "https://reading-list-app-ecru.vercel.app/",
       "repository": "https://github.com/jamerrq/reading-list-app",
       "images": [
-        "reading-list-app-1.png",
-        "reading-list-app-2.png",
-        "reading-list-app-3.png",
-        "reading-list-app-4.png"
+        "reading-list-app-1.webp",
+        "reading-list-app-2.webp",
+        "reading-list-app-3.webp",
+        "reading-list-app-4.webp"
       ]
     },
     {
@@ -67,7 +67,7 @@
       "repository": "https://github.com/jamerrq/typescriptExercisesOnExercism",
       "demo": "https://exercism.org/tracks/typescript",
       "images": [
-        "typescript-exercism.png"
+        "typescript-exercism.webp"
       ]
     },
     {
@@ -84,7 +84,7 @@
       "repository": "https://github.com/jamerrq/20201-Sport-Scheduling",
       "demo": "https://github.com/jamerrq/20192-Sport-Scheduling",
       "images": [
-        "sport-scheduling.png"
+        "sport-scheduling.webp"
       ]
     },
     {
@@ -101,7 +101,7 @@
       ],
       "private": true,
       "images": [
-        "ahp-forms-app.png"
+        "ahp-forms-app.webp"
       ]
     },
     {
@@ -117,8 +117,8 @@
       "repository": "https://github.com/jamerrq/checkbox-md-enhancement",
       "demo": "https://marketplace.visualstudio.com/items?itemName=jamerrq.checkbox-counter",
       "images": [
-        "checkbox-md-enhancement-1.png",
-        "checkbox-md-enhancement-2.png"
+        "checkbox-md-enhancement-1.webp",
+        "checkbox-md-enhancement-2.webp"
       ]
     },
     {
@@ -135,8 +135,8 @@
       "repository": "https://github.com/jamerrq/lumina",
       "demo": "https://lumina-sigma.vercel.app/",
       "images": [
-        "lumina-1.png",
-        "lumina-2.png"
+        "lumina-1.webp",
+        "lumina-2.webp"
       ]
     },
     {
@@ -153,7 +153,7 @@
       "demo": "https://deno.land/x/adventjs",
       "repository": "https://github.com/jamerrq/advent-js-cli",
       "images": [
-        "adventjs-cli-1.png"
+        "adventjs-cli-1.webp"
       ]
     },
     {
@@ -171,9 +171,9 @@
       "demo": "https://html-30-days-challenge.vercel.app/",
       "repository": "https://github.com/jamerrq/html-30-days-challenge",
       "images": [
-        "html-30-days-1.png",
-        "html-30-days-2.png",
-        "html-30-days-3.png"
+        "html-30-days-1.webp",
+        "html-30-days-2.webp",
+        "html-30-days-3.webp"
       ]
     },
     {
@@ -192,11 +192,11 @@
       "private": true,
       "featured": true,
       "images": [
-        "ide-pinturerias-1.png",
-        "ide-pinturerias-2.png",
-        "ide-pinturerias-3.png",
-        "ide-pinturerias-4.png",
-        "ide-pinturerias-5.png"
+        "ide-pinturerias-1.webp",
+        "ide-pinturerias-2.webp",
+        "ide-pinturerias-3.webp",
+        "ide-pinturerias-4.webp",
+        "ide-pinturerias-5.webp"
       ]
     },
     {
@@ -215,7 +215,7 @@
       "demo": "https://www.freecodecamp.org/certification/jamerrq/foundational-c-sharp-with-microsoft",
       "repository": "https://github.com/jamerrq/Foundational-CSharp-with-Microsoft",
       "images": [
-        "foundational-csharp-microsoft.png"
+        "foundational-csharp-microsoft.webp"
       ]
     },
     {
@@ -231,7 +231,7 @@
       "demo": "https://www.freecodecamp.org/certification/jamerrq/javascript-algorithms-and-data-structures",
       "repository": "https://github.com/jamerrq/javascript-algorithms-and-data-structures",
       "images": [
-        "js-algorithms.png"
+        "js-algorithms.webp"
       ]
     },
     {
@@ -248,7 +248,7 @@
       "demo": "https://www.freecodecamp.org/certification/jamerrq/responsive-web-design",
       "repository": "https://github.com/jamerrq/responsive-web-design/",
       "images": [
-        "responsive-web-design.png"
+        "responsive-web-design.webp"
       ]
     }
   ]