evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7bbdfd9dafe92e21d52f60ee6f51e59bd53d091f
portifolio-evandrodevbr/.kiro/specs/remove-preloader-adjust-hero/requirements.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

4.6 KiB
Raw Blame History

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