feat: render responsive low-poly hero landscape

src/components/HeroSection.module.css

@@ -26,12 +26,9 @@
   background: transparent;
   color: var(--color-blue-700);
   cursor: pointer;
-  transition: color 0.2s ease, transform 0.2s ease;
-}
-
-.iconButton:hover {
-  color: var(--color-blue-500);
-  transform: translateY(-1px);
+  transition:
+    color var(--motion-duration-fast) ease,
+    transform var(--motion-duration-fast) var(--motion-ease-out);
 }
 
 .iconButton:focus-visible {
@@ -44,10 +41,6 @@
   color: var(--text-primary);
 }
 
-[data-theme="dark"] .iconButton:hover {
-  color: var(--accent-default);
-}
-
 .controlIcon,
 .themeIcon {
   color: currentColor;
@@ -202,11 +195,7 @@
   align-items: center;
   gap: 8px;
   color: inherit;
-  transition: opacity 0.2s ease;
-}
-
-.contactItem:hover {
-  opacity: 0.75;
+  transition: opacity var(--motion-duration-fast) ease;
 }
 
 .contactItem:focus-visible {
@@ -230,3 +219,121 @@
   background: var(--color-blue-500);
   opacity: 0.7;
 }
+
+@media (max-width: 1024px) {
+  .topBar {
+    padding: 48px var(--layout-page-gutter) 0;
+  }
+
+  .heroContent {
+    padding: 72px var(--layout-page-gutter) 0;
+  }
+
+  .heroTitle {
+    font-size: 54px;
+    line-height: 64px;
+  }
+
+  .heroButton {
+    width: 156px;
+  }
+}
+
+@media (max-width: 640px) {
+  .heroContentWrapper {
+    min-height: 760px;
+    height: auto;
+  }
+
+  .topBar {
+    padding-top: 24px;
+  }
+
+  .iconButton {
+    width: 40px;
+    height: 40px;
+  }
+
+  .heroContent {
+    min-height: 760px;
+    padding: 82px var(--layout-page-gutter) 48px;
+  }
+
+  .avatarWrapper {
+    margin-bottom: 20px;
+  }
+
+  .avatarRingOuter {
+    padding: 4px;
+    border-width: 2px;
+  }
+
+  .avatarContainer {
+    width: 148px;
+    height: 148px;
+  }
+
+  .heroTitle {
+    max-width: 300px;
+    margin-bottom: 10px;
+    font-size: 40px;
+    line-height: 48px;
+  }
+
+  .heroSubtitle {
+    max-width: 280px;
+    margin-bottom: 28px;
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .actionButtons {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    width: 100%;
+    max-width: 360px;
+    gap: 8px;
+    margin-bottom: 28px;
+  }
+
+  .heroButton {
+    width: auto;
+    min-width: 0;
+    height: 48px;
+    padding: 0 12px;
+    border-width: 2px;
+    font-size: 14px;
+  }
+
+  .contactBar {
+    flex-direction: column;
+    gap: 8px;
+    max-width: 100%;
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .contactItem {
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+
+  .contactDivider {
+    display: none;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .iconButton:hover {
+    color: var(--color-blue-500);
+    transform: translateY(-1px);
+  }
+
+  .contactItem:hover {
+    opacity: 0.75;
+  }
+
+  [data-theme="dark"] .iconButton:hover {
+    color: var(--accent-default);
+  }
+}