import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { DATA } from '@/data';
import { GlowCard } from './ui/GlowCard';
 
export const PortfolioHydrator = ({ lang }) => {
const [hydrated, setHydrated] = useState(false);
const [compilerState, setCompilerState] = useState('idle');
 
useEffect(() => {
setHydrated(true);
console.log('[Turbopack] Hydration compiler active.');
}, []);
 
const handleCompile = async (buildHook: string) => {
setCompilerState('compiling');
const response = await fetch('/api/compiler', {
method: 'POST',
body: JSON.stringify({ hook: buildHook })
});
if (response.ok) {
setCompilerState('success');
}
};
 
return (
<div className="relative overflow-hidden bg-obsidian">
<AnimatePresence mode="wait">
{hydrated && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<GlowCard className="border-tech-cyan/20">
<button onClick={() => handleCompile('dev')}>
Start Development Engine
</button>
</GlowCard>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { DATA } from '@/data';
import { GlowCard } from './ui/GlowCard';
 
export const PortfolioHydrator = ({ lang }) => {
const [hydrated, setHydrated] = useState(false);
const [compilerState, setCompilerState] = useState('idle');
 
useEffect(() => {
setHydrated(true);
console.log('[Turbopack] Hydration compiler active.');
}, []);
 
const handleCompile = async (buildHook: string) => {
setCompilerState('compiling');
const response = await fetch('/api/compiler', {
method: 'POST',
body: JSON.stringify({ hook: buildHook })
});
if (response.ok) {
setCompilerState('success');
}
};
 
return (
<div className="relative overflow-hidden bg-obsidian">
<AnimatePresence mode="wait">
{hydrated && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<GlowCard className="border-tech-cyan/20">
<button onClick={() => handleCompile('dev')}>
Start Development Engine
</button>
</GlowCard>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { DATA } from '@/data';
import { GlowCard } from './ui/GlowCard';
 
export const PortfolioHydrator = ({ lang }) => {
const [hydrated, setHydrated] = useState(false);
const [compilerState, setCompilerState] = useState('idle');
 
useEffect(() => {
setHydrated(true);
console.log('[Turbopack] Hydration compiler active.');
}, []);
 
const handleCompile = async (buildHook: string) => {
setCompilerState('compiling');
const response = await fetch('/api/compiler', {
method: 'POST',
body: JSON.stringify({ hook: buildHook })
});
if (response.ok) {
setCompilerState('success');
}
};
 
return (
<div className="relative overflow-hidden bg-obsidian">
<AnimatePresence mode="wait">
{hydrated && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<GlowCard className="border-tech-cyan/20">
<button onClick={() => handleCompile('dev')}>
Start Development Engine
</button>
</GlowCard>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
}, []);
 
const handleCompile = async (buildHook: string) => {
setCompilerState('compiling');
const response = await fetch('/api/compiler', {
method: 'POST',
body: JSON.stringify({ hook: buildHook })
});
if (response.ok) {
setCompilerState('success');
}
};
 
return (
<div className="relative overflow-hidden bg-obsidian">
<AnimatePresence mode="wait">
{hydrated && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<GlowCard className="border-tech-cyan/20">
<button onClick={() => handleCompile('dev')}>
Start Development Engine
</button>
</GlowCard>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { DATA } from '@/data';
import { GlowCard } from './ui/GlowCard';
 
export const PortfolioHydrator = ({ lang }) => {
const [hydrated, setHydrated] = useState(false);
const [compilerState, setCompilerState] = useState('idle');
 
useEffect(() => {
setHydrated(true);
console.log('[Turbopack] Hydration compiler active.');
}, []);
 
const handleCompile = async (buildHook: string) => {
setCompilerState('compiling');
const response = await fetch('/api/compiler', {
method: 'POST',
body: JSON.stringify({ hook: buildHook })
});
if (response.ok) {
setCompilerState('success');
}
};
 
return (
<div className="relative overflow-hidden bg-obsidian">
<AnimatePresence mode="wait">
{hydrated && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<GlowCard className="border-tech-cyan/20">
<button onClick={() => handleCompile('dev')}>
Start Development Engine
</button>
</GlowCard>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { DATA } from '@/data';
import { GlowCard } from './ui/GlowCard';
 
export const PortfolioHydrator = ({ lang }) => {
const [hydrated, setHydrated] = useState(false);
const [compilerState, setCompilerState] = useState('idle');
 
useEffect(() => {
setHydrated(true);
console.log('[Turbopack] Hydration compiler active.');
}, []);
 
const handleCompile = async (buildHook: string) => {
setCompilerState('compiling');
const response = await fetch('/api/compiler', {
method: 'POST',
body: JSON.stringify({ hook: buildHook })
});
if (response.ok) {
setCompilerState('success');
}
};
 
return (
<div className="relative overflow-hidden bg-obsidian">
<AnimatePresence mode="wait">
{hydrated && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<GlowCard className="border-tech-cyan/20">
<button onClick={() => handleCompile('dev')}>
Start Development Engine
</button>
</GlowCard>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { DATA } from '@/data';
import { GlowCard } from './ui/GlowCard';
 
export const PortfolioHydrator = ({ lang }) => {
const [hydrated, setHydrated] = useState(false);
const [compilerState, setCompilerState] = useState('idle');
 
useEffect(() => {
setHydrated(true);
console.log('[Turbopack] Hydration compiler active.');
 
return (
<div className="relative overflow-hidden bg-obsidian">
<AnimatePresence mode="wait">
{hydrated && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<GlowCard className="border-tech-cyan/20">
<button onClick={() => handleCompile('dev')}>
Start Development Engine
</button>
</GlowCard>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { DATA } from '@/data';
import { GlowCard } from './ui/GlowCard';
 
export const PortfolioHydrator = ({ lang }) => {
const [hydrated, setHydrated] = useState(false);
const [compilerState, setCompilerState] = useState('idle');
 
useEffect(() => {
setHydrated(true);
console.log('[Turbopack] Hydration compiler active.');
}, []);
 
const handleCompile = async (buildHook: string) => {
setCompilerState('compiling');
const response = await fetch('/api/compiler', {
method: 'POST',
body: JSON.stringify({ hook: buildHook })
});
if (response.ok) {
setCompilerState('success');
}
};
 
return (
<div className="relative overflow-hidden bg-obsidian">
<AnimatePresence mode="wait">
{hydrated && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<GlowCard className="border-tech-cyan/20">
<button onClick={() => handleCompile('dev')}>
Start Development Engine
</button>
</GlowCard>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { DATA } from '@/data';
import { GlowCard } from './ui/GlowCard';
 
export const PortfolioHydrator = ({ lang }) => {
const [hydrated, setHydrated] = useState(false);
const [compilerState, setCompilerState] = useState('idle');
 
useEffect(() => {
setHydrated(true);
console.log('[Turbopack] Hydration compiler active.');
}, []);
 
const handleCompile = async (buildHook: string) => {
setCompilerState('compiling');
const response = await fetch('/api/compiler', {
method: 'POST',
body: JSON.stringify({ hook: buildHook })
});
if (response.ok) {
setCompilerState('success');
}
};
 
return (
<div className="relative overflow-hidden bg-obsidian">
<AnimatePresence mode="wait">
{hydrated && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<GlowCard className="border-tech-cyan/20">
<button onClick={() => handleCompile('dev')}>
Start Development Engine
</button>
</GlowCard>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { DATA } from '@/data';
import { GlowCard } from './ui/GlowCard';
 
export const PortfolioHydrator = ({ lang }) => {
const [hydrated, setHydrated] = useState(false);
const [compilerState, setCompilerState] = useState('idle');
 
useEffect(() => {
setHydrated(true);
console.log('[Turbopack] Hydration compiler active.');
}, []);
 
const handleCompile = async (buildHook: string) => {
setCompilerState('compiling');
const response = await fetch('/api/compiler', {
method: 'POST',
body: JSON.stringify({ hook: buildHook })
});
if (response.ok) {
setCompilerState('success');
}
};
Disponível para negócios

|
São Bernardo do Campo, São Paulo, Brasil
Ver ProjetosBaixar CurrículoEntrar em Contato
2+
Anos de Exp.
10+
Projetos
6+
Tecnologias
JS
TS
Gabriel Bolonhez
Quem sou eu

Sobre Mim

Como Desenvolvedor Fullstack, meu foco vai além do código: busco gerar valor real para o negócio e ao usuário final.

  • Foco em resolução de problemas reais.
  • Sempre priorizando qualidade, boas práticas e agilidade.
  • Mentalidade de Autogestão e Proatividade.
  • Organização, Disciplina e Comprometimento com o que faço.
Habilidades

Tecnologias

Frontend

ReactReact NativeTypeScriptJavaScriptNext.jsTailwindAngularHTML/CSS

Backend

C# .NETNode.jsSQL

Ferramentas

Git & GitHubScrumKanbanAzure DevOpsJiraNotionInsomniaPostmanVisual StudioVSCodeAntigravityDockerAI
Principais projetos que construí

Projetos

[BUILD: OK] // HMR: ACTIVE // #1

Gerador de Currículos ATS

Projeto para facilitar a criação de currículos compatíveis com ATS e geração em PDF.

ReactTypeScriptTailwindVercel
CÓDIGOVER
[BUILD: OK] // HMR: ACTIVE // #2

Granapp - Controle Financeiro

Aplicativo moderno para controle financeiro pessoal, metas e progresso.

ReactTypeScriptTailwind
CÓDIGOVER
[BUILD: OK] // HMR: ACTIVE // #3

ReparaTec

Conecta empresas que necessitam de suporte tecnológico a técnicos qualificados.

HTML/CSSSQLJavaScriptPHP
CÓDIGOVER
[BUILD: OK] // HMR: ACTIVE // #4

FluenteIA

Aplicativo para praticar conversação de idiomas como o inglês com IA.

React NativeTypeScriptExpoFirebaseTailwind
CÓDIGOVER
[BUILD: OK] // HMR: ACTIVE // #5

VBoards

Plataforma para gerenciar projetos, apps, versões, tarefas (quadro kanban), times e processos.

Next.jsTypeScriptTailwindVercelSupabase
CÓDIGOVER
Experiência

Jornada Profissional

Desenvolvedor Fullstack (Mobile & Web)

Atual
02/2026 - Atual
Virex Tech

Atuação de ponta a ponta (End-to-End) na arquitetura, desenvolvimento e escala de aplicativos mobile e web com foco em altíssima performance, escalabilidade e viralidade. Como desenvolvedor de software em um ecossistema extremamente ágil, atuo com ownership total do ciclo de vida do produto (SDLC): - Engenharia de Produto: Engenharia ativa desde a concepção de Design (UI/UX) e prototipagem até a gestão ágil, resolução de gargalos, entrega contínua (CI/CD) de novas features e deploy em produção. - AI-Assisted Development: Integração estratégica de agentes e ferramentas de IA (LLMs) no ciclo de desenvolvimento. Atuo na validação, revisão rigorosa e cobertura de testes de código gerado, garantindo uma base limpa, segura e acelerando o time-to-market. - Arquitetura & Manutenção Escalável: Resolução de problemas complexos de concorrência, refatoração arquitetural para desacoplamento e otimização contínua de performance de renderização e de consultas. Tecnologias: • Frontend: React Native, Next.js, TypeScript. • Backend & Infra: Node.js, PostgreSQL, Docker.

Desenvolvedor Fullstack

08/2025 - 02/2026
Intertox

Atuação na sustentação evolutiva, correção de débitos técnicos e melhoria contínua de sistemas web corporativos. - Front-end: Desenvolvimento de interfaces modulares e reativas com Angular, JavaScript, HTML5 e CSS3, assegurando consistência visual e otimização de renderização. - Back-end & Integração: Sustentação de APIs e serviços, garantindo a integridade de fluxos de dados complexos.

Sustentação e Qualidade de Software

12/2024 - 08/2025
Intertox

Garantia de Qualidade (QA) e Engenharia de Requisitos focadas em alta confiabilidade e estabilidade de sistemas corporativos. - Engenharia de Requisitos & Gestão de Backlog: Análise técnica e de negócio detalhada, refinamento de user stories, definição de critérios de aceitação e prazos. Organização ágil de demandas de sustentação (bugs/melhorias) e priorização ativa do backlog das sprints no Azure DevOps. - Garantia de Qualidade (QA): Elaboração de planos de teste e execução de validações manuais e exploratórias rigorosas de novas features e patches corretivos, garantindo zero regressões. - Colaboração Ágil: Alinhamento diário (Daily Standups) com o time de engenharia e stakeholders de negócio, liderando apresentações de Sprint Review e propondo melhorias de processo contínuas. Sistemas, ferramentas e tecnologias: • Processos: Scrum, Kanban, Engenharia de Requisitos, Planos de Teste. • Techs & Ferramentas: Azure DevOps, SQL (Consultas e Validações), APIs (Insomnia), Git, Safetychem.

Service Desk e Suporte de TI

12/2023 - 12/2024
Tecnocomp

Atuação na linha de frente de suporte tecnológico e gestão de incidentes de infraestrutura corporativa. - Suporte Técnico Especializado: Diagnóstico e resolução de incidentes de hardware e software via Teams, Outlook e telefone, garantindo conformidade com SLAs de atendimento. - Gestão de Acessos & Identidades: Administração e provisionamento de privilégios de usuários no Active Directory e Azure Entra ID. - Colaboração Interdepartamental: Interface direta entre usuários finais e equipes de infraestrutura de TI de segundo/terceiro nível para escalonamento ágil.

Estudos

Formação Acadêmica

Início: 02/2023 - Previsão: 12/2026

Bacharelado em Sistemas de Informação

Centro Universitário Fundação Santo André

Foco em desenvolvimento de software, engenharia de software, análise de dados e gestão de projetos. Responsável por liderar grupos de trabalhos e projetos, garantindo qualidade e pontualidade nas entregas.

Cursos e Certificações

Bootcamp Fullstack Developer

DIO•Nov 2025

Formação Node.js

DIO•Jul 2025

Formação React Developer

DIO•Mai 2025

DIO Campus Expert

DIO•Mar 2025

Formação CSS Web Developer

DIO•Mar 2025

Fundamentos de Qualidade e Desenvolvimento de Software

DIO•Fev 2025

Formação JavaScript Developer

DIO•Nov 2024

Formação A partir do zero: lógica de programação com JavaScript

Alura•Out 2024
Entre em contato

Vamos Conversar?

Vamos criar algo extraordinário?

Estou sempre aberto a novas parcerias, propostas de negócios e discussões sobre arquitetura de software e tecnologia.

Horário Comercial
São Paulo: 00:00:00
Enviar e-mailChamar no WhatsApp