Skip to content

Instantly share code, notes, and snippets.

@Titoalmwida

Titoalmwida/index.html

Created November 30, 2024 00:56
Show Gist options
  • Save Titoalmwida/51b62c00e6f9158e93de25f5b1b99bf5 to your computer and use it in GitHub Desktop.
Save Titoalmwida/51b62c00e6f9158e93de25f5b1b99bf5 to your computer and use it in GitHub Desktop.
Download ZIP
portifolio eliton tito definitivo 1.0
Raw
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio - Eliton Tito de Araújo Bento</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<h1>ELITON TITO DE ARAUJO BENTO</h1>
</div>
<nav>
<a href="#hero" class="active">Home</a>
<a href="#experiencia">Experiência</a>
<a href="#educacao">Educação</a>
<a href="#habilidades">Habilidades</a>
<a href="#contato">Contato</a>
</nav>
<button class="menu-toggle">☰</button>
</header>
<section id="hero" class="hero">
<div class="hero-content">
<h2>Bem-vindo ao meu Portfólio</h2>
<p>Cursando Ciência da Computação na UERR, com experiência em Help Desk e paixão por programação.</p>
</div>
</section>
<section id="experiencia" class="experiencia">
<div class="container">
<h2>Experiência Profissional</h2>
<article class="experiencia-item">
<h3>CONAB - Help Desk</h3>
<p>Atualmente trabalhando no setor de Help Desk na CONAB (Companhia Nacional de Abastecimento).</p>
</article>
<article class="experiencia-item">
<h3>Guaraná Mania - Atendente</h3>
<p>Trabalhei como atendente no Guaraná Mania em 2021, oferecendo um excelente atendimento ao cliente.</p>
</article>
</div>
</section>
<section id="educacao" class="educacao">
<div class="container">
<h2>Educação</h2>
<article class="educacao-item">
<h3>Universidade Estadual de Roraima (UERR)</h3>
<p>Cursando o 6º semestre de Ciência da Computação, adquirindo conhecimentos avançados em programação e desenvolvimento de sistemas.</p>
</article>
<article class="educacao-item">
<h3>Ensino Médio - Centro de Educação SESC</h3>
<p>Concluí o Ensino Médio no Centro de Educação SESC em 2020, com forte foco em disciplinas de exatas e tecnologia.</p>
</article>
</div>
</section>
<section id="habilidades" class="habilidades">
<div class="container">
<h2>Habilidades</h2>
<ul>
<li>Programação em Python</li>
<li>Desenvolvimento Web (HTML, CSS, JavaScript)</li>
<li>Banco de Dados (MySQL, PostgreSQL)</li>
<li>Redes de Computadores</li>
<li>Suporte Técnico e Help Desk</li>
</ul>
</div>
</section>
<section id="contato" class="contato">
<div class="container">
<h2>Contato</h2>
<form id="contact-form" method="post">
<input type="text" class="input-field" name="name" placeholder="Seu Nome" required>
<input type="email" class="input-field" name="email" placeholder="Seu E-mail" required>
<textarea class="input-field" name="message" placeholder="Sua Mensagem" rows="5" required></textarea>
<button type="submit" class="submit-btn">Enviar</button>
</form>
</div>
</section>
<footer>
<p>© 2024 Eliton Tito de Araújo Bento - Todos os direitos reservados.</p>
<div class="social-media">
<a href="https://www.instagram.com/titoxs.___/" target="_blank" class="instagram-btn">
<span>Instagram</span>
</a>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>
Raw
script.js
document.addEventListener("DOMContentLoaded", () => {
const navLinks = document.querySelectorAll("nav a");
const sections = document.querySelectorAll("section");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop - 100;
if (scrollY >= sectionTop) {
current = section.getAttribute("id");
}
});
navLinks.forEach((link) => {
link.classList.remove("active");
if (link.getAttribute("href") === `#${current}`) {
link.classList.add("active");
}
});
});
// Formulário de contato
document.getElementById("contact-form").addEventListener("submit", function (e) {
e.preventDefault(); // Evita o envio real do formulário
const name = e.target.name.value;
const email = e.target.email.value;
const message = e.target.message.value;
// Exibe a mensagem do formulário
alert(`Mensagem recebida!\nNome: ${name}\nE-mail: ${email}\nMensagem: ${message}`);
// Limpa os campos do formulário
e.target.reset();
});
});
Raw
style.css
/* Reset básico e fontes */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
line-height: 1.6;
background-color: #111;
color: #ddd;
overflow-x: hidden;
font-size: 18px;
}
/* Header */
header {
background-color: #121212;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: sticky;
top: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
z-index: 10;
transform: translateY(-100%);
animation: slideInDown 0.6s ease-out forwards;
transition: background-color 0.5s ease;
}
header:hover {
background-color: #222;
}
header .logo h1 {
font-size: 26px;
font-weight: 600;
letter-spacing: 2px;
}
header nav a {
color: #bbb;
text-decoration: none;
margin-left: 20px;
font-weight: 400;
transition: color 0.3s ease, transform 0.3s ease;
}
header nav a:hover {
color: #b94e48;
transform: scale(1.1);
}
header nav a.active {
color: #e06c65;
border-bottom: 2px solid #e06c65;
}
/* Corrigir sobreposição do header */
section {
scroll-margin-top: 100px; /* Ajustado para evitar a sobreposição */
}
/* Hero Section */
.hero {
background: url("https://i.imgur.com/PqT1M13.jpg") no-repeat center center/cover;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
background-color: #000;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
animation: zoomIn 1.5s ease-out forwards;
position: relative;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
.hero-content h2 {
font-size: 42px;
margin-bottom: 15px;
color: #b94e48;
text-transform: uppercase;
font-weight: 700;
animation: fadeInUp 1.5s ease-out forwards;
}
.hero-content p {
font-size: 22px;
margin-bottom: 30px;
color: #ccc;
animation: fadeInUp 2s ease-out forwards;
}
/* Seções */
.container {
width: 80%;
margin: 0 auto;
}
.experiencia,
.habilidades,
.contato,
.educacao {
padding: 60px 0;
}
h2 {
font-size: 36px;
margin-bottom: 20px;
color: #b94e48;
text-transform: uppercase;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Cards de Experiência, Educação e Habilidades */
.experiencia-item,
.habilidades ul li,
.educacao-item {
background-color: #1e1e1e;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
}
.experiencia-item:hover,
.habilidades ul li:hover,
.educacao-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
background-color: #333;
}
.experiencia-item h3,
.educacao-item h3 {
font-size: 24px;
color: #b94e48;
transition: color 0.3s ease;
}
.experiencia-item p,
.educacao-item p {
font-size: 16px;
color: #ddd;
transition: color 0.3s ease;
}
.experiencia-item:hover h3,
.educacao-item:hover h3 {
color: #fff;
}
.experiencia-item:hover p,
.educacao-item:hover p {
color: #aaa;
}
/* Habilidades */
.habilidades ul {
list-style-type: none;
}
.habilidades ul li {
padding: 15px;
margin-bottom: 15px;
font-size: 18px;
border-radius: 8px;
background-color: #222;
color: #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.habilidades ul li:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
background-color: #333;
}
.habilidades ul li h4 {
color: #b94e48;
transition: color 0.3s ease;
}
.habilidades ul li:hover h4 {
color: #fff;
}
/* Formulário de Contato */
.contato form {
background-color: #1e1e1e;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contato form:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.contato form input,
.contato form textarea {
width: 100%;
padding: 14px;
margin-bottom: 18px;
border: 1px solid #444;
border-radius: 6px;
background-color: #333;
color: #fff;
transition: border-color 0.3s ease;
}
.contato form input:focus,
.contato form textarea:focus {
border-color: #b94e48;
}
.contato form button {
background-color: #b94e48;
color: white;
padding: 15px 30px;
border: 2px solid #b94e48;
border-radius: 50px;
font-size: 18px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s;
}
.contato form button:hover {
background-color: #e06c65;
border-color: #e06c65;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
transform: translateY(-3px);
}
/* Instagram Button */
.social-media {
margin-top: 20px;
}
.instagram-btn {
display: inline-block;
padding: 10px 20px;
color: white;
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
text-decoration: none;
border-radius: 50px;
font-size: 18px;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.instagram-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
/* Footer */
footer {
background-color: #121212;
color: white;
text-align: center;
padding: 30px 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
opacity: 0;
animation: fadeInUp 1.5s ease-out forwards 1s;
}
/* Animações */
@keyframes slideInDown {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zoomIn {
0% {
transform: scale(1.2);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment