Hub centralizado e portfólio de engenharia de software focado em Desenvolvimento Front-End. A aplicação expõe componentes altamente otimizados e síncronos, com suporte completo e acessibilidade (Light/Dark Mode), internacionalização em tempo real (Bilingue) e foco em resistência de código através de uma esteira robusta de testes automatizados unitários e end-to-end (E2E).
Como profissional neurodivergente (TEA), este projeto traduz hiperfoco, lógica apurada e atenção extrema aos detalhes em uma arquitetura limpa, modular e componentizada de alta fidelidade.
🚀 Acesse a aplicação completa ao vivo: Visualizar Portfólio na Vercel
Siga os passos abaixo para clonar e rodar o simulador em sua máquina de desenvolvimento:
- Clone o repositório:
git clone https://github.com/franferrazdev/franferrazdev-portfolio.git
cd franferrazdev-portfolio- Instale as dependências:
pnpm install- Inicie o servidor de desenvolvimento:
pnpm devAbra http://localhost:3000 no seu navegador para ver o resultado.
- Execução de Testes:
- Testes Unitários (Jest):
pnpm testoupnpm test:watch - Testes End-to-End (Playwright):
npx playwright test
As capturas abaixo ilustram a experiência inicial do usuário, a componentização responsiva e os fluxos de captação de leads projetados para o ecossistema do portfólio:
Visão principal do portfólio destacando a digitação fluida e dinâmica, controles de internacionalização instantânea e os seletores de acessibilidade (Light/Dark Mode).
Exibição modular dos repositórios encapsulados em cards tridimensionais reativos, destacando as badges técnicas de testes e links de produção.
Formulário dinâmico integrado à API externa do Formspree, contendo validações de estados, feedbacks de sucesso instantâneos e proteção de campos.
- IntersectionObserver Fluido: Gerenciamento centralizado em
src/App.tsxpara sincronizar rotas hash, animações de scroll da esquerda para a direita e marcadores da Navbar em tempo real no eixo Y. - Navegação Inteligente Síncrona: Componente
ScrollArrowcalibrado com travas de concorrência (useRef) para garantir navegação cronológica precisa e suave sem pular blocos. - Formulário de Contato Assíncrono: Integração real de captação de mensagens com o Formspree via requisição nativa
fetch, encapsulada sob camadas seguras de variáveis de ambiente do Vite (.env).
Este ambiente possui uma suíte de testes rigorosa para blindar o código contra erros regressivos:
- Testes Unitários e de Integração (Jest & React Testing Library): Mapeamento do ciclo de vida dos cliques da
Navbar, tradução de strings noLanguageContexte mutação de classes do Tailwind noThemeContext. - Testes End-to-End (Playwright): Simulação automatizada da jornada do recrutador de ponta a ponta (aguarda o boot da
LoadingScreen, executa cliques forçados em elementos flutuantes quicantes, chaveia idiomas e dispara o formulário de contato). - Integração Contínua (GitHub Actions): Automação em nuvem (
playwright.yml) que roda a suíte de testes em cada Pull Request antes de liberar o merge na branch principal (main).
O desenvolvimento deste hub centralizado de engenharia consolidou competências avançadas em otimização de interfaces reativas e resiliência de código:
- Sincronização de Viewport com IntersectionObserver: Arquitetar um gerenciamento de estados centralizado no
src/App.tsxpara monitorar o scroll reativo exigiu o domínio de APIs nativas do navegador. Essa abordagem garante a mutação fluida de hashes na URL, disparos de animações direcionais e atualização dos marcadores da Navbar em tempo real no eixo Y, sem causar gargalos de renderização ou travamentos de layout. - Navegação Síncrona Imune a Concorrência: Implementar o componente
ScrollArrowdemandou soluções sólidas de controle de concorrência. Utilizando blocos de reatividade isolados comuseRef, foi possível blindar as travas de cliques rápidos, garantindo que a rolagem cronológica salte de seção em seção de forma linear e elástica, impedindo o pulo acidental de blocos curtos de conteúdo. - Cultura de Testes Multicamadas e Automação de CI: Estruturar uma pirâmide de testes completa unificando Jest, React Testing Library e Playwright E2E expandiu significativamente minha visão de governança de código. Isolar o ciclo de vida de contextos globais (
LanguageContexteThemeContext) e criar robôs que simulam a jornada real do recrutador desde o boot da tela de carregamento até o disparo do formulário de contato via Formspree — tudo isso orquestrado por um pipeline automatizado de CI no GitHub Actions — garante uma interface blindada contra regressões visuais em ambiente de produção.
Se você gostou da arquitetura dos meus projetos, da cobertura de testes automatizados com Jest e Playwright ou quer trocar uma ideia sobre desenvolvimento front-end, meu terminal está sempre aberto! Você pode me encontrar diretamente pelos canais oficiais:
- E-mail Profissional: franferraz.dev@gmail.com
- LinkedIn Oficial: Francielle Ferraz de Sousa
Vamos construir soluções eficientes e robustas juntos! 🚀
A centralized software engineering hub and portfolio tailored for Front-End Development. The application exhibits highly optimized, synchronous components featuring comprehensive accessibility support (Light/Dark Mode), real-time internationalization (Bilingual), and an absolute focus on code resilience driven by a robust pipeline of automated unit and end-to-end (E2E) tests.
As a neurodivergent professional (ASD), this project converts hyperfocus, sharp logic, and extreme attention to detail into a clean, modular, and componentized architecture of high fidelity.
🚀 Access the live running application: View Portfolio on Vercel
Follow these steps to clone and run the technical simulator on your local workspace:
-
Clone the repository:
git clone https://github.com/franferrazdev/franferrazdev-portfolio.git cd franferrazdev-portfolio -
Install dependencies:
pnpm install
-
Run the development environment:
pnpm dev
Open http://localhost:3000 inside your browser.
-
Executing Tests:
- Unit Tests (Jest):
pnpm test - End-to-End Tests (Playwright):
npx playwright test
- Unit Tests (Jest):
The captures below illustrate the initial user experience, responsive component layouts, and async lead capturing workflows engineered for the portfolio ecosystem:
Primary viewport view showcasing real-time fluid typography typing arrays, immediate internationalization dictionaries, and accessible dynamic theme triggers (Light/Dark Mode).
Modular layout exhibiting repositories encapsulated inside reactive 3D cards, highlighting tech test badges and live demo targets.
Dynamic form integrated with the external Formspree API, featuring real-time input validation, structural toast feedbacks, and security masks.
- Fluid IntersectionObserver: Centralized hook management within
src/App.tsxto handle synchronized hash routes, viewport scroll animations, and top navigation bar states seamlessly across the Y-axis. - Synchronous Smart Navigation:
ScrollArrowcomponent reinforced with reactivity blocks (useRef) to assure sequential element steps without skipping short content layouts. - Asynchronous Lead Capturing: Production-ready mail integration via native
fetchtargeting Formspree API engines, entirely protected by structural Vite metadata environment files (.env).
This workspace maintains a strict testing matrix to safeguard interfaces against breaking shifts:
- Unit & Integration Tests (Jest & React Testing Library): Direct checks on
Navbarlink clicking lifecycles, full bilingual translation responses inLanguageContext, and style assignments inThemeContext. - End-to-End Tests (Playwright): Simulates the recruiter's path (waits for
LoadingScreensystem boots, performs strict clicks on bouncing components, toggles languages, and validates form dispatches). - Continuous Integration (GitHub Actions): Automation pipeline (
playwright.yml) that triggers and executes tests on every remote Pull Request prior to allowing final main repository merges.
Building this centralized engineering hub solidified core frontend system architectures, performance tuning, and multi-layered testing paradigms:
- Viewport Synchronization via IntersectionObserver: Engineering a centralized hook architecture within
src/App.tsxto monitor layout scrolling patterns required a deep mastery of native browser APIs. This setup guarantees seamless URL hash shifts, smooth directional viewport transitions, and real-time navigation link state updates across the Y-axis without inducing performance lag or layout breaking. - Concurrency-Immune Synchronous Navigation: Developing the reactive
ScrollArrowcomponent required strict operational control solutions. Utilizing isolated boundaries withuseReftokens effectively protected the application against rapid clicking race conditions, assuring that chronological transitions move linearly across semantic elements without skipping shorter section layouts. - Multi-Tier Testing Matrix and Workflow CI Automation: Establishing a complete automated verification matrix by intertwining Jest, React Testing Library, and Playwright E2E advanced my system design practices. Validating global application contexts (
LanguageContextandThemeContext) alongside creating actions that simulate a recruiter's path—waiting for the loading screen system boot, handling strict floating component clicks, and testing form dispatches via Formspree API—all managed by an automated GitHub Actions CI pipeline, provides full regression protection across modern deployments.
If you liked the architecture of my systems, the automated test matrix using Jest and Playwright, or want to chat about front-end engineering, my workspace is always open! You can reach me directly through my official networks:
- Professional Email: franferraz.dev@gmail.com
- Official LinkedIn: Francielle Ferraz de Sousa
Let's build efficient, robust software together! 🚀