[V0_FILE]jpeg:file="assets/profile-photo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/136348909-TwKpHMTOtKO5lhSwmzbXDCo5WdYE9l.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="script.js" isEdit="true" isQuickEdit="true" isMerged="true" // Variáveis globais para controle da navegação let currentPage = "home" const pages = ["home", "sobre", "formacao", "portfolio", "contato"] // Função principal para mostrar páginas - evita uso do botão voltar function showPage(pageName) { // Verifica se a página existe if (!pages.includes(pageName)) { console.error("Página não encontrada:", pageName) return } // Remove classe active de todas as páginas pages.forEach((page) => { const pageElement = document.getElementById(page) if (pageElement) { pageElement.classList.remove("active") } }) // Remove classe active de todos os links de navegação const navLinks = document.querySelectorAll(".nav-link") navLinks.forEach((link) => { link.classList.remove("active") }) // Mostra a página selecionada const targetPage = document.getElementById(pageName) if (targetPage) { targetPage.classList.add("active") currentPage = pageName } // Adiciona classe active ao link correspondente const activeLink = document.querySelector(`[onclick="showPage('${pageName}')"]`) if (activeLink) { activeLink.classList.add("active") } // Fecha o menu mobile se estiver aberto closeMobileMenu() // Rola para o topo da página suavemente window.scrollTo({ top: 0, behavior: "smooth", }) } // Função para controlar o menu hambúrguer em dispositivos móveis function toggleMobileMenu() { const navMenu = document.getElementById("nav-menu") const hamburger = document.getElementById("hamburger") // Alterna as classes para mostrar/esconder menu navMenu.classList.toggle("active") hamburger.classList.toggle("active") } // Função para fechar o menu mobile function closeMobileMenu() { const navMenu = document.getElementById("nav-menu") const hamburger = document.getElementById("hamburger") navMenu.classList.remove("active") hamburger.classList.remove("active") } // Função para validar e processar o formulário de contato function handleContactForm(event) { event.preventDefault() // Previne o envio padrão do formulário // Captura os dados do formulário const formData = new FormData(event.target) const nome = formData.get("nome").trim() const email = formData.get("email").trim() const assunto = formData.get("assunto").trim() const mensagem = formData.get("mensagem").trim() const github = formData.get("github")?.trim() || "" // Campo GitHub opcional // Validação básica dos campos obrigatórios if (!nome || !email || !mensagem) { alert("Por favor, preencha todos os campos obrigatórios.") return } // Validação simples de email const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) { alert("Por favor, insira um email válido.") return } // Simulação de envio (em um projeto real, aqui seria feita a requisição para o servidor) const submitButton = event.target.querySelector(".submit-button") const originalText = submitButton.textContent // Feedback visual durante o "envio" submitButton.textContent = "Enviando..." submitButton.disabled = true // Simula delay de envio setTimeout(() => { alert(`Obrigado, ${nome}! Sua mensagem foi enviada com sucesso. Retornarei o contato em breve. - Diogenes`) // Reset do formulário event.target.reset() // Restaura o botão submitButton.textContent = originalText submitButton.disabled = false }, 2000) } // Função para animar as barras de progresso dos idiomas function animateSkillBars() { const skillBars = document.querySelectorAll(".skill-progress") skillBars.forEach((bar) => { const width = bar.style.width bar.style.width = "0%" // Anima a barra após um pequeno delay setTimeout(() => { bar.style.width = width }, 500) }) } // Event listeners que são executados quando o DOM está carregado document.addEventListener("DOMContentLoaded", () => { // Configura o evento de clique para o menu hambúrguer const hamburger = document.getElementById("hamburger") if (hamburger) { hamburger.addEventListener("click", toggleMobileMenu) } // Configura o formulário de contato const contactForm = document.getElementById("contactForm") if (contactForm) { contactForm.addEventListener("submit", handleContactForm) } // Fecha o menu mobile quando clicar fora dele document.addEventListener("click", (event) => { const navMenu = document.getElementById("nav-menu") const hamburger = document.getElementById("hamburger") // Verifica se o clique foi fora do menu e do botão hambúrguer if (navMenu && hamburger && !navMenu.contains(event.target) && !hamburger.contains(event.target)) { closeMobileMenu() } }) // Anima as barras de progresso quando a página de formação for mostrada const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if ( mutation.type === "attributes" && mutation.attributeName === "class" && mutation.target.id === "formacao" && mutation.target.classList.contains("active") ) { // Delay para permitir que a animação de fade-in termine setTimeout(animateSkillBars, 300) } }) }) // Observa mudanças na página de formação const formacaoPage = document.getElementById("formacao") if (formacaoPage) { observer.observe(formacaoPage, { attributes: true }) } // Configura navegação por teclado (acessibilidade) document.addEventListener("keydown", (event) => { // Navegação com teclas numéricas (1-5) if (event.key >= "1" && event.key <= "5") { const pageIndex = Number.parseInt(event.key) - 1 if (pages[pageIndex]) { showPage(pages[pageIndex]) } } // Fecha menu mobile com Escape if (event.key === "Escape") { closeMobileMenu() } }) // Smooth scroll para links internos (se houver) const internalLinks = document.querySelectorAll('a[href^="#"]') internalLinks.forEach((link) => { link.addEventListener("click", function (event) { event.preventDefault() const targetId = this.getAttribute("href").substring(1) const targetElement = document.getElementById(targetId) if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start", }) } }) }) console.log("Portfólio de Diogenes Santos carregado com sucesso!") console.log("Navegação disponível:", pages) console.log("Use as teclas 1-5 para navegação rápida") }) // Função utilitária para debug (pode ser removida em produção) function getCurrentPage() { return currentPage } // Função para redimensionamento da janela (otimização) let resizeTimer window.addEventListener("resize", () => { // Debounce para evitar muitas execuções clearTimeout(resizeTimer) resizeTimer = setTimeout(() => { // Fecha menu mobile em redimensionamento closeMobileMenu() // Reajusta elementos se necessário console.log("Janela redimensionada") }, 250) }) // Previne comportamentos indesejados do navegador window.addEventListener("beforeunload", () => { // Salva a página atual no sessionStorage (opcional) sessionStorage.setItem("currentPage", currentPage) }) // Restaura a página ao recarregar (opcional) window.addEventListener("load", () => { const savedPage = sessionStorage.getItem("currentPage") if (savedPage && pages.includes(savedPage)) { showPage(savedPage) } }) [V0_FILE]typescriptreact:file="styles.css" isEdit="true" isQuickEdit="true" isMerged="true" /* Reset básico e configurações globais */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Arial", sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; } /* Container padrão para centralizar conteúdo */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header e navegação sempre visível */ .header { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: fixed; top: 0; width: 100%; z-index: 1000; } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; } .nav-brand h2 { color: #2c3e50; font-size: 1.5rem; } /* Menu de navegação horizontal */ .nav-menu { display: flex; list-style: none; gap: 2rem; } .nav-link { text-decoration: none; color: #333; font-weight: 500; padding: 0.5rem 1rem; border-radius: 5px; transition: all 0.3s ease; } .nav-link:hover, .nav-link.active { background-color: #2c3e50; color: white; } /* Botão hambúrguer para mobile (inicialmente oculto) */ .hamburger { display: none; flex-direction: column; cursor: pointer; } .hamburger span { width: 25px; height: 3px; background: #333; margin: 3px 0; transition: 0.3s; } /* Container principal com margem para o header fixo */ .main-container { margin-top: 80px; min-height: calc(100vh - 160px); } /* Estilo base para todas as páginas */ .page { display: none; padding: 2rem 0; animation: fadeIn 0.5s ease-in; } .page.active { display: block; } /* Animação de fade in para transições suaves */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .page-title { text-align: center; font-size: 2.5rem; color: #2c3e50; margin-bottom: 3rem; } /* Estilos da página Home - Seção Hero */ .hero-section { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; } .hero-content { padding: 2rem 0; } .hero-title { font-size: 3rem; color: #2c3e50; margin-bottom: 1rem; } .hero-subtitle { font-size: 1.5rem; color: #2c3e50; margin-bottom: 1.5rem; } .hero-description { font-size: 1.1rem; color: #666; margin-bottom: 2rem; line-height: 1.8; } .cta-button { background: linear-gradient(135deg, #2c3e50, #34495e); color: white; padding: 1rem 2rem; border: none; border-radius: 5px; font-size: 1.1rem; cursor: pointer; transition: transform 0.3s ease; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(44, 62, 80, 0.3); } /* Placeholder para imagem de perfil */ .hero-image { display: flex; justify-content: center; } .profile-photo { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; border: 5px solid #2c3e50; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } /* Responsividade para a foto */ @media (max-width: 768px) { .profile-photo { width: 200px; height: 200px; } } @media (max-width: 480px) { .profile-photo { width: 150px; height: 150px; } } /* Estilos da página Sobre Mim */ .about-content { max-width: 800px; margin: 0 auto; } .about-text h2 { color: #2c3e50; margin-bottom: 1rem; font-size: 1.8rem; } .about-text h3 { color: #2c3e50; margin: 2rem 0 1rem 0; font-size: 1.4rem; } .about-text p { margin-bottom: 1.5rem; text-align: justify; font-size: 1.1rem; line-height: 1.8; } .hobbies-list { list-style: none; padding-left: 0; } .hobbies-list li { padding: 0.5rem 0; font-size: 1.1rem; border-left: 3px solid #2c3e50; padding-left: 1rem; margin-bottom: 0.5rem; } /* Estilos da página Formação */ .education-section, .languages-section, .certifications-section { margin-bottom: 3rem; } .education-section h2, .languages-section h2, .certifications-section h2 { color: #2c3e50; margin-bottom: 2rem; font-size: 1.8rem; border-bottom: 2px solid #2c3e50; padding-bottom: 0.5rem; } .education-item { background: white; padding: 2rem; margin-bottom: 1.5rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .education-item h3 { color: #2c3e50; margin-bottom: 0.5rem; } .institution { color: #2c3e50; font-weight: bold; margin-bottom: 0.5rem; } .period { color: #666; font-style: italic; margin-bottom: 1rem; } .description { line-height: 1.6; } /* Grid de idiomas com barras de progresso */ .language-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .language-item { background: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .language-item h3 { margin-bottom: 1rem; color: #2c3e50; } .skill-bar { background: #ecf0f1; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 0.5rem; } .skill-progress { background: linear-gradient(90deg, #2c3e50, #34495e); height: 100%; border-radius: 5px; transition: width 0.5s ease; } .skill-level { font-size: 0.9rem; color: #666; } .certifications-list { list-style: none; background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .certifications-list li { padding: 0.8rem 0; border-bottom: 1px solid #ecf0f1; position: relative; padding-left: 2rem; } .certifications-list li:before { content: "✓"; position: absolute; left: 0; color: #27ae60; font-weight: bold; } .certifications-list li:last-child { border-bottom: none; } /* Estilos da página Portfólio */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-top: 2rem; } .portfolio-item { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .portfolio-item:hover { transform: translateY(-5px); } .project-image { height: 200px; background: linear-gradient(135deg, #2c3e50, #34495e); display: flex; align-items: center; justify-content: center; } .image-placeholder { color: white; font-size: 1.2rem; font-weight: bold; } .project-info { padding: 1.5rem; } .project-info h3 { color: #2c3e50; margin-bottom: 1rem; font-size: 1.3rem; } .project-info p { color: #666; margin-bottom: 1rem; line-height: 1.6; } .project-tech { margin-bottom: 1.5rem; } .tech-tag { display: inline-block; background: #ecf0f1; color: #2c3e50; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; margin-right: 0.5rem; margin-bottom: 0.5rem; } .project-link { display: inline-block; background: #2c3e50; color: white; padding: 0.8rem 1.5rem; text-decoration: none; border-radius: 5px; transition: background 0.3s ease; } .project-link:hover { background: #34495e; } /* Estilos da página Contato */ .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1000px; margin: 0 auto; } .contact-info h2 { color: #2c3e50; margin-bottom: 1rem; font-size: 1.8rem; } .contact-info p { color: #666; margin-bottom: 2rem; line-height: 1.8; } .contact-details { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .contact-item { display: flex; flex-direction: column; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #ecf0f1; } .contact-item:last-child { border-bottom: none; margin-bottom: 0; } .contact-item strong { color: #2c3e50; margin-bottom: 0.5rem; } .contact-item span { color: #666; } /* Formulário de contato */ .contact-form-container { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: #2c3e50; font-weight: bold; } .form-group input, .form-group textarea { width: 100%; padding: 0.8rem; border: 2px solid #ecf0f1; border-radius: 5px; font-size: 1rem; transition: border-color 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #2c3e50; } .form-group textarea { resize: vertical; min-height: 120px; } .submit-button { background: linear-gradient(135deg, #27ae60, #229954); color: white; padding: 1rem 2rem; border: none; border-radius: 5px; font-size: 1.1rem; cursor: pointer; width: 100%; transition: transform 0.3s ease; } .submit-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3); } /* Footer sempre visível */ .footer { background: #2c3e50; color: white; text-align: center; padding: 2rem 0; margin-top: 3rem; } .footer p { margin-bottom: 0.5rem; } /* Responsividade para tablets */ @media (max-width: 768px) { .navbar { padding: 1rem; } /* Menu hambúrguer ativo em mobile */ .hamburger { display: flex; } .nav-menu { position: fixed; left: -100%; top: 70px; flex-direction: column; background-color: white; width: 100%; text-align: center; transition: 0.3s; box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); padding: 2rem 0; } .nav-menu.active { left: 0; } .nav-menu li { margin: 1rem 0; } /* Ajustes da seção hero para mobile */ .hero-section { grid-template-columns: 1fr; text-align: center; padding: 2rem 1rem; } .hero-title { font-size: 2.2rem; } .profile-photo { width: 200px; height: 200px; } /* Ajustes do grid de portfólio */ .portfolio-grid { grid-template-columns: 1fr; } /* Ajustes da página de contato */ .contact-content { grid-template-columns: 1fr; gap: 2rem; } .page-title { font-size: 2rem; } } /* Responsividade para mobile */ @media (max-width: 480px) { .container { padding: 0 15px; } .hero-title { font-size: 1.8rem; } .hero-subtitle { font-size: 1.2rem; } .page-title { font-size: 1.8rem; } .language-grid { grid-template-columns: 1fr; } .profile-photo { width: 150px; height: 150px; } } /* Estados de hover e foco para melhor acessibilidade */ button:focus, input:focus, textarea:focus, a:focus { outline: 2px solid #2c3e50; outline-offset: 2px; } /* Animação para o menu hambúrguer */ .hamburger.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); } [V0_FILE]css:file="fix-image.css" isMerged="true" /* Correção específica para carregamento da imagem */ .profile-photo { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; border: 5px solid #2c3e50; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); background: #f8f9fa; display: block; } /* Fallback caso a imagem não carregue */ .profile-photo:before { content: "Foto de Diogenes"; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #2c3e50, #34495e); color: white; font-weight: bold; border-radius: 50%; } /* Responsividade da foto */ @media (max-width: 768px) { .profile-photo { width: 200px; height: 200px; } } @media (max-width: 480px) { .profile-photo { width: 150px; height: 150px; } } [V0_FILE]typescriptreact:file="index.html" isEdit="true" isQuickEdit="true" Diogenes Santos - Portfólio Pessoal

