Responsive layout is already exsist

Author: Azmvv

index.html

@@ -34,7 +34,7 @@
     "@context": "https://schema.org",
     "@type": "Person",
     "name": "Murshud Azimov",
-    "url": "https://murshud.dev",
+    "url": "https://Azmvv.github.io",
     "jobTitle": "Pentester & Fullstack Web Developer",
     "alumniOf": {
       "@type": "CollegeOrUniversity",

style.css

@@ -260,13 +260,7 @@ body {
   transform: translateY(-3px);
 }
 
-.card-wide {
-  /* Handled by explicit grid placement */
-}
-
-.card-tall {
-  /* Handled by explicit grid placement */
-}
+/* card-wide and card-tall handled by explicit grid placement */
 
 .card-title {
   font-size: 0.8rem;
@@ -317,6 +311,24 @@ body {
   }
 }
 
+/* Tablet: middle-row wraps to 2 columns */
+@media (max-width: 1023px) and (min-width: 768px) {
+  .middle-row {
+    flex-wrap: wrap;
+  }
+  .middle-row > .bento-card {
+    flex: 1 1 calc(50% - var(--grid-gap) / 2);
+    min-width: calc(50% - var(--grid-gap) / 2);
+  }
+  .middle-col-right {
+    flex: 1 1 100%;
+    flex-direction: row;
+  }
+  .middle-col-right > .bento-card {
+    flex: 1;
+  }
+}
+
 /* ===== Hero Card ===== */
 #hero {
   background: var(--gradient-subtle), var(--card-bg);
@@ -869,6 +881,8 @@ body {
 }
 
 /* ===== Responsive ===== */
+
+/* Tablet — max 1023px */
 @media (max-width: 1023px) {
   .bento-grid {
     grid-template-columns: repeat(2, 1fr);
@@ -883,6 +897,10 @@ body {
   #skills { grid-column: 1 / 3; }
   #certificates { grid-column: 1 / 3; }
 
+  .middle-row {
+    grid-column: 1 / 3;
+  }
+
   .hero-name {
     font-size: 2rem;
   }
@@ -896,6 +914,7 @@ body {
   }
 }
 
+/* Mobile — max 767px */
 @media (max-width: 767px) {
   .bento-grid {
     grid-template-columns: 1fr;
@@ -906,6 +925,15 @@ body {
     grid-row: auto;
   }
 
+  .middle-row {
+    grid-column: auto;
+  }
+
+  /* Hamburger visible on mobile */
+  .hamburger {
+    display: flex;
+  }
+
   .nav-links {
     display: none;
   }
@@ -933,13 +961,91 @@ body {
     font-size: 1.75rem;
   }
 
+  .avatar-placeholder {
+    width: 90px;
+    height: 90px;
+  }
+
+  .avatar-placeholder svg {
+    width: 36px;
+    height: 36px;
+  }
+
+  .bento-card {
+    padding: 22px;
+    border-radius: 18px;
+  }
+
   .skills-container {
     grid-template-columns: 1fr;
   }
 
   .certificates-grid {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  .stats-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+
+  #about {
+    max-height: none;
+  }
+
+  .footer {
+    padding: 24px var(--grid-gap);
+  }
+}
+
+/* Small mobile — max 400px */
+@media (max-width: 400px) {
+  .hero-name {
+    font-size: 1.4rem;
+  }
+
+  .hero-title {
+    font-size: 1rem;
+  }
+
+  .hero-desc {
+    font-size: 0.85rem;
+  }
+
+  .navbar-inner {
+    padding: 10px 12px;
+  }
+
+  .main-content {
+    padding: 16px 12px 32px;
+  }
+
+  .bento-card {
+    padding: 18px;
+    border-radius: 16px;
+  }
+
+  .skill-pill {
+    font-size: 0.72rem;
+    padding: 4px 10px;
+  }
+
+  .certificates-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  .project-card {
+    padding: 14px;
+  }
+
+  .project-name {
+    font-size: 0.85rem;
+  }
+
+  .course-name-sm {
+    font-size: 0.85rem;
+  }
 }
 
 /* ===== Scrollbar ===== */