feat(hero): replace code card mock with real avatar image

src/app/page.tsx

@@ -37,8 +37,6 @@ export default function Home() {
           </div>
           <div className="flex gap-6">
             <a href="#home" className="text-text-secondary hover:text-text-primary transition-colors duration-300">Back to top</a>
-            <span>&bull;</span>
-            <span>Made with Next.js &amp; Tailwind CSS</span>
           </div>
         </div>
       </footer>

src/components/Hero/Hero.tsx

 "use client";
 
+import Image from "next/image";
+
 export default function Hero() {
   const handleScrollTo = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
     e.preventDefault();
@@ -79,30 +81,18 @@ export default function Hero() {
           {/* Subtle morphing background gradient blob */}
           <div className="absolute w-[260px] h-[260px] sm:w-[340px] sm:h-[340px] bg-gradient-to-br from-primary/15 to-secondary/5 rounded-full filter blur-[2px] opacity-80 animate-morph"></div>
 
-          {/* Floating Dark IDE Code Card */}
-          <div className="absolute bg-[#111827] border border-[#1f2937] p-5 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] animate-float flex flex-col gap-3.5 w-[230px] sm:w-[270px] left-0 top-8">
-            <div className="flex items-center justify-between border-b border-white/5 pb-3">
-              <div className="flex items-center gap-1.5">
-                <span className="w-2.5 h-2.5 rounded-full bg-red-500/40"></span>
-                <span className="w-2.5 h-2.5 rounded-full bg-yellow-500/40"></span>
-                <span className="w-2.5 h-2.5 rounded-full bg-green-500/40"></span>
-              </div>
-              <span className="text-[10px] text-slate-500 font-mono">quan.json</span>
-            </div>
-            <div className="flex flex-col gap-1.5 font-mono text-[10px] sm:text-[11px] leading-relaxed text-slate-400">
-              <div>
-                <span className="text-primary">const</span> <span className="text-white">intern</span> = &#123;
-              </div>
-              <div className="pl-4">
-                name: <span className="text-emerald-400">&quot;Bui Minh Quan&quot;</span>,
-              </div>
-              <div className="pl-4">
-                gpa: <span className="text-secondary">3.42</span>,
-              </div>
-              <div className="pl-4">
-                stack: <span className="text-emerald-400">&quot;Spring Boot &amp; React&quot;</span>
-              </div>
-              <div>&#125;;</div>
+          {/* Floating Avatar Container */}
+          <div className="absolute w-[200px] h-[200px] sm:w-[240px] sm:h-[240px] rounded-full overflow-hidden border-4 border-surface-border bg-surface p-1.5 shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float left-0 top-6 z-10 group">
+            <div className="relative w-full h-full rounded-full overflow-hidden">
+              {/* Glowing background */}
+              <div className="absolute inset-0 bg-gradient-to-tr from-primary to-secondary opacity-30 rounded-full blur-[2px] transition-transform duration-300 group-hover:scale-105"></div>
+              <Image 
+                src="/avatar/avatar.jpg" 
+                alt="Bui Minh Quan Avatar" 
+                fill 
+                className="object-cover rounded-full transition-transform duration-300 group-hover:scale-105" 
+                priority
+              />
             </div>
           </div>