Small mobile style fixes

Author: 0xJeremy

README.md

@@ -1,4 +1,4 @@
-# Sandbox
+# Personal Website
 
 A modern multi-page React application built with TypeScript, Vite, and styled-components. Configured for static deployment to GitHub Pages.
 

src/components/hero/HeroContent.tsx

@@ -6,7 +6,8 @@
  *
  * Layout:
  * - Vertically centered within its container
- * - Left-aligned text with constrained max-width
+ * - Mobile: full-width with comfortable padding, compact side-by-side buttons
+ * - Desktop: left-aligned glassmorphism card with constrained max-width (45vw)
  * - Button group with primary and secondary actions
  *
  * Usage:
@@ -22,17 +23,22 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: var(--spacing-lg);
-  max-width: 45vw;
   background: rgba(10, 25, 47, 0.5);
   backdrop-filter: blur(10px);
-  border-radius: var(--radius-lg);
   border: 1px solid rgba(255, 255, 255, 0.05);
-  margin: auto var(--spacing-md);
 
+  /* Mobile: full-width with comfortable padding */
+  padding: var(--spacing-lg) var(--spacing-md);
+  margin: auto 0;
+  border-radius: 0;
+  max-width: 100%;
+
+  /* Desktop: constrained card with rounded corners */
   @media (min-width: 768px) {
     padding: var(--spacing-xl);
     margin: auto var(--spacing-2xl);
+    max-width: 45vw;
+    border-radius: var(--radius-lg);
   }
 `;
 
@@ -83,9 +89,24 @@ const Description = styled.p`
 
 const ButtonGroup = styled.div`
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-md);
+  gap: var(--spacing-sm);
   margin-top: var(--spacing-sm);
+
+  /* Mobile: compact side-by-side buttons */
+  & > button {
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-xs);
+  }
+
+  /* Desktop: restore default button sizing */
+  @media (min-width: 768px) {
+    gap: var(--spacing-md);
+
+    & > button {
+      padding: var(--spacing-md) var(--spacing-xl);
+      font-size: var(--font-size-sm);
+    }
+  }
 `;
 
 export interface HeroContentProps {

src/components/hero/HeroViewport.tsx

@@ -5,7 +5,7 @@
  * Designed for immersive hero sections with layered content.
  *
  * Structure:
- * - Outer container with viewport-inset margins on all sides
+ * - Outer container: full-bleed on mobile, viewport-inset margins on desktop (768px+)
  * - Optional media layer for background video/image/canvas
  * - Gradient overlay for text readability
  * - Content layer for children (above overlay)
@@ -26,15 +26,23 @@ const VIEWPORT_INSET = "var(--viewport-inset)";
 
 const ViewportContainer = styled.section`
   position: relative;
-  /* Calculate exact dimensions to center viewport with equal margins */
-  width: calc(100vw - ${VIEWPORT_INSET} * 2);
-  height: calc(100vh - ${VIEWPORT_INSET} * 2);
-  margin: ${VIEWPORT_INSET};
-  border-radius: var(--radius-2xl);
   overflow: hidden;
   background-color: var(--color-viewport);
-  box-shadow: var(--shadow-viewport);
   z-index: var(--z-viewport);
+
+  /* Mobile: full-bleed, no inset or border-radius */
+  width: 100%;
+  height: 100vh;
+  height: 100dvh; /* Dynamic viewport height accounts for mobile browser chrome */
+
+  /* Desktop: inset with rounded corners */
+  @media (min-width: 768px) {
+    width: calc(100vw - ${VIEWPORT_INSET} * 2);
+    height: calc(100vh - ${VIEWPORT_INSET} * 2);
+    margin: ${VIEWPORT_INSET};
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-viewport);
+  }
 `;
 
 const MediaLayer = styled.div`

src/components/hero/ScrollIndicator.tsx

@@ -45,6 +45,11 @@ const Container = styled.div`
   gap: var(--spacing-sm);
   z-index: var(--z-content);
   animation: ${fade} 2s ease-in-out infinite;
+
+  /* Ensure scroll indicator stays within safe area on mobile */
+  @supports (padding-bottom: env(safe-area-inset-bottom)) {
+    bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
+  }
 `;
 
 const Arrow = styled.div`

src/constants/navigation.ts

@@ -19,7 +19,7 @@ export const NAV_LINKS = [
   { label: "Contact", href: "/#contact", external: false },
   {
     label: "GitHub",
-    href: "https://github.com/0xJeremy/0xJeremy.github.io",
+    href: "https://github.com/0xJeremy",
     external: true,
   },
   { label: "Resume", href: "/resume.pdf", external: true },