Skip to content

Commit 3a2413d

Browse files
lauraataide8lauraataide8
authored
Revise index.html for Full Stack Developer profile
Updated the HTML structure and content to reflect a transition from a Backend Software Engineer to a Full Stack Developer. Added new sections for projects and skills, and modified existing content for clarity and relevance.
1 parent b454e1c commit 3a2413d

1 file changed

Lines changed: 116 additions & 86 deletions

File tree

‎index.html‎

Lines changed: 116 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,160 @@
11
<!DOCTYPE html>
2-
<html lang="pt-br">
2+
<html lang="pt-BR">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6-
<title>Laura Ataide | Backend Software Engineer</title>
7-
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
8-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
9-
<link rel="stylesheet" href="style.css">
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Laura Ataide | Full Stack Developer</title>
7+
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
10+
<link rel="preconnect" href="https://fonts.googleapis.com" />
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12+
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
13+
<link rel="stylesheet" href="style.css" />
1014
</head>
11-
<body>
1215

16+
<body>
1317
<header class="cabecalho">
14-
<div class="cabecalho-logo">Laura<span>Ataide</span></div>
15-
<input type="checkbox" id="menu-toggle" class="menu-checkbox" hidden>
16-
<label for="menu-toggle" class="menu-icon"><i class="fas fa-bars"></i></label>
18+
<a href="#" class="cabecalho-logo">Laura<span>.</span>Ataide</a>
1719
<nav class="cabecalho-menu">
18-
<a href="#home" class="cabecalho-menu-item">Início</a>
19-
<a href="#sobre" class="cabecalho-menu-item">Sobre</a>
20-
<a href="#habilidades" class="cabecalho-menu-item">Tech Stack</a>
21-
<a href="#contato" class="cabecalho-menu-item">Contato</a>
20+
<a class="cabecalho-menu-item" href="#sobre">Sobre</a>
21+
<a class="cabecalho-menu-item" href="#projetos">Projetos</a>
22+
<a class="cabecalho-menu-item" href="#habilidades">Habilidades</a>
23+
<a class="cabecalho-menu-item" href="#contato">Contato</a>
2224
</nav>
2325
</header>
2426

2527
<main class="conteudo">
26-
<section id="home" class="conteudo-principal">
28+
<section class="conteudo-principal">
2729
<div class="conteudo-principal-escrito">
28-
<h1 class="conteudo-principal-titulo">BACKEND <span>SOFTWARE ENGINEER</span></h1>
30+
<h1 class="conteudo-principal-titulo">
31+
PORTFÓLIO<span>Laura Ataide</span>
32+
</h1>
2933
<h2 class="conteudo-principal-subtitulo">
30-
Especialista em sistemas resilientes com <strong>Java, Node.js e Azure</strong>.
31-
Unindo alta performance de desenvolvimento com sólida visão de infraestrutura.
34+
Desenvolvedora Full Stack <br />
35+
Transformando infraestrutura e lógica em experiências digitais interativas.
3236
</h2>
3337
<div class="cta-container">
34-
<a href="https://github.com/lauraataide8" class="conteudo-principal-cta" target="_blank">
35-
<i class="fab fa-github"></i> Ver Projetos no GitHub
38+
<a href="https://github.com/lauraataide8?tab=repositories" target="_blank" class="conteudo-principal-cta">
39+
Ver Repositórios
3640
</a>
41+
<img src="https://raw.githubusercontent.com/lauraataide8/lauraataide8/output/github-contribution-grid-snake.svg" alt="GitHub Snake">
3742
</div>
3843
</div>
3944
<div class="conteudo-principal-imagem">
40-
<div class="foto-organica">
41-
<img src="assets/laura.png" alt="Laura Ataide">
42-
</div>
45+
<img src="assets/laura.png" alt="Laura Ataide" />
4346
</div>
4447
</section>
4548

