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.
97 lines
5.1 KiB
Markdown
97 lines
5.1 KiB
Markdown
# 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
|