feat(ui): add ResidentHub project

src/components/Projects/Projects.tsx

@@ -86,6 +86,52 @@ const PROJECTS_DATA: Project[] = [
         <rect x="165" y="113" width="40" height="5" rx="2" fill="#475569" />
       </svg>
     )
+  },
+  {
+    id: "residenthub",
+    title: "ResidentHub - Apartment Resident Management System",
+    description: "A comprehensive apartment resident management system with role-based access control (residents, administrators, staff, accountants), featuring apartment, resident, contract, service bill, rent invoice management and service price configuration.",
+    category: "frontend",
+    tags: ["Next.js", "React", "TypeScript", "Tailwind CSS", "Axios", "SweetAlert2", "react-hot-toast", "Lucide React"],
+    features: [
+      "Authentication with username/password and Google OAuth",
+      "Role-based access control (ROLE_USER, ROLE_ADMIN, ROLE_STAFF, ROLE_ACCOUNTANT)",
+      "Resident dashboard: view service rates, bills, rent invoices, notifications",
+      "Admin dashboard & management: apartments, residents, contracts (full CRUD + search, filter, pagination)",
+      "Service bill management: create, approve, filter by status (UNPAID/PAID/LATE)",
+      "Rent invoice management: list, detail, approval workflow",
+      "Service price configuration: view current prices, schedule price changes with effective dates",
+      "4-step forgot password flow: Email > OTP > New Password > Success",
+      "Token management: accessToken (localstorage) + refreshToken (httponly cookie) with auto-refresh",
+      "Route protection via Next.js Middleware, Axios interceptor for token refresh",
+      "Responsive design: desktop sidebar + mobile bottom tab navigation",
+      "Debounced search and consistent pagination across all list views",
+      "BFF (Backend For Frontend) architecture via Next.js API routes"
+    ],
+    demoUrl: "",
+    githubUrl: "https://github.com/liambui11/apt_web_frontend.git",
+    svgHeader: (
+      <svg viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="400" height="200" fill="#0b0f19" />
+        <rect x="25" y="25" width="350" height="150" rx="6" fill="#111827" stroke="#1f2937" />
+        <line x1="25" y1="55" x2="375" y2="55" stroke="#1f2937" />
+        <text x="45" y="43" fill="#f9fafb" fontFamily="sans-serif" fontSize="12" fontWeight="bold">ResidentHub Dashboard</text>
+        
+        <rect x="45" y="75" width="90" height="45" rx="4" fill="#0b0f19" stroke="#1f2937" />
+        <text x="55" y="93" fill="#94a3b8" fontFamily="sans-serif" fontSize="8">TOTAL RESIDENTS</text>
+        <text x="55" y="110" fill="#3b82f6" fontFamily="sans-serif" fontSize="14" fontWeight="bold">1,248</text>
+
+        <rect x="150" y="75" width="90" height="45" rx="4" fill="#0b0f19" stroke="#1f2937" />
+        <text x="160" y="93" fill="#94a3b8" fontFamily="sans-serif" fontSize="8">PAID BILLS</text>
+        <text x="160" y="110" fill="#3b82f6" fontFamily="sans-serif" fontSize="14" fontWeight="bold">94.2%</text>
+
+        <rect x="255" y="75" width="90" height="45" rx="4" fill="#0b0f19" stroke="#1f2937" />
+        <text x="265" y="93" fill="#94a3b8" fontFamily="sans-serif" fontSize="8">ACTIVE CONTRACTS</text>
+        <text x="265" y="110" fill="#8b5cf6" fontFamily="sans-serif" fontSize="14" fontWeight="bold">342</text>
+        
+        <text x="45" y="150" fill="#94a3b8" fontFamily="monospace" fontSize="8">Latest Bill: Invoice #2026-004 generated - Pending Approval</text>
+      </svg>
+    )
   }
 ];
 
@@ -124,7 +170,7 @@ export default function Projects() {
       </div>
 
       {/* Projects Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-[960px] mx-auto">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-[1200px] mx-auto">
         {filteredProjects.map((project) => (
           <div
             key={project.id}