4649
<section id="sobre" class="conteudo-secundario">
4750
<h3 class="conteudo-secundario-titulo">Sobre Mim</h3>
48-
<div class="sobre-grid">
49-
<div class="sobre-texto">
50-
<p>Minha trajetória na tecnologia começou no "coração" da operação: <strong>Infraestrutura e Suporte</strong>. Essa base sólida me conferiu uma visão 360° que diferencia meu trabalho — eu não apenas escrevo código, eu entendo como o sistema se comporta sob carga e no servidor.</p>
51-
</div>
52-
<div class="sobre-texto">
53-
<p>Atualmente, foco no ecossistema <strong>Java (Spring Boot) e Node.js</strong>, construindo APIs RESTful com rigorosos padrões de <strong>Clean Code e SOLID</strong>. Com conhecimentos em <strong>Cloud Azure</strong>, projeto soluções escaláveis.</p>
54-
</div>
51+
<div class="sobre-texto">
52+
<p>Vinda do <strong>Suporte de Infraestrutura</strong>, trago comigo a resiliência e a visão analítica para resolver problemas complexos. Hoje, como desenvolvedora Full Stack, foco na construção de sistemas eficientes e escaláveis.</p>
53+
<p>No <strong>Back-End</strong>, domino a stack Java com Spring Boot e MySQL, criando APIs REST seguras. No <strong>Front-End</strong>, utilizo React e Bootstrap para dar vida a interfaces modernas e responsivas, sempre com foco na experiência do usuário.</p>
54+
<p>Atualmente cursando Análise e Desenvolvimento de Sistemas, sigo aprimorando conhecimentos em Cloud (Azure) e automação de processos, unindo o melhor dos dois mundos: código limpo e infraestrutura sólida.</p>
5555
</div>
56-
<div class="badges-foda">
57-
<div class="badge"><i class="fas fa-terminal"></i> Especialista Backend</div>
58-
<div class="badge"><i class="fas fa-cloud"></i> Cloud Azure</div>
59-
<div class="badge"><i class="fas fa-microchip"></i> Visão de Infra</div>
56+
</section>
57+
58+
<section id="projetos" class="conteudo-secundario">
59+
<h3 class="conteudo-secundario-titulo">Projetos em Destaque</h3>
60+
<div class="swiper meu-swiper">
61+
<div class="swiper-wrapper">
62+
<div class="swiper-slide">
63+
<div class="projeto-card">
64+
<div class="projeto-imagem-wrapper">
65+
<img src="assets/projeto-backend.png" alt="Pet Place API">
66+
</div>
67+
<h4>Pet Place API</h4>
68+
<p>API REST robusta com Java e Spring Boot. Gerenciamento de dados via MySQL e documentação completa.</p>
69+
<a href="https://github.com/lauraataide8" class="github-btn" target="_blank">GitHub</a>
70+
</div>
71+
</div>
72+
<div class="swiper-slide">
73+
<div class="projeto-card">
74+
<div class="projeto-imagem-wrapper">
75+
<img src="assets/projeto.png" alt="Cinefilosfera">
76+
</div>
77+
<h4>Cinefilosfera</h4>
78+
<p>Interface moderna de catálogo de filmes utilizando HTML5, CSS3 e Bootstrap para responsividade total.</p>
79+
<a href="https://lauraataide8.github.io/cinefilosfera.v2/" class="github-btn" target="_blank">Demo</a>
80+
</div>
81+
</div>
82+
<div class="swiper-slide">
83+
<div class="projeto-card">
84+
<div class="projeto-imagem-wrapper">
85+
<img src="assets/PETPLACEAPP.png" alt="UX Design">
86+
</div>
87+
<h4>Pet Place (UI/UX)</h4>
88+
<p>Prototipagem de alta fidelidade no Figma focada na jornada do usuário e saúde pet.</p>
89+
<a href="https://www.figma.com/proto/Tuu40ijV9A82sYHUUocQ3D/PETPLACE" class="github-btn" target="_blank">Figma</a>
90+
</div>
91+
</div>
92+
</div>
93+
<div class="swiper-button-next"></div>
94+
<div class="swiper-button-prev"></div>
95+
<div class="swiper-pagination"></div>
6096
</div>
6197
</section>
6298

6399
<section id="habilidades" class="conteudo-secundario">
64-
<h3 class="conteudo-secundario-titulo">Especialidades Técnicas</h3>
65-
<div class="habilidades-grid">
66-
<div class="habilidade-card"><i class="fab fa-java"></i><p>Java & Spring Boot</p></div>
67-
<div class="habilidade-card"><i class="fab fa-node-js"></i><p>Node.js</p></div>
68-
<div class="habilidade-card"><i class="fas fa-database"></i><p>MySQL & PostgreSQL</p></div>
69-
<div class="habilidade-card"><i class="fas fa-cloud"></i><p>Azure Cloud</p></div>
70-
<div class="habilidade-card"><i class="fas fa-network-wired"></i><p>Infra & Suporte</p></div>
71-
<div class="habilidade-card"><i class="fab fa-docker"></i><p>Docker & Containers</p></div>
72-
<div class="habilidade-card"><i class="fas fa-project-diagram"></i><p>APIs RESTful</p></div>
73-
<div class="habilidade-card"><i class="fas fa-shield-alt"></i><p>Segurança & LGPD</p></div>
74-
</div>
100+
<h3 class="conteudo-secundario-titulo">Tech Stack</h3>
101+
<ul class="habilidades-lista">
102+
<li><i class="fa-brands fa-java"></i><span>Java</span></li>
103+
<li><i class="fa-solid fa-leaf"></i><span>Spring Boot</span></li>
104+
<li><i class="fa-solid fa-gears"></i><span>API REST</span></li>
105+
<li><i class="fa-brands fa-mysql"></i><span>MySQL</span></li>
106+
<li><i class="fa-brands fa-react"></i><span>React</span></li>
107+
<li><i class="fa-brands fa-bootstrap"></i><span>Bootstrap</span></li>
108+
<li><i class="fa-brands fa-js"></i><span>JavaScript</span></li>
109+
<li><i class="fa-brands fa-microsoft"></i><span>Azure</span></li>
110+
<li><i class="fa-brands fa-git-alt"></i><span>Git</span></li>
111+
<li><i class="fa-brands fa-linux"></i><span>Linux</span></li>
112+
</ul>
75113
</section>
76114
</main>
77115

