Enhance footer and hero section with animated elements and typewriter effect

amide-init · amide-init · commit c2c51613a663 · 2026-04-15T02:17:53.000+05:30
- Added a second canvas for animated scan-line effect in the footer.
- Refactored animation logic to apply to both navbar and footer canvases.
- Redesigned footer layout with improved navigation and action buttons.
- Introduced typewriter effect for description text in the hero section.
- Added new CSS animations for fade-in and shimmer effects.
- Implemented social media icons with SVGs in the hero section.
- Enhanced accessibility and visual feedback for buttons and links.
diff --git a/src/App.tsx b/src/App.tsx
@@ -29,29 +29,33 @@ function App() {
 
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const scanRef = useRef<HTMLCanvasElement>(null)
+  const footerScanRef = useRef<HTMLCanvasElement>(null)
 
-  // Animated scan-line canvas for threejs navbar bottom border
+  // Animated scan-line canvas — shared animation logic, runs on both navbar and footer canvases
   useEffect(() => {
     if (!isThreejs) return
-    const canvas = scanRef.current
-    if (!canvas) return
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
+    const canvases = [scanRef.current, footerScanRef.current].filter(Boolean) as HTMLCanvasElement[]
+    if (!canvases.length) return
+
     let frame: number
     let t = 0
     const draw = () => {
       frame = requestAnimationFrame(draw)
       t += 0.012
-      const w = canvas.width
-      ctx.clearRect(0, 0, w, 1)
-      const grad = ctx.createLinearGradient(0, 0, w, 0)
-      const pos = (Math.sin(t) * 0.5 + 0.5)
-      const span = 0.28
-      grad.addColorStop(Math.max(0, pos - span), 'rgba(59,130,246,0)')
-      grad.addColorStop(pos, 'rgba(99,179,255,0.9)')
-      grad.addColorStop(Math.min(1, pos + span), 'rgba(6,182,212,0)')
-      ctx.fillStyle = grad
-      ctx.fillRect(0, 0, w, 1)
+      canvases.forEach((canvas) => {
+        const ctx = canvas.getContext('2d')
+        if (!ctx) return
+        const w = canvas.width
+        ctx.clearRect(0, 0, w, 1)
+        const grad = ctx.createLinearGradient(0, 0, w, 0)
+        const pos = Math.sin(t) * 0.5 + 0.5
+        const span = 0.28
+        grad.addColorStop(Math.max(0, pos - span), 'rgba(59,130,246,0)')
+        grad.addColorStop(pos, 'rgba(99,179,255,0.9)')
+        grad.addColorStop(Math.min(1, pos + span), 'rgba(6,182,212,0)')
+        ctx.fillStyle = grad
+        ctx.fillRect(0, 0, w, 1)
+      })
     }
     draw()
     return () => cancelAnimationFrame(frame)
@@ -389,42 +393,146 @@ function App() {
       </main>
 
       <footer className={footerClasses}>
-        <div className="mx-auto flex max-w-5xl flex-col items-start justify-between gap-3 px-6 sm:flex-row sm:items-center">
-          <div>
-            <p>{footer.text}</p>
-            <p className="mt-1 text-[11px] text-slate-500">{footer.subtleText}</p>
+        {isThreejs ? (
+          <div className="mx-auto max-w-5xl px-6 py-10">
+            {/* Animated scan-line top edge */}
+            <canvas
+              ref={footerScanRef}
+              width={1200}
+              height={1}
+              className="mb-8 w-full block"
+              aria-hidden="true"
+              style={{ height: 1 }}
+            />
+
+            <div className="flex flex-col gap-8 sm:flex-row sm:items-start sm:justify-between">
+              {/* Left — logo + tagline */}
+              <div className="flex flex-col gap-3">
+                <Link to="/" className="group inline-flex items-center gap-2.5 no-underline">
+                  <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-tr from-blue-600 to-cyan-400 text-xs font-semibold text-[#050509] ring-1 ring-blue-500/30 transition group-hover:ring-cyan-400/50">
+                    {navInitials}
+                  </span>
+                  <span className="text-xs font-semibold tracking-widest uppercase text-slate-400 transition group-hover:text-slate-200">
+                    {hero.title}
+                  </span>
+                </Link>
+                <p className="max-w-xs text-[11px] leading-relaxed text-slate-500">{footer.text}</p>
+                {footer.subtleText && (
+                  <p className="text-[10px] text-slate-600">{footer.subtleText}</p>
+                )}
+              </div>
+
+              {/* Center — quick nav */}
+              <nav aria-label="Footer navigation" className="flex flex-col gap-2">
+                <p className="mb-1 text-[9px] font-bold uppercase tracking-[0.25em] text-slate-600">Navigate</p>
+                {[
+                  { to: '/',         label: 'Home'     },
+                  { to: '/videos',   label: 'Videos'   },
+                  { to: '/blogs',    label: 'Blogs'    },
+                  { to: '/projects', label: 'Projects' },
+                ].map(({ to, label }) => (
+                  <Link
+                    key={to}
+                    to={to}
+                    className="text-[11px] text-slate-500 transition hover:text-blue-400"
+                  >
+                    {label}
+                  </Link>
+                ))}
+                <a
+                  href={`${import.meta.env.BASE_URL}#stats`}
+                  className="text-[11px] text-slate-500 transition hover:text-blue-400"
+                >
+                  Stats
+                </a>
+              </nav>
+
+              {/* Right — action buttons */}
+              <div className="flex flex-col gap-3">
+                <p className="mb-1 text-[9px] font-bold uppercase tracking-[0.25em] text-slate-600">Project</p>
+                <a
+                  href="https://github.com/amide-init/gitfolio"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex items-center gap-1.5 rounded-md border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-[11px] font-semibold text-amber-300 transition hover:bg-amber-400/20"
+                >
+                  <svg viewBox="0 0 16 16" className="h-3.5 w-3.5 fill-current" aria-hidden="true">
+                    <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.873 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
+                  </svg>
+                  Star on GitHub
+                </a>
+                <a
+                  href="https://github.com/amide-init/gitfolio/fork"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex items-center gap-1.5 rounded-md border border-indigo-400/30 bg-indigo-400/10 px-2.5 py-1 text-[11px] font-semibold text-indigo-300 transition hover:bg-indigo-400/20"
+                >
+                  <svg viewBox="0 0 16 16" className="h-3.5 w-3.5 fill-current" aria-hidden="true">
+                    <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z" />
+                  </svg>
+                  Fork
+                </a>
+                <Link
+                  to="/admin"
+                  className="text-[11px] font-medium text-slate-600 transition hover:text-slate-400"
+                >
+                  Admin ↗
+                </Link>
+              </div>
+            </div>
+
+            {/* Bottom rule + copyright */}
+            <div className="mt-8 flex flex-col items-center gap-1 border-t border-blue-900/20 pt-6 sm:flex-row sm:justify-between">
+              <p className="text-[10px] text-slate-700">
+                Built with{' '}
+                <a href="https://github.com/amide-init/gitfolio" target="_blank" rel="noreferrer" className="text-slate-600 hover:text-blue-400 transition-colors">
+                  Gitfolio
+                </a>
+              </p>
+              <div className="flex items-center gap-1.5">
+                <span className="h-1 w-1 rounded-full bg-blue-500 opacity-60 animate-pulse" />
+                <span className="text-[10px] text-slate-700 font-mono">threejs template</span>
+              </div>
+            </div>
           </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <a
-              href="https://github.com/amide-init/gitfolio"
-              target="_blank"
-              rel="noreferrer"
-              className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-[11px] font-semibold transition border-amber-400/40 bg-amber-400/10 text-amber-500 hover:bg-amber-400/20 dark:border-amber-400/30 dark:text-amber-300 dark:hover:bg-amber-400/20"
-            >
-              <svg viewBox="0 0 16 16" className="h-3.5 w-3.5 fill-current" aria-hidden="true">
-                <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.873 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
-              </svg>
-              Star
-            </a>
-            <a
-              href="https://github.com/amide-init/gitfolio/fork"
-              target="_blank"
-              rel="noreferrer"
-              className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-[11px] font-semibold transition border-indigo-400/40 bg-indigo-400/10 text-indigo-500 hover:bg-indigo-400/20 dark:border-indigo-400/30 dark:text-indigo-300 dark:hover:bg-indigo-400/20"
-            >
-              <svg viewBox="0 0 16 16" className="h-3.5 w-3.5 fill-current" aria-hidden="true">
-                <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z" />
-              </svg>
-              Fork
-            </a>
-            <Link
-              to="/admin"
-              className="text-[11px] font-medium text-slate-500 underline-offset-2 hover:underline dark:text-slate-400"
-            >
-              Admin
-            </Link>
+        ) : (
+          <div className="mx-auto flex max-w-5xl flex-col items-start justify-between gap-3 px-6 sm:flex-row sm:items-center">
+            <div>
+              <p>{footer.text}</p>
+              <p className="mt-1 text-[11px] text-slate-500">{footer.subtleText}</p>
+            </div>
+            <div className="flex flex-wrap items-center gap-2">
+              <a
+                href="https://github.com/amide-init/gitfolio"
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-[11px] font-semibold transition border-amber-400/40 bg-amber-400/10 text-amber-500 hover:bg-amber-400/20 dark:border-amber-400/30 dark:text-amber-300 dark:hover:bg-amber-400/20"
+              >
+                <svg viewBox="0 0 16 16" className="h-3.5 w-3.5 fill-current" aria-hidden="true">
+                  <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.873 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
+                </svg>
+                Star
+              </a>
+              <a
+                href="https://github.com/amide-init/gitfolio/fork"
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-[11px] font-semibold transition border-indigo-400/40 bg-indigo-400/10 text-indigo-500 hover:bg-indigo-400/20 dark:border-indigo-400/30 dark:text-indigo-300 dark:hover:bg-indigo-400/20"
+              >
+                <svg viewBox="0 0 16 16" className="h-3.5 w-3.5 fill-current" aria-hidden="true">
+                  <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z" />
+                </svg>
+                Fork
+              </a>
+              <Link
+                to="/admin"
+                className="text-[11px] font-medium text-slate-500 underline-offset-2 hover:underline dark:text-slate-400"
+              >
+                Admin
+              </Link>
+            </div>
           </div>
-        </div>
+        )}
       </footer>
     </div>
   )
diff --git a/src/index.css b/src/index.css
@@ -7,6 +7,26 @@
   to   { opacity: 1; }
 }
 
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(22px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fadeInRight {
+  from { opacity: 0; transform: translateX(-16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes shimmer {
+  0%   { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0; }
+}
+
 @layer base {
   body {
     @apply min-h-screen bg-slate-50 text-slate-900 antialiased;
diff --git a/src/templates/threejs/HeroSection.tsx b/src/templates/threejs/HeroSection.tsx
