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.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
0ab6930f92
commit
08dd046887
76 files changed
+21682
-1197
No files matched your search
@@ -0,0 +1 @@
|
||||
{"specId": "3fcf2565-1720-4d06-9224-82b23b02204c", "workflowType": "requirements-first", "specType": "feature"}
|
||||
@@ -0,0 +1,501 @@
|
||||
# Design Document: Site Improvements - Footer & Companies
|
||||
|
||||
## Overview
|
||||
|
||||
This design implements site-wide improvements including spacing standardization, a complete footer component with contact information and social links, an animated company logos banner with infinite scroll, and reorganization of the Experience section into Software/Hardware categories. The implementation maintains the existing minimalist design system using Monument Extended typography, #ccff00 accent color, and Framer Motion animations.
|
||||
|
||||
The design focuses on three main areas:
|
||||
1. **Spacing System Standardization**: Applying consistent spacing tokens across all sections
|
||||
2. **Footer Component**: A new footer with contact info, social links, and copyright
|
||||
3. **CompanyLogos Component**: An infinite-scroll animated banner displaying company logos
|
||||
4. **Experience Section Refactor**: Categorizing experiences into Software and Hardware groups
|
||||
|
||||
All components follow the established design system patterns from `globals.css` and integrate with the existing Framer Motion animation infrastructure.
|
||||
|
||||
## Architecture
|
||||
|
||||
### Component Structure
|
||||
|
||||
```
|
||||
app/
|
||||
├── components/
|
||||
│ ├── Footer.tsx (replace existing)
|
||||
│ ├── CompanyLogos.tsx (new)
|
||||
│ ├── Experience.tsx (refactor)
|
||||
│ └── Section.tsx (update spacing)
|
||||
├── page.tsx (update layout)
|
||||
└── globals.css (spacing documentation)
|
||||
```
|
||||
|
||||
### Data Flow
|
||||
|
||||
1. **Footer Component**: Static data (email, social links) defined as constants within the component
|
||||
2. **CompanyLogos Component**: Logo data (company names, image paths) defined as constants, rendered with animation
|
||||
3. **Experience Component**: Existing data from `usePortfolioData()` hook, filtered and categorized by type field
|
||||
|
||||
### Animation Strategy
|
||||
|
||||
All animations use Framer Motion with reduced motion support:
|
||||
- **CompanyLogos**: Continuous horizontal scroll using `animate` with infinite loop
|
||||
- **Footer**: Subtle hover states on social links
|
||||
- **Experience**: Existing stagger animations maintained, category headers added
|
||||
|
||||
## Components and Interfaces
|
||||
|
||||
### 1. Footer Component
|
||||
|
||||
**Purpose**: Display contact information, social links, and copyright in a consistent footer layout.
|
||||
|
||||
**Props**: None (self-contained component)
|
||||
|
||||
**Structure**:
|
||||
```tsx
|
||||
interface SocialLink {
|
||||
name: string;
|
||||
href: string;
|
||||
icon: string; // SVG path or icon identifier
|
||||
ariaLabel: string;
|
||||
}
|
||||
|
||||
const socialLinks: SocialLink[] = [
|
||||
{ name: 'GitHub', href: 'https://github.com/...', icon: '...', ariaLabel: 'Visit GitHub profile' },
|
||||
{ name: 'LinkedIn', href: 'https://linkedin.com/...', icon: '...', ariaLabel: 'Visit LinkedIn profile' },
|
||||
// ... more links
|
||||
];
|
||||
```
|
||||
|
||||
**Layout**:
|
||||
- Desktop: Three-column grid (contact info | social links | copyright)
|
||||
- Tablet: Two-column grid (contact/social | copyright)
|
||||
- Mobile: Single column stack
|
||||
|
||||
**Styling**:
|
||||
- Background: `var(--ink)` with `border-t: 1px solid rgba(255,255,255,0.06)`
|
||||
- Typography: Monument Extended for headings, Geist Mono for body text
|
||||
- Accent: `var(--slash)` for link hover states
|
||||
- Padding: `py-sp-12 px-sp-16` (desktop), `py-sp-8 px-sp-6` (mobile)
|
||||
|
||||
### 2. CompanyLogos Component
|
||||
|
||||
**Purpose**: Display an infinite-scrolling banner of company logos after the header.
|
||||
|
||||
**Props**: None (self-contained component)
|
||||
|
||||
**Structure**:
|
||||
```tsx
|
||||
interface CompanyLogo {
|
||||
name: string;
|
||||
imagePath: string;
|
||||
alt: string;
|
||||
}
|
||||
|
||||
const companies: CompanyLogo[] = [
|
||||
{ name: 'Apolo Energia', imagePath: '/logos/apolo.svg', alt: 'Apolo Energia logo' },
|
||||
{ name: 'Julia Beauty Lashes', imagePath: '/logos/julia.svg', alt: 'Julia Beauty Lashes logo' },
|
||||
{ name: 'Innovo', imagePath: '/logos/innovo.svg', alt: 'Innovo logo' },
|
||||
{ name: 'TeraByteShop', imagePath: '/logos/terabyte.svg', alt: 'TeraByteShop logo' },
|
||||
{ name: 'Pichau', imagePath: '/logos/pichau.svg', alt: 'Pichau logo' },
|
||||
];
|
||||
```
|
||||
|
||||
**Animation Implementation**:
|
||||
```tsx
|
||||
// Duplicate logo array for seamless loop
|
||||
const duplicatedLogos = [...companies, ...companies];
|
||||
|
||||
// Framer Motion animation
|
||||
<motion.div
|
||||
animate={{
|
||||
x: [0, -50%], // Move by half the width (one set of logos)
|
||||
}}
|
||||
transition={{
|
||||
duration: 30, // 30 seconds for full loop
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
}}
|
||||
>
|
||||
{duplicatedLogos.map((logo, index) => (
|
||||
<img key={`${logo.name}-${index}`} src={logo.imagePath} alt={logo.alt} />
|
||||
))}
|
||||
</motion.div>
|
||||
```
|
||||
|
||||
**Reduced Motion Handling**:
|
||||
```tsx
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
// If reduced motion, display static grid instead of animation
|
||||
{shouldReduceMotion ? (
|
||||
<div className="grid grid-cols-5 gap-sp-6">
|
||||
{companies.map(logo => <img key={logo.name} ... />)}
|
||||
</div>
|
||||
) : (
|
||||
<motion.div animate={...} />
|
||||
)}
|
||||
```
|
||||
|
||||
**Styling**:
|
||||
- Container: `overflow-hidden` with `border-b: 1px solid var(--border)`
|
||||
- Background: `var(--paper)` with optional subtle grid pattern
|
||||
- Logo sizing: `h-12` (48px) with `grayscale` filter, `grayscale-0` on hover
|
||||
- Spacing: `py-sp-8` vertical padding, `gap-sp-12` between logos
|
||||
|
||||
### 3. Experience Component Refactor
|
||||
|
||||
**Purpose**: Organize experience entries into Software and Hardware categories.
|
||||
|
||||
**Changes**:
|
||||
1. Add category filtering logic
|
||||
2. Render two separate sections with category headers
|
||||
3. Maintain existing card structure and animations
|
||||
|
||||
**Implementation**:
|
||||
```tsx
|
||||
const softwareExperiences = sortedExperiences.filter(exp => exp.type === 'Software');
|
||||
const hardwareExperiences = sortedExperiences.filter(exp => exp.type === 'Hardware');
|
||||
|
||||
return (
|
||||
<Section id="experience" ...>
|
||||
{/* Software Category */}
|
||||
<div className="mb-sp-12">
|
||||
<h3 className="font-display text-2xl font-bold mb-sp-6 flex items-center gap-sp-3">
|
||||
<span className="text-[var(--slash)]">/</span> Software
|
||||
</h3>
|
||||
<motion.div variants={listVariants}>
|
||||
{softwareExperiences.map(exp => <ExperienceCard key={exp.id} {...exp} />)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Hardware Category */}
|
||||
<div>
|
||||
<h3 className="font-display text-2xl font-bold mb-sp-6 flex items-center gap-sp-3">
|
||||
<span className="text-[var(--slash)]">/</span> Hardware
|
||||
</h3>
|
||||
<motion.div variants={listVariants}>
|
||||
{hardwareExperiences.map(exp => <ExperienceCard key={exp.id} {...exp} />)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
```
|
||||
|
||||
**Styling**:
|
||||
- Category headers: Monument Extended, `text-2xl`, with slash accent
|
||||
- Separator: `mb-sp-12` between categories
|
||||
- Cards: Maintain existing styling and animations
|
||||
|
||||
### 4. Spacing System Updates
|
||||
|
||||
**Standardization**:
|
||||
All sections should use consistent spacing tokens from `globals.css`:
|
||||
- Section padding: `py-sp-20 px-sp-16` (desktop), `py-sp-16 px-sp-6` (mobile)
|
||||
- Section margins: `mb-sp-12` between major sections
|
||||
- Card spacing: `space-y-sp-6` for vertical stacks
|
||||
- Grid gaps: `gap-sp-6` for 2-column, `gap-sp-4` for 4-column
|
||||
|
||||
**Responsive Scaling**:
|
||||
Tailwind responsive utilities handle breakpoints:
|
||||
- Mobile: `px-sp-6 py-sp-16`
|
||||
- Tablet: `px-sp-10 py-sp-18`
|
||||
- Desktop: `px-sp-16 py-sp-20`
|
||||
|
||||
## Data Models
|
||||
|
||||
### SocialLink
|
||||
```typescript
|
||||
interface SocialLink {
|
||||
name: string; // Display name (e.g., "GitHub")
|
||||
href: string; // Full URL
|
||||
icon: string; // SVG path or icon component reference
|
||||
ariaLabel: string; // Accessibility label
|
||||
}
|
||||
```
|
||||
|
||||
### CompanyLogo
|
||||
```typescript
|
||||
interface CompanyLogo {
|
||||
name: string; // Company name
|
||||
imagePath: string; // Path to logo image (SVG preferred)
|
||||
alt: string; // Alt text for accessibility
|
||||
}
|
||||
```
|
||||
|
||||
### Experience (existing, with type field)
|
||||
```typescript
|
||||
interface Experience {
|
||||
id: string;
|
||||
title: string;
|
||||
company: string;
|
||||
type: 'Software' | 'Hardware'; // Used for categorization
|
||||
period: string;
|
||||
location: string;
|
||||
description: string;
|
||||
achievements: string[];
|
||||
technologies: string[];
|
||||
featured: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Correctness Properties
|
||||
|
||||
*A property is a characteristic or behavior that should hold true across all valid executions of a system—essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
|
||||
|
||||
### Property 1: Consistent Spacing System
|
||||
|
||||
*For any* major section or container element in the site, it should use spacing tokens from the design system (sp-1 through sp-24) with appropriate responsive modifiers for different viewport sizes.
|
||||
|
||||
**Validates: Requirements 1.1, 1.2, 1.3, 1.4**
|
||||
|
||||
### Property 2: Social Links Open in New Tab
|
||||
|
||||
*For any* social media link in the Footer component, it should have `target="_blank"` and `rel="noopener noreferrer"` attributes to open in a new tab securely.
|
||||
|
||||
**Validates: Requirements 2.7**
|
||||
|
||||
### Property 3: Responsive Component Layout
|
||||
|
||||
*For any* new component (Footer, CompanyLogos, Experience categories), it should include Tailwind responsive utility classes (sm:, md:, lg:) to adapt layout across viewport sizes.
|
||||
|
||||
**Validates: Requirements 2.6, 3.7, 4.5**
|
||||
|
||||
### Property 4: Reduced Motion Respect
|
||||
|
||||
*For any* animated component, when `useReducedMotion()` returns true, the component should render a static alternative without motion animations.
|
||||
|
||||
**Validates: Requirements 3.6, 6.3**
|
||||
|
||||
### Property 5: Experience Categorization
|
||||
|
||||
*For any* experience entry in the Experience section, it should be filtered by its `type` field and rendered within the corresponding Software or Hardware category group.
|
||||
|
||||
**Validates: Requirements 4.1**
|
||||
|
||||
### Property 6: Chronological Ordering Within Categories
|
||||
|
||||
*For any* category group in the Experience section, the experience entries within that group should be sorted in descending chronological order by year.
|
||||
|
||||
**Validates: Requirements 4.3**
|
||||
|
||||
### Property 7: Monument Extended Typography
|
||||
|
||||
*For any* heading element (h1, h2, h3) in new components (Footer, CompanyLogos, Experience categories), it should use the `font-display` class which applies Monument Extended font family.
|
||||
|
||||
**Validates: Requirements 2.4, 4.2, 5.4**
|
||||
|
||||
### Property 8: Slash Color Accents
|
||||
|
||||
*For any* accent element (category separators, hover states, decorative elements) in new components, it should use `var(--slash)` color (#ccff00) via Tailwind classes like `text-[var(--slash)]` or `bg-[var(--slash)]`.
|
||||
|
||||
**Validates: Requirements 5.1, 5.2**
|
||||
|
||||
### Property 9: ARIA Labels for Links
|
||||
|
||||
*For any* social media link in the Footer component, it should have a descriptive `aria-label` attribute that identifies the platform and action.
|
||||
|
||||
**Validates: Requirements 6.1**
|
||||
|
||||
### Property 10: Alt Text for Images
|
||||
|
||||
*For any* company logo image in the CompanyLogos component, it should have a non-empty `alt` attribute describing the company.
|
||||
|
||||
**Validates: Requirements 6.2**
|
||||
|
||||
### Property 11: Semantic Heading Hierarchy
|
||||
|
||||
*For any* sequence of heading elements in the Experience section, the heading levels should follow proper semantic hierarchy (h2 for section title, h3 for categories, no skipped levels).
|
||||
|
||||
**Validates: Requirements 6.4**
|
||||
|
||||
### Property 12: Keyboard Navigation Support
|
||||
|
||||
*For any* interactive element (links, buttons) in new components, it should be keyboard accessible with proper focus states and no negative tabindex values.
|
||||
|
||||
**Validates: Requirements 6.5**
|
||||
|
||||
## Error Handling
|
||||
|
||||
### Footer Component
|
||||
|
||||
**Missing Social Links Data**:
|
||||
- Gracefully render empty state or hide social links section
|
||||
- Log warning to console in development mode
|
||||
- Ensure layout doesn't break with missing data
|
||||
|
||||
**Invalid Email Format**:
|
||||
- Display email as-is (validation is not the footer's responsibility)
|
||||
- Ensure mailto: link is properly formatted
|
||||
|
||||
### CompanyLogos Component
|
||||
|
||||
**Missing Logo Images**:
|
||||
- Display company name as fallback text
|
||||
- Log warning for missing images in development
|
||||
- Maintain layout spacing even with missing images
|
||||
|
||||
**Animation Performance Issues**:
|
||||
- Monitor frame rate using `useAnimationFrame` hook
|
||||
- Fallback to static display if performance drops below threshold
|
||||
- Respect `prefers-reduced-motion` preference
|
||||
|
||||
### Experience Component
|
||||
|
||||
**Missing Type Field**:
|
||||
- Default to "Software" category if type is undefined
|
||||
- Log warning for entries without type field
|
||||
- Ensure all entries are displayed (don't silently drop data)
|
||||
|
||||
**Empty Categories**:
|
||||
- Hide category header if no entries exist for that type
|
||||
- Maintain spacing consistency when categories are hidden
|
||||
|
||||
### General Error Handling
|
||||
|
||||
**Component Render Errors**:
|
||||
- Wrap components in Error Boundaries
|
||||
- Display user-friendly error message
|
||||
- Log detailed error information for debugging
|
||||
|
||||
**Responsive Layout Issues**:
|
||||
- Use CSS fallbacks for unsupported features
|
||||
- Test across major browsers and devices
|
||||
- Ensure content remains accessible even if styling fails
|
||||
|
||||
## Testing Strategy
|
||||
|
||||
### Dual Testing Approach
|
||||
|
||||
This feature requires both unit tests and property-based tests to ensure comprehensive coverage:
|
||||
|
||||
**Unit Tests**: Focus on specific examples, edge cases, and integration points
|
||||
- Specific component rendering scenarios
|
||||
- Edge cases (empty data, missing fields)
|
||||
- User interaction flows (clicking links, reduced motion)
|
||||
- Integration between components
|
||||
|
||||
**Property-Based Tests**: Verify universal properties across all inputs
|
||||
- Spacing consistency across generated component trees
|
||||
- Accessibility attributes across generated link/image sets
|
||||
- Categorization logic across generated experience data
|
||||
- Responsive class application across generated components
|
||||
|
||||
### Testing Framework
|
||||
|
||||
**Framework**: Vitest + React Testing Library + fast-check
|
||||
- Vitest for test runner and assertions
|
||||
- React Testing Library for component testing
|
||||
- fast-check for property-based testing (TypeScript-native)
|
||||
|
||||
**Property Test Configuration**:
|
||||
- Minimum 100 iterations per property test
|
||||
- Each test tagged with: `Feature: site-improvements-footer-companies, Property {number}: {property_text}`
|
||||
- Use custom generators for component props and data structures
|
||||
|
||||
### Unit Test Coverage
|
||||
|
||||
**Footer Component**:
|
||||
- Renders contact information correctly
|
||||
- Renders all social links with correct attributes
|
||||
- Displays current year in copyright
|
||||
- Opens social links in new tab
|
||||
- Applies correct styling classes
|
||||
- Responsive layout changes at breakpoints
|
||||
|
||||
**CompanyLogos Component**:
|
||||
- Renders all five company logos
|
||||
- Duplicates logo array for infinite scroll
|
||||
- Applies animation with correct configuration
|
||||
- Displays static grid when reduced motion is enabled
|
||||
- Handles missing logo images gracefully
|
||||
- Maintains responsive layout
|
||||
|
||||
**Experience Component**:
|
||||
- Filters experiences by Software/Hardware type
|
||||
- Renders category headers with correct styling
|
||||
- Maintains chronological order within categories
|
||||
- Hides empty categories
|
||||
- Applies consistent spacing between categories
|
||||
- Responsive layout on mobile devices
|
||||
|
||||
### Property-Based Test Coverage
|
||||
|
||||
**Property 1: Consistent Spacing System**
|
||||
- Generate random component trees with various nesting levels
|
||||
- Verify all spacing classes use design system tokens
|
||||
- Check responsive modifiers are present
|
||||
|
||||
**Property 2: Social Links Open in New Tab**
|
||||
- Generate random arrays of social links
|
||||
- Verify each link has target="_blank" and rel="noopener noreferrer"
|
||||
|
||||
**Property 3: Responsive Component Layout**
|
||||
- Generate random component configurations
|
||||
- Verify presence of responsive utility classes
|
||||
|
||||
**Property 4: Reduced Motion Respect**
|
||||
- Generate random animation configurations
|
||||
- Verify static rendering when reduced motion is true
|
||||
|
||||
**Property 5: Experience Categorization**
|
||||
- Generate random experience arrays with mixed types
|
||||
- Verify correct filtering and grouping by type
|
||||
|
||||
**Property 6: Chronological Ordering Within Categories**
|
||||
- Generate random experience arrays with various dates
|
||||
- Verify descending chronological order within each category
|
||||
|
||||
**Property 7: Monument Extended Typography**
|
||||
- Generate random heading elements
|
||||
- Verify font-display class is applied
|
||||
|
||||
**Property 8: Slash Color Accents**
|
||||
- Generate random accent elements
|
||||
- Verify var(--slash) color usage
|
||||
|
||||
**Property 9: ARIA Labels for Links**
|
||||
- Generate random social link arrays
|
||||
- Verify each has descriptive aria-label
|
||||
|
||||
**Property 10: Alt Text for Images**
|
||||
- Generate random logo arrays
|
||||
- Verify each image has non-empty alt text
|
||||
|
||||
**Property 11: Semantic Heading Hierarchy**
|
||||
- Generate random heading sequences
|
||||
- Verify proper h2 → h3 hierarchy without skips
|
||||
|
||||
**Property 12: Keyboard Navigation Support**
|
||||
- Generate random interactive elements
|
||||
- Verify focusability and proper tabindex values
|
||||
|
||||
### Integration Testing
|
||||
|
||||
**Page Layout Integration**:
|
||||
- Verify CompanyLogos appears after Header
|
||||
- Verify Footer appears at bottom of page
|
||||
- Verify spacing between all sections is consistent
|
||||
- Test full page scroll behavior
|
||||
|
||||
**Animation Performance**:
|
||||
- Monitor CompanyLogos animation frame rate
|
||||
- Verify smooth scrolling across devices
|
||||
- Test reduced motion fallback behavior
|
||||
|
||||
**Accessibility Testing**:
|
||||
- Run axe-core automated accessibility tests
|
||||
- Verify keyboard navigation through all components
|
||||
- Test screen reader compatibility
|
||||
- Verify color contrast ratios meet WCAG AA standards
|
||||
|
||||
### Visual Regression Testing
|
||||
|
||||
**Snapshot Tests**:
|
||||
- Footer component in all responsive states
|
||||
- CompanyLogos with animation and static states
|
||||
- Experience section with both categories populated
|
||||
- Experience section with one empty category
|
||||
|
||||
**Cross-Browser Testing**:
|
||||
- Chrome, Firefox, Safari, Edge
|
||||
- Mobile browsers (iOS Safari, Chrome Mobile)
|
||||
- Verify consistent rendering and animation performance
|
||||
@@ -0,0 +1,96 @@
|
||||
# Requirements Document
|
||||
|
||||
## Introduction
|
||||
|
||||
This document specifies requirements for site-wide improvements including spacing fixes, a complete footer component, an animated company logos banner, and reorganization of the Experience section. These improvements enhance the visual consistency, professionalism, and user experience of the portfolio site.
|
||||
|
||||
## Glossary
|
||||
|
||||
- **Site**: The portfolio website built with Next.js 15, React 19, TypeScript, and Tailwind CSS 4
|
||||
- **Footer**: The bottom section of the Site containing contact information, social links, and copyright
|
||||
- **Companies_Banner**: A horizontal scrolling component displaying company logos after the header
|
||||
- **Experience_Section**: The section of the Site displaying professional work history
|
||||
- **Spacing_System**: The consistent vertical and horizontal spacing applied throughout the Site
|
||||
- **Monument_Extended**: The primary font family used for headings and emphasis
|
||||
- **Slash_Color**: The accent color (#ccff00) used for visual emphasis
|
||||
|
||||
## Requirements
|
||||
|
||||
### Requirement 1: Fix Spacing Inconsistencies
|
||||
|
||||
**User Story:** As a visitor, I want consistent spacing throughout the site, so that the layout feels polished and professional.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. THE Site SHALL apply consistent vertical spacing between all major sections
|
||||
2. THE Site SHALL apply consistent horizontal padding on all container elements
|
||||
3. THE Site SHALL maintain spacing consistency across mobile, tablet, and desktop viewports
|
||||
4. WHEN the viewport width changes, THE Spacing_System SHALL scale proportionally using Tailwind responsive utilities
|
||||
|
||||
### Requirement 2: Create Footer Component
|
||||
|
||||
**User Story:** As a visitor, I want to see contact information and social links in the footer, so that I can easily connect with the site owner.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. THE Footer SHALL display contact information including email address
|
||||
2. THE Footer SHALL display clickable social media links
|
||||
3. THE Footer SHALL display copyright text with the current year
|
||||
4. THE Footer SHALL use Monument_Extended font for consistency
|
||||
5. THE Footer SHALL apply the minimalist design style matching the Site
|
||||
6. THE Footer SHALL be responsive across mobile, tablet, and desktop viewports
|
||||
7. WHEN a social link is clicked, THE Footer SHALL open the link in a new browser tab
|
||||
|
||||
### Requirement 3: Create Animated Company Logos Banner
|
||||
|
||||
**User Story:** As a visitor, I want to see companies the site owner has worked with, so that I can understand their professional experience.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. THE Companies_Banner SHALL display logos for Apolo Energia, Julia Beauty Lashes, Innovo, TeraByteShop, and Pichau
|
||||
2. THE Companies_Banner SHALL be positioned after the header section
|
||||
3. THE Companies_Banner SHALL animate logos with horizontal scrolling motion
|
||||
4. THE Companies_Banner SHALL loop the animation continuously
|
||||
5. THE Companies_Banner SHALL maintain smooth animation performance at 60fps
|
||||
6. WHEN a user enables reduced motion preferences, THE Companies_Banner SHALL display static logos without animation
|
||||
7. THE Companies_Banner SHALL be responsive across mobile, tablet, and desktop viewports
|
||||
8. THE Companies_Banner SHALL duplicate logo sets to create seamless infinite scroll effect
|
||||
|
||||
### Requirement 4: Reorganize Experience Section
|
||||
|
||||
**User Story:** As a visitor, I want to see work experience organized by category, so that I can quickly find relevant projects.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. THE Experience_Section SHALL organize entries into Software and Hardware categories
|
||||
2. THE Experience_Section SHALL display category headings using Monument_Extended font
|
||||
3. THE Experience_Section SHALL maintain chronological order within each category
|
||||
4. THE Experience_Section SHALL apply consistent spacing between category groups
|
||||
5. THE Experience_Section SHALL be responsive across mobile, tablet, and desktop viewports
|
||||
6. WHEN viewing on mobile, THE Experience_Section SHALL stack categories vertically
|
||||
|
||||
### Requirement 5: Maintain Design Consistency
|
||||
|
||||
**User Story:** As a visitor, I want all new components to match the existing design system, so that the site feels cohesive.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. THE Footer SHALL use Slash_Color for accent elements
|
||||
2. THE Companies_Banner SHALL use Slash_Color for decorative elements
|
||||
3. THE Experience_Section SHALL use Slash_Color for category separators
|
||||
4. THE Site SHALL use Monument_Extended font for all headings in new components
|
||||
5. THE Site SHALL apply the minimalist design style to all new components
|
||||
6. THE Site SHALL maintain consistent color palette across all new components
|
||||
|
||||
### Requirement 6: Ensure Accessibility
|
||||
|
||||
**User Story:** As a visitor using assistive technology, I want all new components to be accessible, so that I can navigate and understand the content.
|
||||
|
||||
#### Acceptance Criteria
|
||||
|
||||
1. THE Footer SHALL include proper ARIA labels for social media links
|
||||
2. THE Companies_Banner SHALL include alt text for all company logos
|
||||
3. THE Companies_Banner SHALL respect prefers-reduced-motion system preference
|
||||
4. THE Experience_Section SHALL use semantic HTML heading hierarchy
|
||||
5. THE Site SHALL maintain keyboard navigation support for all interactive elements
|
||||
6. THE Site SHALL maintain sufficient color contrast ratios for all text elements
|
||||
@@ -0,0 +1,189 @@
|
||||
# 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
|
||||
Reference in new issue
Block a user