Mobile friendly refactor - #19
Merged
AzertoxHDW merged 21 commits intoNov 20, 2025
Merged
Conversation
Mobile (< 768px): - Vertical stack layout with scrollable cards - Full-screen terminal overlay instead of draggable window - Simplified header layout with stacked icon and title - Adjusted spacing and padding for smaller screens - Cards span full width minus padding Desktop (>= 768px): - Preserve existing draggable card functionality - Keep terminal as draggable window - Maintain current positioning and z-index management - All existing desktop features unchanged Responsive improvements: - Terminal toggle button repositioned for mobile (top-4 right-4) - Header adapts from flex-col on mobile to flex-row on desktop - Footer text size and padding adjust for screen size - Breakpoint detection with resize listener - Conditional rendering based on isMobile state
Mobile changes (< 768px): - Add hamburger menu button in top-left corner - Hide desktop navbar completely on mobile - Replace terminal toggle button with hamburger menu - Mobile menu includes all navigation items - Terminal button appears in menu only on home page Desktop (>= 768px): - Keep existing navbar in header - Keep terminal toggle button in top-right - No hamburger menu visible New mobile menu features: - Full-screen overlay with backdrop blur - Large touch-friendly navigation buttons with icons - Active page highlighting - Closes automatically on navigation - Terminal integration via shared store - Press Escape or click X to close Technical implementation: - Created mobileMenuStore for terminal trigger communication - Mobile menu state managed in layout - Conditional terminal button based on current route - Proper z-index layering (hamburger: 160, menu: 150) - Responsive button styling and transitions
Mobile hamburger button fixes: - Add pt-16 (64px) top padding to main content on mobile - Prevents hamburger from overlapping page content - Desktop retains original pt-8 padding Mobile terminal close improvements: - Add large, prominent close button (48x48px) in top-right - Red destructive color scheme for clear visual indication - Easy to tap on touch screens - Positioned above terminal window (z-10) - Complements existing small close dot in titlebar The mobile terminal now has two ways to close: 1. Large red X button in top-right (new, mobile-optimized) 2. Small red dot in terminal titlebar (original)
Mobile terminal close button improvements: - Moved close button from top-right to bottom center - Made it full-width (max-w-xs) for better visibility - Added text label "Fermer le terminal" alongside icon - Larger touch target with clear destructive styling - Better visual hierarchy and easier to reach Mobile header enhancements: - Added Terminal icon logo beside hamburger menu - Added "Az'" branding text matching page title - Logo and text in rounded pill with backdrop blur - Consistent styling with desktop navbar - Creates cohesive mobile header experience Layout changes: - Terminal overlay now uses flex layout - Terminal window takes flex-1 space - Close button anchored at bottom with proper spacing
- Replace Terminal icon with actual favicon.png logo - Change "Az'" text color to text-foreground (white/adaptive) - Maintains consistent branding with site favicon - Better visual hierarchy in mobile header
Mobile header improvements: - Add scroll to top button on the right side - Aligned with hamburger menu button (both at top-4) - Logo section now uses flex-1 to fill space between buttons - Smooth scroll animation to top of page - ArrowUp icon for clear visual indication - Consistent styling with hamburger button Layout: [Hamburger] [Logo + Az'] [Scroll to Top]
Scroll to top button improvements: - Only appears after scrolling 300px down the page - Smooth fade-in animation when appearing - Automatic hide when at top of page - Passive scroll listener for better performance Dynamic island fix: - Remove logo/text pill from mobile header - Prevents interference with iPhone dynamic island and notches - Cleaner mobile header with just hamburger button - Scroll button appears on right when needed Mobile header layout: - At top: [Hamburger] (left only) - When scrolled: [Hamburger] ... [Scroll to Top] (both sides) - Avoids center area completely for device features
Breakpoint changes: - Change from md (768px) to lg (1024px) for desktop layout - Tablets now use mobile-style vertical card layout - Prevents cards from going off-screen on iPad and similar devices Affected areas: - Terminal toggle button: hidden until lg breakpoint - Hamburger menu: visible on tablets (lg:hidden) - Scroll to top button: visible on tablets (lg:hidden) - Desktop navigation: only shows on lg+ screens - Mobile menu overlay: available on tablets - Main content padding: pt-16 on mobile/tablet, pt-8 on desktop - isMobile check: now includes tablets (< 1024px) Device coverage: - Mobile (< 768px): Vertical layout - Tablet (768px - 1023px): Vertical layout - Desktop (>= 1024px): Draggable cards layout
- Increase bottom padding from pb-8 (32px) to pb-24 (96px) - Ensures adequate clearance for footer in landscape orientation - Prevents content from being cut off or overlapped by footer - Improves tablet landscape experience
- Increase from pb-24 (96px) to pb-32 (128px) - Provides more clearance for footer in landscape orientation - Prevents footer overlap with last card on tablets
…g min-h-screen - Increased mobile content bottom padding from pb-32 to pb-48 (192px) - Removed min-h-screen from page wrapper to prevent conflicts with layout's flex-grow - Page height now determined by content, allowing proper footer positioning
- Changed from padding-bottom to margin-bottom (mb-32) on mobile content - Re-added min-h-screen to page wrapper for proper height calculation - Added mt-auto to footer for flexbox sticky footer behavior - This ensures footer stays at bottom without overlapping content in landscape
- Reduced card width from 450px to 380px and gap from 40px to 30px - Scaled down header: text-3xl→text-2xl (md:4xl→3xl, lg:5xl→4xl) - Reduced header icons from h-8→h-6 and h-10→h-8 - Card titles: text-xl → text-lg - Card icons: h-7→h-5 (w-7→w-5) - Card text: text-sm→text-xs for descriptions - Button text: text-sm with py-1.5 - Arrow icons: h-4→h-3 (w-4→w-3) - Icon wrapper padding: p-3→p-2, rounded-lg→rounded-md - Terminal toggle button: w-12→w-10 (h-12→h-10), icon h-5→h-4 - Desktop terminal width: 700px → 600px - Terminal height: 220px → 180px - Terminal text: text-sm → text-xs - Terminal titlebar: px-3→px-2, py-2→py-1.5 - Terminal controls: gap-2→gap-1.5, w-3→w-2.5 (h-3→h-2.5) - Terminal title: text-sm → text-xs - Footer text: text-xs→text-[10px], md:text-sm→md:text-xs - Footer padding: py-4→py-3, md:py-8→md:py-6 - CardHeader padding: pb-3 - CardContent padding: py-2 - Button container padding: p-4→p-3
Projects page: - Increased max-width from max-w-4xl to max-w-7xl for wider cards - Scaled down header: text-4xl/5xl/6xl → text-3xl/4xl/5xl - Header icon: w-10/h-10 md:w-12/h-12 → w-8/h-8 md:w-10/h-10 - Subtitle: text-lg/xl → text-sm/base - Card title: text-xl/2xl → text-lg/xl - Card description: text-base → text-sm - Badge: added text-xs class - Button icons: h-4/w-4 → h-3/w-3, mr-2 → mr-1.5 - Button text: added text-xs class - Reduced spacing: mb-12/16 → mb-8/12, mt-4 → mt-3 Home page terminal: - Changed from fixed width (600px) to responsive width (w-[90vw] max-w-4xl) - Terminal now uses 90% of viewport width with max-width of 4xl - Updated initial position to use percentage-based calculation (5% margin) - Terminal dynamically adapts to screen size for better space utilization
Terminal changes: - Increased terminal content height from 180px to 260px - Increased terminal text size from text-xs to text-sm - Increased terminal padding from p-3 to p-4 - More spacious and readable terminal experience Footer changes: - Reduced mobile bottom margin from mb-32 to mb-16 - Reduced footer padding from py-3/py-6 to py-2/py-4 - Brings footer closer to content for better layout Scrollbar changes: - Added scrollbar hiding for html and body elements - Maintains scroll functionality while hiding visual scrollbar - Fixes navbar positioning issues caused by scrollbar - Cross-browser support: Firefox (scrollbar-width: none), Chrome/Safari/Opera (::-webkit-scrollbar), IE/Edge (-ms-overflow-style: none)
- Card width: 380px → 450px - Card gap: 30px → 40px - Larger cards provide better readability and presence - More balanced layout with the larger terminal window
- Mobile content bottom margin: mb-16 → mb-6 (64px → 24px, 62.5% reduction) - Desktop footer padding: md:py-4 → md:py-3 (16px → 12px) - Footer is now much closer to content - Reduces unnecessary vertical scrolling
The footer was sticking to the viewport bottom due to mt-auto in the flex container. Removed this class to allow the footer to naturally follow the content, reducing unnecessary scrolling.
Removed flex-1 from both mobile and desktop content containers which was forcing them to expand and push the footer down. Replaced viewport-based min-height with a fixed 750px height for the desktop card container that accommodates the card layout without creating excessive space.
Added flex-1 back to both mobile and desktop content containers to make them expand and fill available vertical space. The min-height of 750px on desktop ensures cards have sufficient room while flex-grow fills extra space when viewport is taller. Changed mobile margin to padding to prevent flex-grow spacing issues.
Removed flex-1 from both mobile and desktop content containers to prevent excessive expansion. Changed desktop container from min-height to fixed height of 750px, which provides sufficient space for card layout (cards at y:50 and y:400) without pushing footer too far down. Outer container still has min-h-screen to ensure page fills viewport.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.