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.
190 lines
8.0 KiB
Markdown
190 lines
8.0 KiB
Markdown
# Implementation Plan: Site Improvements - Footer & Companies
|
|
|
|
## Overview
|
|
|
|
This implementation adds a complete footer component with contact information and social links, an animated company logos banner with infinite scroll, reorganizes the Experience section into Software/Hardware categories, and standardizes spacing across the site. All components follow the existing minimalist design system using Monument Extended typography, #ccff00 accent color, and Framer Motion animations with reduced motion support.
|
|
|
|
## Tasks
|
|
|
|
- [x] 1. Set up component structure and data models
|
|
- Create Footer.tsx component file
|
|
- Create CompanyLogos.tsx component file
|
|
- Define TypeScript interfaces for SocialLink and CompanyLogo
|
|
- Set up component exports
|
|
- _Requirements: 2.1, 2.2, 3.1_
|
|
|
|
- [ ] 2. Implement Footer component
|
|
- [~] 2.1 Create Footer component with layout structure
|
|
- Implement three-column grid layout (desktop) and responsive stacks (tablet/mobile)
|
|
- Add contact information section with email
|
|
- Add social links section with GitHub, LinkedIn, and other platforms
|
|
- Add copyright section with dynamic current year
|
|
- Apply Monument Extended typography and minimalist styling
|
|
- Use spacing tokens (py-sp-12 px-sp-16 desktop, py-sp-8 px-sp-6 mobile)
|
|
- _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6_
|
|
|
|
- [x] 2.2 Write property test for Footer social links
|
|
- **Property 2: Social Links Open in New Tab**
|
|
- **Validates: Requirements 2.7**
|
|
|
|
- [x] 2.3 Write property test for Footer ARIA labels
|
|
- **Property 9: ARIA Labels for Links**
|
|
- **Validates: Requirements 6.1**
|
|
|
|
- [x] 2.4 Write property test for Footer responsive layout
|
|
- **Property 3: Responsive Component Layout**
|
|
- **Validates: Requirements 2.6**
|
|
|
|
- [x] 2.5 Write unit tests for Footer component
|
|
- Test contact information rendering
|
|
- Test social links with correct attributes
|
|
- Test current year in copyright
|
|
- Test responsive layout changes
|
|
- _Requirements: 2.1, 2.2, 2.3, 2.6, 2.7_
|
|
|
|
- [ ] 3. Implement CompanyLogos component
|
|
- [~] 3.1 Create CompanyLogos component with animation
|
|
- Define company logos array (Apolo Energia, Julia Beauty Lashes, Innovo, TeraByteShop, Pichau)
|
|
- Implement infinite scroll animation using Framer Motion
|
|
- Duplicate logo array for seamless loop effect
|
|
- Configure animation with 30-second duration and linear easing
|
|
- Apply grayscale filter with hover effect
|
|
- Use spacing tokens (py-sp-8, gap-sp-12)
|
|
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.7, 3.8_
|
|
|
|
- [~] 3.2 Add reduced motion support to CompanyLogos
|
|
- Implement useReducedMotion hook integration
|
|
- Create static grid fallback for reduced motion preference
|
|
- Ensure smooth transition between animated and static states
|
|
- _Requirements: 3.6, 6.3_
|
|
|
|
- [x] 3.3 Write property test for CompanyLogos reduced motion
|
|
- **Property 4: Reduced Motion Respect**
|
|
- **Validates: Requirements 3.6, 6.3**
|
|
|
|
- [x] 3.4 Write property test for CompanyLogos alt text
|
|
- **Property 10: Alt Text for Images**
|
|
- **Validates: Requirements 6.2**
|
|
|
|
- [x] 3.5 Write unit tests for CompanyLogos component
|
|
- Test all five logos render correctly
|
|
- Test animation configuration
|
|
- Test reduced motion fallback
|
|
- Test missing logo image handling
|
|
- Test responsive layout
|
|
- _Requirements: 3.1, 3.3, 3.4, 3.6, 3.7_
|
|
|
|
- [~] 4. Checkpoint - Ensure all tests pass
|
|
- Ensure all tests pass, ask the user if questions arise.
|
|
|
|
- [ ] 5. Refactor Experience component with categorization
|
|
- [~] 5.1 Add category filtering and rendering logic
|
|
- Filter experiences by type field (Software/Hardware)
|
|
- Create category header components with slash accent
|
|
- Render Software category section with filtered experiences
|
|
- Render Hardware category section with filtered experiences
|
|
- Maintain chronological ordering within each category
|
|
- Apply consistent spacing (mb-sp-12 between categories)
|
|
- Hide category headers if no entries exist
|
|
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6_
|
|
|
|
- [x] 5.2 Write property test for Experience categorization
|
|
- **Property 5: Experience Categorization**
|
|
- **Validates: Requirements 4.1**
|
|
|
|
- [x] 5.3 Write property test for chronological ordering
|
|
- **Property 6: Chronological Ordering Within Categories**
|
|
- **Validates: Requirements 4.3**
|
|
|
|
- [x] 5.4 Write property test for semantic heading hierarchy
|
|
- **Property 11: Semantic Heading Hierarchy**
|
|
- **Validates: Requirements 6.4**
|
|
|
|
- [~] 5.5 Write unit tests for Experience refactor
|
|
- Test Software/Hardware filtering
|
|
- Test category headers render correctly
|
|
- Test chronological order within categories
|
|
- Test empty category handling
|
|
- Test responsive mobile layout
|
|
- _Requirements: 4.1, 4.2, 4.3, 4.5, 4.6_
|
|
|
|
- [ ] 6. Standardize spacing system across site
|
|
- [~] 6.1 Update Section component and all major sections
|
|
- Apply consistent spacing tokens to all section containers
|
|
- Update Hero section spacing (py-sp-20 px-sp-16 desktop, py-sp-16 px-sp-6 mobile)
|
|
- Update About section spacing
|
|
- Update Projects section spacing
|
|
- Update Experience section spacing
|
|
- Add responsive modifiers for tablet and mobile breakpoints
|
|
- _Requirements: 1.1, 1.2, 1.3, 1.4_
|
|
|
|
- [~] 6.2 Write property test for spacing consistency
|
|
- **Property 1: Consistent Spacing System**
|
|
- **Validates: Requirements 1.1, 1.2, 1.3, 1.4**
|
|
|
|
- [~] 6.3 Write unit tests for spacing updates
|
|
- Test section padding values
|
|
- Test responsive spacing changes
|
|
- Test spacing between major sections
|
|
- _Requirements: 1.1, 1.2, 1.3, 1.4_
|
|
|
|
- [ ] 7. Apply design system consistency
|
|
- [~] 7.1 Add Monument Extended typography to new components
|
|
- Verify font-display class on all heading elements
|
|
- Verify Footer headings use Monument Extended
|
|
- Verify Experience category headers use Monument Extended
|
|
- _Requirements: 2.4, 4.2, 5.4_
|
|
|
|
- [~] 7.2 Add slash color accents to new components
|
|
- Apply var(--slash) to Footer accent elements
|
|
- Apply var(--slash) to CompanyLogos decorative elements
|
|
- Apply var(--slash) to Experience category separators
|
|
- _Requirements: 5.1, 5.2, 5.3_
|
|
|
|
- [~] 7.3 Write property test for Monument Extended typography
|
|
- **Property 7: Monument Extended Typography**
|
|
- **Validates: Requirements 2.4, 4.2, 5.4**
|
|
|
|
- [~] 7.4 Write property test for slash color accents
|
|
- **Property 8: Slash Color Accents**
|
|
- **Validates: Requirements 5.1, 5.2**
|
|
|
|
- [~] 7.5 Write unit tests for design consistency
|
|
- Test font-display class application
|
|
- Test slash color usage
|
|
- Test minimalist styling consistency
|
|
- _Requirements: 5.1, 5.2, 5.4, 5.5_
|
|
|
|
- [ ] 8. Integrate components into page layout
|
|
- [~] 8.1 Update page.tsx with new components
|
|
- Import Footer and CompanyLogos components
|
|
- Position CompanyLogos after Header section
|
|
- Position Footer at bottom of page
|
|
- Verify spacing between all sections
|
|
- Test full page scroll behavior
|
|
- _Requirements: 3.2_
|
|
|
|
- [~] 8.2 Write property test for keyboard navigation
|
|
- **Property 12: Keyboard Navigation Support**
|
|
- **Validates: Requirements 6.5**
|
|
|
|
- [~] 8.3 Write integration tests for page layout
|
|
- Test CompanyLogos position after Header
|
|
- Test Footer position at page bottom
|
|
- Test spacing consistency across all sections
|
|
- Test keyboard navigation through all components
|
|
- _Requirements: 3.2, 6.5_
|
|
|
|
- [~] 9. Final checkpoint - Ensure all tests pass
|
|
- Ensure all tests pass, ask the user if questions arise.
|
|
|
|
## Notes
|
|
|
|
- Tasks marked with `*` are optional and can be skipped for faster MVP
|
|
- Each task references specific requirements for traceability
|
|
- Checkpoints ensure incremental validation
|
|
- Property tests validate universal correctness properties across all inputs
|
|
- Unit tests validate specific examples and edge cases
|
|
- All components use Next.js 15, React 19, TypeScript, Tailwind CSS 4, and Framer Motion
|
|
- Reduced motion support is critical for accessibility compliance
|