--- title: Vinícius Ribeiro — Desenvolvedor Front-end Júnior description: Desenvolvedor Frontend Júnior com foco em Angular, React e Next.js. Portfólio com projetos, sites de clientes e estudos de caso. canonical: https://viniciusribeiro.dev.br/ last-updated: 2026-10-24 --- # Vinícius Ribeiro — Desenvolvedor Front-end Júnior Portfólio com versão legível por máquinas. Brasil. Construo experiências digitais de alta performance, com mais para descobrir sob a superfície. ## O que eu faço - Desenvolvimento frontend com Angular, React e Next.js, sobre JavaScript e TypeScript. - Interfaces responsivas e componentizadas, com integração a APIs REST e estados de interface bem resolvidos. - Sites institucionais e portfólios para clientes, do layout à implementação e publicação. ## Stack React, Next.js, Angular, TypeScript, JavaScript, Node.js, PHP, MySQL, Tailwind, GSAP, Motion, UI/UX ## Sobre ### Desenvolvimento frontend Sou desenvolvedor Front-end Júnior, com base em JavaScript e TypeScript. Construo interfaces com Angular, React e Next.js, com foco em responsividade, componentização, integração com APIs REST e estados de interface bem resolvidos. ### Da eletrônica à resolução de problemas Minha curiosidade começou desmontando eletrônicos e me levou à microeletrônica, ao reparo de equipamentos e à infraestrutura. A experiência técnica no Mackenzie fortaleceu minha capacidade de investigar problemas, entender sistemas e acompanhar uma solução até o fim. ### Formação e projetos em produção Com o apoio da minha esposa, retomei os estudos e me formei em Análise e Desenvolvimento de Sistemas pelo Mackenzie, em 2026. Desde então, desenvolvi aplicações autorais e publiquei sites para clientes de fotografia, assistência técnica e consultoria — do layout à implementação e publicação. Idiomas: Português nativo · Inglês intermediário · Espanhol intermediário ## Projetos ### Projetos em destaque Aplicações autorais em React e Angular, com foco em arquitetura, integrações e qualidade de interface. #### Vitrine · Catálogo de produtos Aplicação React · Código público · 2026 Catálogo de produtos que consome a API DummyJSON e permite explorar itens por busca, categoria e páginas de resultados. - **Contribuição:** Desenvolvimento individual da interface, rotas e camada tipada de comunicação com a API. - Busca com debounce, filtros por categoria e paginação. - Página de produto com galeria, especificações e avaliações. - Estados de carregamento, vazio e erro; tema persistido e testes unitários. - **Stack:** React 19, TypeScript, Vite, React Router, Tailwind CSS, Vitest - **Links:** [Ver código](https://github.com/vihribeiro/vitrine) #### TeamHub · Gestão de colaboradores Aplicação Angular · Demo publicada · 2026 Aplicação de gestão de colaboradores integrada à API REST DummyJSON, com autenticação de demonstração e navegação protegida. - **Contribuição:** Implementei autenticação, interceptors, rotas, listagem, detalhes e formulários de gestão. - JWT, guard de rota, busca com debounce, paginação e notificações de erro. - A API de demonstração não persiste alterações; o CRUD mantém uma camada local em localStorage. - Testes com Vitest e deploy automatizado via GitHub Actions. - **Stack:** Angular 22, TypeScript, RxJS, Signals, REST API, Vitest - **Links:** [Abrir demo](https://vihribeiro.github.io/teamhub/) · [Ver código](https://github.com/vihribeiro/teamhub) #### Seller Hub · Painel de vendas Dashboard Angular · Demo publicada · 2026 Painel de gestão de vendas com indicadores, acompanhamento de pedidos e gerenciamento de produtos para um cenário de seller. - **Contribuição:** Desenvolvi o app Angular com navegação, formulários, estados de interface e serviços de dados. - Dashboard com indicadores, gráfico mensal e vendas recentes. - Busca, filtros, paginação, detalhes de vendas e CRUD de produtos. - Interceptor simula endpoints REST para o app funcionar offline; inclui testes unitários. - **Stack:** Angular 22, TypeScript, Signals, RxJS, Reactive Forms, Vitest - **Links:** [Abrir demo](https://vihribeiro.github.io/seller-dashboard/) · [Ver código](https://github.com/vihribeiro/seller-dashboard) #### @vihribeiro/ui · Design System Biblioteca Angular · Showcase publicado · 2026 Biblioteca de componentes Angular standalone, preparada para build com ng-packagr, acompanhada por uma aplicação showcase. - **Contribuição:** Estruturei componentes reutilizáveis, tokens de design, temas e controles integrados a formulários Angular. - Componentes de botão, input, modal, toast, alerta, switch, card e outros. - Temas claro/escuro controlados por design tokens CSS. - Inputs e switches compatíveis com formulários reativos via ControlValueAccessor. - **Stack:** Angular, TypeScript, ng-packagr, Design Tokens, Vitest - **Links:** [Abrir showcase](https://vihribeiro.github.io/design-system/) · [Ver código](https://github.com/vihribeiro/design-system) ### Sites para clientes Trabalhos publicados para negócios de diferentes segmentos. #### RealFix · Assistência técnica Site institucional · Publicado · 2026 Site responsivo para uma assistência técnica especializada em produtos Apple, com apresentação de serviços e caminhos de contato. - **Contribuição:** Desenvolvi a experiência do site e organizei conteúdo, navegação e contato via WhatsApp. - Interface responsiva e conteúdo de serviços. - Integração com WhatsApp e metadados Open Graph para compartilhamento. - **Stack:** React, Vite, TypeScript, SEO, WhatsApp - **Links:** [Acessar site](https://www.realfixreparos.com.br) #### Thaís Garuffi · Fotografia Portfólio de cliente · Projeto de cliente · 2025 Portfólio de fotografia com navegação imersiva, scroll horizontal e direção visual inspirada em um livro de arte. - **Contribuição:** Desenvolvi o site responsivo e as interações visuais para apresentar o trabalho da fotógrafa. - Animações e transições com GSAP e Framer Motion. - Navegação horizontal e seções com efeitos de reveal. - **Stack:** React, TypeScript, Vite, GSAP, Framer Motion - **Links:** [Ver código](https://github.com/vihribeiro/thais-garuffi-portfolio) #### Brotto Consultoria · Cidadania Portuguesa Site institucional e conteúdo · Preview · 2026 Site para uma consultoria de cidadania portuguesa, com conteúdo informativo e caminhos de contato para clientes. - **Contribuição:** Desenvolvi a experiência responsiva, páginas de conteúdo e integrações de contato. - Blog com categorias, FAQ, formulário e integração com WhatsApp. - Páginas de privacidade e cuidados de desempenho com fontes e imagens WebP. - **Stack:** React, Vite, TypeScript, SEO, LGPD, Performance - **Links:** [Ver preview](https://brottov2.viniciusribeiro.dev.br) ### Produtos e projetos complementares Ferramentas publicadas e projetos de estudo que ampliam meu repertório. #### Calculadora de Notas EAD Extensão de navegador · Chrome Web Store · 2025 Extensão que lê as notas exibidas no portal EAD do Mackenzie, calcula a média e indica quanto falta para atingir a aprovação. - **Contribuição:** Implementei a leitura do DOM do portal, os cálculos e a interface integrada à página de notas. - Manifest V3 e parsing dos dados exibidos no portal. - Instalações por região: Estados Unidos 71%, Brasil 21%, além de Alemanha e outros locais; por idioma, português (Brasil) 88%, com registros em pt-PT e en-US. - Sistemas nas instalações: ChromeOS 60%, Windows 24% e outros 13%. - Nas desinstalações, 96% foram registradas no Brasil; por idioma, português (Brasil) 88% e registros em en-US/en-GB; por sistema, Windows 80%, macOS 16% e Linux. - **Resultado:** Dados do Chrome Web Store Developer Dashboard, de 23/09/2021 a 21/09/2026. - **Números:** Instalações 580 · Desinstalações 49 · Idioma pt-BR 88% - **Stack:** JavaScript, Manifest V3, DOM, Chrome Extension - **Links:** [Instalar na Chrome Web Store](https://chromewebstore.google.com/detail/calculadora-de-notas-ead/kkendcicomcibmghoeolididnnaklkbi?hl=pt-BR) · [Ver código](https://github.com/vihribeiro/calculadora_notas) #### Gerador de Assinaturas Ferramenta web · Código público · 2025 Ferramenta para criar assinaturas digitais, ajustar fonte e cor e exportar o resultado como PNG com fundo transparente. - **Contribuição:** Implementei a interface de personalização e a geração da imagem com Canvas HTML5. - Pré-visualização da assinatura em tempo real. - Ajustes de tipografia, cor e tamanho antes da exportação. - **Stack:** JavaScript, HTML5, Canvas - **Links:** [Ver código](https://github.com/vihribeiro/signature_generate) #### Sistema de Apostas BET Aplicação web privada · Código privado · 2025 Plataforma de apostas internas com áreas para apostadores e administração, ranking e controle de rodadas. - **Contribuição:** Desenvolvi a interface e fluxos de administração, acompanhamento de partidas e atualização de resultados. - Painéis para apostadores e administradores. - Ranking, verificação de acertos e travas por horário. - **Stack:** PHP, MySQL, JavaScript, Tailwind CSS - **Links:** Código privado #### TOTVS AI Assistant Assistente com RAG · Código privado · 2025 Assistente de perguntas e respostas sobre documentação técnica, usando recuperação de contexto para responder em linguagem natural. - **Contribuição:** Trabalhei na interface de chat e na integração com serviços de recuperação e geração de respostas. - Interface de chat responsiva. - Fluxo baseado em RAG e serviços de linguagem executados localmente. - **Stack:** React, TypeScript, FastAPI, LlamaIndex, Ollama - **Links:** Código privado ## Contato Vamos construir algo incrível? - E-mail: eu@viniciusribeiro.dev.br - LinkedIn: https://www.linkedin.com/in/viniciussantosribeiro/ - GitHub: https://github.com/vihribeiro - Currículo: https://viniciusribeiro.dev.br/viniciussantosribeiro.pdf ## Superfícies legíveis por máquina - Markdown: https://viniciusribeiro.dev.br/index.md - Índice: https://viniciusribeiro.dev.br/llms.txt - Sitemap: https://viniciusribeiro.dev.br/sitemap.xml - Robots: https://viniciusribeiro.dev.br/robots.txt