feat: enhance portfolio with PWA, image optimization, and advanced UX features

Author: Medalcode

.env.example

@@ -4,7 +4,8 @@ PUBLIC_SITE_URL=https://medalcode.github.io
 # Analytics (Optional)
 # PUBLIC_VERCEL_ANALYTICS_ID=
 
-# Contact Form (Optional)
+# Contact Form
+PUBLIC_WEB3FORMS_ACCESS_KEY=YOUR_ACCESS_KEY_HERE
 # PUBLIC_FORM_ENDPOINT=
 
 # Social Media (Optional)

README.md

@@ -74,29 +74,39 @@
 
 ## ✨ Key Features
 
-1. **🚀 Performance Optimized**
-   - Static site generation
-   - Partial hydration with Preact
-   - Optimized images and assets
-
-2. **💻 Modern Development Experience**
+1. **🚀 Pro Performance**
+   - **New**: `astro:assets` image optimization with AVIF/WebP support.
+   - **New**: Native View Transitions for smooth, app-like navigation.
+   - Static site generation (SSG) for blazing fast load times.
+   - Partial hydration with Preact.
+
+2. **📱 PWA & Offline Ready**
+   - **New**: Full Progressive Web App (PWA) support.
+   - **New**: Service Worker for offline capabilities and caching.
+   - **New**: Installable on mobile and desktop devices.
+
+3. **💻 Modern Development Experience**
    - TypeScript support
    - Hot module replacement
-   - ESLint integration
+   - ESLint & Prettier integration
 
-3. **🔍 SEO & Analytics**
+4. **🔍 SEO & Analytics**
+   - **New**: Enhanced JSON-LD Rich Snippets (Person Schema).
+   - **New**: Dynamic RSS Feed generation using Content Collections.
    - Built-in sitemap generation
-   - RSS feed support
    - Vercel Speed Insights
 
-4. **🎨 Styling & UI**
-   - TailwindCSS for utility-first styling
-   - **New**: Animated components with `tailwindcss-animated` (Scroll Reveal)
-   - **New**: Enhanced Dark Mode with anti-FOUC protection
-   - **New**: Custom 404 Error Page with auto-language detection
-   - Responsive design
-
-5. **🌐 Internationalization**
+5. **🎨 Styling & UI**
+   - TailwindCSS v4 with utility-first styling.
+   - **New**: Reading Time estimation for blog posts.
+   - **New**: AJAX Contact Form with immediate feedback and security.
+   - **New**: Copy Code functionality with visual feedback.
+   - Animated components with `tailwindcss-animated` (Scroll Reveal).
+   - Enhanced Dark Mode with anti-FOUC protection.
+   - Custom 404 Error Page with auto-language detection.
+   - Responsive design.
+
+6. **🌐 Internationalization**
    - Multi-language support (English/Spanish)
    - **New**: Intuitive Language Picker (ES | EN toggle)
    - **New**: Smart Navigation with mobile support

astro.config.mjs

@@ -4,6 +4,17 @@ import tailwindcss from "@tailwindcss/vite";
 import preact from "@astrojs/preact";
 import sitemap from "@astrojs/sitemap"
 import icon from "astro-icon";
