raphaelceccato.github.io/index.html at main · raphaelceccato/raphaelceccato.github.io · GitHub

1
<!DOCTYPE html><!--OWKQ0Hs9EOL7nd_UQXUmn--><html lang="pt-BR"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="https://i.imgur.com/C4U0ZeF.jpg"/><link rel="stylesheet" href="/_next/static/css/401be3bd5c9f79d2.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/9f9fba35f1b1d3c2.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-ca51ab4691a5303f.js"/><script src="/_next/static/chunks/3b176163-a138649620ab6e93.js" async=""></script><script src="/_next/static/chunks/366-ae4467cf24fd0748.js" async=""></script><script src="/_next/static/chunks/main-app-3dda01b76a86ba69.js" async=""></script><script src="/_next/static/chunks/656-be9dd27ce4040c3f.js" async=""></script><script src="/_next/static/chunks/app/page-0c9c82fca0239132.js" async=""></script><title>Raphael Ceccato Pauli - Portfólio</title><meta name="description" content="Entusiasta por programação e tecnologia, sempre procuro aprender e criar coisas novas. Portfolio com projetos em React, Node.js, TypeScript, Python e mais."/><meta name="author" content="Raphael Ceccato Pauli"/><meta name="keywords" content="developer,dev,desenvolvedor,programador,portfolio,react,nodejs,typescript,python,fullstack,web development,software"/><meta name="creator" content="Raphael Ceccato Pauli"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><meta property="og:title" content="Raphael Ceccato Pauli - Portfólio"/><meta property="og:description" content="Entusiasta por programação e tecnologia, sempre procuro aprender e criar coisas novas. Portfolio com projetos em React, Node.js, TypeScript, Python e mais."/><meta property="og:url" content="https://raphaelceccato.github.io/"/><meta property="og:site_name" content="Raphael Ceccato Pauli - Portfolio"/><meta property="og:locale" content="pt_BR"/><meta property="og:image" content="https://i.imgur.com/C4U0ZeF.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Raphael Ceccato Pauli - Developer Portfolio"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Raphael Ceccato Pauli - Portfólio"/><meta name="twitter:description" content="Entusiasta por programação e tecnologia, sempre procuro aprender e criar coisas novas."/><meta name="twitter:image" content="https://i.imgur.com/C4U0ZeF.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_5c31d3 antialiased"><div hidden=""><!--$--><!--/$--></div><div style="position:absolute;top:10px;left:10px;z-index:10"><div id="google_translate_element"></div></div><main class="pb-16"><section class="hero-section"><div class="bg1" aria-hidden="true"><div id="tsparticles"></div></div><div class="bg1-city" aria-hidden="true"></div><div class="bg1-code" aria-hidden="true"></div><div class="d-flex align-items-center justify-content-center h-100"><div class="hero-text" data-aos="fade" data-aos-offset="200px"><span aria-label="Olá mundo!" class="mb-1"><h1 id="typed1" style="display:inline"></h1></span><p>Seja bem-vindo(a) ao meu portfólio</p></div></div><div class="scroll-down" aria-hidden="true" data-aos="fade" data-aos-offset="200px" data-aos-delay="1000"></div></section><section class="about-section mt-5" data-aos="fade"><div class="container mx-auto max-w-7xl px-4"><div class="flex flex-col lg:flex-row gap-3"><div class="w-full lg:w-1/3 text-center lg:text-right flex items-center justify-center lg:justify-end"><img alt="Minha foto" width="150" height="150" decoding="async" data-nimg="1" class="profile" style="color:transparent" src="https://i.imgur.com/C4U0ZeF.jpg"/></div><div class="profile-text w-full lg:w-2/3 flex flex-col justify-center"><div style="font-weight:bold;margin:0 0 10px;color:lightgrey">QUEM SOU EU</div><div class="profile-nome"><span><p id="typed2" style="display:inline;color:white"></p></span></div><p>Entusiasta por programação e tecnologia, sempre procuro aprender e criar coisas novas</p><div style="display:flex;gap:10px"><a href="https://www.linkedin.com/in/raphael-ceccato-pauli-a26038239" aria-label="LinkedIn" class="social-linkedin"></a><a href="https://github.com/raphaelceccato" aria-label="Github" class="social-github"></a></div></div><div class="text-center mb-4"><h5 class="font-normal mt-5 mb-3">MINHAS HABILIDADES</h5><div class="flex flex-wrap gap-3 justify-center"><img alt="JavaScript" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="tech-center-icon" style="color:transparent" src="/img/javascript.png"/><img alt="TypeScript" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="tech-center-icon" style="color:transparent" src="/img/typescript.webp"/><img alt="React" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="tech-center-icon" style="color:transparent" src="/img/react_small.png"/><img alt="Node.js" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="tech-center-icon" style="color:transparent" src="/img/node2.png"/><img alt="Python" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="tech-center-icon" style="color:transparent" src="/img/python.webp"/><img alt="SQL" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="tech-center-icon" style="color:transparent" src="/img/sql2.png"/><img alt="C#" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="tech-center-icon" style="color:transparent" src="/img/csharp.png"/><img alt="C++" loading="lazy" width="40" height="40" decoding="async" data-nimg="1" class="tech-center-icon" style="color:transparent" src="/img/cpp.png"/></div></div></div></div></section><section class="main-section mt-5" data-aos="fade"><div class="text-center mt-6 mb-4"><div class="divider-small block mx-auto" aria-hidden="true"></div><h2 class="font-normal my-4">PROJETOS</h2></div><div class="container mx-auto max-w-7xl px-4"><div class="tab-navigation_tabNavigation__c_nZR "><div class="tab-navigation_tabList__3vLiU"><button class="tab-navigation_tab__gKaDr tab-navigation_active__O8ZAU" type="button">⭐ DESTAQUES</button><button class="tab-navigation_tab__gKaDr " type="button">📁 TODOS OS PROJETOS</button></div><div class="tab-navigation_tabContent__1I7Am"><div class="projects flex flex-col items-center gap-5 pt-3"><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Site de agendamento para Coworking" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/site_coworking.png"/><h1>Site de agendamento para Coworking</h1><p>Um site feito para o Parque Tecnológico Figueira do Rio Doce (sendo este administrado na época pela Secretaria Municipal de Desenvolvimento, Ciência, Tecnologia e Inovação - SMDCTI).<br><br>O site permite visualizar um calendário com os horários já agendados da Sala de Reuniões do Coworking, além de permitir novas solicitações de agendamento. A análise das solicitações é feita através de um sistema interno, que também está listado como um outro projeto neste portfólio.<br><br>Além do agendamento, o site também contém páginas de fotos, de contato e de informações sobre como chegar no local, com um mapa do Google Maps embutido.<br><br>O site foi hospedado na Vercel, e o banco de dados hospedado na Neon.</p><p><b>Linguagens:</b> <!-- -->Javascript, HTML, CSS, SQL</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-node" aria-label="node"></div><div class="logo-express" aria-label="express"></div><div class="logo-postgresql" aria-label="postgresql"></div><div class="logo-bootstrap" aria-label="bootstrap"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"><a href="https://coworkingfigueira.vercel.app" target="_blank" rel="noopener noreferrer">Acessar site</a></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Sistema interno de Coworking" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/sistema_coworking.png"/><h1>Sistema interno de Coworking</h1><p>Um sistema feito para o Parque Tecnológico Figueira do Rio Doce (sendo este administrado na época pela Secretaria Municipal de Desenvolvimento, Ciência, Tecnologia e Inovação - SMDCTI).<br><br>Nele é possível registrar o histórico de uso do Coworking, bem como dados dos usuários, com o objetivo de realizar análises posteriores sobre o uso do espaço. Também é possível visualizar as solicitações de agendamento feitas pelo site do Coworking (este sendo outro projeto listado neste portfólio), sendo possível aprovar ou rejeitar cada solicitação, fazendo com que um e-mail de resposta seja enviado para o usuário.<br><br>O sistema foi hospedado na Vercel, e o banco de dados hospedado na Neon. O front-end foi feito utilizado React, React Router, Bootstrap e Parcel, e o back-end utilizando Express, Prisma, jsonwebtoken, entre outras bibliotecas.<br><br>O sistema está hospedado na Vercel, e o banco de dados hospedado na Neon.</p><p><b>Linguagens:</b> <!-- -->Typescript, HTML, CSS, SQL</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-typescript" aria-label="typescript"></div><div class="logo-react" aria-label="react"></div><div class="logo-bootstrap" aria-label="bootstrap"></div><div class="logo-node" aria-label="node"></div><div class="logo-express" aria-label="express"></div><div class="logo-prisma" aria-label="prisma"></div><div class="logo-postgresql" aria-label="postgresql"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Sistema de Gestão de Relatórios de Segurança do Trabalho" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/cerest2.jpg"/><h1>Sistema de Gestão de Relatórios de Segurança do Trabalho</h1><p>Um sistema interno desenvolvido na Secretaria Municipal de Desenvolvimento, Ciência, Tecnologia e Inovação (SMDCTI) para o CEREST (Centro de Referência em Saúde do Trabalhador) de Governador Valadares. O sistema visa substituir os relatórios feitos em papel, preenchidos nas visitas aos locais de trabalho realizadas pela equipe.<br><br>Dentro dos relatórios, é possível anexar fotos, além de existir um campo de assinatura digital para que o responsável pelo local visitado possa assinar. Também é possível exportar os relatórios para PDF, para armazenamento ou impressão. Nas visitas o sistema será utilizado a partir de tablets, e na sede do CEREST em computadores de mesa.<br><br>No front-end do sistema foram utilizados React, React Router, Bootstrap e Parcel, e no back-end Express, Kysely, jsonwebtoken, entre outras bibliotecas. Em ambos foi usada a linguagem Typescript. O banco de dados escolhido foi o MySQL.</p><p><b>Linguagens:</b> <!-- -->Typescript, HTML, CSS, SQL</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-typescript" aria-label="typescript"></div><div class="logo-react" aria-label="react"></div><div class="logo-bootstrap" aria-label="bootstrap"></div><div class="logo-node" aria-label="node"></div><div class="logo-express" aria-label="express"></div><div class="logo-mysql" aria-label="mysql"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"><a href="/img/cerest1.jpg" data-lightbox="cerest-sistema" data-title="Interface do sistema - Tela principal">Galeria de fotos</a></div><div style="display:none"><a href="/img/cerest2.jpg" data-lightbox="cerest-sistema" data-title="Interface do sistema - Formulário de relatório"></a><a href="/img/cerest3.jpg" data-lightbox="cerest-sistema" data-title="Interface do sistema - Lista de relatórios"></a><a href="/img/cerest4.jpg" data-lightbox="cerest-sistema" data-title="Interface do sistema - Detalhes do relatório"></a><a href="/img/cerest5.jpg" data-lightbox="cerest-sistema" data-title="Interface do sistema - Assinatura digital"></a><a href="/img/cerest6.jpg" data-lightbox="cerest-sistema" data-title="Interface do sistema - Exportação PDF"></a><a href="/img/cerest7.jpg" data-lightbox="cerest-sistema" data-title="Interface do sistema - Configurações"></a></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><h1>Sistema de Gestão de CATs</h1><p>Um sistema interno atualmente em desenvolvimento na Secretaria Municipal de Desenvolvimento, Ciência, Tecnologia e Inovação (SMDCTI) para a Casa do Servidor de Governador Valadares. Atualmente, os CATs (Comunicação de Acidente de Trabalho) são feitos manualmente em programas de edição de texto, como o Microsoft Word, por exemplo. O sistema visa facilitar a criação e consulta dos CATs.<br><br>Dentro dos CATs, é possível anexar documentos como atestados, boletins de ocorrência, entre outros; além de existir um campo de assinatura digital para que os servidores possam inserir suas assinaturas. O sistema será utilizado tanto por médicos da Casa do Servidor quanto pela equipe administrativa.<br><br>No front-end do sistema foram utilizados Parcel, React, React-Bootstrap, React Router, React Query, entre outras; e, no back-end, Express, Prisma, jsonwebtoken, entre outras bibliotecas. Em ambos foi usada a linguagem Typescript. O banco de dados escolhido foi o MySQL.<br><br>Numa versão futura, o sistema poderá ter integração com o eSocial, porém este passo só será implementado após a conclusão do processo de registro para autorização de uso da API.</p><p><b>Linguagens:</b> <!-- -->Typescript, HTML, CSS, SQL</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-typescript" aria-label="typescript"></div><div class="logo-react" aria-label="react"></div><div class="logo-bootstrap" aria-label="bootstrap"></div><div class="logo-node" aria-label="node"></div><div class="logo-express" aria-label="express"></div><div class="logo-prisma" aria-label="prisma"></div><div class="logo-mysql" aria-label="mysql"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Sistema de Controle de Estoque" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/estoque1.png"/><h1>Sistema de Controle de Estoque</h1><p>Um sistema para controle de estoque desenvolvido para a Impacto Máquinas. Entre as principais funcionalidades do sistema estão a gestão de estoque, vendas, serviços realizados e orçamentos.<br><br>Quando um produto é vendido ou utilizado em algum serviço, o sistema irá atualizar o estoque automaticamente com a nova quantidade. Também é possível registrar produtos únicos, ou seja, itens usados com características únicas que foram comprados para serem consertados e revendidos posteriormente, havendo uma única unidade destes.<br><br>O sistema também permite a impressão de recibos de vendas, ordens de serviço e orçamentos. Além disso, quando a quantidade de algum produto no estoque estiver abaixo de um valor configurado, o mesmo será adicionado na lista de produtos a serem reabastecidos. Também é possível cadastrar clientes e mecânicos para que estes sejam vinculados às vendas, orçamentos e serviços.<br><br>O sistema foi desenvolvido em C#, como uma aplicação WinForms. O banco de dados utilizado foi o MySQL.</p><p><b>Linguagens:</b> <!-- -->C#, SQL</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-csharp" aria-label="csharp"></div><div class="logo-mysql" aria-label="mysql"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"><a href="/img/estoque1.png" data-lightbox="estoque-sistema" data-title="Tela principal do sistema">Galeria de fotos</a></div><div style="display:none"><a href="/img/estoque2.png" data-lightbox="estoque-sistema" data-title="Módulo de vendas"></a><a href="/img/estoque3.png" data-lightbox="estoque-sistema" data-title="Relatórios e estatísticas"></a></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Planilha Inteligente de Gestão de Leitos" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/hospital1.jpg"/><h1>Planilha Inteligente de Gestão de Leitos</h1><p>Um pequeno sistema de gerenciamento de leitos feito dentro de uma planilha do Google Sheets, atualmente em desenvolvimento na Secretaria Municipal de Desenvolvimento, Ciência, Tecnologia e Inovação (SMDCTI) para o Hospital Regional Municipal (HMGV) de Governador Valadares. Para desenvolver toda a lógica do sistema foi utilizada a linguagem Javascript através do Google Apps Script.<br><br>Entre as principais funcionalidades estão consultar os leitos disponíveis, alocar ou transferir pacientes para novos leitos e registrar dados sobre as internações dos pacientes. Existem três tipos de acesso diferentes, o de Administrador, o de Enfermeiro e o de Limpeza. Cada um tem diferentes permissões, podendo o Administrador realizar qualquer ação, o Enfermeiro criar novas solicitaçoes de leitos e confirmar movimentaçoes de pacientes, e o acesso de Limpeza marcar os leitos quando estiverem passando por higienização. Todas as ações disponíveis para os usuários podem ser encontradas no menu superior da planilha.<br><br>Por ser uma planilha online do Sheets, todos os usuários podem consultar os estados dos leitos e dos pacientes a qualquer momento, com as atualizaçoes aparecendo na tela em tempo real.</p><p><b>Linguagens:</b> <!-- -->Javascript</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-javascript" aria-label="javascript"></div><div class="logo-sheets" aria-label="sheets"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"><a href="/img/hospital1.jpg" data-lightbox="hospital-leitos" data-title="Interface principal da planilha">Galeria de fotos</a></div><div style="display:none"><a href="/img/hospital2.jpg" data-lightbox="hospital-leitos" data-title="Painel de controle de leitos"></a><a href="/img/hospital3.jpg" data-lightbox="hospital-leitos" data-title="Sistema de alocação de pacientes"></a><a href="/img/hospital4.jpg" data-lightbox="hospital-leitos" data-title="Relatórios de ocupação"></a><a href="/img/hospital5.jpg" data-lightbox="hospital-leitos" data-title="Interface de limpeza"></a><a href="/img/hospital6.jpg" data-lightbox="hospital-leitos" data-title="Dashboard administrativo"></a></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Páginas de confirmação de presença em eventos" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/evento2.jpg"/><h1>Páginas de confirmação de presença em eventos</h1><p>Duas páginas estilizadas para convite e confirmação de presença em eventos realizados pelo Departamento de Inovação da SMDCTI. Ao preencher o nome e confirmar a presença, uma mensagem de confirmação será exibida para o usuário. O nome deste será salvo automaticamente em uma planilha online do Google Sheets para posterior checagem pela equipe.<br><br>No front-end foi usado Bootstrap e Javascript, e no back-end Javascript, Google Apps Script e Google Sheets.</p><p><b>Linguagens:</b> <!-- -->Javascript</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-javascript" aria-label="javascript"></div><div class="logo-sheets" aria-label="sheets"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"><a href="/img/evento1.jpg" data-lightbox="eventos-confirmacao" data-title="Página de convite do evento">Galeria de fotos</a></div><div style="display:none"><a href="/img/evento2.jpg" data-lightbox="eventos-confirmacao" data-title="Formulário de confirmação"></a><a href="/img/evento3.jpg" data-lightbox="eventos-confirmacao" data-title="Tela de confirmação de presença"></a><a href="/img/evento4.jpg" data-lightbox="eventos-confirmacao" data-title="Dashboard de confirmações"></a></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Bot de Editais de Inovação" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/editais.jpg"/><h1>Bot de Editais de Inovação</h1><p>Um bot desenvolvido para a SMDCTI que realiza web scraping em diversos sites que publicam editais de chamadas públicas relacionadas à ciência, tecnogia e inovação. O objetivo do bot é facilitar a prospecção de chamadas públicas para divulgação das mesmas nas redes sociais da SMDCTI.<br><br>Quando uma nova chamada é encontrada, o bot adiciona automaticamente um registro em uma planilha do Google Sheets, além de exibir um alerta na tela do computador em que estiver sendo executado.<br><br>O bot foi desenvolvido em duas partes, a primeira em Python (utilizando as bibliotecas Selenium e Beautiful Soup) e a segunda em Javascript (uma pequena API feita no Google Apps Script vinculada a uma planilha do Sheets, para que o bot possa enviar os dados)</p><p><b>Linguagens:</b> <!-- -->Python, Javascript</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-python" aria-label="python"></div><div class="logo-javascript" aria-label="javascript"></div><div class="logo-sheets" aria-label="sheets"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Planilha de Ofícios" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/oficios.jpg"/><h1>Planilha de Ofícios</h1><p>Uma planilha automatizada do Google Sheets para organizar ofícios. A planilha facilita o registro organizado dos documentos e gera automaticamente modelos de documentos.</p><p><b>Linguagens:</b> <!-- -->Javascript, Excel</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-javascript" aria-label="javascript"></div><div class="logo-sheets" aria-label="sheets"></div><div class="logo-excel" aria-label="excel"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Site de e-commerce" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/ecommerce.jpg"/><h1>Site de e-commerce</h1><p>Uma loja online para demonstrar o uso de banco de dados MySQL e design responsivo. O projeto implementa o padrão MVC (Model-View-Controller).</p><p><b>Linguagens:</b> <!-- -->Javascript, HTML, CSS, SQL</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-node" aria-label="node"></div><div class="logo-express" aria-label="express"></div><div class="logo-mysql" aria-label="mysql"></div><div class="logo-bootstrap" aria-label="bootstrap"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"><a href="http://vps41095.publiccloud.com.br:8085" target="_blank" rel="noopener noreferrer">Acessar site</a><a href="https://github.com/raphaelceccato/portifolio-ecommerce" target="_blank" rel="noopener noreferrer">GitHub</a></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Leaf" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/leaf.jpg"/><h1>Leaf</h1><p>Uma pequena biblioteca/engine de jogos em C++ baseada em SDL2, OpenGL e OpenAL.</p><p><b>Linguagens:</b> <!-- -->C++, GLSL</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-cpp" aria-label="cpp"></div><div class="logo-sdl2" aria-label="sdl2"></div><div class="logo-opengl" aria-label="opengl"></div><div class="logo-openal" aria-label="openal"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"><a href="https://github.com/raphaelceccato/leaf" target="_blank" rel="noopener noreferrer">GitHub</a></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="PuxaCEP" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/puxacep.jpg"/><h1>PuxaCEP</h1><p>Uma página que demonstra o uso de API REST para obter dados de CEP.</p><p><b>Linguagens:</b> <!-- -->Javascript, HTML, CSS</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-javascript" aria-label="javascript"></div><div class="logo-bootstrap" aria-label="bootstrap"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"><a href="https://vps41095.publiccloud.com.br/puxacep" target="_blank" rel="noopener noreferrer">Acessar site</a><a href="https://github.com/raphaelceccato/portifolio-cep" target="_blank" rel="noopener noreferrer">GitHub</a></div></div></div><div class="project container" data-aos="fade"><div class="vertical-line" aria-hidden="true"><div></div></div><div style="flex-grow:1"><img alt="Sistema de Login" loading="lazy" width="300" height="200" decoding="async" data-nimg="1" class="project-photo" style="color:transparent;object-fit:contain" src="/img/login.jpg"/><h1>Sistema de Login</h1><p>Um site com sistema de login básico. Utiliza Sequelize ORM, banco de dados SQLite, hash de senhas com bcrypt e Bootstrap customizado.</p><p><b>Linguagens:</b> <!-- -->Javascript, SQL, HTML, CSS</p><div><p style="margin-bottom:2px"><b>Tecnologias utilizadas:</b></p><div class="tech-used"><div class="logo-node" aria-label="node"></div><div class="logo-express" aria-label="express"></div><div class="logo-sequelize" aria-label="sequelize"></div><div class="logo-sql" aria-label="sql"></div><div class="logo-bootstrap" aria-label="bootstrap"></div></div></div><div style="display:flex;gap:10px;margin-top:10px"><a href="http://vps41095.publiccloud.com.br:8087" target="_blank" rel="noopener noreferrer">Acessar site</a><a href="https://github.com/raphaelceccato/portifolio-login" target="_blank" rel="noopener noreferrer">GitHub</a></div></div></div></div></div></div></div></section><div class="text-center mt-5 mb-4"><a href="https://github.com/raphaelceccato?tab=repositories" target="_blank" rel="noopener noreferrer" style="display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:8px;background-color:rgba(179, 155, 235, 0.2);border:1px solid rgba(179, 155, 235, 0.4);color:orange;text-decoration:none;font-family:var(--font-opensans), sans-serif;font-size:16px;font-weight:500;transition:all 0.2s ease;position:relative;z-index:10;cursor:pointer"><span class="social-github" style="width:20px;height:20px"></span>Veja outros repositórios no GitHub</a></div></main><!--$--><!--/$--><script src="/_next/static/chunks/webpack-ca51ab4691a5303f.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[8438,[],\"\"]\n3:I[6124,[],\"\"]\n4:I[3972,[\"656\",\"static/chunks/656-be9dd27ce4040c3f.js\",\"974\",\"static/chunks/app/page-0c9c82fca0239132.js\"],\"default\"]\n5:I[1572,[\"656\",\"static/chunks/656-be9dd27ce4040c3f.js\",\"974\",\"static/chunks/app/page-0c9c82fca0239132.js\"],\"default\"]\n6:I[1942,[\"656\",\"static/chunks/656-be9dd27ce4040c3f.js\",\"974\",\"static/chunks/app/page-0c9c82fca0239132.js\"],\"default\"]\n7:I[4643,[\"656\",\"static/chunks/656-be9dd27ce4040c3f.js\",\"974\",\"static/chunks/app/page-0c9c82fca0239132.js\"],\"default\"]\n8:I[872,[\"656\",\"static/chunks/656-be9dd27ce4040c3f.js\",\"974\",\"static/chunks/app/page-0c9c82fca0239132.js\"],\"default\"]\n9:I[8679,[\"656\",\"static/chunks/656-be9dd27ce4040c3f.js\",\"974\",\"static/chunks/app/page-0c9c82fca0239132.js\"],\"default\"]\na:I[9995,[\"656\",\"static/chunks/656-be9dd27ce4040c3f.js\",\"974\",\"static/chunks/app/page-0c9c82fca0239132.js\"],\"default\"]\nb:I[3185,[],\"OutletBoundary\"]\nd:I[7006,[],\"AsyncMetadataOutlet\"]\nf:I[3185,[],\"ViewportBoundary\"]\n11:I[3185,[],\"MetadataBoundary\"]\n12:\"$Sreact.suspense\"\n14:I[5022,[],\"\"]\n:HL[\"/_next/static/css/401be3bd5c9f79d2.css\",\"style\"]\n:HL[\"/_next/static/css/9f9fba35f1b1d3c2.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"OWKQ0Hs9EOL7nd_UQXUmn\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/401be3bd5c9f79d2.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"pt-BR\",\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_5c31d3 antialiased\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{}],[\"$\",\"div\",null,{\"style\":{\"position\":\"absolute\",\"top\":\"10px\",\"left\":\"10px\",\"zIndex\":10},\"children\":[\"$\",\"$L6\",null,{}]}],[\"$\",\"main\",null,{\"className\":\"pb-16\",\"children\":[[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{}],[\"$\",\"$L9\",null,{}],[\"$\",\"$La\",null,{}]]}]],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/9f9fba35f1b1d3c2.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$Lb\",null,{\"children\":[\"$Lc\",[\"$\",\"$Ld\",null,{\"promise\":\"$@e\"}]]}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$Lf\",null,{\"children\":\"$L10\"}],null],[\"$\",\"$L11\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$12\",null,{\"fallback\":null,\"children\":\"$L13\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$14\",[]],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"10:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nc:null\n"])</script><script>self.__next_f.push([1,"15:I[2942,[],\"IconMark\"]\n"])</script><script>self.__next_f.push([1,"e:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Raphael Ceccato Pauli - Portfólio\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Entusiasta por programação e tecnologia, sempre procuro aprender e criar coisas novas. Portfolio com projetos em React, Node.js, TypeScript, Python e mais.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Raphael Ceccato Pauli\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"developer,dev,desenvolvedor,programador,portfolio,react,nodejs,typescript,python,fullstack,web development,software\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"Raphael Ceccato Pauli\"}],[\"$\",\"meta\",\"5\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"6\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"Raphael Ceccato Pauli - Portfólio\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Entusiasta por programação e tecnologia, sempre procuro aprender e criar coisas novas. Portfolio com projetos em React, Node.js, TypeScript, Python e mais.\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://raphaelceccato.github.io/\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:site_name\",\"content\":\"Raphael Ceccato Pauli - Portfolio\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:locale\",\"content\":\"pt_BR\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://i.imgur.com/C4U0ZeF.jpg\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:alt\",\"content\":\"Raphael Ceccato Pauli - Developer Portfolio\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"Raphael Ceccato Pauli - Portfólio\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Entusiasta por programação e tecnologia, sempre procuro aprender e criar coisas novas.\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://i.imgur.com/C4U0ZeF.jpg\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"$L15\",\"22\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script><script>self.__next_f.push([1,"13:\"$e:metadata\"\n"])</script></body></html>