@@ -20,7 +21,7 @@ export function ProjectCard({ project, index, onSelect }: ProjectCardProps) {
);
-}
+});
diff --git a/src/features/projects/components/ProjectModal.tsx b/src/features/projects/components/ProjectModal.tsx
index ffb3395..8b45f90 100644
--- a/src/features/projects/components/ProjectModal.tsx
+++ b/src/features/projects/components/ProjectModal.tsx
@@ -20,6 +20,11 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
? [project.image]
: [];
+ // reset slide index when project changes to avoid out-of-bounds
+ useEffect(() => {
+ setActiveSlide(0);
+ }, [project.id]);
+
useEffect(() => {
const handleEsc = (e: KeyboardEvent) => {
if (lightboxOpen) return;
@@ -84,14 +89,15 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
{project.image ? (
- 
+
) : (
@@ -70,7 +71,7 @@ export function ProjectCard({ project, index, onSelect }: ProjectCardProps) {
@@ -78,4 +79,4 @@ export function ProjectCard({ project, index, onSelect }: ProjectCardProps) {
@@ -104,13 +110,16 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
{allImages.length > 0 ? (
(null);
const { snakeStrokeWidth } = getSnakeDimensions(gridSize);
- const foodPos = gridToSvg(food.x, food.y, gridSize);
+ const foodPos = food ? gridToSvg(food.x, food.y, gridSize) : null;
useEffect(() => {
let animId: number;
@@ -93,11 +93,13 @@ export const GameCanvas = memo(function GameCanvas({ food, gridSize }: GameCanva
fill="none"
/>
-
-
+ {foodPos && (
+
+
+ )}
{/* Active slide */}
-
+
{/* Thumbnails */}
{allImages.length > 1 && (
setLightboxOpen(true)}
>
{allImages.length > 1 && (
@@ -118,15 +127,18 @@ export function ProjectModal({ project, onClose }: ProjectModalProps) {
{activeSlide + 1} / {allImages.length}
)}
-
{allImages.map((img, i) => (
-
-
+
))}
)}
diff --git a/src/features/projects/constants/index.ts b/src/features/projects/constants/index.ts
index 0ade286..2896ec3 100644
--- a/src/features/projects/constants/index.ts
+++ b/src/features/projects/constants/index.ts
@@ -7,14 +7,14 @@ export const PROJECTS: Project[] = [
tag: '_nansen-iot',
description: 'Plataforma de monitoramento industrial IoT e gestao de energia com dashboards em tempo real.',
details: 'Plataforma de gestao industrial IoT para monitoramento de equipamentos, linhas de producao e consumo energetico. Modulos:\n\n- Dashboard principal com metricas em tempo real\n- Gestao de produtos, equipamentos e setores produtivos\n- Registro e monitoramento de dispositivos IoT (NansenIC, NansenSensor)\n- Gerenciamento de linhas de producao\n- Faturamento energetico com dashboards comparativos e analise de consumo\n- Sistema de missoes com dashboard dedicado\n- Gestao de usuarios com controle de acesso\n- Internacionalizacao (i18n) multi-idioma\n- Loja integrada e sistema de quizzes',
- image: '/projects/nansen-login.png',
+ image: '/projects/nansen-login.jpg',
images: [
- '/projects/nansen-login.png',
- '/projects/nansen-home.png',
- '/projects/nansen-missoes.png',
- '/projects/nansen-dashboard.png',
- '/projects/nansen-faturamento.png',
- '/projects/nansen-missoes-lista.png',
+ '/projects/nansen-login.jpg',
+ '/projects/nansen-home.jpg',
+ '/projects/nansen-missoes.jpg',
+ '/projects/nansen-dashboard.jpg',
+ '/projects/nansen-faturamento.jpg',
+ '/projects/nansen-missoes-lista.jpg',
],
technologies: ['React', 'TypeScript', 'Tailwind', 'Vite', 'Ant Design', 'Zustand', 'Recharts', 'Axios', 'React Hook Form', 'React Router', 'React Toastify', 'Framer Motion'],
repoUrl: 'https://github.com/Nansen-NGE/NansenWeb',
@@ -26,14 +26,14 @@ export const PROJECTS: Project[] = [
tag: '_ia-fogobio',
description: 'Plataforma de deteccao e monitoramento de focos de incendio com IA e dados de satelite NASA.',
details: 'Plataforma de inteligencia para deteccao e monitoramento de focos de incendio utilizando dados de satelite NASA FIRMS (VIIRS - NOAA-20, NOAA-21, SNPP). Tres componentes:\n\n- Frontend: mapa interativo com MapLibre GL, modulos de Planejamento, Monitoramento e Previsao. Camadas de tipos de solo, predicao ML (accuracy > 94.3%), focos de incendio e NDVI vegetacao. Sidebar com ferramentas, filtros e dados. Temas claro/escuro, bandeiras PT/EN/ES, exportacao CSV/Excel. Status bar com coordenadas, escala, fonte INPE/NASA e timestamp do ML.\n\n- Backend API (FastAPI): pipeline ETL para extracao, transformacao e carga de dados FIRMS. PostgreSQL com SQLAlchemy, processamento com Pandas/NumPy, clustering de focos.\n\n- Modulo ML: modelo de predicao de incendios com Scikit-learn, previsao de 7-14 dias, deteccao de areas de risco por bioma e tipo de solo.',
- image: '/projects/biofogo-mapa.png',
+ image: '/projects/biofogo-mapa.jpg',
images: [
- '/projects/biofogo-mapa.png',
- '/projects/biofogo-previsao.png',
- '/projects/biofogo-monitoramento.png',
- '/projects/biofogo-dark.png',
- '/projects/biofogo-camadas.png',
- '/projects/biofogo-status.png',
+ '/projects/biofogo-mapa.jpg',
+ '/projects/biofogo-previsao.jpg',
+ '/projects/biofogo-monitoramento.jpg',
+ '/projects/biofogo-dark.jpg',
+ '/projects/biofogo-camadas.jpg',
+ '/projects/biofogo-status.jpg',
],
technologies: ['React', 'TypeScript', 'Tailwind', 'Vite', 'shadcn/ui', 'MapLibre GL', 'Recharts', 'React Hook Form', 'FastAPI', 'Python', 'PostgreSQL'],
repoUrl: 'https://github.com/IA-FogoBio-IFAM/biofogo-ia',
@@ -45,8 +45,8 @@ export const PROJECTS: Project[] = [
tag: '_prototipo-yamaha',
description: 'Prototipo de interface com React usando PrimeReact, Ant Design e graficos interativos.',
details: 'Prototipo de dashboard industrial para gestao de equipamentos e inspecoes. Modulos de: cadastro e listagem de equipamentos, registro de inspecoes com formularios complexos, dashboard com graficos interativos, sistema de login. Construido com tres bibliotecas de UI (PrimeReact, Ant Design, shadcn/ui), internacionalizacao com i18next e animacoes com Framer Motion.',
- image: '/projects/yamaha-dashboard.png',
- images: ['/projects/yamaha-dashboard.png'],
+ image: '/projects/yamaha-dashboard.jpg',
+ images: ['/projects/yamaha-dashboard.jpg'],
technologies: ['React', 'Tailwind', 'TypeScript', 'Vite', 'shadcn/ui', 'PrimeReact', 'Ant Design', 'Zustand', 'Recharts', 'Axios', 'React Toastify', 'Framer Motion'],
repoUrl: 'https://github.com/DevAlissu/prototipo-yamaha',
liveUrl: 'https://prototipo-yamaha.vercel.app',
@@ -57,7 +57,7 @@ export const PROJECTS: Project[] = [
tag: '_ms-sefaz',
description: 'Microsservico de integracao com a SEFAZ para consulta e gestao de NF-e.',
details: 'Microsservico Python com FastAPI para integracao completa com a SEFAZ. Tres modulos de endpoints:\n\n- SefazNFe-Completo: consulta NF-e completa com salvamento em multiplas tabelas, parsing de XML, download de XML e DANFE (PDF), status do servico e estatisticas do banco.\n\n- SefazNFe-Compativel: versao simplificada para consulta e teste de extracao de dados, download de XML/DANFE e teste de salvamento em banco.\n\n- Scheduler-Automacao: agendamento automatico de consultas via NSU, forcamento de consulta imediata, manifestacao de ciencia de operacao de NF-e.\n\nAutenticacao com certificados digitais PKCS12, validacao com Pydantic, servidor ASGI com Uvicorn. Deploy isolado via Docker como parte do ecossistema Sistema Melo.',
- image: '/projects/ms-sefaz.png',
+ image: '/projects/ms-sefaz.jpg',
technologies: ['FastAPI', 'Python'],
repoUrl: 'https://github.com/Sistema-Melo/microsservice_sefaz',
isPrivate: true,
@@ -68,8 +68,8 @@ export const PROJECTS: Project[] = [
tag: '_sprint-tools',
description: 'Ferramenta de gestao de sprints com retrospectiva, timer e board colaborativo.',
details: 'Ferramenta de gestao agil com board de retrospectiva colaborativo em tempo real. Colunas configuradas: "O que foi legal", "O que poderia ter sido melhor", "Sugestoes de melhoria", "O que devemos manter", "O que devemos abandonar" e "Reconhecimento". Funcionalidades de: adicionar cards anonimos, timer de sessao, revelar cards simultaneamente, resetar board. Sistema multi-usuario com contagem de participantes online.',
- image: '/projects/sprint-tools-1.png',
- images: ['/projects/sprint-tools-1.png'],
+ image: '/projects/sprint-tools-1.jpg',
+ images: ['/projects/sprint-tools-1.jpg'],
technologies: ['React', 'Tailwind', 'TypeScript', 'Vite', 'Zustand', 'React Router'],
repoUrl: 'https://github.com/DevAlissu/sprint-tools',
liveUrl: 'http://sprintpoker.duckdns.org:8000',
@@ -81,7 +81,7 @@ export const PROJECTS: Project[] = [
tag: '_codebot-saas',
description: 'Plataforma SaaS de code review automatizado com IA para equipes via Discord.',
details: 'Plataforma SaaS multi-tenant de code review automatizado com IA. Monorepo Turborepo com 4 pacotes:\n\n- API (Fastify + Drizzle ORM + PostgreSQL): rotas de auth, tenants, webhooks GitHub, estatisticas de reviews e configuracoes. Schema com planos (starter/pro/enterprise), niveis de rigor de review (relaxed/normal/strict), guias de review por tipo (frontend/backend/mobile) e tracking de tokens de IA.\n\n- Painel Web (React + Vite): login com OAuth Discord/GitHub, dashboard de metricas de PRs revisados, gerenciamento de equipe e membros, configuracao de guias de review e settings do bot.\n\n- Bot Discord: revisor de codigo automatico que analisa PRs, respeita personalidade configuravel, limite de respostas por thread, VIP users e senior authors.\n\n- Shared: tipos e utilidades compartilhados entre pacotes.\n\nAutenticacao OAuth2 via Arctic com sessoes seguras via Oslo.',
- image: '/projects/codebot-saas.png',
+ image: '/projects/codebot-saas.jpg',
technologies: ['React', 'Tailwind', 'TypeScript', 'Vite', 'Fastify', 'Drizzle', 'PostgreSQL', 'Node.js'],
repoUrl: 'https://github.com/DevAlissu/codebot-saas',
isPrivate: true,
@@ -115,14 +115,14 @@ export const PROJECTS: Project[] = [
tag: '_clone-aleam',
description: 'Clone institucional da Assembleia Legislativa do AM com acessibilidade.',
details: 'Recriacao do portal da Assembleia Legislativa do Amazonas com foco em acessibilidade (integracao VLibras). Paginas de: home institucional, CEAP (cota parlamentar) com tabelas e filtros, vencimentos com graficos Recharts. Notificacoes com React Toastify, animacoes com Framer Motion e estado com Zustand.',
- image: '/projects/aleam-ceap.png',
+ image: '/projects/aleam-ceap.jpg',
images: [
- '/projects/aleam-ceap.png',
- '/projects/aleam-home.png',
- '/projects/aleam-vlibras.png',
- '/projects/aleam-gastos.png',
- '/projects/aleam-vencimentos.png',
- '/projects/aleam-csv.png',
+ '/projects/aleam-ceap.jpg',
+ '/projects/aleam-home.jpg',
+ '/projects/aleam-vlibras.jpg',
+ '/projects/aleam-gastos.jpg',
+ '/projects/aleam-vencimentos.jpg',
+ '/projects/aleam-csv.jpg',
],
technologies: ['React', 'TypeScript', 'Vite', 'Zustand', 'Recharts', 'Axios', 'React Toastify', 'Framer Motion'],
repoUrl: 'https://github.com/DevAlissu/clone_ALEAM',
@@ -145,11 +145,11 @@ export const PROJECTS: Project[] = [
tag: '_sistema-melo',
description: 'Sistema corporativo com Next.js, autenticacao, relatorios PDF/Excel e multiplos bancos.',
details: 'ERP corporativo completo com modulos de: cadastros (clientes, fornecedores, produtos, marcas, bancos, vendedores), financeiro (contas a pagar/receber, faturamento, transferencias), compras (nova compra, historico, dashboard), estoque, vendas e relatorios. Controle de acesso por filiais com grupos de permissoes e perfis. Geracao de relatorios em PDF e Excel. Integracao dual-database com PostgreSQL (Sequelize + Prisma) e Oracle. Multi-filial com selecao de filial no login.',
- image: '/projects/sistema-melo.png',
+ image: '/projects/sistema-melo.jpg',
images: [
- '/projects/sistema-melo.png',
- '/projects/melo-vendas.png',
- '/projects/melo-contas.png',
+ '/projects/sistema-melo.jpg',
+ '/projects/melo-vendas.jpg',
+ '/projects/melo-contas.jpg',
],
technologies: ['React', 'Next.js', 'Tailwind', 'TypeScript', 'shadcn/ui', 'Axios', 'React Hook Form', 'Framer Motion', 'Prisma', 'Sequelize', 'PostgreSQL', 'Node.js'],
repoUrl: 'https://github.com/DevAlissu/Sistema_Melo',
@@ -171,19 +171,19 @@ export const PROJECTS: Project[] = [
tag: '_drawnomes',
description: 'Plataforma de sorteio de nomes e amigo secreto com lista de desejos e chat em grupo.',
details: 'Plataforma completa de sorteio de nomes para celebracoes (Pascoa, Natal, Aniversario, Dia dos Namorados, Ano Novo). Fluxo guiado em 8 passos:\n\n1. Identificacao do organizador\n2. Adicionar participantes\n3. Selecao do tipo de celebracao\n4. Definir data do evento\n5. Definir valor sugerido de presente (R$25 a R$100)\n6. Mensagem personalizada para o grupo\n7. Revisao e criacao\n8. Sorteio automatico\n\nFuncionalidades pos-sorteio: painel da celebracao com membros, lista de desejos com imagens de presentes, localizador de presentes por genero/idade, chat em grupo em tempo real, compartilhamento por link de convite, confirmacao de participantes.',
- image: '/projects/drawnomes-home.png',
+ image: '/projects/drawnomes-home.jpg',
images: [
- '/projects/drawnomes-home.png',
- '/projects/drawnomes-passo1.png',
- '/projects/drawnomes-passo1b.png',
- '/projects/drawnomes-passo2.png',
- '/projects/drawnomes-passo4.png',
- '/projects/drawnomes-passo5.png',
- '/projects/drawnomes-passo6.png',
- '/projects/drawnomes-passo7.png',
- '/projects/drawnomes-celebracao.png',
- '/projects/drawnomes-sorteio.png',
- '/projects/drawnomes-resultado.png',
+ '/projects/drawnomes-home.jpg',
+ '/projects/drawnomes-passo1.jpg',
+ '/projects/drawnomes-passo1b.jpg',
+ '/projects/drawnomes-passo2.jpg',
+ '/projects/drawnomes-passo4.jpg',
+ '/projects/drawnomes-passo5.jpg',
+ '/projects/drawnomes-passo6.jpg',
+ '/projects/drawnomes-passo7.jpg',
+ '/projects/drawnomes-celebracao.jpg',
+ '/projects/drawnomes-sorteio.jpg',
+ '/projects/drawnomes-resultado.jpg',
],
technologies: ['React', 'Tailwind', 'TypeScript', 'Vite', 'shadcn/ui', 'Zustand', 'React Query', 'Recharts', 'React Hook Form', 'Axios', 'React Router'],
repoUrl: 'https://github.com/DevAlissu/drawnomes',
@@ -196,17 +196,17 @@ export const PROJECTS: Project[] = [
tag: '_horto-app',
description: 'App mobile de adocao e cuidado de mudas nativas do Amazonas com identificacao por IA.',
details: 'Aplicativo mobile para o Horto Municipal de Manaus, desenvolvido com Flutter. Funcionalidades:\n\n- Onboarding ilustrado: adote mudas, diversidade de especies nativas (Assistacia, Acerola, Boldo, Pupunha), gerenciamento de mudas adotadas, identificacao de plantas por camera.\n\n- Cadastro personalizado com mascote "Protinho".\n\n- Catalogo de mudas por categoria: Ornamentais (Coleus, Beldroega), Frutiferas, Medicinais, com fotos reais das plantas.\n\n- Sistema de adocao com controle de tempo e quantidade.\n\n- Identificacao de plantas via camera do celular usando visao computacional (modelo treinado com Python/TensorFlow).\n\n- Gestao de plantas adotadas com descricao e acompanhamento.',
- image: '/projects/horto-catalogo.png',
+ image: '/projects/horto-catalogo.jpg',
images: [
- '/projects/horto-catalogo.png',
- '/projects/horto-adote.png',
- '/projects/horto-mudas.png',
- '/projects/horto-gerencie.png',
- '/projects/horto-camera.png',
- '/projects/horto-ola.png',
- '/projects/horto-nome.png',
- '/projects/horto-protinho.png',
- '/projects/horto-home.png',
+ '/projects/horto-catalogo.jpg',
+ '/projects/horto-adote.jpg',
+ '/projects/horto-mudas.jpg',
+ '/projects/horto-gerencie.jpg',
+ '/projects/horto-camera.jpg',
+ '/projects/horto-ola.jpg',
+ '/projects/horto-nome.jpg',
+ '/projects/horto-protinho.jpg',
+ '/projects/horto-home.jpg',
],
technologies: ['Flutter', 'Python'],
repoUrl: 'https://github.com/DevAlissu/horto-app',
diff --git a/src/features/snake-game/SnakeGame.tsx b/src/features/snake-game/SnakeGame.tsx
index 069bc0e..d8c947a 100644
--- a/src/features/snake-game/SnakeGame.tsx
+++ b/src/features/snake-game/SnakeGame.tsx
@@ -17,12 +17,14 @@ export function SnakeGame({ className = '' }: SnakeGameProps) {
const { status, score, food, gridSize, difficulty, mode, leaderboard, actions } =
useSnakeGame();
+ const { setDirection, startGame } = actions;
+
const handleDirectionClick = useCallback(
- (direction: Direction) => actions.setDirection(direction),
- [actions.setDirection],
+ (direction: Direction) => setDirection(direction),
+ [setDirection],
);
- const handleStartClick = useCallback(() => actions.startGame(), [actions.startGame]);
+ const handleStartClick = useCallback(() => startGame(), [startGame]);
const isPlaying = status === 'playing' || status === 'paused';
diff --git a/src/features/snake-game/components/GameCanvas.tsx b/src/features/snake-game/components/GameCanvas.tsx
index 58d9a49..8835a0c 100644
--- a/src/features/snake-game/components/GameCanvas.tsx
+++ b/src/features/snake-game/components/GameCanvas.tsx
@@ -5,14 +5,14 @@ import { gridToSvg, getSnakeDimensions } from '../utils/grid';
import { DIFFICULTY_SPEEDS } from '../constants';
interface GameCanvasProps {
- food: Position;
+ food: Position | null;
gridSize: number;
}
export const GameCanvas = memo(function GameCanvas({ food, gridSize }: GameCanvasProps) {
const pathRef = useRef