From f74094b94ae33d6b695339c97a20db34b3cdc59f Mon Sep 17 00:00:00 2001
From: anhvuFE <vuxuananh22@gmail.com>
Date: Sun, 3 May 2026 17:40:03 +0700
Subject: [PATCH 1/2] feat(bento): redesign portfolio with bento grid + drawer
 pattern

Replace the long vertical scroll of 7 sections with a single bento
grid screen. Each card shows a preview; clicking opens a drawer
with the full section content (right anchor on desktop, bottom on
mobile).

- new components: BentoCard, BentoGrid, SectionDrawer, previews
  - 7 cards: About, GitHub, Skills (2x2), Experience, Certs,
    Services, Contact (full-width CTA)
  - GitHub preview uses real react-github-calendar data, not
    randomized squares
  - Skills preview shows 9 tech icons in a 3x3 grid
- App.tsx: collapse the 7 sections into <Hero> + <BentoGrid> +
  <Footer>; section components are lazy-loaded into the drawer
- Header.tsx: nav clicks now drive URL hash (#about, #skills, ...)
  which BentoGrid listens to and opens the matching drawer; active
  state tracks the hash
- main bundle: 343KB -> 215KB gzipped (-128KB) thanks to lazy
  drawer chunks
---
 src/App.tsx                            |  28 +---
 src/components/bento/BentoCard.tsx     | 131 +++++++++++++++++
 src/components/bento/BentoGrid.tsx     | 194 +++++++++++++++++++++++++
 src/components/bento/SectionDrawer.tsx |  62 ++++++++
 src/components/bento/previews.tsx      | 173 ++++++++++++++++++++++
 src/components/header/Header.tsx       |  46 +++---
 6 files changed, 579 insertions(+), 55 deletions(-)
 create mode 100644 src/components/bento/BentoCard.tsx
 create mode 100644 src/components/bento/BentoGrid.tsx
 create mode 100644 src/components/bento/SectionDrawer.tsx
 create mode 100644 src/components/bento/previews.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 243a70c..f19e277 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,13 +4,7 @@ import { ConfigProvider, theme as antdTheme } from "antd";
 import "./App.css";
 import Header from "./components/header/Header";
 import Home from "./components/home/Home";
-import About from "./components/about/About";
-import GitHubActivity from "./components/github/GitHubActivity";
-import Skills from "./components/skills/Skills";
-import Services from "./components/services/Services";
-import Qualification from "./components/qualification/Qualification";
-import Certificate from "./components/certificate/Certificate";
-import Contact from "./components/contact/Contact";
+import BentoGrid from "./components/bento/BentoGrid";
 import Footer from "./components/footer/Footer";
 import CursorGlow from "./components/effects/CursorGlow";
 import ScrollReveal from "./components/effects/ScrollReveal";
@@ -152,26 +146,8 @@ function App(): React.ReactElement {
         <Header />
         <main className="main">
           <Home />
-          <ScrollReveal>
-            <About />
-          </ScrollReveal>
-          <ScrollReveal direction="up" delay={0.1}>
-            <GitHubActivity />
-          </ScrollReveal>
-          <ScrollReveal direction="up" delay={0.1}>
-            <Skills />
-          </ScrollReveal>
-          <ScrollReveal direction="left">
-            <Services />
-          </ScrollReveal>
-          <ScrollReveal direction="up">
-            <Qualification />
-          </ScrollReveal>
-          <ScrollReveal direction="right">
-            <Certificate />
-          </ScrollReveal>
           <ScrollReveal direction="up">
-            <Contact />
+            <BentoGrid />
           </ScrollReveal>
           <Footer />
         </main>
diff --git a/src/components/bento/BentoCard.tsx b/src/components/bento/BentoCard.tsx
new file mode 100644
index 0000000..481e31c
--- /dev/null
+++ b/src/components/bento/BentoCard.tsx
@@ -0,0 +1,131 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import { ArrowOutward } from "@mui/icons-material";
+
+export interface BentoCardProps {
+  title: string;
+  subtitle?: string;
+  accent?: string;
+  preview: React.ReactNode;
+  onClick: () => void;
+  gridColumn?: string | { xs?: string; md?: string };
+  gridRow?: string | { xs?: string; md?: string };
+}
+
+const BentoCard: React.FC<BentoCardProps> = ({
+  title,
+  subtitle,
+  accent = "#0eaddf",
+  preview,
+  onClick,
+  gridColumn,
+  gridRow
+}) => {
+  return (
+    <Box
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+      sx={{
+        gridColumn,
+        gridRow,
+        position: "relative",
+        cursor: "pointer",
+        background: "rgba(22, 22, 22, 0.85)",
+        border: "1px solid rgba(255, 255, 255, 0.06)",
+        borderRadius: 4,
+        p: { xs: 2.5, md: 3 },
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        overflow: "hidden",
+        transition: "all 0.35s cubic-bezier(0.4, 0, 0.2, 1)",
+        "&:hover, &:focus-visible": {
+          transform: "translateY(-4px)",
+          borderColor: `${accent}55`,
+          boxShadow: `0 16px 40px ${accent}20`,
+          "& .bento-arrow": { opacity: 1, transform: "translate(2px, -2px)" },
+          "& .bento-glow": { opacity: 0.5 }
+        },
+        "&:focus-visible": { outline: `2px solid ${accent}` }
+      }}
+    >
+      <Box
+        className="bento-glow"
+        aria-hidden
+        sx={{
+          position: "absolute",
+          top: -40,
+          right: -40,
+          width: 160,
+          height: 160,
+          borderRadius: "50%",
+          background: accent,
+          opacity: 0.15,
+          filter: "blur(60px)",
+          transition: "opacity 0.4s ease",
+          pointerEvents: "none"
+        }}
+      />
+
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 2, position: "relative", zIndex: 1 }}>
+        <Box sx={{ minWidth: 0 }}>
+          <Typography
+            variant="caption"
+            sx={{
+              color: accent,
+              fontWeight: 600,
+              fontSize: "0.7rem",
+              letterSpacing: 1.5,
+              textTransform: "uppercase"
+            }}
+          >
+            {subtitle}
+          </Typography>
+          <Typography
+            variant="h6"
+            sx={{
+              color: "#e6edf3",
+              fontWeight: 700,
+              fontSize: { xs: "1rem", md: "1.15rem" },
+              lineHeight: 1.3,
+              mt: 0.25
+            }}
+          >
+            {title}
+          </Typography>
+        </Box>
+        <Box
+          className="bento-arrow"
+          sx={{
+            flexShrink: 0,
+            width: 32,
+            height: 32,
+            borderRadius: "50%",
+            background: `${accent}15`,
+            color: accent,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            opacity: 0.5,
+            transition: "all 0.3s ease"
+          }}
+        >
+          <ArrowOutward sx={{ fontSize: 16 }} />
+        </Box>
+      </Box>
+
+      <Box sx={{ flex: 1, position: "relative", zIndex: 1, display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
+        {preview}
+      </Box>
+    </Box>
+  );
+};
+
+export default BentoCard;
diff --git a/src/components/bento/BentoGrid.tsx b/src/components/bento/BentoGrid.tsx
new file mode 100644
index 0000000..2b8f411
--- /dev/null
+++ b/src/components/bento/BentoGrid.tsx
@@ -0,0 +1,194 @@
+import React, { useState, lazy, Suspense, useCallback, useEffect } from "react";
+import { Box, Container, Typography, CircularProgress } from "@mui/material";
+import BentoCard from "./BentoCard";
+import SectionDrawer from "./SectionDrawer";
+import {
+  AboutPreview,
+  SkillsPreview,
+  GitHubPreview,
+  ExperiencePreview,
+  CertsPreview,
+  ServicesPreview,
+  ContactPreview
+} from "./previews";
+
+const About = lazy(() => import("../about/About"));
+const GitHubActivity = lazy(() => import("../github/GitHubActivity"));
+const Skills = lazy(() => import("../skills/Skills"));
+const Services = lazy(() => import("../services/Services"));
+const Qualification = lazy(() => import("../qualification/Qualification"));
+const Certificate = lazy(() => import("../certificate/Certificate"));
+const Contact = lazy(() => import("../contact/Contact"));
+
+type SectionKey =
+  | "about"
+  | "github"
+  | "skills"
+  | "experience"
+  | "certificates"
+  | "services"
+  | "contact";
+
+const sectionContent: Record<SectionKey, React.LazyExoticComponent<React.FC>> = {
+  about: About,
+  github: GitHubActivity,
+  skills: Skills,
+  experience: Qualification,
+  certificates: Certificate,
+  services: Services,
+  contact: Contact
+};
+
+const DrawerLoader: React.FC = () => (
+  <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "60vh" }}>
+    <CircularProgress sx={{ color: "#0eaddf" }} />
+  </Box>
+);
+
+const validKeys = new Set<SectionKey>([
+  "about",
+  "github",
+  "skills",
+  "experience",
+  "certificates",
+  "services",
+  "contact"
+]);
+
+const BentoGrid: React.FC = () => {
+  const [openSection, setOpenSection] = useState<SectionKey | null>(null);
+
+  const open = useCallback((key: SectionKey) => {
+    setOpenSection(key);
+    if (window.location.hash !== `#${key}`) {
+      window.history.pushState(null, "", `#${key}`);
+    }
+  }, []);
+
+  const close = useCallback(() => {
+    setOpenSection(null);
+    if (window.location.hash) {
+      window.history.pushState(null, "", window.location.pathname + window.location.search);
+      window.dispatchEvent(new HashChangeEvent("hashchange"));
+    }
+  }, []);
+
+  useEffect(() => {
+    const sync = () => {
+      const hash = window.location.hash.replace("#", "") as SectionKey;
+      if (validKeys.has(hash)) {
+        setOpenSection(hash);
+      } else {
+        setOpenSection(null);
+      }
+    };
+    sync();
+    window.addEventListener("hashchange", sync);
+    return () => window.removeEventListener("hashchange", sync);
+  }, []);
+
+  const ActiveSection = openSection ? sectionContent[openSection] : null;
+
+  return (
+    <Box
+      component="section"
+      id="explore"
+      sx={{
+        py: { xs: 6, md: 10 },
+        background: "#0a0a0a",
+        position: "relative"
+      }}
+    >
+      <Container maxWidth="lg">
+        <Box sx={{ textAlign: "center", mb: { xs: 5, md: 7 } }}>
+          <Typography
+            variant="h2"
+            sx={{
+              fontSize: { xs: "2rem", sm: "2.5rem", md: "3rem" },
+              fontWeight: 700,
+              mb: 2,
+              color: "#0eaddf"
+            }}
+          >
+            Explore
+          </Typography>
+          <Typography variant="h6" sx={{ color: "#8b949e", fontWeight: 400 }}>
+            Click any card to dive deeper
+          </Typography>
+        </Box>
+
+        <Box
+          sx={{
+            display: "grid",
+            gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", md: "repeat(6, 1fr)" },
+            gridAutoRows: { xs: "180px", md: "200px" },
+            gap: { xs: 2, md: 2.5 }
+          }}
+        >
+          <BentoCard
+            title="About Me"
+            subtitle="Profile"
+            preview={<AboutPreview />}
+            onClick={() => open("about")}
+            gridColumn={{ xs: "1 / -1", md: "1 / span 4" }}
+          />
+          <BentoCard
+            title="Tech Stack"
+            subtitle="Skills"
+            accent="#a855f7"
+            preview={<SkillsPreview />}
+            onClick={() => open("skills")}
+            gridColumn={{ md: "5 / span 2" }}
+            gridRow={{ md: "span 2" }}
+          />
+          <BentoCard
+            title="GitHub Activity"
+            subtitle="Open Source"
+            preview={<GitHubPreview />}
+            onClick={() => open("github")}
+            gridColumn={{ md: "1 / span 4" }}
+          />
+          <BentoCard
+            title="Experience"
+            subtitle="Career"
+            accent="#22c55e"
+            preview={<ExperiencePreview />}
+            onClick={() => open("experience")}
+            gridColumn={{ md: "1 / span 2" }}
+          />
+          <BentoCard
+            title="Certificates"
+            subtitle="Achievements"
+            accent="#FFD700"
+            preview={<CertsPreview />}
+            onClick={() => open("certificates")}
+            gridColumn={{ md: "3 / span 2" }}
+          />
+          <BentoCard
+            title="Services"
+            subtitle="What I do"
+            accent="#f5576c"
+            preview={<ServicesPreview />}
+            onClick={() => open("services")}
+            gridColumn={{ md: "5 / span 2" }}
+          />
+          <BentoCard
+            title="Let's Connect"
+            subtitle="Get in touch"
+            preview={<ContactPreview />}
+            onClick={() => open("contact")}
+            gridColumn={{ xs: "1 / -1", md: "1 / -1" }}
+          />
+        </Box>
+      </Container>
+
+      <SectionDrawer open={openSection !== null} onClose={close}>
+        <Suspense fallback={<DrawerLoader />}>
+          {ActiveSection ? <ActiveSection /> : null}
+        </Suspense>
+      </SectionDrawer>
+    </Box>
+  );
+};
+
+export default BentoGrid;
diff --git a/src/components/bento/SectionDrawer.tsx b/src/components/bento/SectionDrawer.tsx
new file mode 100644
index 0000000..4dd6f90
--- /dev/null
+++ b/src/components/bento/SectionDrawer.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { Drawer, IconButton, Box, useTheme, useMediaQuery } from "@mui/material";
+import { Close as CloseIcon } from "@mui/icons-material";
+
+interface SectionDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const SectionDrawer: React.FC<SectionDrawerProps> = ({ open, onClose, children }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  return (
+    <Drawer
+      anchor={isMobile ? "bottom" : "right"}
+      open={open}
+      onClose={onClose}
+      keepMounted={false}
+      PaperProps={{
+        sx: {
+          width: { xs: "100%", md: "min(1100px, 92vw)" },
+          height: { xs: "92vh", md: "100%" },
+          maxWidth: "100%",
+          background: "#0a0a0a",
+          backgroundImage:
+            "radial-gradient(circle at 0% 0%, rgba(14, 173, 223, 0.06) 0%, transparent 50%)",
+          borderTopLeftRadius: { xs: 24, md: 24 },
+          borderTopRightRadius: { xs: 24, md: 0 },
+          borderBottomLeftRadius: { xs: 0, md: 24 },
+          borderLeft: { md: "1px solid rgba(14, 173, 223, 0.15)" },
+          borderTop: { xs: "1px solid rgba(14, 173, 223, 0.15)", md: "none" },
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column"
+        }
+      }}
+      ModalProps={{ keepMounted: false }}
+    >
+      <Box sx={{ position: "sticky", top: 0, zIndex: 10, display: "flex", justifyContent: "flex-end", p: 1.5, background: "linear-gradient(to bottom, #0a0a0a 60%, transparent)" }}>
+        <IconButton
+          onClick={onClose}
+          aria-label="Close section"
+          sx={{
+            color: "#8b949e",
+            background: "rgba(22,22,22,0.9)",
+            border: "1px solid rgba(255,255,255,0.08)",
+            "&:hover": { background: "#0eaddf", color: "#0a0a0a" }
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </Box>
+      <Box sx={{ flex: 1, overflowY: "auto", overflowX: "hidden", "& section": { minHeight: "auto !important" } }}>
+        {children}
+      </Box>
+    </Drawer>
+  );
+};
+
+export default SectionDrawer;
diff --git a/src/components/bento/previews.tsx b/src/components/bento/previews.tsx
new file mode 100644
index 0000000..5e1df53
--- /dev/null
+++ b/src/components/bento/previews.tsx
@@ -0,0 +1,173 @@
+import React from "react";
+import { Box, Typography, Avatar, Chip } from "@mui/material";
+import { GitHub, Email, Code, Cloud, Api } from "@mui/icons-material";
+import { GitHubCalendar } from "react-github-calendar";
+import AvatarImg from "../../assets/avatar.jpg";
+import awsCert from "../../assets/CERTIFICATE_LANDING_PAGE~HN06MIP031ZR.jpeg";
+
+const techIcons = [
+  { name: "React", src: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" },
+  { name: "TypeScript", src: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" },
+  { name: "Next.js", src: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" },
+  { name: "JavaScript", src: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" },
+  { name: "Node.js", src: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" },
+  { name: "Python", src: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" },
+  { name: "PostgreSQL", src: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg" },
+  { name: "Docker", src: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" },
+  { name: "AWS", src: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-plain-wordmark.svg" }
+];
+
+export const AboutPreview: React.FC = () => (
+  <Box sx={{ display: "flex", alignItems: "center", gap: 2, height: "100%", mt: "auto" }}>
+    <Avatar src={AvatarImg} alt="Vũ Xuân Anh" sx={{ width: 56, height: 56, border: "2px solid rgba(14, 173, 223, 0.3)", flexShrink: 0 }} />
+    <Box sx={{ minWidth: 0 }}>
+      <Typography sx={{ color: "#e6edf3", fontWeight: 600, fontSize: "0.95rem" }}>
+        Full Stack Developer
+      </Typography>
+      <Typography sx={{ color: "#8b949e", fontSize: "0.8rem", lineHeight: 1.5 }}>
+        3+ years building modern web apps with React &amp; TypeScript
+      </Typography>
+    </Box>
+  </Box>
+);
+
+export const SkillsPreview: React.FC = () => (
+  <Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1.25, alignContent: "center", height: "100%" }}>
+    {techIcons.map((t) => (
+      <Box
+        key={t.name}
+        sx={{
+          aspectRatio: "1",
+          borderRadius: 2,
+          background: "rgba(255,255,255,0.04)",
+          border: "1px solid rgba(255,255,255,0.05)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          p: 1.25
+        }}
+      >
+        <Box component="img" src={t.src} alt={t.name} sx={{ width: "100%", height: "100%", objectFit: "contain" }} />
+      </Box>
+    ))}
+  </Box>
+);
+
+export const GitHubPreview: React.FC = () => (
+  <Box
+    sx={{
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      height: "100%",
+      gap: 1,
+      overflow: "hidden",
+      "& .react-activity-calendar": { width: "100% !important" },
+      "& .react-activity-calendar__scroll-container": { overflow: "hidden" },
+      "& article > div": { gap: "3px !important" }
+    }}
+  >
+    <Box sx={{ pointerEvents: "none" }}>
+      <GitHubCalendar
+        username="anhvuFE"
+        colorScheme="dark"
+        blockSize={10}
+        blockMargin={3}
+        blockRadius={2}
+        fontSize={0}
+        showColorLegend={false}
+        showMonthLabels={false}
+        showTotalCount={false}
+        showWeekdayLabels={false}
+        labels={{ totalCount: "" }}
+        style={{ color: "transparent" }}
+      />
+    </Box>
+    <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#8b949e" }}>
+      <GitHub sx={{ fontSize: 14 }} />
+      <Typography sx={{ fontSize: "0.75rem" }}>@anhvuFE — live contributions</Typography>
+    </Box>
+  </Box>
+);
+
+export const ExperiencePreview: React.FC = () => (
+  <Box sx={{ display: "flex", flexDirection: "column", gap: 1, mt: "auto" }}>
+    <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+      <Box
+        sx={{
+          width: 8,
+          height: 8,
+          borderRadius: "50%",
+          background: "#22c55e",
+          boxShadow: "0 0 8px rgba(34, 197, 94, 0.6)"
+        }}
+      />
+      <Typography sx={{ color: "#22c55e", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: 1 }}>
+        Currently
+      </Typography>
+    </Box>
+    <Typography sx={{ color: "#e6edf3", fontWeight: 700, fontSize: "1rem" }}>Software Engineer</Typography>
+    <Typography sx={{ color: "#0eaddf", fontSize: "0.85rem", fontWeight: 500 }}>neliSoftwares</Typography>
+    <Typography sx={{ color: "#6e7681", fontSize: "0.75rem" }}>Jul 2025 — Present</Typography>
+  </Box>
+);
+
+export const CertsPreview: React.FC = () => (
+  <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, mt: "auto" }}>
+    <Box
+      component="img"
+      src={awsCert}
+      alt="Featured certificate"
+      sx={{
+        width: 64,
+        height: 48,
+        objectFit: "cover",
+        borderRadius: 1,
+        border: "1px solid rgba(255,255,255,0.1)",
+        flexShrink: 0
+      }}
+    />
+    <Box>
+      <Typography sx={{ color: "#e6edf3", fontWeight: 700, fontSize: "1.5rem", lineHeight: 1 }}>
+        10
+      </Typography>
+      <Typography sx={{ color: "#8b949e", fontSize: "0.75rem" }}>Certifications earned</Typography>
+    </Box>
+  </Box>
+);
+
+export const ServicesPreview: React.FC = () => (
+  <Box sx={{ display: "flex", flexDirection: "column", gap: 0.75, mt: "auto" }}>
+    {[
+      { icon: <Code sx={{ fontSize: 16 }} />, label: "Frontend Development" },
+      { icon: <Api sx={{ fontSize: 16 }} />, label: "Backend Development" },
+      { icon: <Cloud sx={{ fontSize: 16 }} />, label: "Full-Stack Solutions" }
+    ].map((s) => (
+      <Box key={s.label} sx={{ display: "flex", alignItems: "center", gap: 1, color: "#8b949e" }}>
+        <Box sx={{ color: "#0eaddf", display: "flex" }}>{s.icon}</Box>
+        <Typography sx={{ fontSize: "0.8rem" }}>{s.label}</Typography>
+      </Box>
+    ))}
+  </Box>
+);
+
+export const ContactPreview: React.FC = () => (
+  <Box sx={{ mt: "auto" }}>
+    <Chip
+      icon={<Email sx={{ fontSize: 14 }} />}
+      label="vuxuananh22@gmail.com"
+      size="small"
+      sx={{
+        background: "rgba(14, 173, 223, 0.1)",
+        color: "#0eaddf",
+        border: "1px solid rgba(14, 173, 223, 0.2)",
+        fontWeight: 500,
+        fontSize: "0.75rem",
+        mb: 1
+      }}
+    />
+    <Typography sx={{ color: "#8b949e", fontSize: "0.85rem", lineHeight: 1.5 }}>
+      Open to freelance & full-time opportunities. Response within 24h.
+    </Typography>
+  </Box>
+);
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 3e395bc..bb04985 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import {
   AppBar,
   Toolbar,
@@ -30,7 +30,7 @@ const navItems: NavItem[] = [
   { id: "about", label: "About" },
   { id: "skills", label: "Skills" },
   { id: "services", label: "Services" },
-  { id: "portfolio", label: "Experience" },
+  { id: "experience", label: "Experience" },
   { id: "contact", label: "Contact" },
 ];
 
@@ -39,7 +39,6 @@ const Header: React.FC = () => {
   const [activeSection, setActiveSection] = useState("home");
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-  const lastScrollTimeRef = useRef<number>(0);
 
   const trigger = useScrollTrigger({
     disableHysteresis: true,
@@ -47,39 +46,28 @@ const Header: React.FC = () => {
   });
 
   useEffect(() => {
-    const handleScroll = () => {
-      const now = Date.now();
-      if (now - lastScrollTimeRef.current < 100) {
-        return;
-      }
-      lastScrollTimeRef.current = now;
-
-      const sections = document.querySelectorAll("section[id]");
-      const scrollPosition = window.scrollY + 200;
-
-      sections.forEach((section) => {
-        const el = section as HTMLElement;
-        const sectionTop = el.offsetTop;
-        const sectionHeight = el.offsetHeight;
-        const sectionId = el.getAttribute("id");
-
-        if (scrollPosition >= sectionTop && scrollPosition <= sectionTop + sectionHeight) {
-          setActiveSection(sectionId || "");
-        }
-      });
+    const syncActive = () => {
+      const hash = window.location.hash.replace("#", "");
+      if (hash) setActiveSection(hash);
+      else setActiveSection("home");
     };
-
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
+    syncActive();
+    window.addEventListener("hashchange", syncActive);
+    return () => window.removeEventListener("hashchange", syncActive);
   }, []);
 
   const handleNavClick = useCallback((sectionId: string) => {
     setActiveSection(sectionId);
     setIsMenuOpen(false);
-    const element = document.getElementById(sectionId);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth" });
+    if (sectionId === "home") {
+      if (window.location.hash) {
+        window.history.pushState(null, "", window.location.pathname + window.location.search);
+        window.dispatchEvent(new HashChangeEvent("hashchange"));
+      }
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      return;
     }
+    window.location.hash = sectionId;
   }, []);
 
   return (

From f8b6d95fcb97dcfa9808abf8734ea9daad2e06af Mon Sep 17 00:00:00 2001
From: anhvuFE <vuxuananh22@gmail.com>
Date: Sun, 3 May 2026 17:40:14 +0700
Subject: [PATCH 2/2] feat(footer): redesign as a terminal window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the old 3-column corporate layout (brand / quick-links /
contact-info) — the quick links and contact info are already
reachable via the header nav and the bento drawers, so they were
duplicate noise.

The new footer is a faux terminal:
- macOS-style title bar with red/yellow/amber dots and a
  "vuxuananh@portfolio: ~" title
- four "commands" (whoami, cat /status, ls ~/contact,
  echo $LOCATION) with their outputs in zsh-like colors
- contact links inline as clickable terminal output
- blinking cursor on the active prompt line
- monospace stack (Fira Code / JetBrains Mono / Menlo)
- below the window: two `// comment`-style credit lines
---
 src/components/footer/Footer.tsx | 493 +++++++++++--------------------
 1 file changed, 175 insertions(+), 318 deletions(-)

diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 7e89f87..57baee1 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -1,47 +1,27 @@
 import React from "react";
-import {
-  Box,
-  Container,
-  Typography,
-  Grid,
-  IconButton,
-  Link,
-  Divider,
-} from "@mui/material";
-import {
-  GitHub as GitHubIcon,
-  Facebook as FacebookIcon,
-  LinkedIn as LinkedInIcon,
-  Email as EmailIcon,
-  Phone as PhoneIcon,
-  LocationOn as LocationIcon,
-  ArrowUpward as ArrowUpIcon
-} from "@mui/icons-material";
+import { Box, Container, Typography, IconButton } from "@mui/material";
+import { ArrowUpward as ArrowUpIcon } from "@mui/icons-material";
 import MatrixRain from "../sakura/MatrixRain";
 import { keyframes } from "@emotion/react";
 
-interface QuickLink {
-  name: string;
-  href: string;
-}
-
-interface SocialLink {
-  name: string;
-  icon: React.ReactNode;
-  href: string;
-  color: string;
-}
-
-interface ContactInfo {
-  icon: React.ReactNode;
-  text: string;
-}
+const blink = keyframes`
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+`;
 
 const float = keyframes`
   0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
+  50% { transform: translateY(-8px); }
 `;
 
+const MONO = '"Fira Code", "JetBrains Mono", Menlo, Monaco, Consolas, "Courier New", monospace';
+
+interface Line {
+  prompt?: string;
+  command?: string;
+  output?: React.ReactNode;
+}
+
 const Footer: React.FC = () => {
   const scrollToTop = (): void => {
     window.scrollTo({ top: 0, behavior: "smooth" });
@@ -49,55 +29,45 @@ const Footer: React.FC = () => {
 
   const currentYear: number = 2025;
 
-  const quickLinks: QuickLink[] = [
-    { name: "About", href: "#about" },
-    { name: "Skills", href: "#skills" },
-    { name: "Services", href: "#services" },
-    { name: "Portfolio", href: "#portfolio" },
-    { name: "Contact", href: "#contact" },
-    { name: "Certificates", href: "#certificates" }
-  ];
-
-  const socialLinks: SocialLink[] = [
-    {
-      name: "GitHub",
-      icon: <GitHubIcon />,
-      href: "https://github.com/anhvuFE",
-      color: "#333"
-    },
-    {
-      name: "Facebook",
-      icon: <FacebookIcon />,
-      href: "https://www.facebook.com/xuananhvu2312/",
-      color: "#1877F2"
-    },
-    {
-      name: "LinkedIn",
-      icon: <LinkedInIcon />,
-      href: "https://www.linkedin.com/in/xu%C3%A2n-anh-v%C5%A9-515580367/",
-      color: "#0A66C2"
-    },
-    {
-      name: "Email",
-      icon: <EmailIcon />,
-      href: "mailto:vuxuananh2312@gmail.com",
-      color: "#0eaddf"
-    }
-  ];
-
-  const contactInfo: ContactInfo[] = [
+  const lines: Line[] = [
+    { command: "whoami" },
+    { output: <Box component="span" sx={{ color: "#e6edf3" }}>Vũ Xuân Anh — Full Stack Developer</Box> },
+    {},
+    { command: "cat /status" },
     {
-      icon: <PhoneIcon />,
-      text: "+84 982 168 318"
+      output: (
+        <Box component="span" sx={{ color: "#22c55e", display: "inline-flex", alignItems: "center", gap: 1 }}>
+          <Box
+            component="span"
+            sx={{
+              display: "inline-block",
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              background: "#22c55e",
+              boxShadow: "0 0 6px rgba(34, 197, 94, 0.8)"
+            }}
+          />
+          available for new opportunities
+        </Box>
+      )
     },
+    {},
+    { command: "ls ~/contact" },
     {
-      icon: <EmailIcon />,
-      text: "vuxuananh2312@gmail.com"
+      output: (
+        <Box component="span">
+          <Box component="a" href="https://github.com/anhvuFE" target="_blank" rel="noopener noreferrer" sx={linkSx}>github.com/anhvuFE</Box>
+          {"  "}
+          <Box component="a" href="https://www.linkedin.com/in/xu%C3%A2n-anh-v%C5%A9-515580367/" target="_blank" rel="noopener noreferrer" sx={linkSx}>linkedin.com/xu...</Box>
+          {"  "}
+          <Box component="a" href="mailto:vuxuananh22@gmail.com" sx={linkSx}>vuxuananh22@gmail.com</Box>
+        </Box>
+      )
     },
-    {
-      icon: <LocationIcon />,
-      text: "Ha Noi, Vietnam"
-    }
+    {},
+    { command: "echo $LOCATION" },
+    { output: <Box component="span" sx={{ color: "#e6edf3" }}>Hanoi, Vietnam · GMT+7</Box> }
   ];
 
   return (
@@ -105,281 +75,168 @@ const Footer: React.FC = () => {
       component="footer"
       sx={{
         position: "relative",
-        background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
-        pt: 8,
-        pb: 4,
-        overflow: "hidden"
+        background: "#0a0a0a",
+        borderTop: "1px solid rgba(14, 173, 223, 0.08)",
+        overflow: "hidden",
+        pt: { xs: 6, md: 8 },
+        pb: { xs: 4, md: 5 }
       }}
     >
       <MatrixRain />
 
-      {/* Scroll to Top Button */}
       <IconButton
         onClick={scrollToTop}
+        aria-label="Scroll to top"
         sx={{
           position: "fixed",
-          bottom: 80,
-          right: 30,
+          bottom: { xs: 20, md: 30 },
+          right: { xs: 20, md: 30 },
           background: "#0eaddf",
-          color: "white",
-          width: 56,
-          height: 56,
+          color: "#0a0a0a",
+          width: 48,
+          height: 48,
           boxShadow: "0 8px 24px rgba(14, 173, 223, 0.4)",
           animation: `${float} 3s ease-in-out infinite`,
           zIndex: 1000,
-          "&:hover": {
-            background: "#0c8db3",
-            transform: "scale(1.1)"
-          }
+          "&:hover": { background: "#3dc4ee", transform: "scale(1.08)" }
         }}
       >
         <ArrowUpIcon />
       </IconButton>
 
-      <Container maxWidth="lg">
-        {/* Main Footer Content */}
-        <Grid container spacing={4} sx={{ mb: 6 }}>
-          {/* Brand Section */}
-          <Grid size={{ xs: 12, md: 4 }} sx={{ textAlign: { xs: "center", md: "left" } }}>
-            <Typography
-              variant="h4"
-              sx={{
-                fontWeight: 700,
-                mb: 2,
-                color: "#0eaddf"
-              }}
-            >
-              Vũ Xuân Anh
-            </Typography>
-            <Typography
-              variant="h6"
-              sx={{
-                color: "rgba(255, 255, 255, 0.9)",
-                mb: 2,
-                fontWeight: 500
-              }}
-            >
-              Full Stack Developer
-            </Typography>
-            <Typography
-              variant="body2"
-              sx={{
-                color: "rgba(255, 255, 255, 0.7)",
-                lineHeight: 1.8,
-                mb: 3
-              }}
-            >
-              Passionate about creating innovative web solutions and delivering exceptional
-              user experiences. Specialized in modern web technologies and full-stack development.
-            </Typography>
-
-            {/* Social Links */}
-            <Box sx={{ display: "flex", gap: 1, justifyContent: { xs: "center", md: "flex-start" } }}>
-              {socialLinks.map((social: SocialLink) => (
-                <IconButton
-                  key={social.name}
-                  href={social.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  sx={{
-                    background: "rgba(255, 255, 255, 0.1)",
-                    color: "rgba(255, 255, 255, 0.8)",
-                    border: "1px solid rgba(255, 255, 255, 0.2)",
-                    "&:hover": {
-                      background: social.color,
-                      color: "white",
-                      transform: "translateY(-4px)",
-                      boxShadow: `0 8px 16px ${social.color}40`
-                    }
-                  }}
-                >
-                  {social.icon}
-                </IconButton>
-              ))}
+      <Container maxWidth="md" sx={{ position: "relative", zIndex: 1 }}>
+        {/* Terminal window */}
+        <Box
+          sx={{
+            background: "#0d1117",
+            borderRadius: 2.5,
+            border: "1px solid rgba(255, 255, 255, 0.08)",
+            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(14, 173, 223, 0.05)",
+            overflow: "hidden",
+            fontFamily: MONO
+          }}
+        >
+          {/* Title bar */}
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              px: 2,
+              py: 1.25,
+              background: "rgba(255, 255, 255, 0.02)",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.05)"
+            }}
+          >
+            <Box sx={{ display: "flex", gap: 0.75 }}>
+              <Box sx={dotSx("#ff5f56")} />
+              <Box sx={dotSx("#ffbd2e")} />
+              <Box sx={dotSx("#27c93f")} />
             </Box>
-          </Grid>
-
-          {/* Quick Links */}
-          <Grid size={{ xs: 12, sm: 6, md: 4 }} sx={{ textAlign: { xs: "center", sm: "left" } }}>
             <Typography
-              variant="h6"
               sx={{
-                fontWeight: 600,
-                mb: 3,
-                color: "white",
-                position: "relative",
-                display: "inline-block",
-                "&::after": {
-                  content: '""',
-                  position: "absolute",
-                  bottom: -8,
-                  left: { xs: "50%", sm: 0 },
-                  transform: { xs: "translateX(-50%)", sm: "none" },
-                  width: 50,
-                  height: 3,
-                  background: "#0eaddf"
-                }
+                flex: 1,
+                textAlign: "center",
+                color: "#6e7681",
+                fontSize: "0.75rem",
+                fontFamily: MONO,
+                letterSpacing: 0.3,
+                userSelect: "none"
               }}
             >
-              Quick Links
+              vuxuananh@portfolio: ~
             </Typography>
-            <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5, alignItems: { xs: "center", sm: "flex-start" } }}>
-              {quickLinks.map((link: QuickLink) => (
-                <Link
-                  key={link.name}
-                  href={link.href}
-                  underline="none"
-                  sx={{
-                    color: "rgba(255, 255, 255, 0.7)",
-                    fontSize: "0.95rem",
-                    position: "relative",
-                    transition: "all 0.3s ease",
-                    pl: 2,
-                    "&::before": {
-                      content: '"→"',
-                      position: "absolute",
-                      left: 0,
-                      opacity: 0,
-                      transform: "translateX(-10px)",
-                      transition: "all 0.3s ease"
-                    },
-                    "&:hover": {
-                      color: "#0eaddf",
-                      pl: 3,
-                      "&::before": {
-                        opacity: 1,
-                        transform: "translateX(0)"
-                      }
-                    }
-                  }}
-                >
-                  {link.name}
-                </Link>
-              ))}
-            </Box>
-          </Grid>
+            <Box sx={{ width: 52 }} />
+          </Box>
 
-          {/* Contact Info */}
-          <Grid size={{ xs: 12, sm: 6, md: 4 }} sx={{ textAlign: { xs: "center", sm: "left" } }}>
-            <Typography
-              variant="h6"
-              sx={{
-                fontWeight: 600,
-                mb: 3,
-                color: "white",
-                position: "relative",
-                display: "inline-block",
-                "&::after": {
-                  content: '""',
-                  position: "absolute",
-                  bottom: -8,
-                  left: { xs: "50%", sm: 0 },
-                  transform: { xs: "translateX(-50%)", sm: "none" },
-                  width: 50,
-                  height: 3,
-                  background: "#0eaddf"
-                }
-              }}
-            >
-              Contact Info
-            </Typography>
-            <Box sx={{ display: "flex", flexDirection: "column", gap: 2, alignItems: { xs: "center", sm: "flex-start" } }}>
-              {contactInfo.map((info: ContactInfo, index: number) => (
-                <Box
-                  key={index}
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 2,
-                    color: "rgba(255, 255, 255, 0.7)"
-                  }}
-                >
-                  <Box
-                    sx={{
-                      width: 40,
-                      height: 40,
-                      borderRadius: 2,
-                      background: "rgba(14, 173, 223, 0.15)",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      color: "#0eaddf"
-                    }}
-                  >
-                    {info.icon}
-                  </Box>
-                  <Typography variant="body2" sx={{ fontSize: "0.95rem" }}>
-                    {info.text}
-                  </Typography>
-                </Box>
-              ))}
+          {/* Body */}
+          <Box
+            sx={{
+              p: { xs: 2, md: 3 },
+              fontSize: { xs: "0.8rem", md: "0.875rem" },
+              lineHeight: 1.7,
+              fontFamily: MONO,
+              color: "#8b949e",
+              overflowX: "auto"
+            }}
+          >
+            {lines.map((line, i) => (
+              <Box key={i} sx={{ minHeight: "1.7em", whiteSpace: "nowrap" }}>
+                {line.command && (
+                  <>
+                    <Box component="span" sx={{ color: "#22c55e" }}>vu@portfolio</Box>
+                    <Box component="span" sx={{ color: "#6e7681" }}>:</Box>
+                    <Box component="span" sx={{ color: "#0eaddf" }}>~</Box>
+                    <Box component="span" sx={{ color: "#6e7681" }}>$ </Box>
+                    <Box component="span" sx={{ color: "#e6edf3" }}>{line.command}</Box>
+                  </>
+                )}
+                {line.output && <Box sx={{ pl: 0 }}>{line.output}</Box>}
+                {!line.command && !line.output && <>&nbsp;</>}
+              </Box>
+            ))}
+
+            {/* Active prompt with blinking cursor */}
+            <Box sx={{ minHeight: "1.7em", display: "flex", alignItems: "center" }}>
+              <Box component="span" sx={{ color: "#22c55e" }}>vu@portfolio</Box>
+              <Box component="span" sx={{ color: "#6e7681" }}>:</Box>
+              <Box component="span" sx={{ color: "#0eaddf" }}>~</Box>
+              <Box component="span" sx={{ color: "#6e7681" }}>$&nbsp;</Box>
+              <Box
+                component="span"
+                sx={{
+                  display: "inline-block",
+                  width: "0.55em",
+                  height: "1em",
+                  background: "#0eaddf",
+                  animation: `${blink} 1s step-end infinite`,
+                  verticalAlign: "text-bottom"
+                }}
+              />
             </Box>
-          </Grid>
-        </Grid>
-
-        <Divider sx={{ borderColor: "rgba(255, 255, 255, 0.1)", mb: 4 }} />
+          </Box>
+        </Box>
 
-        {/* Copyright */}
+        {/* Below-terminal credit */}
         <Box
           sx={{
+            mt: 3,
             display: "flex",
-            flexDirection: { xs: "column", md: "row" },
+            flexDirection: { xs: "column", sm: "row" },
             justifyContent: "space-between",
             alignItems: "center",
-            gap: 2
+            gap: 1,
+            color: "#6e7681",
+            fontFamily: MONO,
+            fontSize: "0.7rem"
           }}
         >
-          <Typography
-            variant="body2"
-            sx={{
-              color: "rgba(255, 255, 255, 0.6)",
-              textAlign: { xs: "center", md: "left" }
-            }}
-          >
-            © {currentYear} Vũ Xuân Anh. All rights reserved.
-          </Typography>
-
-          <Typography
-            variant="body2"
-            sx={{
-              color: "rgba(255, 255, 255, 0.6)",
-              textAlign: { xs: "center", md: "right" }
-            }}
-          >
-            Built with ❤️ using React & Material-UI
-          </Typography>
+          <Box component="span">{`// © ${currentYear} Vũ Xuân Anh`}</Box>
+          <Box component="span">{"// built with React, TypeScript & MUI"}</Box>
         </Box>
       </Container>
-
-      {/* Background Decorations */}
-      <Box
-        sx={{
-          position: "absolute",
-          top: -100,
-          right: -100,
-          width: 300,
-          height: 300,
-          borderRadius: "50%",
-          background: "#0eaddf",
-          opacity: 0.05,
-          filter: "blur(60px)"
-        }}
-      />
-      <Box
-        sx={{
-          position: "absolute",
-          bottom: -50,
-          left: -50,
-          width: 200,
-          height: 200,
-          borderRadius: "50%",
-          background: "#0eaddf",
-          opacity: 0.05,
-          filter: "blur(40px)"
-        }}
-      />
     </Box>
   );
 };
 
+const dotSx = (color: string) => ({
+  width: 12,
+  height: 12,
+  borderRadius: "50%",
+  background: color,
+  flexShrink: 0
+});
+
+const linkSx = {
+  color: "#0eaddf",
+  textDecoration: "underline",
+  textDecorationColor: "rgba(14, 173, 223, 0.3)",
+  textUnderlineOffset: 3,
+  transition: "all 0.2s ease",
+  "&:hover": {
+    color: "#3dc4ee",
+    textDecorationColor: "#3dc4ee"
+  }
+};
+
 export default Footer;