+import { toString } from 'mdast-util-to-string';
+import getReadingTime from 'reading-time';
+
+export function remarkReadingTime() {
+  return function (tree, { data }) {
+    const textOnPage = toString(tree);
+    const readingTime = getReadingTime(textOnPage);
+    // readingTime.minutes will give us the number of minutes
+    data.astro.frontmatter.readingTime = Math.ceil(readingTime.minutes);
+  };
+}
 
 // https://astro.build/config
 export default defineConfig({
@@ -14,6 +25,7 @@ export default defineConfig({
     plugins: [tailwindcss()],
   },
   markdown: {
+    remarkPlugins: [remarkReadingTime],
     shikiConfig: {
       theme: 'github-dark'
     },

package-lock.json

@@ -52,8 +52,10 @@
     "alpinejs": "^3.14.9",
     "astro": "^5.6.1",
     "astro-icon": "^1.1.5",
+    "mdast-util-to-string": "^4.0.0",
     "preact": "^10.26.2",
     "prismjs": "^1.30.0",
+    "reading-time": "^1.5.0",
     "tailwindcss": "^4.1.8"
   },
   "devDependencies": {

package.json

@@ -1 +1,21 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "Fernando López | EFEELE Portfolio",
+  "short_name": "EFEELE",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#0E0E11",
+  "background_color": "#0E0E11",
+  "display": "standalone",
+  "start_url": "/",
+  "description": "Portfolio and tech blog of Fernando López (EFEELE), Web Developer and Software Architect."
+}

public/site.webmanifest

@@ -0,0 +1,94 @@
+const CACHE_NAME = 'medalcode-v1';
+const URLS_TO_CACHE = [
+  '/',
+  '/site.webmanifest',
+  '/favicon-32x32.png',
+  '/favicon-16x16.png',
+  '/styles/global.css' // This might be built into something else, so maybe skip specific assets unless we know the build path
+];
+
+// Install Event
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      // Omit errors if files don't exist (like specific CSS bundles)
+      return cache.addAll(URLS_TO_CACHE).catch(err => console.log('SW: Cache addAll error', err));
+    })
+  );
+  self.skipWaiting();
+});
+
+// Activate Event
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== CACHE_NAME) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+// Fetch Event
+self.addEventListener('fetch', (event) => {
+  // Navigation requests (HTML pages)
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      fetch(event.request)
+        .then((response) => {
+          // If network works, return response and cache it
+          const resClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, resClone);
+          });
+          return response;
+        })
+        .catch(() => {
+          // If network fails, try cache
+          return caches.match(event.request).then((response) => {
+            if (response) return response;
+            // Fallback to home page if specific page not in cache
+            return caches.match('/');
+          });
+        })
+    );
+    return;
+  }
+
+  // Asset requests (Images, CSS, JS)
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      // Return cached response if found
+      if (cachedResponse) {
+        // Optional: Update cache in background (Stale-while-revalidate)
+        fetch(event.request).then(response => {
+             if(response && response.status === 200) {
+                 const resClone = response.clone();
+                 caches.open(CACHE_NAME).then(cache => cache.put(event.request, resClone));
+             }
+        }).catch(() => {});
+        
+        return cachedResponse;
+      }
+
+      // If not in cache, fetch from network
+      return fetch(event.request).then((response) => {
+        if (!response || response.status !== 200 || response.type !== 'basic') {
+          return response;
+        }
+
+        const responseToCache = response.clone();
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+
+        return response;
+      });
+    })
+  );
+});

public/sw.js

@@ -1,18 +1,30 @@
 ---
-const { title, url, date, image, tags = [], languages = [] } = Astro.props;
+const { title, url, date, image, tags = [], languages = [], readingTime } = Astro.props;
+const { lang = "es" } = Astro.params;
+const readingTimeLabel = lang === "en" ? "min read" : "min de lectura";
 
 import Tag from "../ui/Tag.astro";
 import ReadMore from "../ui/ReadMore.astro";
 import DatePub from "./DatePub.astro";
 import Capsule from "../ui/Capsule.astro";
+import { Icon } from "astro-icon/components";
+import { Image } from "astro:assets";
 ---
 
 <article
   class="bg-white dark:bg-zinc-900/25 dark:border dark:border-zinc-800 dark:hover:border-mint-300 hover:backdrop-blur-none backdrop-blur-lg shadow-sm overflow-auto hover:shadow-[5px_5px_rgba(0,98,90,0.4),10px_10px_rgba(0,98,90,0.3),15px_15px_rgba(0,98,90,0.2),20px_20px_rgba(0,98,90,0.1),25px_25px_rgba(0,98,90,0.05)] p-8 max-md:p-6 w-full flex justify-between items-center bg-linear-to-r hover:from-teal-200 hover:to-emerald-200 dark:hover:from-riptide-500 dark:hover:to-mint-500 transition-all hover:scale-105 duration-200 ease-in-out gap-8 max-md:gap-4 rounded-3xl max-md:flex-col-reverse"
 >
   <div class="flex flex-col">
     <a href={url} class="flex flex-col gap-4 w-full">
-      <DatePub date={date} />
+      <div class="flex items-center gap-4">
+        <DatePub date={date} />
+        {readingTime && (
+          <span class="flex items-center gap-1 text-zinc-500 dark:text-zinc-400 text-sm font-medium">
+            <Icon name="clock" class="size-4" />
+            {readingTime} {readingTimeLabel}
+          </span>
+        )}
+      </div>
       <h2 class="dark:text-mint-50 text-blacktext text-3xl font-bold text-pretty">{title}</h2>
       <ReadMore />
     </a>
@@ -29,10 +41,17 @@ import Capsule from "../ui/Capsule.astro";
     image?.url && (
       <a
         href={url}
-        style={{ backgroundImage: `url(${image.url})` }}
-        class="shrink-0 rounded-2xl bg-center bg-cover aspect-video max-md:aspect-video w-2/6 max-md:w-full"
+        class="shrink-0 rounded-2xl overflow-hidden aspect-video max-md:aspect-video w-2/6 max-md:w-full group/img"
         aria-label={image.alt || title}
-      />
+      >
+        <Image
+          src={image.url}
+          alt={image.alt || title}
+          width={600}
+          height={338}
+          class="w-full h-full object-cover transition-transform duration-500 group-hover/img:scale-110"
+        />
+      </a>
     )
   }
 </article>

src/components/blog/BlogPost.astro

@@ -4,6 +4,9 @@ import Tag from "../ui/Tag.astro";
 import ReadMore from "../ui/ReadMore.astro";
 import Capsule from "../ui/Capsule.astro";
 import DatePub from "./DatePub.astro";
