Feature/photo collage mobile support #12
Open
Conversation
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
…iles, and update animation logic to use config settings for delays.
…ng of the passport
Updated CardShuffleLogic to use consistent fly directions for mobile swipe gestures: - Forward shuffle now always flies right - Backward shuffle now always flies left This ensures predictable animations on small screens where navigation arrows are hidden.
Implements conditional fly direction logic that adapts to screen size: - Mobile (< 600px, buttons hidden): Consistent fly directions (right for forward, left for backward) - Desktop (>= 600px, buttons visible): Position-based alternating fly directions Changes: - Added window resize listener to track button visibility state - Updated shuffle functions to accept useConsistentFlyDirection parameter - Pass button visibility state through component tree to shuffle logic - Maintains smooth swipe gestures on mobile while preserving desktop animation variety
hutizaki
force-pushed
the
feature/photo-collage-mobile-support
branch
from
83bf9a7 to
98a2afa
Compare
Key improvements: - Renamed cardShuffleLogic.ts to CardShuffleLogic.ts for consistency - Swapped mobile shuffle directions for intuitive card pushing effect * Swipe left → backward shuffle → card flies left * Swipe right → forward shuffle → card flies right - Fixed backward shuffle timing to match forward (300ms → 400ms delay) * Z-index now updates at 50% completion instead of 25% * Creates smoother, more bouncy animation matching forward shuffle - Implemented responsive fly distance based on screen size * Desktop (≥600px): 50vw fly distance * Mobile (<600px): 75vw fly distance for more dramatic effect * Uses areButtonsVisible state for dynamic config selection All changes maintain desktop behavior while significantly improving mobile UX.
Implemented granular responsive breakpoints for optimal animation distances and tighter postcard styling on smaller screens. Responsive fly distance system: - Added 5 breakpoint tiers with smooth scaling * < 600px: 75vw (mobile, no nav buttons) * 600-767px: 65vw (small tablet, with nav buttons) * 768-1023px: 55vw (tablet, with nav buttons) * 1024-1649px: 45vw (desktop, with nav buttons) * >= 1650px: 40vw (large desktop, with nav buttons) - Implemented screenSizeTier state tracking with resize listener - All config values preloaded, dynamically selected based on viewport Responsive postcard styling: - Mobile border: px-4 (16px horizontal padding) - Desktop border: px-6 (24px horizontal padding) - Mobile top padding: pt-1 (4px) - Desktop top padding: pt-2 (8px) - Mobile bottom padding: pb-[0.15rem] (2.4px) - Desktop bottom padding: pb-[0.25rem] (4px) - Creates more compact frame on mobile while preserving design on desktop All changes maintain smooth animations and provide better UX across all device sizes.
Collaborator
|
can you remove .gitignore the .DS_Store files and resubmit |
…ne 99 from "login" to "register"
…cator DESKTOP ONLY - Mobile implementation pending Added sophisticated header navigation system with real-time animated triangle indicator that tracks active/hovered sections with smooth spring physics. Header Navigation Features: - Animated triangle indicator with conditional spring behavior * Instant follow during layout changes (no double-spring) * Smooth spring animation (stiffness: 300, damping: 20, mass: 0.4) for navigation - Real-time position tracking via requestAnimationFrame for all nav links - Debounced hover (100ms) to prevent triangle jumping when crossing diamond separators - Layout animations using Framer Motion's LayoutGroup for smooth transitions - Nav links jump up 10% and scale on hover/active state Header Design & Layout: - Textured background (Patch.png) with rope border - scoped to nav section only - Full-width header container for logo positioning - Centered responsive background (50% width, 650px-720px range) - Rounded corners with overflow hidden for polished appearance - Text selection disabled, custom cursors for UX polish REGISTER Link Behavior: - Hidden by default at page top (< 100px scroll) - Fades in with slide-from-right animation after scrolling - Auto-hides when "Register Now" CTA button is visible in viewport - Links to register.hacklahoma.org (opens in new tab) - Supports hover tracking and triangle indicator Register Now Buttons: - Converted to semantic <a> tags linking to register.hacklahoma.org - Mobile button (< 600px): Below title - Desktop button (>= 600px): Bottom right corner - Both open registration in new tab Technical Implementation: - useMotionValue + useSpring for triangle physics - Conditional spring config based on movement reason (layout vs navigation) - Visibility-based scroll detection with 40% threshold for sections - AnimatePresence with mode="popLayout" for simultaneous animations - Section tracking with dynamic getBoundingClientRect calculations Assets Added: - Header texture (Patch.png) - Rope border pattern (HeaderRope.png) Files Modified: - Header.tsx: Complete redesign with animation system - LandingView.tsx: Added IDs to Register buttons, converted to links Next Steps: - Mobile header implementation - Mobile menu styling and animations
…onsiveness MOBILE NAVBAR ENHANCEMENTS: - Repositioned header to top-0 on mobile devices for better screen utilization - Removed modal backdrop to prevent accidental dismissals - Moved BACK button to right side with increased padding for better tap target - Added new MobileHeader.png and RegisterButton.png assets Mobile Menu Styling: - Applied 80% saturation filter to background for softer appearance - Added subtle blur overlays on left (10px) and bottom (8px) edges - Implemented custom dashed dividers between menu items with 0.4px blur - Added circular bullet points (#947b53) to navigation items - Made dividers 95% width, right-aligned with #9e8f7b color - Set menu items to 90% width container for improved visual balance Mobile Menu Layout: - Restructured navigation with full-width, non-rounded menu items - Moved REGISTER button to bottom-center position - Replaced text-based register link with image button - Container positioned at top-4 right-4 with custom sizing (260px) Mobile Menu Animations: - Converted to Framer Motion with AnimatePresence for smooth transitions - Added slide-in animation from right (300px) with scale effect (0.9 to 1) - Implemented 0.6s duration with custom easing curve [0.22, 1, 0.36, 1] - Added dramatic tap animations to all interactive elements: * BACK button: 85% scale with 70% opacity * Nav links: 92% scale with 5px right shift, transform origin from left * REGISTER button: 88% scale with -2deg rotation - Spring transitions with 400 stiffness and 17 damping for responsive feedback DESKTOP HEADER IMPROVEMENTS: - Implemented responsive breakpoint system using CSS media queries: * md (768px+): 70% width, 550px min, 600px max * lg (1024px+): 750px min/max * xl (1280px+): 800px max - Added smooth 300ms transitions for size changes - Responsive text sizing: md:text-lg → lg:text-xl - Responsive padding: px-3 → md:px-4 → lg:px-6 - Increased triangle hover delay from 100ms to 300ms for smoother UX - All responsive behavior handled via CSS for optimal performance TECHNICAL IMPROVEMENTS: - Zero JavaScript overhead for responsive sizing (pure CSS approach) - Maintained existing triangle tracking logic without performance impact - Preserved all accessibility features and ARIA labels - Ensured smooth animations across all devices This commit completes the mobile navbar redesign with modern animations, improved touch targets, and a polished visual design while enhancing desktop responsiveness across all screen sizes.
…ed styling MOBILE NAVBAR IMPROVEMENTS: - Removed hamburger menu X animation - menu now fades out when opened - Hamburger menu returns when BACK button is clicked - Updated mobile menu positioning and spacing adjustments - Centered all navigation text and removed bullet points - Added grayscale filter to register button image (50% saturation) - Adjusted nav container padding for better layout Mobile Menu Dividers: - Added decorative line SVG dividers between menu items - Implemented pencil-mark effect with gradient fade on both ends - Rotated middle line 180 degrees for visual variation - Lines stretch full width with 2px height using preserveAspectRatio="none" DESKTOP HEADER ENHANCEMENTS: - Replaced diamond (◆) symbols with custom tree SVG icons - Added basicTree.svg with proper viewBox for complete tree display - Tree icons sized at h-5 with auto width to preserve aspect ratio - Trees use same color (#3D472C) as navigation text - Enhanced responsive sizing at desktop breakpoints NEW ASSETS: - basicTree.svg: Custom tree icon for navigation separators - line.svg: Hand-drawn style line for mobile menu dividers - Updated MobileHeader.png with brightness filter (1.01) - Updated RegisterButton.png styling TECHNICAL UPDATES: - Enhanced SVG type definitions to support React component imports - Added support for ReactComponent named exports in SVG modules - Applied CSS mask gradients for fade effects on dividers - Optimized mobile menu layout with centered content This commit refines the mobile navigation experience with decorative elements and improves visual consistency across desktop and mobile interfaces.
On mobile, the register button on landing view was positioned on the left side, making it hard for right-hand thumb to reach over. Moved to the center for easy viewing and reaching from both sides. Changes: - Centered register button container with flex justify-center - Made button span full viewport width for proper centering - Increased button width from px-6 to px-20 for larger tap target - Changed initial state to solid background (bg-[#575f49]) for prominence - Added Framer Motion animations for interactive feedback: * whileHover: scales to 105% * whileTap: scales to 95% * Spring transition for smooth, responsive feel This improves mobile UX by placing the most important CTA in an ergonomic position accessible from both left and right hand thumb zones.
Collaborator
Author
Colors aren't exactly matched but everything works. I can color match them tomorrow. |
Added MLH Code of Conduct hyperlink at the bottom of the landing page linking to the official MLH policies repository. This ensures compliance with MLH requirements for member events. Link: https://github.com/MLH/mlh-policies/blob/main/code-of-conduct.md
…t' into integration
…t' into deployment
Hotfix for memory leaks when camera is on state. Hotfix for type safety.
added 7 commits
January 19, 2026 10:13
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Mobile users can now use swiping on the photo collage for shuffling forward and backwards. Also added margins for better spacing on the deck for different breakpoints.