chore: animations, renames, etc

astro.config.ts

@@ -4,9 +4,11 @@ import deno from '@astrojs/deno'
 import robotsTxt from 'astro-robots-txt'
 import preact from '@astrojs/preact'
 
+import pageInsight from 'astro-page-insight'
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), robotsTxt(), preact()],
+  integrations: [tailwind(), robotsTxt(), preact(), pageInsight()],
   adapter: deno(),
   output: 'server',
   i18n: {

package.json

@@ -7,7 +7,8 @@
     "@astrojs/preact": "^3.1.0",
     "@astrojs/tailwind": "^5.0.4",
     "@fontsource/merriweather": "^5.0.8",
-    "astro": "4.0.8",
+    "astro": "^4.0.8",
+    "astro-page-insight": "^0.4.1",
     "astro-robots-txt": "^1.0.0",
     "preact": "^10.19.3",
     "sharp": "^0.33.2",
@@ -16,7 +17,7 @@
     "typescript": "^5.3.3"
   },
   "scripts": {
-    "dev": "astro dev --host",
+    "dev": "astro dev",
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
@@ -31,6 +32,7 @@
     "@fontsource/handlee": "^5.0.18",
     "@fontsource/redressed": "^5.0.18",
     "@fontsource/rubik-doodle-shadow": "^5.0.1",
+    "@midudev/tailwind-animations": "^0.0.7",
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
     "eslint": "^8.56.0",

src/components/badges/open-to-work.astro

@@ -6,7 +6,7 @@ const { lang = 'en' }: Props = Astro.props
 ---
 
 <span
-  class='bg-emerald-100 text-emerald-800 text-xs font-bold inline-flex items-center px-2.5 py-0.5 rounded-sm font-merriweather xl:absolute top-1.5 right-1.5'
+  class='bg-emerald-100 text-emerald-800 text-xs font-bold inline-flex items-center px-2.5 py-0.5 rounded-sm font-merriweather xl:absolute top-1.5 right-1.5 animate-slide-in-top animate-delay-200'
 >
   <svg viewBox='0 0 512 512' class='w-2.5 h-2.5 me-1.5' fill='currentColor'
     ><title></title><g data-name='1' id='_1'

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

@@ -34,6 +34,7 @@ export default function Link({ href, title }: LinkProps) {
       rel='noopener noreferrer'
       class={ANCHOR_STYLES}
       title={title}
+      aria-label={title}
     >
       {title === 'Website' ? (
         <FirefoxIcon />

src/components/main/about-me-card.astro

@@ -27,6 +27,7 @@ const ABOUT_ME_STYLES = [
   'text-base',
   'p-2',
   'relative'
+  // 'animate-blurred-fade-in'
 ].join(' ')
 ---
 
@@ -40,7 +41,7 @@ const ABOUT_ME_STYLES = [
   <div
     class='flex items-center p-3 justify-around w-full font-merriweather xl:text-base text-sm relative'
   >
-    <ul class='w-full text-center p-2 gap-1 flex flex-col'>
+    <ul class='w-full text-center p-2 gap-1.5 flex flex-col'>
       <li>
         <p class='text-balance'>
           {
@@ -61,7 +62,7 @@ const ABOUT_ME_STYLES = [
       <!-- <p class='font-fira inline'>󰜐</p> -->
       <li>
         <!-- Currently working as part time Backend Developer at -->
-        <!-- <p class='text-balance'>
+        <p class='text-balance'>
           {
             lang === 'en'
               ? 'Currently working as part time Backend Developer at'
@@ -75,7 +76,7 @@ const ABOUT_ME_STYLES = [
           >
             Dium
           </a>
-        </p> -->
+        </p>
       </li>
       <li>
         <p class='text-balance'>

src/components/main/background.astro

@@ -13,4 +13,4 @@
   }
 </style>
 
-<div class='background blur-sm dark:blur-[2px]'></div>
+<div class='background blur-sm dark:blur-[1px]'></div>

src/components/main/bento.astro

@@ -6,9 +6,10 @@ const BENTO_STYLES = [
   'xl:grid',
   'items-center',
   'justify-center',
-  'min-w-[95dvw]',
+  // 'min-w-[95dvw]',
   'min-h-[95dvh]',
   'w-[95dvw]',
+  'lg:w-[75dvw]',
   'xl:h-[95dvh]',
   'content-center',
   'rounded-sm',

src/components/main/blog.astro

@@ -27,6 +27,8 @@ const BLOG_STYLES = [
   'hover:duration-200',
   'hover:ease-in-out',
   'p-2'
+  // 'animate-blurred-fade-in',
+  // 'animate-delay-400'
 ].join(' ')
 
 import { siGitbook } from 'simple-icons'

src/components/main/buttons.astro

@@ -27,6 +27,8 @@ const BUTTONS_STYLES = [
   'dark:text-slate-100',
   'bg-slate-300',
   'p-2'
+  // 'animate-blurred-fade-in',
+  // 'animate-delay-200'
 ].join(' ')
 
 const BUTTON_STYLES = [
@@ -68,7 +70,7 @@ const SVGS_STYLES = [
   <!-- LANGUAGE SWITCH -->
   <a
     class={BUTTON_STYLES}
-    title='Switch language en/es'
+    aria-label='Switch language en/es'
     id='language-toggle'
     href={href}
   >

src/components/main/featured.astro

@@ -29,6 +29,8 @@ const FEATURED_STYLES = [
   'hover:duration-200',
   'hover:ease-in-out',
   'p-2'
+  // 'animate-blurred-fade-in',
+  // 'animate-delay-300'
 ].join(' ')
 
 interface Props {

src/components/main/project.astro

@@ -27,6 +27,8 @@ const project = projects.at(index) as Project
 const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
   ' '
 )
+
+import { Image } from 'astro:assets'
 ---
 
 <li
@@ -48,7 +50,13 @@ const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
     </h1>
   </a>
   <section class='bg-transparent w-full flex items-center'>
-    <img src={project?.image} class='w-5/12' alt='' />
+    <Image
+      src={project?.image}
+      alt={`snap for ${project?.title.en}`}
+      width='150'
+      height='50'
+      loading='eager'
+    />
     <aside class='flex flex-col items'>
       <div class='flex gap-2 items-center justify-center'>
         {

src/components/main/socials.astro

@@ -31,6 +31,8 @@ const SOCIALS_STYLES: string = [
   'grid-rows-3',
   'grid-cols-1',
   'p-2'
+  // 'animate-blurred-fade-in',
+  // 'animate-delay-400'
 ].join(' ')
 
 import {

src/components/main/tech-stack.astro

@@ -23,6 +23,8 @@ const TECH_STACK_STYLES: string = [
   'hover:scale-[1.02]',
   'hover:transition-all',
   'text-2xl'
+  // 'animate-blurred-fade-in',
+  // 'animate-delay-300'
 ].join(' ')
 import {
   siNodedotjs,

src/components/main/title.astro

@@ -6,16 +6,16 @@ const { lang = 'en' }: Props = Astro.props
 ---
 
 <div
-  class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-emerald-900 dark:text-emerald-300 text-emerald-950 bg-emerald-400 p-2 rounded-sm w-full flex items-center flex-row'
+  class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-emerald-900 dark:text-emerald-300 text-emerald-950 bg-emerald-400 p-2 rounded-sm w-full flex items-center flex-row animate-fade-in-up'
 >
-  <div class='flex flex-col'>
+  <div class='flex flex-col animate-blurred-fade-in'>
     <a href={lang !== 'en' ? '/' : 'es'}>
       <p class='font-rubik-doodle font-semibold text-2xl xl:text-4xl'>
         @jamerrq.dev
       </p>
     </a>
     <span class='block font-merriweather text-sm text-center'>
-      {lang === 'en' ? 'Software Developer' : 'Desarrollador'}
+      {lang === 'en' ? 'Software Developer' : 'Desarrollador de Software'}
     </span>
   </div>
 </div>

src/components/main/working-on.astro

@@ -22,12 +22,15 @@ const EXPERIENCE_STYLES = [
   'dark:text-slate-200',
   'flex',
   'flex-col',
-  'p-1',
+  'pt-2',
+  'px-2',
   '[&>div>ul>li]:dark:text-slate-200',
   '[&>div>ul>li>a]:bg-emerald-500',
   '[&>div>ul>li>a]:dark:bg-emerald-400',
   '[&>div>ul>li>a]:dark:text-emerald-950',
   '[&>div>ul>li>a]:text-slate-950'
+  // 'animate-blurred-fade-in',
+  // 'animate-delay-200'
 ].join(' ')
 
 import {

src/data/working-on.json

@@ -2,8 +2,8 @@
   "projects": [
     {
       "title": {
-        "en": "Verdantia: Naturist  products",
-        "es": "Verdantia: Productos naturistas"
+        "en": "Fedora - Naturist products",
+        "es": "Fedora - Productos naturistas"
       },
       "description": {
         "en": "A website for a small business that sells natural products.",
@@ -20,8 +20,8 @@
     },
     {
       "title": {
-        "en": "F. Moore: Multiproduct store",
-        "es": "F. Moore: Tienda multiproductos"
+        "en": "Kali - Multiproduct store",
+        "es": "Kali - Tienda multiproductos"
       },
       "description": {
         "en": "E commerce website for a small business that sells multiple products.",

src/layouts/blog-layout.astro

@@ -9,9 +9,6 @@ interface Props {
 }
 const { frontmatter }: Props = Astro.props
 import Buttons from '@components/main/buttons.astro'
-const libreCounterEndpoint =
-  'https://librecounter.org/count?url=http://jamerrq.deno.dev&userAgent=roboto/1.0'
-fetch(libreCounterEndpoint)
 ---
 
 <Layout title={frontmatter.title}>

src/layouts/layout.astro

@@ -10,9 +10,6 @@ import '@fontsource/rubik-doodle-shadow'
 import { ViewTransitions } from 'astro:transitions'
 import Background from '@components/main/background.astro'
 const BODY_CLASS = import.meta.env.MODE === 'development' ? 'debug-screens' : ''
-const libreCounterEndpoint =
-  'https://librecounter.org/count?url=http://jamerrq.deno.dev&userAgent=roboto/1.0'
-fetch(libreCounterEndpoint)
 ---
 
 <!doctype html>
@@ -27,7 +24,7 @@ fetch(libreCounterEndpoint)
     <meta name='twitter:card' content='summary_large_image' />
     <meta name='twitter:site' content='@jamerrq' />
     <meta name='twitter:title' content='jamerrq.dev' />
-    <meta name='twitter:description' content='Software Engineer' />
+    <meta name='twitter:description' content='Software Development' />
     <meta
       name='twitter:image'
       content='https://jamerrq.deno.dev/og-image2.png'
@@ -39,7 +36,7 @@ fetch(libreCounterEndpoint)
       property='og:image'
       content='https://jamerrq.deno.dev/og-image2.png'
     />
-    <meta property='og:description' content='Software Developer.' />
+    <meta property='og:description' content='Software Development' />
     <meta property='og:site_name' content='jamerrq.dev' />
     <!-- Robots -->
     <meta name='robots' content='index, follow' />
@@ -55,14 +52,6 @@ fetch(libreCounterEndpoint)
     >
       <slot />
     </main>
-    <a
-      href='https://librecounter.org/referer/show'
-      target='_blank'
-      rel='noreferrer'
-      class='hidden'
-    >
-      <img src='' referrerpolicy='unsafe-url' />
-    </a>
     <style is:global>
       /* Reset by @souporserious */
       * {

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

@@ -4,7 +4,7 @@ title: About this awesome website
 hrefLang: ../es/blog/acerca-de-esta-web/
 ---
 
-![og-image](https://jamerrq.deno.dev/og-image.png)
+![jamerrq.dev](https://jamerrq.deno.dev/og-image.png)
 
 # Introduction
 

tailwind.config.ts

@@ -26,7 +26,10 @@ export default {
       }
     }
   },
-  plugins: [require('tailwindcss-debug-screens')],
+  plugins: [
+    require('tailwindcss-debug-screens'),
+    require('@midudev/tailwind-animations')
+  ],
   safelist: [
     'fill-[#BC52EE]',
     'fill-[#3FCF8E]',