+import { Image } from "astro:assets";
+import getReadingTime from "reading-time";
+import { Icon } from "astro-icon/components";
 
 const currentPath = Astro.url.pathname;
 const urlParts = currentPath.split("/").filter(Boolean);
@@ -36,24 +39,35 @@ const getPostUrl = (post: CollectionEntry<"blog">) => {
   const cleanSlug = slugParts.join("/");
   return `/${currentLang}/blog/posts/${cleanSlug}`;
 };
+
+const readingTimeValue = latestPost ? Math.ceil(getReadingTime(latestPost.body).minutes) : 0;
+const readingTimeLabel = currentLang === "en" ? "min read" : "min de lectura";
 ---
 
 {
   latestPost && (
     <div
-      style={{ backgroundImage: `url(${image})` }}
-      class="h-full hover:shadow-[0_20px_50px_rgba(13,188,130,0.2)] flex flex-col overflow-hidden rounded-2xl bg-linear-to-br bg-center bg-cover transition-all ease-in-out duration-200"
+      class="h-full hover:shadow-[0_20px_50px_rgba(13,188,130,0.2)] relative flex flex-col overflow-hidden rounded-2xl transition-all ease-in-out duration-200 group/last"
       role="article"
       aria-labelledby="post-title"
     >
-      <article class="h-full flex flex-col justify-between max-sm:bg-zinc-900 max-sm:relative sm:bg-linear-to-t from-black/95 from-25% to-transparent max-sm:from-60% p-8 max-md:p-6 max-sm:mp-0 max-sm:p-0">
+      <div class="absolute inset-0 z-0">
+        <Image 
+          src={image} 
+          alt={imageAlt} 
+          width={1200}
+          height={675}
+          class="w-full h-full object-cover transition-transform duration-500 group-hover/last:scale-105"
+        />
+      </div>
+      <article class="h-full relative flex flex-col justify-between max-sm:bg-zinc-900/80 sm:bg-linear-to-t from-black/95 from-25% to-transparent max-sm:from-60% p-8 max-md:p-6 max-sm:mp-0 max-sm:p-0 z-10 backdrop-blur-[2px] sm:backdrop-blur-none">
         <a
           href={getPostUrl(latestPost)}
           class="sm:hidden relative top-0 left-0 w-full h-auto -z-0"
           aria-hidden="true"
           tabindex="-1"
         >
-          <img src={image} alt={imageAlt} class="w-full h-auto" loading="lazy" />
+          <Image src={image} alt={imageAlt} width={800} height={450} class="w-full h-auto" loading="lazy" />
         </a>
         <div
           class="w-full flex pb-5 gap-2 flex-wrap justify-end z-10 max-sm:px-6 max-sm:pt-6"
@@ -70,8 +84,14 @@ const getPostUrl = (post: CollectionEntry<"blog">) => {
           class="text-mint-50 gap-3 h-full flex items-end max-sm:px-6  rounded-lg transition-all"
           aria-label={`Read article: ${latestPost.data.title}`}
         >
-          <div class="gap-3 flex flex-col justify-end drop-shadow-[1px_6px_1px_rgba(0,0,0,0.3)]">
-            <DatePub date={latestPost.data.pubDate} class="text-mint-50" />
+          <div class="gap-3 flex flex-col justify-end drop-shadow-[1px_6px_1px_rgba(0,0,0,0.5)]">
+            <div class="flex items-center gap-4 text-mint-100 font-medium">
+              <DatePub date={latestPost.data.pubDate} />
+              <span class="flex items-center gap-1 text-sm">
+                <Icon name="clock" class="size-4" />
+                {readingTimeValue} {readingTimeLabel}
+              </span>
+            </div>
             <h2 id="post-title" class="text-4xl max-xl:text-3xl max-sm:text-2xl font-bold">
               <span>{latestPost.data.title}</span>
             </h2>

src/components/blog/LastPost.astro

@@ -1,6 +1,8 @@
 ---
 import BlogPost from "./BlogPost.astro";
 import Heading from "../ui/Heading.astro";
+import getReadingTime from "reading-time";
+import { getCollection } from "astro:content";
 
 // Prop to determine whether to exclude the latest post or a specific post
 export interface Props {
@@ -12,7 +14,6 @@ export interface Props {
 const { excludeLatest = false, currentPostUrl = "", all = false } = Astro.props;
 
 const { lang } = Astro.params;
-import { getCollection } from "astro:content";
 const allPosts = await getCollection("blog", ({ id }) => {
   return id.startsWith(`${lang}/`);
 });
@@ -65,6 +66,7 @@ if (!all) {
           tags={post.data.tags}
           languages={post.data.languages}
           image={post.data.image}
+          readingTime={Math.ceil(getReadingTime(post.body).minutes)}
         />
       ))
     }