Evandro Fonseca Junior
08dd046887
- Introduced DrawLine component for drawing animations. - Added LazyRevealImage component for lazy loading images with reveal animations. - Implemented TextDiffuseReveal for animated text reveals with staggered effects. - Created TopProgressBar for a dynamic loading indicator. - Added PointCloud mock for testing animations. - Developed useReducedMotion hook to handle user preferences for reduced motion. - Centralized animation configurations in config.ts for easier management. - Defined animation variants in variants.ts for consistent animation effects. - Established AnimationProvider to supply global animation settings. - Created tests for AnimationProvider and useReducedMotion hook. - Added SVG assets for branding and UI elements. - Documented frontend review plan and hero circuit board animation plan.
128 lines
6.1 KiB
Markdown
128 lines
6.1 KiB
Markdown
# Implementation Plan: Remove Preloader and Adjust Hero
|
|
|
|
## Overview
|
|
|
|
This implementation removes the Preloader component to provide immediate content access and adjusts the Hero section for improved readability and visual balance. The changes maintain all existing animation behavior, timing, and responsive adaptations while optimizing text sizes and logo positioning across all breakpoints.
|
|
|
|
## Tasks
|
|
|
|
- [ ] 1. Remove Preloader component and its usage
|
|
- [x] 1.1 Remove Preloader import from app/page.tsx
|
|
- Delete the import statement for Preloader component
|
|
- _Requirements: 1.5_
|
|
|
|
- [x] 1.2 Remove Preloader rendering from page component
|
|
- Remove `<Preloader />` JSX element from the component tree
|
|
- Verify Hero component renders immediately on page load
|
|
- _Requirements: 1.1, 1.2_
|
|
|
|
- [x] 1.3 Delete Preloader component file
|
|
- Delete app/components/Preloader.tsx from the codebase
|
|
- _Requirements: 1.4_
|
|
|
|
- [x] 1.4 Verify body overflow is not manipulated
|
|
- Confirm document.body.style.overflow is not set to "hidden" on initialization
|
|
- _Requirements: 1.3_
|
|
|
|
- [ ] 2. Adjust Hero text sizing across all breakpoints
|
|
- [x] 2.1 Update Hero heading className with reduced font sizes
|
|
- Change text size classes from current values to: `text-[10vw] sm:text-[4rem] md:text-[4.5rem] lg:text-[5rem] xl:text-[5.5rem]`
|
|
- Maintain existing `leading-[0.9]` and `tracking-[-0.01em]` properties
|
|
- Apply changes to the h1 element containing "evandro.dev.br"
|
|
- _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7_
|
|
|
|
- [x] 2.2 Write unit tests for Hero text sizing
|
|
- Test that all responsive font size classes are present in className
|
|
- Test that line-height and tracking properties are preserved
|
|
- Verify text renders at each breakpoint with correct classes
|
|
- _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7_
|
|
|
|
- [x] 2.3 Write property test for responsive text sizing
|
|
- **Property 4: Responsive Text Sizing**
|
|
- **Validates: Requirements 2.2, 2.3, 2.4, 2.5, 2.6**
|
|
- Test that appropriate font size classes are applied for any viewport width (320px-1920px)
|
|
- Verify all breakpoint classes are present in the className string
|
|
|
|
- [ ] 3. Adjust Hero container height for proportional spacing
|
|
- [x] 3.1 Update container min-height classes
|
|
- Change min-height classes from current values to: `min-h-[35vw] sm:min-h-[200px] md:min-h-[240px] lg:min-h-[280px]`
|
|
- Apply to the container div with className containing "relative mb-sp-6 flex"
|
|
- _Requirements: 5.2, 5.4_
|
|
|
|
- [ ] 4. Improve Logo positioning and sizing
|
|
- [x] 4.1 Update Logo component className with reduced dimensions
|
|
- Change width from `w-[80%]` to `w-[65%]`
|
|
- Change max-width from `max-w-[320px]` to `max-w-[280px]`
|
|
- Preserve all other properties: `h-auto`, drop-shadow, variant, size, theme
|
|
- _Requirements: 3.2, 3.3, 3.6_
|
|
|
|
- [x] 4.2 Write unit tests for Logo positioning
|
|
- Test that Logo width class is `w-[65%]`
|
|
- Test that Logo max-width class is `max-w-[280px]`
|
|
- Verify Logo maintains horizontal centering
|
|
- Verify drop-shadow and other visual properties are preserved
|
|
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6_
|
|
|
|
- [ ] 5. Checkpoint - Verify visual changes and run tests
|
|
- Ensure all unit tests pass
|
|
- Manually verify text sizes look appropriate at all breakpoints
|
|
- Confirm Logo appears balanced during animation phase
|
|
- Ask the user if questions arise
|
|
|
|
- [ ] 6. Verify animation timing preservation
|
|
- [x] 6.1 Confirm animation phase transitions remain unchanged
|
|
- Verify typing → idle → glitch → logo sequence works correctly
|
|
- Check that all timing constants remain at original values
|
|
- Test that animation loops properly after logo phase
|
|
- _Requirements: 4.1, 4.2, 4.5_
|
|
|
|
- [x] 6.2 Write property test for animation phase sequence
|
|
- **Property 1: Animation Phase Sequence Preservation**
|
|
- **Validates: Requirements 4.1, 4.2**
|
|
- Test that phases transition in correct order across multiple iterations
|
|
- Verify each phase completes before the next begins
|
|
|
|
- [x] 6.3 Verify reduced motion preferences are respected
|
|
- Test that reduced motion removes blur and scale effects
|
|
- Confirm opacity-based transitions still work with reduced motion
|
|
- _Requirements: 4.3, 4.4_
|
|
|
|
- [x] 6.4 Write property test for reduced motion adaptation
|
|
- **Property 2: Reduced Motion Adaptation**
|
|
- **Validates: Requirements 4.3, 4.4**
|
|
- Test that blur and scale effects are excluded when reduced motion is enabled
|
|
- Verify opacity transitions remain functional
|
|
|
|
- [ ] 7. Verify responsive behavior preservation
|
|
- [x] 7.1 Test character stagger timing across viewports
|
|
- Verify mobile viewports (< 768px) use 0.015s stagger
|
|
- Verify desktop viewports (≥ 768px) use 0.03s stagger
|
|
- _Requirements: 5.3_
|
|
|
|
- [x] 7.2 Write property test for responsive character stagger
|
|
- **Property 3: Responsive Character Stagger Timing**
|
|
- **Validates: Requirements 5.3**
|
|
- Test that correct stagger timing is applied for any viewport width
|
|
- Verify media query listener updates stagger on viewport changes
|
|
|
|
- [x] 7.3 Verify spacing and interactive elements
|
|
- Test that spacing (mb-sp-6, padding) is preserved
|
|
- Confirm buttons and social links remain accessible at all breakpoints
|
|
- _Requirements: 5.4, 5.5_
|
|
|
|
- [ ] 8. Final checkpoint - Complete verification
|
|
- Run all unit tests and property tests
|
|
- Manually test at all breakpoints (mobile, sm, md, lg, xl)
|
|
- Verify no console errors or warnings
|
|
- Confirm Preloader is completely removed
|
|
- Ensure all tests pass, ask the user if questions arise
|
|
|
|
## Notes
|
|
|
|
- Tasks marked with `*` are optional and can be skipped for faster implementation
|
|
- Each task references specific requirements for traceability
|
|
- Property tests validate universal correctness properties from the design document
|
|
- Unit tests validate specific implementation details and edge cases
|
|
- Manual verification at checkpoints ensures visual quality matches design intent
|
|
- All animation timing and responsive behavior must be preserved from original implementation
|