Feat/liquidglass

app/layout.tsx

@@ -6,11 +6,13 @@ import { ThemeProvider } from "@/components/theme-provider"
 const inter = Inter({
   variable: "--font-inter",
   subsets: ["latin"],
+  display: "swap",
 });
 
 const outfit = Outfit({
   variable: "--font-outfit",
   subsets: ["latin"],
+  display: "swap",
 });
 
 export const metadata: Metadata = {

components/sections/contact.tsx

@@ -19,7 +19,7 @@ export async function ContactSection() {
                         </div>
                         <div>
                             <p className="text-zinc-700 dark:text-gray-300 font-medium">{contact.location}</p>
-                            <p className="text-zinc-500 dark:text-gray-500 text-xs text-nowrap">{contact.timezone}</p>
+                            <p className="text-zinc-600 dark:text-gray-400 text-xs text-nowrap">{contact.timezone}</p>
                         </div>
                     </div>
 

components/sections/more-about.tsx

@@ -42,7 +42,7 @@ export async function MoreAboutSection() {
                 </div>
 
                 {/* Image Column */}
-                <div className="relative aspect-[440/600] w-full order-1 md:order-2 rounded-3xl overflow-hidden">
+                <div className="relative aspect-[650/888] w-full order-1 md:order-2 rounded-3xl overflow-hidden">
                     <Image
                         src="/about-me.webp"
                         alt="Andrés Sánchez"

components/ui/hero-image.tsx

@@ -6,9 +6,10 @@ export function HeroImage() {
             <Image
                 src="/profile-cutout.webp"
                 alt="Andres Sanchez"
-                width={800}
-                height={926}
+                width={600}
+                height={695}
                 className="w-auto h-auto max-h-[350px] md:max-h-[500px] object-contain rounded-3xl"
+                sizes="(max-width: 768px) 350px, 500px"
                 priority
             />
         </div>

package.json

@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "@tailwindcss/typography": "^0.5.19",
-    "framer-motion": "^12.38.0",
     "lucide-react": "^0.563.0",
     "next": "16.1.4",
     "next-themes": "^0.4.6",

scripts/generate-avif.mjs

@@ -0,0 +1,36 @@
+import sharp from 'sharp';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const publicDir = path.join(__dirname, '../public');
+
+const images = [
+  'profile-cutout.webp',
+  'about-me.webp',
+  'swift-logo.webp',
+  'tri.webp',
+];
+
+async function generateAvif() {
+  for (const img of images) {
+    const inputPath = path.join(publicDir, img);
+    const outputPath = path.join(publicDir, img.replace('.webp', '.avif'));
+
+    try {
+      await sharp(inputPath)
+        .avif({ quality: 80 })
+        .toFile(outputPath);
+
+      const inputSize = (await import('fs')).statSync(inputPath).size;
+      const outputSize = (await import('fs')).statSync(outputPath).size;
+      const savings = Math.round((1 - outputSize / inputSize) * 100);
+
+      console.log(`✓ ${img.padEnd(25)} → ${img.replace('.webp', '.avif').padEnd(25)} (${savings}% smaller)`);
+    } catch (err) {
+      console.error(`✗ Failed to generate AVIF for ${img}:`, err.message);
+    }
+  }
+}
+
+generateAvif();

scripts/resize-images.mjs

@@ -0,0 +1,31 @@
+import sharp from 'sharp';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const publicDir = path.join(__dirname, '../public');
+
+const images = [
+  { file: 'profile-cutout.webp', width: 600, height: 695 },
+  { file: 'about-me.webp', width: 650, height: 888 },
+];
+
+async function resizeImages() {
+  for (const img of images) {
+    const inputPath = path.join(publicDir, img.file);
+    const outputPath = path.join(publicDir, img.file);
+
+    try {
+      const result = await sharp(inputPath)
+        .resize(img.width, img.height, { fit: 'cover' })
+        .toFile(outputPath + '.tmp');
+
+      await sharp(outputPath + '.tmp').toFile(outputPath);
+      console.log(`✓ Resized ${img.file} to ${img.width}x${img.height}`);
+    } catch (err) {
+      console.error(`✗ Failed to resize ${img.file}:`, err.message);
+    }
+  }
+}
+
+resizeImages();

todo.md

@@ -1,5 +1,31 @@
 # Todo
 
+## Deploy to Vercel
+
+Migrate from GitHub Pages to Vercel's free tier for better performance and caching.
+
+**Benefits:**
+- HTTP/2 Server Push (fixes critical request chains, saves ~109ms on LCP)
+- Custom cache headers (fixes 10-min GitHub Pages TTL → 1yr for hashed assets)
+- Free default domain: `andsang-github-io.vercel.app`
+- Optional: add custom domain later ($10-15/year)
+- Automatic deployments on git push
+
+**Steps:**
+- [ ] Push current branch (`feat/liquidglass`) to GitHub
+- [ ] Connect repo to Vercel (or use `npm i -g vercel && vercel`)
+- [ ] Vercel auto-detects Next.js + `output: 'export'`
+- [ ] Test site on Vercel domain
+- [ ] Update any hardcoded links from `andsang.github.io` to new Vercel domain (if any)
+- [ ] Merge to `master` and deploy to production
+
+**What this unlocks (GitHub Pages cannot fix these):**
+
+| Issue | Current (GitHub Pages) | With Vercel | Impact |
+|-------|-------|---------|--------|
+| **Cache lifetimes** | 10 min TTL | 1 year for hashed assets | 365 KiB savings per repeat visit |
+| **Critical request chains** | CSS blocks rendering at 348→456ms | HTTP/2 Server Push | ~109ms LCP improvement |
+
 ## Render-blocking CSS
 
 Next.js App Router injects CSS via `<link rel="stylesheet" data-precedence="next">`. Because of the `data-precedence` attribute (React's internal hydration ordering), `beasties` inlines critical CSS but leaves the blocking `<link>` intact — Lighthouse still flags it. Work was reverted.

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "ES2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,