Solucionado
<!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 do Ricardo</title>
<meta name="description" content="Portfólio online de Ricardo Souza, desenvolvedor(a) web experiente em HTML, CSS e JavaScript.">
<meta name="keywords" content="portfólio, desenvolvedor web, HTML, CSS, JavaScript">
<meta name="author" content="Ricardo Souza">
<meta name="msapplication-TileColor" content="#007bff">
<meta name="theme-color" content="#007bff">
</head>
<body>
<header>
<h1>Ricardo Santana de Souza</h1>
<h2>Seguindo um roadmap para se tornar um DevSecOps</h2>
</header>
<main>
<section id="sobre-mim">
<section id="foto">
<img src="euLinkedin.jpeg" alt="Foto do Ricardo" width="200" height="200">
<link rel="stylesheet" href="port_futurista.css">
</section>
<h2>Sobre Mim</h2>
<p>
"Profissional de TI com 10 anos de experiência em suporte de sistemas, segurança cibernética e infraestrutura, apaixonado por
proteger dados contra ameaças digitais.
Experiência comprovada em ambientes de alta complexidade, com foco em infraestrutura de redes, telecomunicações,
suporte técnico e segurança da informação. <stong>Pós Graduado em Cybersecurity.</stong> Busco uma oportunidade desafiadora em uma
organização líder, onde possa aplicar minhas habilidades e conhecimentos para fortalecer a segurança e a infraestrutura de TI, contribuindo para o sucesso da equipe e da empresa.
Vamos conversar sobre como posso agregar valor à sua equipe!"</p>
<button id="mostrar-mais">Skills:</button>
<p id="texto-extra" style="display:none;">
Redes de computadores;
Cibersegurança;
Recuperação de dados;
Soluções de backup e recuperação;
Telecomunicações;
Consultoria de TI;
Criação de sites e web app;
Segurança da informação;
Suporte de redes;
Redes residenciais;
</p>
</section>
<section id="projetos">
<h2>Projetos</h2>
</section>
<section id="contato">
<h2>Contato</h2>
<p>
Entre em contato comigo através das minhas redes sociais:
</p>
<ul>
<li><a href="https://www.instagram.com/pc_ricardo/">Instagram</a></li>
<li><a href="https://github.com/pcsouzafv">GitHub</a></li>
<li><a href="https://www.linkedin.com/in/pcricardo2024/">Linkedin</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2024 Ricardo Souza</p>
</footer>
<script src="script.js"></script>
</body>
</html>
body {
font-family: 'Arial', sans-serif;
background-color: #222;
color: #fff;
}
header {
text-align: center;
padding: 30px 0;
}
header h1 {
font-size: 3em;
letter-spacing: 5px;
text-shadow: 0 0 10px #007bff;
}
header h2 {
font-size: 1.5em;
}
stong
{
font-size: 1em;
letter-spacing: 2px;
text-shadow: 0 0 5px #007bff;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 30px;
}
section {
margin-bottom: 30px;
}
section h2 {
font-size: 2em;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
margin-bottom: 20px;
}
section p {
line-height: 1.5;
}
footer {
text-align: center;
padding: 20px;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
const botaoMostrarMais = document.getElementById('mostrar-mais');
const textoExtra = document.getElementById('texto-extra');
botaoMostrarMais.addEventListener('click', () => {
if (textoExtra.style.display === 'none') {
textoExtra.style.display = 'block';
botaoMostrarMais.textContent = 'Mostrar Menos';
} else {
textoExtra.style.display = 'none';
botaoMostrarMais.textContent = 'Mostrar Mais';
}
});
Boa tarde, Ricardo! Tudo bem com você?
Meus parabéns pela finalização do seu portfólio final, ele está muito estiloso. Testei ele e funcionou como esperado. Continue com esse empenho e dedicação pois eles são muito importantes para que você fixe o conteúdo aprendido.
Abraços e bons estudos!