From 9fff87e3a40d8f7fed927e8c5b3391231b89b687 Mon Sep 17 00:00:00 2001
From: Jannael <orlandojannael@gmail.com>
Date: Tue, 2 Jun 2026 09:44:22 -0600
Subject: [PATCH 1/3] refactor: new function to print ascii with animation

---
 src/pages/index.astro | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index c578204..88da80f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -364,27 +364,17 @@ const skillsMap = [...SKILLS_MAP].sort((a: any, b: any) => {
       await navigator.clipboard.writeText('npx autoskills')
     })
 
-    // ── ASCII logo animation ─────────────────────────────────
-    {
-      const LOGO_LINES = [
-        ' █████╗ ██╗   ██╗████████╗ ██████╗ ███████╗██╗  ██╗██╗██╗     ██╗     ███████╗',
-        '██╔══██╗██║   ██║╚══██╔══╝██╔═══██╗██╔════╝██║ ██╔╝██║██║     ██║     ██╔════╝',
-        '███████║██║   ██║   ██║   ██║   ██║███████╗█████╔╝ ██║██║     ██║     ███████╗',
-        '██╔══██║██║   ██║   ██║   ██║   ██║╚════██║██╔═██╗ ██║██║     ██║     ╚════██║',
-        '██║  ██║╚██████╔╝   ██║   ╚██████╔╝███████║██║  ██╗██║███████╗███████╗███████║',
-        '╚═╝  ╚═╝ ╚═════╝    ╚═╝    ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚══════╝',
-      ]
-
+    function PrintAsciiWithAnimation (ascii: string[]) {
       const START_COLOR = '#3f3f46'  // zinc-700 (gris clarito)
       const END_COLOR = '#f4f4f5'    // zinc-100 (blanco)
 
       const logo = document.getElementById('ascii-logo')!
-      const cols = Math.max(...LOGO_LINES.map(l => l.length))
-      const rows = LOGO_LINES.length
+      const cols = Math.max(...ascii.map(l => l.length))
+      const rows = ascii.length
 
       // Build grid
       const grid: HTMLSpanElement[][] = []
-      for (const line of LOGO_LINES) {
+      for (const line of ascii) {
         const row: HTMLSpanElement[] = []
         const lineEl = document.createElement('div')
         lineEl.style.height = '1lh'
@@ -432,6 +422,20 @@ const skillsMap = [...SKILLS_MAP].sort((a: any, b: any) => {
       requestAnimationFrame(animate)
     }
 
+    // ── ASCII logo animation ─────────────────────────────────
+    {
+      const LOGO_LINES = [
+        ' █████╗ ██╗   ██╗████████╗ ██████╗ ███████╗██╗  ██╗██╗██╗     ██╗     ███████╗',
+        '██╔══██╗██║   ██║╚══██╔══╝██╔═══██╗██╔════╝██║ ██╔╝██║██║     ██║     ██╔════╝',
+        '███████║██║   ██║   ██║   ██║   ██║███████╗█████╔╝ ██║██║     ██║     ███████╗',
+        '██╔══██║██║   ██║   ██║   ██║   ██║╚════██║██╔═██╗ ██║██║     ██║     ╚════██║',
+        '██║  ██║╚██████╔╝   ██║   ╚██████╔╝███████║██║  ██╗██║███████╗███████╗███████║',
+        '╚═╝  ╚═╝ ╚═════╝    ╚═╝    ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚══════╝',
+      ]
+
+      PrintAsciiWithAnimation(LOGO_LINES)      
+    }
+
     // ── Terminal animation ────────────────────────────────────
     const C = {
       z4: 'color:#a1a1aa',  // zinc-400

From 7e148aa2567f8a73277b44e38727e7a1ddf87acf Mon Sep 17 00:00:00 2001
From: Jannael <orlandojannael@gmail.com>
Date: Tue, 2 Jun 2026 09:53:09 -0600
Subject: [PATCH 2/3] feat: update printAsciiWithAnimation to only run the
 animation when the element is the DOM

---
 src/pages/index.astro | 125 +++++++++++++++++++++++-------------------
 1 file changed, 70 insertions(+), 55 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 88da80f..6a84e04 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -364,62 +364,78 @@ const skillsMap = [...SKILLS_MAP].sort((a: any, b: any) => {
       await navigator.clipboard.writeText('npx autoskills')
     })
 
-    function PrintAsciiWithAnimation (ascii: string[]) {
+    function PrintAsciiWithAnimation (ascii: string[], id: string) {
       const START_COLOR = '#3f3f46'  // zinc-700 (gris clarito)
       const END_COLOR = '#f4f4f5'    // zinc-100 (blanco)
 
-      const logo = document.getElementById('ascii-logo')!
-      const cols = Math.max(...ascii.map(l => l.length))
-      const rows = ascii.length
-
-      // Build grid
-      const grid: HTMLSpanElement[][] = []
-      for (const line of ascii) {
-        const row: HTMLSpanElement[] = []
-        const lineEl = document.createElement('div')
-        lineEl.style.height = '1lh'
-        for (let c = 0; c < cols; c++) {
-          const ch = line[c] ?? ' '
-          const span = document.createElement('span')
-          span.textContent = ch
-          span.style.color = START_COLOR
-          lineEl.appendChild(span)
-          row.push(span)
-        }
-        logo.appendChild(lineEl)
-        grid.push(row)
+      const logo = document.getElementById(id)
+      if (!logo) {
+        // Element not in DOM yet, wait for it
+        const observer = new MutationObserver(() => {
+          const el = document.getElementById(id)
+          if (el) {
+            observer.disconnect()
+            runAnimation(el)
+          }
+        })
+        observer.observe(document.body, { childList: true, subtree: true })
+        return
       }
-
-      // Diagonal sweep: top-left to bottom-right, gray → white
-      const maxDist = cols + rows
-      const SPEED = 0.9
-      let frame = 0
-      const totalFrames = Math.ceil((maxDist + 10) / SPEED)
-
-      function animate() {
-        const waveFront = frame * SPEED
-
-        for (let r = 0; r < rows; r++) {
-          for (let c = 0; c < grid[r].length; c++) {
-            const dist = c + r * 3
-            const progress = Math.max(0, Math.min(1, (waveFront - dist) / 10))
-
-            const gray = Math.round(63 + progress * (244 - 63))
-            grid[r][c].style.color = `rgb(${gray},${gray},${gray})`
+      runAnimation(logo)
+
+      function runAnimation(logo: HTMLElement) {
+        const cols = Math.max(...ascii.map(l => l.length))
+        const rows = ascii.length
+  
+        // Build grid
+        const grid: HTMLSpanElement[][] = []
+        for (const line of ascii) {
+          const row: HTMLSpanElement[] = []
+          const lineEl = document.createElement('div')
+          lineEl.style.height = '1lh'
+          for (let c = 0; c < cols; c++) {
+            const ch = line[c] ?? ' '
+            const span = document.createElement('span')
+            span.textContent = ch
+            span.style.color = START_COLOR
+            lineEl.appendChild(span)
+            row.push(span)
           }
+          logo.appendChild(lineEl)
+          grid.push(row)
         }
-
-        frame++
-        if (frame <= totalFrames) {
-          requestAnimationFrame(animate)
-        } else {
-          for (let r = 0; r < rows; r++)
-            for (let c = 0; c < grid[r].length; c++)
-              grid[r][c].style.color = END_COLOR
+  
+        // Diagonal sweep: top-left to bottom-right, gray → white
+        const maxDist = cols + rows
+        const SPEED = 0.9
+        let frame = 0
+        const totalFrames = Math.ceil((maxDist + 10) / SPEED)
+  
+        function animate() {
+          const waveFront = frame * SPEED
+  
+          for (let r = 0; r < rows; r++) {
+            for (let c = 0; c < grid[r].length; c++) {
+              const dist = c + r * 3
+              const progress = Math.max(0, Math.min(1, (waveFront - dist) / 10))
+  
+              const gray = Math.round(63 + progress * (244 - 63))
+              grid[r][c].style.color = `rgb(${gray},${gray},${gray})`
+            }
+          }
+  
+          frame++
+          if (frame <= totalFrames) {
+            requestAnimationFrame(animate)
+          } else {
+            for (let r = 0; r < rows; r++)
+              for (let c = 0; c < grid[r].length; c++)
+                grid[r][c].style.color = END_COLOR
+          }
         }
+  
+        requestAnimationFrame(animate)
       }
-
-      requestAnimationFrame(animate)
     }
 
     // ── ASCII logo animation ─────────────────────────────────
@@ -433,7 +449,7 @@ const skillsMap = [...SKILLS_MAP].sort((a: any, b: any) => {
         '╚═╝  ╚═╝ ╚═════╝    ╚═╝    ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚══════╝',
       ]
 
-      PrintAsciiWithAnimation(LOGO_LINES)      
+      PrintAsciiWithAnimation(LOGO_LINES, 'ascii-logo')      
     }
 
     // ── Terminal animation ────────────────────────────────────
@@ -463,11 +479,9 @@ const skillsMap = [...SKILLS_MAP].sort((a: any, b: any) => {
     const bannerGap = ' '.repeat(Math.max(1, 39 - bannerTitle.length - ver.length - 3))
 
     const BANNER = [
-      s(C.cy, '   ╔═══════════════════════════════════════╗'),
-      s(C.cy, '   ║') + s(C.yw, bannerTitle) + bannerGap + s(C.z6, ver) + '   ' + s(C.cy, '║'),
-      s(C.cy, '   ║') + s(C.z5, '   Auto-install the best AI skills     ') + s(C.cy, '║'),
-      s(C.cy, '   ║') + s(C.z5, '   for your project                    ') + s(C.cy, '║'),
-      s(C.cy, '   ╚═══════════════════════════════════════╝'),
+      "┌─┐┬ ┬┌┬┐┌─┐┌─┐┬┌─┬┬  ┬  ┌─┐",
+      "├─┤│ │ │ │ │└─┐├┴┐││  │  └─┐",
+      "┴ ┴└─┘ ┴ └─┘└─┘┴ ┴┴┴─┘┴─┘└─┘",
     ]
 
     const TECH_NAMES = ['Next.js', 'React', 'Tailwind CSS', 'TypeScript', 'Supabase', 'Astro']
@@ -510,7 +524,8 @@ const skillsMap = [...SKILLS_MAP].sort((a: any, b: any) => {
 
       // Banner
       d(500, '')
-      for (const line of BANNER) d(30, line)
+      d(30, '<pre id="term-ascii"></pre>')
+      PrintAsciiWithAnimation(BANNER, 'term-ascii')
       d(0, '')
 
       // Detected technologies

From 7a2dfed391065678708a0b169feed8c12a67d8fe Mon Sep 17 00:00:00 2001
From: Jannael <orlandojannael@gmail.com>
Date: Tue, 2 Jun 2026 10:19:16 -0600
Subject: [PATCH 3/3] fix: minor styles to make the ascii animation look like
 it suppose to

---
 src/pages/index.astro | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6a84e04..ed19f17 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -393,6 +393,7 @@ const skillsMap = [...SKILLS_MAP].sort((a: any, b: any) => {
           const row: HTMLSpanElement[] = []
           const lineEl = document.createElement('div')
           lineEl.style.height = '1lh'
+          lineEl.style.lineHeight = '1'
           for (let c = 0; c < cols; c++) {
             const ch = line[c] ?? ' '
             const span = document.createElement('span')
@@ -479,9 +480,9 @@ const skillsMap = [...SKILLS_MAP].sort((a: any, b: any) => {
     const bannerGap = ' '.repeat(Math.max(1, 39 - bannerTitle.length - ver.length - 3))
 
     const BANNER = [
-      "┌─┐┬ ┬┌┬┐┌─┐┌─┐┬┌─┬┬  ┬  ┌─┐",
-      "├─┤│ │ │ │ │└─┐├┴┐││  │  └─┐",
-      "┴ ┴└─┘ ┴ └─┘└─┘┴ ┴┴┴─┘┴─┘└─┘",
+      "   ┌─┐┬ ┬┌┬┐┌─┐┌─┐┬┌─┬┬  ┬  ┌─┐",
+      "   ├─┤│ │ │ │ │└─┐├┴┐││  │  └─┐",
+      "   ┴ ┴└─┘ ┴ └─┘└─┘┴ ┴┴┴─┘┴─┘└─┘",
     ]
 
     const TECH_NAMES = ['Next.js', 'React', 'Tailwind CSS', 'TypeScript', 'Supabase', 'Astro']