78116
<footer id="contato" class="rodape">
79-
<div class="rodape-container">
80-
<div class="rodape-brand">
81-
<div class="cabecalho-logo">Laura<span>Ataide</span></div>
82-
<p>Construindo o backend do futuro com foco em performance e alta disponibilidade.</p>
83-
<div class="sociais-icones">
84-
<a href="https://github.com/lauraataide8" target="_blank"><i class="fab fa-github"></i></a>
85-
<a href="https://www.linkedin.com/in/lauraataide91/" target="_blank"><i class="fab fa-linkedin"></i></a>
86-
</div>
117+
<div class="rodape-conteudo">
118+
<div class="rodape-coluna rodape-info">
119+
<h3 class="conteudo-secundario-titulo">Vamos Conversar?</h3>
120+
<p>Estou aberta a novas oportunidades <br>
121+
e colaborações em projetos Full Stack.</p>
122+
<a href="mailto:lauramartinsataide@gmail.com" class="rodape-cta">Solicitar Projeto</a>
87123
</div>
88-
<div class="rodape-contato">
89-
<h3 class="titulo-rodape-neon">CONTATO</h3>
90-
<div class="info-link"><i class="fas fa-envelope"></i> lauramartinsataide@gmail.com</div>
91-
<div class="info-link"><i class="fas fa-phone"></i> (11) 99949-8492</div>
92-
<a href="mailto:lauramartinsataide@gmail.com" class="btn-email-footer">Bora conversar?</a>
93-
</div>
94-
<div class="rodape-links-rapidos">
95-
<h4>Navegação</h4>
96-
<a href="#home">Início</a>
97-
<a href="#sobre">Sobre</a>
98-
<a href="#habilidades">Tech Stack</a>
124+
<div class="rodape-coluna rodape-links">
125+
<h3 class="subtitulo-rodape">Contatos Diretos</h3>
126+
<div class="rodape-contato-badges">
127+
<a href="mailto:lauramartinsataide@gmail.com" class="badge-contato">
128+
<i class="fa-solid fa-envelope"></i><span>Email</span>
129+
</a>
130+
<a href="https://www.linkedin.com/in/lauraataide91/" target="_blank" class="badge-contato">
131+
<i class="fa-brands fa-linkedin"></i><span>LinkedIn</span>
132+
</a>
133+
<a href="https://github.com/lauraataide8" target="_blank" class="badge-contato">
134+
<i class="fa-brands fa-github"></i><span>GitHub</span>
135+
</a>
136+
</div>
99137
</div>
100138
</div>
101-
<div class="copyright-area">
102-
<p>© 2026 Laura Ataide. <span>Hand-coded with 💚</span></p>
139+
<div class="rodape-copyright">
140+
<p>© 2026 Laura Martins de Ataide. Feito com café e Rick & Morty.</p>
103141
</div>
104142
</footer>
105143

106-
<a href="https://wa.me/5511999498492" class="zap-fixo" target="_blank"><i class="fab fa-whatsapp"></i></a>
107-
<button id="backToTop" class="back-to-top"><i class="fas fa-arrow-up"></i></button>
144+
<a href="https://wa.me/5511999498492" class="whatsapp-flutuante" target="_blank">
145+
<i class="fa-brands fa-whatsapp"></i>
146+
</a>
108147

148+
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
109149
<script>
110-
// Menu Mobile
111-
const toggle = document.getElementById('menu-toggle');
112-
document.querySelectorAll('.cabecalho-menu-item').forEach(link => {
113-
link.addEventListener('click', () => { toggle.checked = false; });
150+
const swiper = new Swiper(".meu-swiper", {
151+
slidesPerView: 1,
152+
spaceBetween: 30,
153+
loop: true,
154+
pagination: { el: ".swiper-pagination", clickable: true },
155+
navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
156+
breakpoints: { 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } }
114157
});
115-
116-
// Botão Voltar ao Topo
117-
const backToTop = document.getElementById('backToTop');
118-
window.onscroll = function() {
119-
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
120-
backToTop.classList.add('show');
121-
} else {
122-
backToTop.classList.remove('show');
123-
}
124-
};
125-
backToTop.onclick = function() {
126-
window.scrollTo({ top: 0, behavior: 'smooth' });
127-
};
128158
</script>
129159
</body>
130160
</html>

0 commit comments

Comments
 (0)