Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Portfólio Profissional | Desenvolvedor Full-Stack & Tech Lead Salesforce</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .skill-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| } | |
| .timeline-item:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| left: 16px; | |
| top: 24px; | |
| height: calc(100% - 24px); | |
| width: 2px; | |
| background: #e2e8f0; | |
| } | |
| .dark .timeline-item:not(:last-child)::after { | |
| background: #4a5568; | |
| } | |
| .dark-mode-toggle { | |
| transition: all 0.3s ease; | |
| } | |
| .dark-mode-toggle:hover { | |
| transform: rotate(30deg); | |
| } | |
| .print-button { | |
| transition: all 0.3s ease; | |
| } | |
| .print-button:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-colors duration-300"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header with Dark Mode Toggle --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <h1 class="text-4xl font-bold bg-clip-text text-transparent gradient-bg">Portfólio Profissional</h1> | |
| <button id="darkModeToggle" class="dark-mode-toggle p-2 rounded-full bg-gray-200 dark:bg-gray-700"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:inline"></i> | |
| </button> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <section id="hero" class="mb-16"> | |
| <div class="flex flex-col md:flex-row items-center gap-8"> | |
| <div class="w-full md:w-1/3 flex justify-center"> | |
| <div class="relative"> | |
| <img id="profileImage" src="https://via.placeholder.com/300" alt="Profile" class="w-64 h-64 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-xl"> | |
| <div class="absolute -bottom-2 -right-2 bg-blue-500 text-white p-2 rounded-full"> | |
| <i class="fas fa-check text-sm"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-2/3"> | |
| <h2 id="heroTitle" class="text-3xl font-bold mb-2">Desenvolvedor Full-Stack & Tech Lead Salesforce</h2> | |
| <p id="heroSubtitle" class="text-xl text-gray-600 dark:text-gray-400 mb-4">Construindo soluções inovadoras com tecnologias de ponta</p> | |
| <p id="heroDescription" class="text-gray-700 dark:text-gray-300 mb-6">Profissional experiente com expertise em desenvolvimento full-stack e liderança de implementações Salesforce. Apaixonado por criar soluções escaláveis e mentorar equipes de desenvolvimento.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button id="contactButton" class="px-6 py-3 rounded-lg gradient-bg text-white font-medium hover:opacity-90 transition">Entre em Contato</button> | |
| <button id="downloadResume" class="px-6 py-3 rounded-lg border border-gray-300 dark:border-gray-600 font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition print-button"> | |
| <i class="fas fa-download mr-2"></i>Baixar Currículo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="mb-16"> | |
| <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 dark:border-gray-700">Sobre Mim</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md card-hover transition"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-code text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Desenvolvimento Full-Stack</h3> | |
| <p class="text-gray-600 dark:text-gray-400">Experiência em frameworks JavaScript (React, Angular, Node.js) e tecnologias backend com foco em arquitetura escalável.</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md card-hover transition"> | |
| <div class="text-purple-500 mb-4"> | |
| <i class="fab fa-salesforce text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Tech Lead Salesforce</h3> | |
| <p class="text-gray-600 dark:text-gray-400">Liderança de implementações Salesforce, desenvolvimento customizado e integrações com sistemas empresariais.</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md card-hover transition"> | |
| <div class="text-green-500 mb-4"> | |
| <i class="fas fa-users text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Liderança de Equipe</h3> | |
| <p class="text-gray-600 dark:text-gray-400">Mentoria de desenvolvedores, estabelecimento de melhores práticas e promoção de excelência técnica em equipes ágeis.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Experience Section --> | |
| <section id="experience" class="mb-16"> | |
| <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 dark:border-gray-700">Experiência Profissional</h2> | |
| <div id="experienceTimeline" class="relative pl-8"> | |
| <!-- Timeline items will be populated by JavaScript --> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="mb-16"> | |
| <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 dark:border-gray-700">Habilidades Técnicas</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">Frontend</h3> | |
| <div id="frontendSkills" class="space-y-4"> | |
| <!-- Frontend skills will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600 dark:text-purple-400">Backend & Salesforce</h3> | |
| <div id="backendSkills" class="space-y-4"> | |
| <!-- Backend skills will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="mb-16"> | |
| <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 dark:border-gray-700">Portfólio</h2> | |
| <div id="portfolioGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Portfolio items will be populated by JavaScript --> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="mb-16"> | |
| <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 dark:border-gray-700">Formação Acadêmica</h2> | |
| <div id="educationList" class="space-y-4"> | |
| <!-- Education items will be populated by JavaScript --> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="mb-16 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 dark:border-gray-700">Entre em Contato</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Informações de Contato</h3> | |
| <div id="contactInfo" class="space-y-4"> | |
| <!-- Contact info will be populated by JavaScript --> | |
| </div> | |
| <div class="mt-6 flex space-x-4"> | |
| <a id="linkedinLink" href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 text-2xl"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a id="githubLink" href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 text-2xl"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a id="twitterLink" href="#" class="text-blue-400 hover:text-blue-600 text-2xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Envie uma Mensagem</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-1">Nome</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-1">Mensagem</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700"></textarea> | |
| </div> | |
| <button type="submit" class="px-6 py-3 rounded-lg gradient-bg text-white font-medium hover:opacity-90 transition">Enviar Mensagem</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="text-center py-6 border-t border-gray-200 dark:border-gray-700"> | |
| <p id="copyright" class="text-gray-600 dark:text-gray-400">© 2023 Portfólio Profissional. Todos os direitos reservados.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Sample JSON data (in a real app, this would be loaded from an external file) | |
| const resumeData = { | |
| "personalInfo": { | |
| "name": "João Silva", | |
| "title": "Desenvolvedor Full-Stack & Tech Lead Salesforce", | |
| "description": "Profissional experiente com 8+ anos em desenvolvimento full-stack e liderança de implementações Salesforce. Apaixonado por criar soluções escaláveis, otimizar processos e mentorar equipes de desenvolvimento.", | |
| "image": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80", | |
| "email": "joao.silva@exemplo.com", | |
| "phone": "+55 (11) 98765-4321", | |
| "location": "São Paulo, SP", | |
| "linkedin": "https://linkedin.com/in/joaosilva", | |
| "github": "https://github.com/joaosilva", | |
| "twitter": "https://twitter.com/joaosilva", | |
| "copyright": "© 2023 João Silva. Todos os direitos reservados." | |
| }, | |
| "experience": [ | |
| { | |
| "company": "Soluções Tech Ltda.", | |
| "position": "Tech Lead Salesforce", | |
| "period": "2021 - Presente", | |
| "description": "Liderar uma equipe de 10 desenvolvedores no design e implementação de soluções Salesforce complexas para clientes corporativos. Estabelecimento de pipelines CI/CD e melhores práticas de desenvolvimento.", | |
| "highlights": [ | |
| "Arquitetura de uma solução CPQ personalizada que aumentou a eficiência de vendas em 30%", | |
| "Implementação de práticas DevOps reduzindo tempos de deploy em 60%", | |
| "Mentoria de desenvolvedores juniores através de code reviews e pair programming" | |
| ] | |
| }, | |
| { | |
| "company": "Inovações Digitais SA", | |
| "position": "Desenvolvedor Full-Stack Sênior", | |
| "period": "2018 - 2021", | |
| "description": "Desenvolvimento e manutenção de aplicações web usando React, Node.js e MongoDB. Liderança da migração de sistemas legados para arquitetura moderna de microsserviços.", | |
| "highlights": [ | |
| "Construção de um dashboard de analytics em tempo real usado por 500+ clientes", | |
| "Redução de tempos de resposta da API em 75% através de otimizações", | |
| "Implementação de testes automatizados aumentando a cobertura de código para 85%" | |
| ] | |
| }, | |
| { | |
| "company": "WebDev Studios", | |
| "position": "Desenvolvedor Full-Stack", | |
| "period": "2015 - 2018", | |
| "description": "Desenvolvimento de aplicações web personalizadas para clientes de diversos setores. Trabalho próximo a designers para implementação de UIs responsivas.", | |
| "highlights": [ | |
| "Criação de uma plataforma e-commerce processando R$10M+ anualmente", | |
| "Integração de gateways de pagamento e APIs de frete", | |
| "Melhoria de velocidade de carregamento de páginas em 40% através de otimizações" | |
| ] | |
| } | |
| ], | |
| "skills": { | |
| "frontend": [ | |
| {"name": "JavaScript (ES6+)", "level": 95}, | |
| {"name": "React", "level": 90}, | |
| {"name": "Angular", "level": 80}, | |
| {"name": "HTML5 & CSS3", "level": 95}, | |
| {"name": "Tailwind CSS", "level": 90}, | |
| {"name": "TypeScript", "level": 85} | |
| ], | |
| "backend": [ | |
| {"name": "Node.js", "level": 90}, | |
| {"name": "Express", "level": 85}, | |
| {"name": "Python", "level": 80}, | |
| {"name": "Salesforce Apex", "level": 95}, | |
| {"name": "Salesforce LWC", "level": 90}, | |
| {"name": "SQL & NoSQL", "level": 85}, | |
| {"name": "APIs RESTful", "level": 90}, | |
| {"name": "GraphQL", "level": 75} | |
| ] | |
| }, | |
| "portfolio": [ | |
| { | |
| "title": "CRM Salesforce Corporativo", | |
| "description": "Solução CRM personalizada para uma empresa Fortune 500 com processos de negócios complexos e integrações.", | |
| "tags": ["Salesforce", "Apex", "LWC", "Integração"], | |
| "image": "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" | |
| }, | |
| { | |
| "title": "Plataforma E-commerce", | |
| "description": "Solução full-stack de e-commerce com processamento de pagamentos, gestão de estoque e analytics.", | |
| "tags": ["React", "Node.js", "MongoDB", "Stripe"], | |
| "image": "https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80" | |
| }, | |
| { | |
| "title": "Dashboard de Saúde", | |
| "description": "Ferramenta de visualização de dados em tempo real para provedores de saúde monitorarem métricas de pacientes.", | |
| "tags": ["Angular", "D3.js", "Firebase", "Saúde"], | |
| "image": "https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" | |
| }, | |
| { | |
| "title": "Framework de Testes Automatizados", | |
| "description": "Framework de testes personalizado para implementações Salesforce com 90% de cobertura de testes.", | |
| "tags": ["Salesforce", "Apex", "Testes", "CI/CD"], | |
| "image": "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1674&q=80" | |
| }, | |
| { | |
| "title": "Arquitetura de Microsserviços", | |
| "description": "Design e implementação de arquitetura escalável de microsserviços para uma startup fintech.", | |
| "tags": ["Node.js", "Docker", "Kubernetes", "AWS"], | |
| "image": "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" | |
| }, | |
| { | |
| "title": "Backend para Aplicativo Mobile", | |
| "description": "Backend de alta performance para um aplicativo de mídia social com 100K+ usuários.", | |
| "tags": ["Node.js", "MongoDB", "Redis", "WebSockets"], | |
| "image": "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" | |
| } | |
| ], | |
| "education": [ | |
| { | |
| "institution": "Universidade de São Paulo (USP)", | |
| "degree": "Mestrado em Ciência da Computação", | |
| "period": "2013 - 2015", | |
| "description": "Especialização em Engenharia de Software e Sistemas Distribuídos." | |
| }, | |
| { | |
| "institution": "Universidade Estadual de Campinas (UNICAMP)", | |
| "degree": "Bacharelado em Ciência da Computação", | |
| "period": "2009 - 2013", | |
| "description": "Formação complementar em Administração de Empresas. Formado com honras." | |
| } | |
| ] | |
| }; | |
| // DOM Elements | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| const profileImage = document.getElementById('profileImage'); | |
| const heroTitle = document.getElementById('heroTitle'); | |
| const heroSubtitle = document.getElementById('heroSubtitle'); | |
| const heroDescription = document.getElementById('heroDescription'); | |
| const experienceTimeline = document.getElementById('experienceTimeline'); | |
| const frontendSkills = document.getElementById('frontendSkills'); | |
| const backendSkills = document.getElementById('backendSkills'); | |
| const portfolioGrid = document.getElementById('portfolioGrid'); | |
| const educationList = document.getElementById('educationList'); | |
| const contactInfo = document.getElementById('contactInfo'); | |
| const linkedinLink = document.getElementById('linkedinLink'); | |
| const githubLink = document.getElementById('githubLink'); | |
| const twitterLink = document.getElementById('twitterLink'); | |
| const copyright = document.getElementById('copyright'); | |
| const downloadResume = document.getElementById('downloadResume'); | |
| // Initialize the page with data | |
| function initPage() { | |
| // Personal Info | |
| profileImage.src = resumeData.personalInfo.image; | |
| heroTitle.textContent = resumeData.personalInfo.name; | |
| heroSubtitle.textContent = resumeData.personalInfo.title; | |
| heroDescription.textContent = resumeData.personalInfo.description; | |
| copyright.textContent = resumeData.personalInfo.copyright; | |
| // Contact Info | |
| contactInfo.innerHTML = ` | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope mr-3 text-blue-500"></i> | |
| <span>${resumeData.personalInfo.email}</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone mr-3 text-blue-500"></i> | |
| <span>${resumeData.personalInfo.phone}</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-3 text-blue-500"></i> | |
| <span>${resumeData.personalInfo.location}</span> | |
| </div> | |
| `; | |
| // Social Links | |
| linkedinLink.href = resumeData.personalInfo.linkedin; | |
| githubLink.href = resumeData.personalInfo.github; | |
| twitterLink.href = resumeData.personalInfo.twitter; | |
| // Experience | |
| experienceTimeline.innerHTML = resumeData.experience.map((exp, index) => ` | |
| <div class="timeline-item relative mb-8 pl-8"> | |
| <div class="absolute left-0 top-0 w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white"> | |
| ${index + 1} | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md card-hover transition"> | |
| <h3 class="text-xl font-semibold">${exp.position}</h3> | |
| <div class="flex flex-col sm:flex-row sm:items-center text-gray-600 dark:text-gray-400 mb-2"> | |
| <span class="font-medium">${exp.company}</span> | |
| <span class="hidden sm:inline-block mx-2">•</span> | |
| <span>${exp.period}</span> | |
| </div> | |
| <p class="text-gray-700 dark:text-gray-300 mb-3">${exp.description | |
| </html> |