# 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