Olá, eu sou Diogenes Santos

Desenvolvedor Backend Java/Kotlin

Desenvolvedor back-end apaixonado por criar soluções robustas e eficientes, especializado em Java e Kotlin.

Sobre Mim

Quem sou eu?

Olá, meu nome é Diogenes. Sou um desenvolvedor back-end apaixonado por criar soluções robustas e eficientes, mas também me aventuro pelo front-end utilizando HTML, CSS, JavaScript e frameworks modernos. Desde que iniciei meus estudos em meados de 2023, concentrei-me no desenvolvimento em Java – linguagem na qual já foram implementados todos os meus projetos. Em 2025, ampliei meus horizontes e passei a trabalhar com Kotlin e C#, sobretudo para aprofundar meus conhecimentos no desenvolvimento mobile.

Hobbies e Interesses

💻 Desenvolvimento de aplicações backend robustas
📱 Desenvolvimento mobile com Kotlin
🎮 Jogos eletrônicos e tecnologia
📚 Leitura de documentação técnica e artigos sobre programação
🏃‍♂️ Atividades físicas e exercícios
🎵 Música e entretenimento

Foco Profissional

Minha paixão está no desenvolvimento backend, criando APIs eficientes, sistemas escaláveis e soluções que realmente fazem diferença. Sempre busco aprender novas tecnologias e aprimorar minhas habilidades em Java e Kotlin.

