evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
feat/scroll-video-story
portifolio-evandrodevbr/.kiro/specs/site-improvements-footer-companies/tasks.md
T
Evandro Fonseca Junior 08dd046887 feat: add animated components for enhanced UI/UX 
- 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.
2026-03-15 21:06:43 -03:00

8.0 KiB
Raw Permalink Blame History

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

  • 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

    • 2.2 Write property test for Footer social links

      • Property 2: Social Links Open in New Tab
      • Validates: Requirements 2.7

    • 2.3 Write property test for Footer ARIA labels

      • Property 9: ARIA Labels for Links
      • Validates: Requirements 6.1

    • 2.4 Write property test for Footer responsive layout

      • Property 3: Responsive Component Layout
      • Validates: Requirements 2.6

    • 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

    • 3.3 Write property test for CompanyLogos reduced motion

      • Property 4: Reduced Motion Respect
      • Validates: Requirements 3.6, 6.3

    • 3.4 Write property test for CompanyLogos alt text

      • Property 10: Alt Text for Images
      • Validates: Requirements 6.2

    • 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

    • 5.2 Write property test for Experience categorization

      • Property 5: Experience Categorization
      • Validates: Requirements 4.1

    • 5.3 Write property test for chronological ordering

      • Property 6: Chronological Ordering Within Categories
      • Validates: Requirements 4.3

    • 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
Reference in new issue View Git Blame Copy Permalink