feat(about): move github contributions from footer to about section

src/components/About.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import type { Education, Experience, SiteSettings } from '../lib/data';
 import ScrollReveal from './ScrollReveal';
+import GithubContributions from './GithubContributions';
 
 interface AboutProps {
   settings: SiteSettings;
   experience: Experience[];
   education?: Education[];
   sectionTag?: string;
+  githubUsername?: string;
 }
 
 export default function About({
   settings,
   experience,
   education = [],
-  sectionTag = '01 // Profile & Background'
+  sectionTag = '01 // Profile & Background',
+  githubUsername = 'ssbg04'
 }: AboutProps) {
   const paragraphs = (settings.biography && settings.biography.length > 0)
     ? settings.biography
@@ -312,6 +315,13 @@ export default function About({
             </div>
           )}
 
+          {/* Bento Cell 5: GitHub Contributions Activity Graph (12 cols) */}
+          <div className="lg:col-span-12">
+            <ScrollReveal variant="fade-up" delay={160} className="h-full">
+              <GithubContributions username={githubUsername} />
+            </ScrollReveal>
+          </div>
+
         </div>
 
       </div>

src/components/Footer.tsx

@@ -3,7 +3,6 @@ import type { SocialLink } from '../lib/data';
 import haptic from '../lib/haptics';
 
 const SpotifyWidget = lazy(() => import('./SpotifyWidget'));
-const GithubContributions = lazy(() => import('./GithubContributions'));
 
 const getFooterIcon = (platform: string) => {
   const p = platform.toLowerCase();
@@ -75,18 +74,8 @@ export default function Footer({ fullName = 'Cris Charles Garcia', socialLinks =
       ];
 
   return (
-    <footer className="relative z-10 border-t border-border-custom bg-muted-custom/20 pt-10 pb-16 sm:pb-10">
+    <footer className="relative z-10 border-t border-border-custom bg-muted-custom/20 py-8 sm:py-10">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 flex flex-col items-center gap-6">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
-
-        {/* Center: GitHub Contributions Activity Graph */}
-        <div className="w-full flex justify-center">
-          <Suspense fallback={<div className="h-40 w-full max-w-4xl rounded-3xl bg-foreground-custom/5 animate-pulse" />}>
-            <GithubContributions username="ssbg04" />
-          </Suspense>
-        </div>
-
-        {/* Bottom row: copyright, Spotify popup button & social links */}
-        <div className="w-full pt-4 border-t border-border-custom/50 flex flex-col sm:flex-row items-center justify-between gap-4">
         <p className="text-xs text-muted-foreground-custom text-center sm:text-left">
           &copy; {new Date().getFullYear()} {fullName}. Built with Astro &amp; React.
         </p>
@@ -132,7 +121,6 @@ export default function Footer({ fullName = 'Cris Charles Garcia', socialLinks =
             ))}
           </div>
         </div>
-      </div>
 
       {/* ─── Spotify Now Playing Modal ─── */}
       {isSpotifyModalOpen && (

src/components/GithubContributions.tsx

@@ -17,9 +17,10 @@ interface ApiResponse {
 
 interface Props {
   username?: string;
+  className?: string;
 }
 
-export default function GithubContributions({ username = 'ssbg04' }: Props) {
+export default function GithubContributions({ username = 'ssbg04', className = '' }: Props) {
   const [data, setData] = useState<ApiResponse | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<boolean>(false);
@@ -112,7 +113,7 @@ export default function GithubContributions({ username = 'ssbg04' }: Props) {
   };
 
   return (
-    <div className="w-full max-w-4xl rounded-3xl glass-card border border-border-custom p-4 sm:p-6 flex flex-col gap-4 shadow-sm relative overflow-hidden group">
+    <div className={`w-full rounded-3xl bento-card p-5 sm:p-6 flex flex-col gap-4 shadow-sm relative overflow-hidden group ${className}`}>
       {/* ─── Top Row: Title, Stats & GitHub Link ─── */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-border-custom/50">
         <div className="flex items-center gap-3">