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.
79 lines
4.6 KiB
Markdown
79 lines
4.6 KiB
Markdown
# Requirements Document
|
|
|
|
## Introduction
|
|
|
|
Este documento especifica os requisitos para melhorias na experiência inicial do portfólio, incluindo a remoção da tela de carregamento (Preloader) e ajustes visuais no componente Hero para melhor legibilidade e posicionamento de elementos.
|
|
|
|
## Glossary
|
|
|
|
- **Preloader**: Componente de tela de carregamento que exibe animação inicial antes do conteúdo principal
|
|
- **Hero**: Seção principal da página inicial que contém o texto animado "evandro.dev.br" e informações de apresentação
|
|
- **Logo**: Componente visual da marca que aparece durante a animação do Hero
|
|
- **Page**: Componente raiz da aplicação Next.js (app/page.tsx)
|
|
- **Typography_System**: Sistema de tipografia definido em globals.css usando variáveis CSS customizadas
|
|
|
|
## Requirements
|
|
|
|
### Requirement 1: Remove Preloader Component
|
|
|
|
**User Story:** Como usuário visitando o portfólio, quero acessar o conteúdo imediatamente, para que eu possa visualizar as informações sem esperar por uma tela de carregamento.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Page SHALL NOT render the Preloader component
|
|
2. THE Page SHALL display the Hero component immediately on load
|
|
3. WHEN the application initializes, THE Page SHALL NOT apply overflow hidden to the document body
|
|
4. THE Preloader component file SHALL be removed from the codebase
|
|
5. THE Page SHALL NOT import the Preloader component
|
|
|
|
### Requirement 2: Adjust Hero Text Size
|
|
|
|
**User Story:** Como usuário visualizando o portfólio em diferentes dispositivos, quero que o texto "evandro.dev.br" tenha um tamanho apropriado, para que eu possa ler confortavelmente sem que o texto ocupe espaço excessivo.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Hero SHALL render the text "evandro.dev.br" with reduced font size compared to current implementation
|
|
2. WHEN viewed on mobile devices, THE Hero SHALL display text at approximately 10vw font size
|
|
3. WHEN viewed on small screens (sm breakpoint), THE Hero SHALL display text at approximately 4rem font size
|
|
4. WHEN viewed on medium screens (md breakpoint), THE Hero SHALL display text at approximately 4.5rem font size
|
|
5. WHEN viewed on large screens (lg breakpoint), THE Hero SHALL display text at approximately 5rem font size
|
|
6. WHEN viewed on extra-large screens (xl breakpoint), THE Hero SHALL display text at approximately 5.5rem font size
|
|
7. THE Hero SHALL maintain the current line-height and tracking properties for text readability
|
|
|
|
### Requirement 3: Improve Logo Positioning
|
|
|
|
**User Story:** Como usuário assistindo a animação do Hero, quero que a logo apareça em uma posição visualmente equilibrada, para que a transição entre o texto e a logo seja harmoniosa.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. WHEN the Logo animation phase is active, THE Hero SHALL position the Logo component with proper vertical and horizontal alignment
|
|
2. THE Hero SHALL reduce the Logo width to approximately 60-70% of container width for better proportion
|
|
3. THE Hero SHALL set Logo max-width to approximately 280px for optimal visual balance
|
|
4. WHEN the Logo appears, THE Hero SHALL maintain consistent spacing from surrounding elements
|
|
5. THE Hero SHALL preserve all existing Logo animation effects (opacity, scale, blur, clipPath)
|
|
6. THE Hero SHALL ensure Logo remains centered horizontally within its container
|
|
|
|
### Requirement 4: Maintain Animation Timing
|
|
|
|
**User Story:** Como usuário interagindo com o portfólio, quero que as animações do Hero continuem funcionando suavemente, para que a experiência visual permaneça fluida após as mudanças.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Hero SHALL maintain the typing animation sequence for "evandro.dev.br"
|
|
2. THE Hero SHALL preserve the phase transitions (typing → idle → glitch → logo)
|
|
3. THE Hero SHALL respect the user's reduced motion preferences
|
|
4. WHEN reduced motion is preferred, THE Hero SHALL use simplified animations without blur or scale effects
|
|
5. THE Hero SHALL maintain the current animation timing values for all phases
|
|
|
|
### Requirement 5: Preserve Responsive Behavior
|
|
|
|
**User Story:** Como usuário acessando o portfólio em diferentes dispositivos, quero que todos os elementos do Hero se adaptem corretamente, para que a experiência seja consistente em qualquer tamanho de tela.
|
|
|
|
#### Acceptance Criteria
|
|
|
|
1. THE Hero SHALL maintain responsive behavior for all breakpoints (mobile, sm, md, lg, xl)
|
|
2. THE Hero SHALL adjust min-height values appropriately for different screen sizes
|
|
3. THE Hero SHALL preserve the responsive character stagger timing (0.015s mobile, 0.03s desktop)
|
|
4. THE Hero SHALL maintain proper spacing and padding across all viewport sizes
|
|
5. THE Hero SHALL ensure all interactive elements (buttons, social links) remain accessible on all devices
|