Formação Educacional

Educação Formal

Análise e Desenvolvimento de Sistemas

UNITER - Centro Universitário

2023 - 2027 (em andamento)

Formação focada em desenvolvimento de software, análise de sistemas, programação orientada a objetos e tecnologias modernas de desenvolvimento.

Idiomas

Português

Nativo

Inglês

Básico

Espanhol

Intermediário

Certificações e Cursos

EBAC - Especialista Java
ALURA - Java
One Oracle - Alura
Alura - Kotlin Desenvolvimento Mobile
Algaworks - Especialista Java
Algaworks - Especialista JPA
Algaworks - Especialista Spring Boot

Meu Portfólio

WhatsApp API

API robusta para integração com WhatsApp, desenvolvida em Java. Permite envio de mensagens, gerenciamento de contatos e automação de conversas.

Java Spring Boot REST API WhatsApp Business

Ver no GitHub

Mercado Livro

Sistema completo de marketplace para livros com funcionalidades de compra, venda, gerenciamento de estoque e sistema de avaliações.

Java Spring Boot JPA/Hibernate MySQL

Ver no GitHub

E-commerce Spring

E-commerce Projeto Spring

Plataforma completa de e-commerce desenvolvida com Spring Framework. Inclui carrinho de compras, sistema de pagamento e painel administrativo.

Java Spring Boot Spring Security Thymeleaf

Ver no GitHub

Mais Projetos

Outros Projetos

Diversos projetos desenvolvidos durante minha jornada de aprendizado, incluindo APIs REST, aplicações web e estudos de caso.

Java Kotlin Spring JPA

Ver GitHub

Entre em Contato

Vamos conversar?

Estou sempre aberto a novas oportunidades e projetos interessantes. Entre em contato comigo através do formulário ao lado ou pelos canais abaixo.

📧 Email: diogenescontatoofficial@hotmail.com

📱 Telefone: +55 (81) 8476-8748

📍 Localização: Brasil

💼 GitHub: https://github.com/DiogenesSSantos