A Pen by vallyallmeida on CodePen.
Created
August 16, 2025 02:37
-
-
Save Valeriabento/0dfced8b156dea0410069abbbc1ecd42 to your computer and use it in GitHub Desktop.
Landing Page Pessoal - Valeria
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Valeria Almeida Bento | Desenvolvedora</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Slab:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #6C63FF; | |
| --primary-dark: #5651d4; | |
| --secondary: #FF6584; | |
| --dark: #2A2A3C; | |
| --light: #F8F9FA; | |
| --gray: #6C757D; | |
| --light-gray: #E9ECEF; | |
| --transition: all 0.3s ease; | |
| --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| --border-radius: 10px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| line-height: 1.6; | |
| color: var(--dark); | |
| background-color: var(--light); | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Roboto Slab', serif; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| position: relative; | |
| padding-bottom: 0.5rem; | |
| } | |
| h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 80px; | |
| height: 4px; | |
| background: var(--primary); | |
| border-radius: 2px; | |
| } | |
| section { | |
| padding: 5rem 0; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-center h2::after { | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| /* Header */ | |
| header { | |
| background: linear-gradient(135deg, var(--primary), var(--dark)); | |
| color: white; | |
| padding: 2rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .avatar { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| border: 5px solid white; | |
| box-shadow: var(--shadow); | |
| } | |
| .avatar i { | |
| font-size: 4rem; | |
| color: white; | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| font-weight: 300; | |
| margin: 0.5rem 0 1.5rem; | |
| max-width: 600px; | |
| text-align: center; | |
| } | |
| nav { | |
| width: 100%; | |
| margin-top: 1rem; | |
| } | |
| nav ul { | |
| display: flex; | |
| justify-content: center; | |
| list-style: none; | |
| flex-wrap: wrap; | |
| } | |
| nav ul li { | |
| margin: 0.5rem 1rem; | |
| } | |
| nav ul li a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| nav ul li a:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| /* Sections */ | |
| .about { | |
| background-color: white; | |
| } | |
| .about-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| .about-text { | |
| flex: 1; | |
| min-width: 300px; | |
| } | |
| .about-image { | |
| flex: 1; | |
| min-width: 300px; | |
| background: var(--light-gray); | |
| border-radius: var(--border-radius); | |
| height: 300px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: var(--shadow); | |
| } | |
| .about-image i { | |
| font-size: 8rem; | |
| color: var(--primary); | |
| opacity: 0.7; | |
| } | |
| .skills { | |
| background-color: var(--light-gray); | |
| } | |
| .skills-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .skill-category { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .skill-category:hover { | |
| transform: translateY(-10px); | |
| } | |
| .skill-category h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skill-category h3 i { | |
| margin-right: 0.8rem; | |
| } | |
| .skills-list { | |
| list-style: none; | |
| } | |
| .skills-list li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skills-list li:last-child { | |
| border-bottom: none; | |
| } | |
| .skills-list li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| } | |
| .projects { | |
| background-color: white; | |
| } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .project-card { | |
| background: var(--light); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .project-img { | |
| height: 200px; | |
| background: var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary); | |
| font-size: 4rem; | |
| } | |
| .project-content { | |
| padding: 1.5rem; | |
| } | |
| .project-content h3 { | |
| color: var(--primary); | |
| } | |
| .project-content p { | |
| margin-bottom: 1.5rem; | |
| color: var(--gray); | |
| } | |
| .project-link { | |
| display: inline-block; | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.7rem 1.5rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .project-link:hover { | |
| background: var(--primary-dark); | |
| } | |
| .aside-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .curiosities, .social-links { | |
| flex: 1; | |
| min-width: 300px; | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .curiosities h3, .social-links h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| } | |
| .curiosities ul { | |
| list-style: none; | |
| } | |
| .curiosities li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .curiosities li:last-child { | |
| border-bottom: none; | |
| } | |
| .curiosities li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| min-width: 24px; | |
| } | |
| .social-links ul { | |
| list-style: none; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .social-links ul li a { | |
| display: flex; | |
| align-items: center; | |
| background: var(--primary); | |
| color: white; | |
| text-decoration: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| .social-links ul li a:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-3px); | |
| } | |
| .social-links ul li a i { | |
| margin-right: 0.7rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 3rem 0 1.5rem; | |
| } | |
| .footer-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section { | |
| flex: 1; | |
| min-width: 250px; | |
| } | |
| .footer-section h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| border-bottom: 2px solid var(--primary); | |
| padding-bottom: 0.5rem; | |
| display: inline-block; | |
| } | |
| .contact-info { | |
| list-style: none; | |
| } | |
| .contact-info li { | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .contact-info li i { | |
| margin-right: 1rem; | |
| color: var(--primary); | |
| font-size: 1.2rem; | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| /* Responsividade */ | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| h2 { | |
| font-size: 1.7rem; | |
| } | |
| section { | |
| padding: 3rem 0; | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .about-content { | |
| flex-direction: column; | |
| } | |
| .social-links ul { | |
| flex-direction: column; | |
| } | |
| .footer-content { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Cabeçalho --> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <h1>Valeria Almeida Bento</h1> | |
| <p class="tagline">"Transformando linhas de código em soluções inovadoras."</p> | |
| <nav> | |
| <ul> | |
| <li><a href="#sobre">Sobre Mim</a></li> | |
| <li><a href="#habilidades">Habilidades</a></li> | |
| <li><a href="#projetos">Projetos</a></li> | |
| <li><a href="#extras">Curiosidades</a></li> | |
| <li><a href="#contato">Contato</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Conteúdo Principal --> | |
| <main> | |
| <!-- Sobre Mim --> | |
| <section id="sobre" class="about"> | |
| <div class="container"> | |
| <h2 class="text-center">Sobre Mim</h2> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <p>Olá! Sou a Valeria, uma entusiasta da tecnologia em transição de carreira. Comecei a estudar Análise e Desenvolvimento de Sistemas há mais de 1 ano e 6 meses, e desde então venho me dedicando intensamente ao aprendizado e desenvolvimento de minhas habilidades em programação.</p> | |
| <p>Meu foco atual é consolidar meu conhecimento em Python e JavaScript, linguagens que escolhi como base para minha carreira como desenvolvedora. Tenho como objetivo conquistar oportunidades profissionais no mercado internacional, trabalhando em projetos desafiadores que me permitam crescer continuamente.</p> | |
| <p>Ainda sou iniciante nesta jornada, mas já desenvolvi alguns projetos pessoais para praticar e estou atualmente trabalhando em uma nova ferramenta que automatiza processos para redes sociais. Acredito que a combinação de dedicação, aprendizado contínuo e paixão pela tecnologia são as chaves para o sucesso nesta área.</p> | |
| </div> | |
| <div class="about-image"> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Habilidades --> | |
| <section id="habilidades" class="skills"> | |
| <div class="container"> | |
| <h2 class="text-center">Habilidades</h2> | |
| <div class="skills-container"> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-html5"></i> Front-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> HTML5</li> | |
| <li><i class="fas fa-check"></i> CSS3</li> | |
| <li><i class="fas fa-check"></i> JavaScript</li> | |
| <li><i class="fas fa-check"></i> Responsive Design</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-python"></i> Back-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Python</li> | |
| <li><i class="fas fa-check"></i> Flask</li> | |
| <li><i class="fas fa-check"></i> Bancos de Dados (SQL)</li> | |
| <li><i class="fas fa-check"></i> API Development</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-tools"></i> Ferramentas</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Git & GitHub</li> | |
| <li><i class="fas fa-check"></i> VS Code</li> | |
| <li><i class="fas fa-check"></i> Figma (Básico)</li> | |
| <li><i class="fas fa-check"></i> Metodologias Ágeis</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projetos --> | |
| <section id="projetos" class="projects"> | |
| <div class="container"> | |
| <h2 class="text-center">Projetos</h2> | |
| <div class="projects-grid"> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fab fa-instagram"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Ferramenta de Automação para Instagram</h3> | |
| <p>Sistema desenvolvido em Python que automatiza interações no Instagram, como curtir publicações, seguir usuários e gerenciar comentários, seguindo as diretrizes da plataforma.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Gerador de Senhas Seguras</h3> | |
| <p>Aplicação web que gera senhas seguras com base nos critérios do usuário (comprimento, caracteres especiais, números). Desenvolvido com HTML, CSS e JavaScript.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Informações Extras --> | |
| <section id="extras" class="extras"> | |
| <div class="container"> | |
| <h2 class="text-center">Curiosidades & Links</h2> | |
| <div class="aside-content"> | |
| <aside class="curiosities"> | |
| <h3>Curiosidades</h3> | |
| <ul> | |
| <li><i class="fas fa-book"></i> Leio pelo menos 1 livro técnico por mês</li> | |
| <li><i class="fas fa-globe-americas"></i> Falo português, inglês e estudo espanhol</li> | |
| <li><i class="fas fa-music"></i> Toco violão nas horas vagas</li> | |
| <li><i class="fas fa-hiking"></i> Amo trilhas e contato com a natureza</li> | |
| <li><i class="fas fa-coffee"></i> Viciada em café enquanto programa</li> | |
| </ul> | |
| </aside> | |
| <aside class="social-links"> | |
| <h3>Conecte-se Comigo</h3> | |
| <ul> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-github"></i> GitHub | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-linkedin"></i> LinkedIn | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-instagram"></i> Instagram | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-twitter"></i> Twitter | |
| </a> | |
| </li> | |
| </ul> | |
| </aside> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Rodapé --> | |
| <footer id="contato"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>Entre em Contato</h3> | |
| <ul class="contact-info"> | |
| <li> | |
| <i class="fas fa-envelope"></i> | |
| [email protected] | |
| </li> | |
| <li> | |
| <i class="fas fa-map-marker-alt"></i> | |
| São Paulo, Brasil | |
| </li> | |
| <li> | |
| <i class="fas fa-phone"></i> | |
| (11) 98765-4321 | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Áreas de Interesse</h3> | |
| <p>Desenvolvimento Web Full Stack, Automação de Processos, Python, JavaScript, Desenvolvimento de APIs, Soluções de Segurança.</p> | |
| </div> | |
| </div> | |
| <!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Valeria Almeida Bento | Desenvolvedora</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Slab:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #6C63FF; | |
| --primary-dark: #5651d4; | |
| --secondary: #FF6584; | |
| --dark: #2A2A3C; | |
| --light: #F8F9FA; | |
| --gray: #6C757D; | |
| --light-gray: #E9ECEF; | |
| --transition: all 0.3s ease; | |
| --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| --border-radius: 10px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| line-height: 1.6; | |
| color: var(--dark); | |
| background-color: var(--light); | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Roboto Slab', serif; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| position: relative; | |
| padding-bottom: 0.5rem; | |
| } | |
| h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 80px; | |
| height: 4px; | |
| background: var(--primary); | |
| border-radius: 2px; | |
| } | |
| section { | |
| padding: 5rem 0; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-center h2::after { | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| /* Header */ | |
| header { | |
| background: linear-gradient(135deg, var(--primary), var(--dark)); | |
| color: white; | |
| padding: 2rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .avatar { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| border: 5px solid white; | |
| box-shadow: var(--shadow); | |
| } | |
| .avatar i { | |
| font-size: 4rem; | |
| color: white; | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| font-weight: 300; | |
| margin: 0.5rem 0 1.5rem; | |
| max-width: 600px; | |
| text-align: center; | |
| } | |
| nav { | |
| width: 100%; | |
| margin-top: 1rem; | |
| } | |
| nav ul { | |
| display: flex; | |
| justify-content: center; | |
| list-style: none; | |
| flex-wrap: wrap; | |
| } | |
| nav ul li { | |
| margin: 0.5rem 1rem; | |
| } | |
| nav ul li a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| nav ul li a:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| /* Sections */ | |
| .about { | |
| background-color: white; | |
| } | |
| .about-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| .about-text { | |
| flex: 1; | |
| min-width: 300px; | |
| } | |
| .about-image { | |
| flex: 1; | |
| min-width: 300px; | |
| background: var(--light-gray); | |
| border-radius: var(--border-radius); | |
| height: 300px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: var(--shadow); | |
| } | |
| .about-image i { | |
| font-size: 8rem; | |
| color: var(--primary); | |
| opacity: 0.7; | |
| } | |
| .skills { | |
| background-color: var(--light-gray); | |
| } | |
| .skills-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .skill-category { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .skill-category:hover { | |
| transform: translateY(-10px); | |
| } | |
| .skill-category h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skill-category h3 i { | |
| margin-right: 0.8rem; | |
| } | |
| .skills-list { | |
| list-style: none; | |
| } | |
| .skills-list li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skills-list li:last-child { | |
| border-bottom: none; | |
| } | |
| .skills-list li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| } | |
| .projects { | |
| background-color: white; | |
| } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .project-card { | |
| background: var(--light); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .project-img { | |
| height: 200px; | |
| background: var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary); | |
| font-size: 4rem; | |
| } | |
| .project-content { | |
| padding: 1.5rem; | |
| } | |
| .project-content h3 { | |
| color: var(--primary); | |
| } | |
| .project-content p { | |
| margin-bottom: 1.5rem; | |
| color: var(--gray); | |
| } | |
| .project-link { | |
| display: inline-block; | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.7rem 1.5rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .project-link:hover { | |
| background: var(--primary-dark); | |
| } | |
| .aside-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .curiosities, .social-links { | |
| flex: 1; | |
| min-width: 300px; | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .curiosities h3, .social-links h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| } | |
| .curiosities ul { | |
| list-style: none; | |
| } | |
| .curiosities li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .curiosities li:last-child { | |
| border-bottom: none; | |
| } | |
| .curiosities li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| min-width: 24px; | |
| } | |
| .social-links ul { | |
| list-style: none; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .social-links ul li a { | |
| display: flex; | |
| align-items: center; | |
| background: var(--primary); | |
| color: white; | |
| text-decoration: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| .social-links ul li a:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-3px); | |
| } | |
| .social-links ul li a i { | |
| margin-right: 0.7rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 3rem 0 1.5rem; | |
| } | |
| .footer-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section { | |
| flex: 1; | |
| min-width: 250px; | |
| } | |
| .footer-section h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| border-bottom: 2px solid var(--primary); | |
| padding-bottom: 0.5rem; | |
| display: inline-block; | |
| } | |
| .contact-info { | |
| list-style: none; | |
| } | |
| .contact-info li { | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .contact-info li i { | |
| margin-right: 1rem; | |
| color: var(--primary); | |
| font-size: 1.2rem; | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| /* Responsividade */ | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| h2 { | |
| font-size: 1.7rem; | |
| } | |
| section { | |
| padding: 3rem 0; | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .about-content { | |
| flex-direction: column; | |
| } | |
| .social-links ul { | |
| flex-direction: column; | |
| } | |
| .footer-content { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Cabeçalho --> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <h1>Valeria Almeida Bento</h1> | |
| <p class="tagline">"Transformando linhas de código em soluções inovadoras."</p> | |
| <nav> | |
| <ul> | |
| <li><a href="#sobre">Sobre Mim</a></li> | |
| <li><a href="#habilidades">Habilidades</a></li> | |
| <li><a href="#projetos">Projetos</a></li> | |
| <li><a href="#extras">Curiosidades</a></li> | |
| <li><a href="#contato">Contato</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Conteúdo Principal --> | |
| <main> | |
| <!-- Sobre Mim --> | |
| <section id="sobre" class="about"> | |
| <div class="container"> | |
| <h2 class="text-center">Sobre Mim</h2> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <p>Olá! Sou a Valeria, uma entusiasta da tecnologia em transição de carreira. Comecei a estudar Análise e Desenvolvimento de Sistemas há mais de 1 ano e 6 meses, e desde então venho me dedicando intensamente ao aprendizado e desenvolvimento de minhas habilidades em programação.</p> | |
| <p>Meu foco atual é consolidar meu conhecimento em Python e JavaScript, linguagens que escolhi como base para minha carreira como desenvolvedora. Tenho como objetivo conquistar oportunidades profissionais no mercado internacional, trabalhando em projetos desafiadores que me permitam crescer continuamente.</p> | |
| <p>Ainda sou iniciante nesta jornada, mas já desenvolvi alguns projetos pessoais para praticar e estou atualmente trabalhando em uma nova ferramenta que automatiza processos para redes sociais. Acredito que a combinação de dedicação, aprendizado contínuo e paixão pela tecnologia são as chaves para o sucesso nesta área.</p> | |
| </div> | |
| <div class="about-image"> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Habilidades --> | |
| <section id="habilidades" class="skills"> | |
| <div class="container"> | |
| <h2 class="text-center">Habilidades</h2> | |
| <div class="skills-container"> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-html5"></i> Front-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> HTML5</li> | |
| <li><i class="fas fa-check"></i> CSS3</li> | |
| <li><i class="fas fa-check"></i> JavaScript</li> | |
| <li><i class="fas fa-check"></i> Responsive Design</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-python"></i> Back-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Python</li> | |
| <li><i class="fas fa-check"></i> Flask</li> | |
| <li><i class="fas fa-check"></i> Bancos de Dados (SQL)</li> | |
| <li><i class="fas fa-check"></i> API Development</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-tools"></i> Ferramentas</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Git & GitHub</li> | |
| <li><i class="fas fa-check"></i> VS Code</li> | |
| <li><i class="fas fa-check"></i> Figma (Básico)</li> | |
| <li><i class="fas fa-check"></i> Metodologias Ágeis</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projetos --> | |
| <section id="projetos" class="projects"> | |
| <div class="container"> | |
| <h2 class="text-center">Projetos</h2> | |
| <div class="projects-grid"> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fab fa-instagram"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Ferramenta de Automação para Instagram</h3> | |
| <p>Sistema desenvolvido em Python que automatiza interações no Instagram, como curtir publicações, seguir usuários e gerenciar comentários, seguindo as diretrizes da plataforma.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Gerador de Senhas Seguras</h3> | |
| <p>Aplicação web que gera senhas seguras com base nos critérios do usuário (comprimento, caracteres especiais, números). Desenvolvido com HTML, CSS e JavaScript.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Informações Extras --> | |
| <section id="extras" class="extras"> | |
| <div class="container"> | |
| <h2 class="text-center">Curiosidades & Links</h2> | |
| <div class="aside-content"> | |
| <aside class="curiosities"> | |
| <h3>Curiosidades</h3> | |
| <ul> | |
| <li><i class="fas fa-book"></i> Leio pelo menos 1 livro técnico por mês</li> | |
| <li><i class="fas fa-globe-americas"></i> Falo português, inglês e estudo espanhol</li> | |
| <li><i class="fas fa-music"></i> Toco violão nas horas vagas</li> | |
| <li><i class="fas fa-hiking"></i> Amo trilhas e contato com a natureza</li> | |
| <li><i class="fas fa-coffee"></i> Viciada em café enquanto programa</li> | |
| </ul> | |
| </aside> | |
| <aside class="social-links"> | |
| <h3>Conecte-se Comigo</h3> | |
| <ul> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-github"></i> GitHub | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-linkedin"></i> LinkedIn | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-instagram"></i> Instagram | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-twitter"></i> Twitter | |
| </a> | |
| </li> | |
| </ul> | |
| </aside> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Rodapé --> | |
| <footer id="contato"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>Entre em Contato</h3> | |
| <ul class="contact-info"> | |
| <li> | |
| <i class="fas fa-envelope"></i> | |
| [email protected] | |
| </li> | |
| <li> | |
| <i class="fas fa-map-marker-alt"></i> | |
| São Paulo, Brasil | |
| </li> | |
| <li> | |
| <i class="fas fa-phone"></i> | |
| (11) 98765-4321 | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Áreas de Interesse</h3> | |
| <p>Desenvolvimento Web Full Stack, Automação de Processos, Python, JavaScript, Desenvolvimento de APIs, Soluções de Segurança.</p> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2025 Valeria Almeida Bento. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html><!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Valeria Almeida Bento | Desenvolvedora</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Slab:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #6C63FF; | |
| --primary-dark: #5651d4; | |
| --secondary: #FF6584; | |
| --dark: #2A2A3C; | |
| --light: #F8F9FA; | |
| --gray: #6C757D; | |
| --light-gray: #E9ECEF; | |
| --transition: all 0.3s ease; | |
| --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| --border-radius: 10px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| line-height: 1.6; | |
| color: var(--dark); | |
| background-color: var(--light); | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Roboto Slab', serif; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| position: relative; | |
| padding-bottom: 0.5rem; | |
| } | |
| h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 80px; | |
| height: 4px; | |
| background: var(--primary); | |
| border-radius: 2px; | |
| } | |
| section { | |
| padding: 5rem 0; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-center h2::after { | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| /* Header */ | |
| header { | |
| background: linear-gradient(135deg, var(--primary), var(--dark)); | |
| color: white; | |
| padding: 2rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .avatar { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| border: 5px solid white; | |
| box-shadow: var(--shadow); | |
| } | |
| .avatar i { | |
| font-size: 4rem; | |
| color: white; | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| font-weight: 300; | |
| margin: 0.5rem 0 1.5rem; | |
| max-width: 600px; | |
| text-align: center; | |
| } | |
| nav { | |
| width: 100%; | |
| margin-top: 1rem; | |
| } | |
| nav ul { | |
| display: flex; | |
| justify-content: center; | |
| list-style: none; | |
| flex-wrap: wrap; | |
| } | |
| nav ul li { | |
| margin: 0.5rem 1rem; | |
| } | |
| nav ul li a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| nav ul li a:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| /* Sections */ | |
| .about { | |
| background-color: white; | |
| } | |
| .about-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| .about-text { | |
| flex: 1; | |
| min-width: 300px; | |
| } | |
| .about-image { | |
| flex: 1; | |
| min-width: 300px; | |
| background: var(--light-gray); | |
| border-radius: var(--border-radius); | |
| height: 300px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: var(--shadow); | |
| } | |
| .about-image i { | |
| font-size: 8rem; | |
| color: var(--primary); | |
| opacity: 0.7; | |
| } | |
| .skills { | |
| background-color: var(--light-gray); | |
| } | |
| .skills-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .skill-category { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .skill-category:hover { | |
| transform: translateY(-10px); | |
| } | |
| .skill-category h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skill-category h3 i { | |
| margin-right: 0.8rem; | |
| } | |
| .skills-list { | |
| list-style: none; | |
| } | |
| .skills-list li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skills-list li:last-child { | |
| border-bottom: none; | |
| } | |
| .skills-list li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| } | |
| .projects { | |
| background-color: white; | |
| } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .project-card { | |
| background: var(--light); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .project-img { | |
| height: 200px; | |
| background: var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary); | |
| font-size: 4rem; | |
| } | |
| .project-content { | |
| padding: 1.5rem; | |
| } | |
| .project-content h3 { | |
| color: var(--primary); | |
| } | |
| .project-content p { | |
| margin-bottom: 1.5rem; | |
| color: var(--gray); | |
| } | |
| .project-link { | |
| display: inline-block; | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.7rem 1.5rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .project-link:hover { | |
| background: var(--primary-dark); | |
| } | |
| .aside-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .curiosities, .social-links { | |
| flex: 1; | |
| min-width: 300px; | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .curiosities h3, .social-links h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| } | |
| .curiosities ul { | |
| list-style: none; | |
| } | |
| .curiosities li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .curiosities li:last-child { | |
| border-bottom: none; | |
| } | |
| .curiosities li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| min-width: 24px; | |
| } | |
| .social-links ul { | |
| list-style: none; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .social-links ul li a { | |
| display: flex; | |
| align-items: center; | |
| background: var(--primary); | |
| color: white; | |
| text-decoration: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| .social-links ul li a:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-3px); | |
| } | |
| .social-links ul li a i { | |
| margin-right: 0.7rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 3rem 0 1.5rem; | |
| } | |
| .footer-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section { | |
| flex: 1; | |
| min-width: 250px; | |
| } | |
| .footer-section h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| border-bottom: 2px solid var(--primary); | |
| padding-bottom: 0.5rem; | |
| display: inline-block; | |
| } | |
| .contact-info { | |
| list-style: none; | |
| } | |
| .contact-info li { | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .contact-info li i { | |
| margin-right: 1rem; | |
| color: var(--primary); | |
| font-size: 1.2rem; | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| /* Responsividade */ | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| h2 { | |
| font-size: 1.7rem; | |
| } | |
| section { | |
| padding: 3rem 0; | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .about-content { | |
| flex-direction: column; | |
| } | |
| .social-links ul { | |
| flex-direction: column; | |
| } | |
| .footer-content { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Cabeçalho --> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <h1>Valeria Almeida Bento</h1> | |
| <p class="tagline">"Transformando linhas de código em soluções inovadoras."</p> | |
| <nav> | |
| <ul> | |
| <li><a href="#sobre">Sobre Mim</a></li> | |
| <li><a href="#habilidades">Habilidades</a></li> | |
| <li><a href="#projetos">Projetos</a></li> | |
| <li><a href="#extras">Curiosidades</a></li> | |
| <li><a href="#contato">Contato</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Conteúdo Principal --> | |
| <main> | |
| <!-- Sobre Mim --> | |
| <section id="sobre" class="about"> | |
| <div class="container"> | |
| <h2 class="text-center">Sobre Mim</h2> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <p>Olá! Sou a Valeria, uma entusiasta da tecnologia em transição de carreira. Comecei a estudar Análise e Desenvolvimento de Sistemas há mais de 1 ano e 6 meses, e desde então venho me dedicando intensamente ao aprendizado e desenvolvimento de minhas habilidades em programação.</p> | |
| <p>Meu foco atual é consolidar meu conhecimento em Python e JavaScript, linguagens que escolhi como base para minha carreira como desenvolvedora. Tenho como objetivo conquistar oportunidades profissionais no mercado internacional, trabalhando em projetos desafiadores que me permitam crescer continuamente.</p> | |
| <p>Ainda sou iniciante nesta jornada, mas já desenvolvi alguns projetos pessoais para praticar e estou atualmente trabalhando em uma nova ferramenta que automatiza processos para redes sociais. Acredito que a combinação de dedicação, aprendizado contínuo e paixão pela tecnologia são as chaves para o sucesso nesta área.</p> | |
| </div> | |
| <div class="about-image"> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Habilidades --> | |
| <section id="habilidades" class="skills"> | |
| <div class="container"> | |
| <h2 class="text-center">Habilidades</h2> | |
| <div class="skills-container"> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-html5"></i> Front-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> HTML5</li> | |
| <li><i class="fas fa-check"></i> CSS3</li> | |
| <li><i class="fas fa-check"></i> JavaScript</li> | |
| <li><i class="fas fa-check"></i> Responsive Design</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-python"></i> Back-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Python</li> | |
| <li><i class="fas fa-check"></i> Flask</li> | |
| <li><i class="fas fa-check"></i> Bancos de Dados (SQL)</li> | |
| <li><i class="fas fa-check"></i> API Development</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-tools"></i> Ferramentas</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Git & GitHub</li> | |
| <li><i class="fas fa-check"></i> VS Code</li> | |
| <li><i class="fas fa-check"></i> Figma (Básico)</li> | |
| <li><i class="fas fa-check"></i> Metodologias Ágeis</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projetos --> | |
| <section id="projetos" class="projects"> | |
| <div class="container"> | |
| <h2 class="text-center">Projetos</h2> | |
| <div class="projects-grid"> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fab fa-instagram"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Ferramenta de Automação para Instagram</h3> | |
| <p>Sistema desenvolvido em Python que automatiza interações no Instagram, como curtir publicações, seguir usuários e gerenciar comentários, seguindo as diretrizes da plataforma.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Gerador de Senhas Seguras</h3> | |
| <p>Aplicação web que gera senhas seguras com base nos critérios do usuário (comprimento, caracteres especiais, números). Desenvolvido com HTML, CSS e JavaScript.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Informações Extras --> | |
| <section id="extras" class="extras"> | |
| <div class="container"> | |
| <h2 class="text-center">Curiosidades & Links</h2> | |
| <div class="aside-content"> | |
| <aside class="curiosities"> | |
| <h3>Curiosidades</h3> | |
| <ul> | |
| <li><i class="fas fa-book"></i> Leio pelo menos 1 livro técnico por mês</li> | |
| <li><i class="fas fa-globe-americas"></i> Falo português, inglês e estudo espanhol</li> | |
| <li><i class="fas fa-music"></i> Toco violão nas horas vagas</li> | |
| <li><i class="fas fa-hiking"></i> Amo trilhas e contato com a natureza</li> | |
| <li><i class="fas fa-coffee"></i> Viciada em café enquanto programa</li> | |
| </ul> | |
| </aside> | |
| <aside class="social-links"> | |
| <h3>Conecte-se Comigo</h3> | |
| <ul> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-github"></i> GitHub | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-linkedin"></i> LinkedIn | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-instagram"></i> Instagram | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-twitter"></i> Twitter | |
| </a> | |
| </li> | |
| </ul> | |
| </aside> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Rodapé --> | |
| <footer id="contato"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>Entre em Contato</h3> | |
| <ul class="contact-info"> | |
| <li> | |
| <i class="fas fa-envelope"></i> | |
| [email protected] | |
| </li> | |
| <li> | |
| <i class="fas fa-map-marker-alt"></i> | |
| São Paulo, Brasil | |
| </li> | |
| <li> | |
| <i class="fas fa-phone"></i> | |
| (11) 98765-4321 | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Áreas de Interesse</h3> | |
| <p>Desenvolvimento Web Full Stack, Automação de Processos, Python, JavaScript, Desenvolvimento de APIs, Soluções de Segurança.</p> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2025 Valeria Almeida Bento. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> <div class="copyright"> | |
| <p>© 2025 Valeria Almeida Bento. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Valeria Almeida Bento | Desenvolvedora</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Slab:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #6C63FF; | |
| --primary-dark: #5651d4; | |
| --secondary: #FF6584; | |
| --dark: #2A2A3C; | |
| --light: #F8F9FA; | |
| --gray: #6C757D; | |
| --light-gray: #E9ECEF; | |
| --transition: all 0.3s ease; | |
| --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| --border-radius: 10px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| line-height: 1.6; | |
| color: var(--dark); | |
| background-color: var(--light); | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Roboto Slab', serif; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| position: relative; | |
| padding-bottom: 0.5rem; | |
| } | |
| h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 80px; | |
| height: 4px; | |
| background: var(--primary); | |
| border-radius: 2px; | |
| } | |
| section { | |
| padding: 5rem 0; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-center h2::after { | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| /* Header */ | |
| header { | |
| background: linear-gradient(135deg, var(--primary), var(--dark)); | |
| color: white; | |
| padding: 2rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .avatar { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| border: 5px solid white; | |
| box-shadow: var(--shadow); | |
| } | |
| .avatar i { | |
| font-size: 4rem; | |
| color: white; | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| font-weight: 300; | |
| margin: 0.5rem 0 1.5rem; | |
| max-width: 600px; | |
| text-align: center; | |
| } | |
| nav { | |
| width: 100%; | |
| margin-top: 1rem; | |
| } | |
| nav ul { | |
| display: flex; | |
| justify-content: center; | |
| list-style: none; | |
| flex-wrap: wrap; | |
| } | |
| nav ul li { | |
| margin: 0.5rem 1rem; | |
| } | |
| nav ul li a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| nav ul li a:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| /* Sections */ | |
| .about { | |
| background-color: white; | |
| } | |
| .about-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| .about-text { | |
| flex: 1; | |
| min-width: 300px; | |
| } | |
| .about-image { | |
| flex: 1; | |
| min-width: 300px; | |
| background: var(--light-gray); | |
| border-radius: var(--border-radius); | |
| height: 300px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: var(--shadow); | |
| } | |
| .about-image i { | |
| font-size: 8rem; | |
| color: var(--primary); | |
| opacity: 0.7; | |
| } | |
| .skills { | |
| background-color: var(--light-gray); | |
| } | |
| .skills-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .skill-category { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .skill-category:hover { | |
| transform: translateY(-10px); | |
| } | |
| .skill-category h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skill-category h3 i { | |
| margin-right: 0.8rem; | |
| } | |
| .skills-list { | |
| list-style: none; | |
| } | |
| .skills-list li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skills-list li:last-child { | |
| border-bottom: none; | |
| } | |
| .skills-list li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| } | |
| .projects { | |
| background-color: white; | |
| } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .project-card { | |
| background: var(--light); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .project-img { | |
| height: 200px; | |
| background: var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary); | |
| font-size: 4rem; | |
| } | |
| .project-content { | |
| padding: 1.5rem; | |
| } | |
| .project-content h3 { | |
| color: var(--primary); | |
| } | |
| .project-content p { | |
| margin-bottom: 1.5rem; | |
| color: var(--gray); | |
| } | |
| .project-link { | |
| display: inline-block; | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.7rem 1.5rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .project-link:hover { | |
| background: var(--primary-dark); | |
| } | |
| .aside-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .curiosities, .social-links { | |
| flex: 1; | |
| min-width: 300px; | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .curiosities h3, .social-links h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| } | |
| .curiosities ul { | |
| list-style: none; | |
| } | |
| .curiosities li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .curiosities li:last-child { | |
| border-bottom: none; | |
| } | |
| .curiosities li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| min-width: 24px; | |
| } | |
| .social-links ul { | |
| list-style: none; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .social-links ul li a { | |
| display: flex; | |
| align-items: center; | |
| background: var(--primary); | |
| color: white; | |
| text-decoration: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| .social-links ul li a:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-3px); | |
| } | |
| .social-links ul li a i { | |
| margin-right: 0.7rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 3rem 0 1.5rem; | |
| } | |
| .footer-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section { | |
| flex: 1; | |
| min-width: 250px; | |
| } | |
| .footer-section h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| border-bottom: 2px solid var(--primary); | |
| padding-bottom: 0.5rem; | |
| display: inline-block; | |
| } | |
| .contact-info { | |
| list-style: none; | |
| } | |
| .contact-info li { | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .contact-info li i { | |
| margin-right: 1rem; | |
| color: var(--primary); | |
| font-size: 1.2rem; | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| /* Responsividade */ | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| h2 { | |
| font-size: 1.7rem; | |
| } | |
| section { | |
| padding: 3rem 0; | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .about-content { | |
| flex-direction: column; | |
| } | |
| .social-links ul { | |
| flex-direction: column; | |
| } | |
| .footer-content { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Cabeçalho --> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <h1>Valeria Almeida Bento</h1> | |
| <p class="tagline">"Transformando linhas de código em soluções inovadoras."</p> | |
| <nav> | |
| <ul> | |
| <li><a href="#sobre">Sobre Mim</a></li> | |
| <li><a href="#habilidades">Habilidades</a></li> | |
| <li><a href="#projetos">Projetos</a></li> | |
| <li><a href="#extras">Curiosidades</a></li> | |
| <li><a href="#contato">Contato</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Conteúdo Principal --> | |
| <main> | |
| <!-- Sobre Mim --> | |
| <section id="sobre" class="about"> | |
| <div class="container"> | |
| <h2 class="text-center">Sobre Mim</h2> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <p>Olá! Sou a Valeria, uma entusiasta da tecnologia em transição de carreira. Comecei a estudar Análise e Desenvolvimento de Sistemas há mais de 1 ano e 6 meses, e desde então venho me dedicando intensamente ao aprendizado e desenvolvimento de minhas habilidades em programação.</p> | |
| <p>Meu foco atual é consolidar meu conhecimento em Python e JavaScript, linguagens que escolhi como base para minha carreira como desenvolvedora. Tenho como objetivo conquistar oportunidades profissionais no mercado internacional, trabalhando em projetos desafiadores que me permitam crescer continuamente.</p> | |
| <p>Ainda sou iniciante nesta jornada, mas já desenvolvi alguns projetos pessoais para praticar e estou atualmente trabalhando em uma nova ferramenta que automatiza processos para redes sociais. Acredito que a combinação de dedicação, aprendizado contínuo e paixão pela tecnologia são as chaves para o sucesso nesta área.</p> | |
| </div> | |
| <div class="about-image"> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Habilidades --> | |
| <section id="habilidades" class="skills"> | |
| <div class="container"> | |
| <h2 class="text-center">Habilidades</h2> | |
| <div class="skills-container"> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-html5"></i> Front-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> HTML5</li> | |
| <li><i class="fas fa-check"></i> CSS3</li> | |
| <li><i class="fas fa-check"></i> JavaScript</li> | |
| <li><i class="fas fa-check"></i> Responsive Design</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-python"></i> Back-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Python</li> | |
| <li><i class="fas fa-check"></i> Flask</li> | |
| <li><i class="fas fa-check"></i> Bancos de Dados (SQL)</li> | |
| <li><i class="fas fa-check"></i> API Development</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-tools"></i> Ferramentas</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Git & GitHub</li> | |
| <li><i class="fas fa-check"></i> VS Code</li> | |
| <li><i class="fas fa-check"></i> Figma (Básico)</li> | |
| <li><i class="fas fa-check"></i> Metodologias Ágeis</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projetos --> | |
| <section id="projetos" class="projects"> | |
| <div class="container"> | |
| <h2 class="text-center">Projetos</h2> | |
| <div class="projects-grid"> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fab fa-instagram"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Ferramenta de Automação para Instagram</h3> | |
| <p>Sistema desenvolvido em Python que automatiza interações no Instagram, como curtir publicações, seguir usuários e gerenciar comentários, seguindo as diretrizes da plataforma.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Gerador de Senhas Seguras</h3> | |
| <p>Aplicação web que gera senhas seguras com base nos critérios do usuário (comprimento, caracteres especiais, números). Desenvolvido com HTML, CSS e JavaScript.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Informações Extras --> | |
| <section id="extras" class="extras"> | |
| <div class="container"> | |
| <h2 class="text-center">Curiosidades & Links</h2> | |
| <div class="aside-content"> | |
| <aside class="curiosities"> | |
| <h3>Curiosidades</h3> | |
| <ul> | |
| <li><i class="fas fa-book"></i> Leio pelo menos 1 livro técnico por mês</li> | |
| <li><i class="fas fa-globe-americas"></i> Falo português, inglês e estudo espanhol</li> | |
| <li><i class="fas fa-music"></i> Toco violão nas horas vagas</li> | |
| <li><i class="fas fa-hiking"></i> Amo trilhas e contato com a natureza</li> | |
| <li><i class="fas fa-coffee"></i> Viciada em café enquanto programa</li> | |
| </ul> | |
| </aside> | |
| <aside class="social-links"> | |
| <h3>Conecte-se Comigo</h3> | |
| <ul> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-github"></i> GitHub | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-linkedin"></i> LinkedIn | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-instagram"></i> Instagram | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-twitter"></i> Twitter | |
| </a> | |
| </li> | |
| </ul> | |
| </aside> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Rodapé --> | |
| <footer id="contato"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>Entre em Contato</h3> | |
| <ul class="contact-info"> | |
| <li> | |
| <i class="fas fa-envelope"></i> | |
| [email protected] | |
| </li> | |
| <li> | |
| <i class="fas fa-map-marker-alt"></i> | |
| São Paulo, Brasil | |
| </li> | |
| <li> | |
| <i class="fas fa-phone"></i> | |
| (11) 98765-4321 | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Áreas de <!DOCTYPE html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Valeria Almeida Bento | Desenvolvedora</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Slab:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #6C63FF; | |
| --primary-dark: #5651d4; | |
| --secondary: #FF6584; | |
| --dark: #2A2A3C; | |
| --light: #F8F9FA; | |
| --gray: #6C757D; | |
| --light-gray: #E9ECEF; | |
| --transition: all 0.3s ease; | |
| --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| --border-radius: 10px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| line-height: 1.6; | |
| color: var(--dark); | |
| background-color: var(--light); | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Roboto Slab', serif; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| position: relative; | |
| padding-bottom: 0.5rem; | |
| } | |
| h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 80px; | |
| height: 4px; | |
| background: var(--primary); | |
| border-radius: 2px; | |
| } | |
| section { | |
| padding: 5rem 0; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-center h2::after { | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| /* Header */ | |
| header { | |
| background: linear-gradient(135deg, var(--primary), var(--dark)); | |
| color: white; | |
| padding: 2rem 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .avatar { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| border: 5px solid white; | |
| box-shadow: var(--shadow); | |
| } | |
| .avatar i { | |
| font-size: 4rem; | |
| color: white; | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| font-weight: 300; | |
| margin: 0.5rem 0 1.5rem; | |
| max-width: 600px; | |
| text-align: center; | |
| } | |
| nav { | |
| width: 100%; | |
| margin-top: 1rem; | |
| } | |
| nav ul { | |
| display: flex; | |
| justify-content: center; | |
| list-style: none; | |
| flex-wrap: wrap; | |
| } | |
| nav ul li { | |
| margin: 0.5rem 1rem; | |
| } | |
| nav ul li a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| padding: 0.5rem 1rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| nav ul li a:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| /* Sections */ | |
| .about { | |
| background-color: white; | |
| } | |
| .about-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| .about-text { | |
| flex: 1; | |
| min-width: 300px; | |
| } | |
| .about-image { | |
| flex: 1; | |
| min-width: 300px; | |
| background: var(--light-gray); | |
| border-radius: var(--border-radius); | |
| height: 300px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: var(--shadow); | |
| } | |
| .about-image i { | |
| font-size: 8rem; | |
| color: var(--primary); | |
| opacity: 0.7; | |
| } | |
| .skills { | |
| background-color: var(--light-gray); | |
| } | |
| .skills-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .skill-category { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .skill-category:hover { | |
| transform: translateY(-10px); | |
| } | |
| .skill-category h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skill-category h3 i { | |
| margin-right: 0.8rem; | |
| } | |
| .skills-list { | |
| list-style: none; | |
| } | |
| .skills-list li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .skills-list li:last-child { | |
| border-bottom: none; | |
| } | |
| .skills-list li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| } | |
| .projects { | |
| background-color: white; | |
| } | |
| .projects-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .project-card { | |
| background: var(--light); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); | |
| } | |
| .project-img { | |
| height: 200px; | |
| background: var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary); | |
| font-size: 4rem; | |
| } | |
| .project-content { | |
| padding: 1.5rem; | |
| } | |
| .project-content h3 { | |
| color: var(--primary); | |
| } | |
| .project-content p { | |
| margin-bottom: 1.5rem; | |
| color: var(--gray); | |
| } | |
| .project-link { | |
| display: inline-block; | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.7rem 1.5rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .project-link:hover { | |
| background: var(--primary-dark); | |
| } | |
| .aside-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 2rem; | |
| margin-top: 3rem; | |
| } | |
| .curiosities, .social-links { | |
| flex: 1; | |
| min-width: 300px; | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .curiosities h3, .social-links h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| } | |
| .curiosities ul { | |
| list-style: none; | |
| } | |
| .curiosities li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid var(--light-gray); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .curiosities li:last-child { | |
| border-bottom: none; | |
| } | |
| .curiosities li i { | |
| color: var(--primary); | |
| margin-right: 0.8rem; | |
| min-width: 24px; | |
| } | |
| .social-links ul { | |
| list-style: none; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .social-links ul li a { | |
| display: flex; | |
| align-items: center; | |
| background: var(--primary); | |
| color: white; | |
| text-decoration: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 30px; | |
| transition: var(--transition); | |
| } | |
| .social-links ul li a:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-3px); | |
| } | |
| .social-links ul li a i { | |
| margin-right: 0.7rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 3rem 0 1.5rem; | |
| } | |
| .footer-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section { | |
| flex: 1; | |
| min-width: 250px; | |
| } | |
| .footer-section h3 { | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| border-bottom: 2px solid var(--primary); | |
| padding-bottom: 0.5rem; | |
| display: inline-block; | |
| } | |
| .contact-info { | |
| list-style: none; | |
| } | |
| .contact-info li { | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .contact-info li i { | |
| margin-right: 1rem; | |
| color: var(--primary); | |
| font-size: 1.2rem; | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.9rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| /* Responsividade */ | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| h2 { | |
| font-size: 1.7rem; | |
| } | |
| section { | |
| padding: 3rem 0; | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .about-content { | |
| flex-direction: column; | |
| } | |
| .social-links ul { | |
| flex-direction: column; | |
| } | |
| .footer-content { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Cabeçalho --> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <h1>Valeria Almeida Bento</h1> | |
| <p class="tagline">"Transformando linhas de código em soluções inovadoras."</p> | |
| <nav> | |
| <ul> | |
| <li><a href="#sobre">Sobre Mim</a></li> | |
| <li><a href="#habilidades">Habilidades</a></li> | |
| <li><a href="#projetos">Projetos</a></li> | |
| <li><a href="#extras">Curiosidades</a></li> | |
| <li><a href="#contato">Contato</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Conteúdo Principal --> | |
| <main> | |
| <!-- Sobre Mim --> | |
| <section id="sobre" class="about"> | |
| <div class="container"> | |
| <h2 class="text-center">Sobre Mim</h2> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <p>Olá! Sou a Valeria, uma entusiasta da tecnologia em transição de carreira. Comecei a estudar Análise e Desenvolvimento de Sistemas há mais de 1 ano e 6 meses, e desde então venho me dedicando intensamente ao aprendizado e desenvolvimento de minhas habilidades em programação.</p> | |
| <p>Meu foco atual é consolidar meu conhecimento em Python e JavaScript, linguagens que escolhi como base para minha carreira como desenvolvedora. Tenho como objetivo conquistar oportunidades profissionais no mercado internacional, trabalhando em projetos desafiadores que me permitam crescer continuamente.</p> | |
| <p>Ainda sou iniciante nesta jornada, mas já desenvolvi alguns projetos pessoais para praticar e estou atualmente trabalhando em uma nova ferramenta que automatiza processos para redes sociais. Acredito que a combinação de dedicação, aprendizado contínuo e paixão pela tecnologia são as chaves para o sucesso nesta área.</p> | |
| </div> | |
| <div class="about-image"> | |
| <i class="fas fa-laptop-code"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Habilidades --> | |
| <section id="habilidades" class="skills"> | |
| <div class="container"> | |
| <h2 class="text-center">Habilidades</h2> | |
| <div class="skills-container"> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-html5"></i> Front-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> HTML5</li> | |
| <li><i class="fas fa-check"></i> CSS3</li> | |
| <li><i class="fas fa-check"></i> JavaScript</li> | |
| <li><i class="fas fa-check"></i> Responsive Design</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fab fa-python"></i> Back-End</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Python</li> | |
| <li><i class="fas fa-check"></i> Flask</li> | |
| <li><i class="fas fa-check"></i> Bancos de Dados (SQL)</li> | |
| <li><i class="fas fa-check"></i> API Development</li> | |
| </ul> | |
| </div> | |
| <div class="skill-category"> | |
| <h3><i class="fas fa-tools"></i> Ferramentas</h3> | |
| <ul class="skills-list"> | |
| <li><i class="fas fa-check"></i> Git & GitHub</li> | |
| <li><i class="fas fa-check"></i> VS Code</li> | |
| <li><i class="fas fa-check"></i> Figma (Básico)</li> | |
| <li><i class="fas fa-check"></i> Metodologias Ágeis</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projetos --> | |
| <section id="projetos" class="projects"> | |
| <div class="container"> | |
| <h2 class="text-center">Projetos</h2> | |
| <div class="projects-grid"> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fab fa-instagram"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Ferramenta de Automação para Instagram</h3> | |
| <p>Sistema desenvolvido em Python que automatiza interações no Instagram, como curtir publicações, seguir usuários e gerenciar comentários, seguindo as diretrizes da plataforma.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| <article class="project-card"> | |
| <div class="project-img"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div class="project-content"> | |
| <h3>Gerador de Senhas Seguras</h3> | |
| <p>Aplicação web que gera senhas seguras com base nos critérios do usuário (comprimento, caracteres especiais, números). Desenvolvido com HTML, CSS e JavaScript.</p> | |
| <a href="#" class="project-link">Ver Detalhes</a> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Informações Extras --> | |
| <section id="extras" class="extras"> | |
| <div class="container"> | |
| <h2 class="text-center">Curiosidades & Links</h2> | |
| <div class="aside-content"> | |
| <aside class="curiosities"> | |
| <h3>Curiosidades</h3> | |
| <ul> | |
| <li><i class="fas fa-book"></i> Leio pelo menos 1 livro técnico por mês</li> | |
| <li><i class="fas fa-globe-americas"></i> Falo português, inglês e estudo espanhol</li> | |
| <li><i class="fas fa-music"></i> Toco violão nas horas vagas</li> | |
| <li><i class="fas fa-hiking"></i> Amo trilhas e contato com a natureza</li> | |
| <li><i class="fas fa-coffee"></i> Viciada em café enquanto programa</li> | |
| </ul> | |
| </aside> | |
| <aside class="social-links"> | |
| <h3>Conecte-se Comigo</h3> | |
| <ul> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-github"></i> GitHub | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-linkedin"></i> LinkedIn | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-instagram"></i> Instagram | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" target="_blank"> | |
| <i class="fab fa-twitter"></i> Twitter | |
| </a> | |
| </li> | |
| </ul> | |
| </aside> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Rodapé --> | |
| <footer id="contato"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>Entre em Contato</h3> | |
| <ul class="contact-info"> | |
| <li> | |
| <i class="fas fa-envelope"></i> | |
| [email protected] | |
| </li> | |
| <li> | |
| <i class="fas fa-map-marker-alt"></i> | |
| São Paulo, Brasil | |
| </li> | |
| <li> | |
| <i class="fas fa-phone"></i> | |
| (11) 98765-4321 | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Áreas de Interesse</h3> | |
| <p>Desenvolvimento Web Full Stack, Automação de Processos, Python, JavaScript, Desenvolvimento de APIs, Soluções de Segurança.</p> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2025 Valeria Almeida Bento. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html>Interesse</h3> | |
| <p>Desenvolvimento Web Full Stack, Automação de Processos, Python, JavaScript, Desenvolvimento de APIs, Soluções de Segurança.</p> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2025 Valeria Almeida Bento. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment