Merge pull request #1 from myllenammartins/edit1

FEAT: primeira edição
myllenammartins · Sep 26, 2023 · f5f4615 · f5f4615
2 parents 280d08f + 5c4f44f
commit f5f4615
Show file tree

Hide file tree

Showing 3 changed files with 281 additions and 0 deletions.
diff --git a/avatar3.jpg b/avatar3.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Portfólio Myllena</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
+</head>
+<body>
+    <!-- Barra de navegação -->
+    <nav id="navbar">
+        <ul>
+            <li><a href="#welcome-section">Início</a></li>
+            <li><a href="#projects">Projetos</a></li>
+            <li><a href="#contact">Contato</a></li>
+        </ul>
+    </nav>
+
+    <!-- Seção de boas-vindas -->
+    <section id="welcome-section">
+        <div id="welcome-text" class="floating-text">
+            <h3>Olá, sou a</h3>
+            <h1>Myllena M. Martins</h1>
+            <p>Desenvolvedora web | Análise e Desenvolvimento de Sistemas</p>
+        </div>
+            <img src="avatar3.jpg" alt="Meu avatar" class="avatar">
+    </section>
+
+    <!-- Seção de projetos -->
+    <section id="projects">
+        <div class="project-tile">
+            <h2>burger-queen-client</h2>
+            <p>Criação de uma interface e integração com uma API.</p>
+            <a href="https://github.com/myllenammartins/burger-queen-client" target="_blank">Link para o projeto</a>
+        </div>
+
+        <div class="project-tile">
+            <h2>burger-queen-api</h2>
+            <p>Desenvolvimento de uma API, com node, que pode integrar a outra interface.</p>
+            <a href="https://github.com/myllenammartins/SAP010-burger-queen-api" target="_blank">Link para o projeto</a>
+        </div>
+
+        <div class="project-tile">
+            <h2>md-links</h2>
+            <p>A biblioteca possibilita a leitura de arquivos no formato Markdown, localizados na máquina do usuário, 
+                e análise da presença de links nesses documentos. Além de permitir não somente a identificação de links, 
+                mas também a verificação de sua validade e a obtenção de estatísticas sobre cada um deles.</p>
+            <a href="https://github.com/myllenammartins/SAP010-md-links" target="_blank">Link para o projeto</a>
+        </div>
+
+        <div class="project-tile">
+            <h2>social-network</h2>
+            <p>O PetChat é uma ferramenta de chat desenvolvida para conectar tutores de animais de estimação, 
+                permitindo que eles compartilhem dúvidas e experiências relacionadas aos seus pets. A plataforma 
+                oferece uma comunidade online onde os usuários podem postar comentários, receber curtidas e 
+                respostas de outros membros.</p>
+            <a href="https://github.com/myllenammartins/SAP010-social-network" target="_blank">Link para o projeto</a>
+        </div>
+
+        <div class="project-tile">
+            <h2>data-lovers</h2>
+            <p>O objetivo desse projeto foi construir uma página web que permita visualizar, filtrar, 
+                ordenar e realizar cálculos agregados do conjunto de dados da série Breaking Bad. Além disso, 
+                atender as necessidades do usuário, fornecendo informações relevantes e uma interface intuitiva.</p>
+            <a href="https://github.com/myllenammartins/SAP010-data-lovers" target="_blank">Link para o projeto</a>
+        </div>
+
+        <div class="project-tile">
+            <h2>card-validation</h2>
+            <p>O projeto teve como objetivo simular um ambiente de validação de cartão de crédito, 
+                utilizando o Algoritmo de Luhn, onde o usuário digita os dígitos do cartão e, ao clicar 
+                no botão validar, informa se o cartão é válido ou não.</p>
+            <a href="https://github.com/myllenammartins/SAP010-card-validation" target="_blank">Link para o projeto</a>
+        </div>
+
+    </section>
+
+    <section id="contact">
+    <h2>Contato</h2>
+    <ul>
+        <li><a href="https://www.linkedin.com/in/myllenamirandamartins/" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
+        <li><a href="mailto:mirandamartins05@gmail.com"><i class="fas fa-envelope"></i> Email</a></li>
+        <li><a href="https://github.com/myllenammartins" target="_blank"><i class="fab fa-github"></i> GitHub</a></li>
+    </ul>
+</section>
+
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,192 @@
+body {
+    font-family: Georgia, serif;
+    background-color: #f5f5f5;
+    margin: 0;
+    padding: 0;
+    color: #333;
+}
+
+/* Estilo da barra de navegação */
+#navbar {
+    background-color: rgba(241, 240, 240, 0.15);
+    backdrop-filter: blur(6px);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    transition: background-color 0.3s ease;
+    padding: 10px 0;
+}
+
+#navbar ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+}
+
+#navbar li {
+    display: inline-block;
+    margin-right: 20px;
+}
+
+#navbar a {
+    text-decoration: none;
+    color: #111111;
+    font-size: 18px;
+}
+
+#navbar a:hover {
+    color: #508baf;
+}
+
+
+#navbar.scrolled {
+    background-color: #5786a5;
+}
+
+/* Estilos da seção de boas-vindas */
+#welcome-section {
+    text-align: center;
+    padding: 100px 0;
+    background-color: #ffff;
+    color: #333;
+    position: relative;
+}
+
+.floating-text h3 {
+    animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+#welcome-text {
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
+    width: 50%; /* Define a largura para 50% do contêiner pai */
+    padding-right: 2px;
+}
+
+#welcome-text h1 {
+    font-size: 5rem;
+    margin: 0;
+    font-weight: 900
+}
+
+#welcome-text h3 {
+    font-size: 1.9rem;
+    margin: 0;
+}
+
+#welcome-section img {
+    width: 290px;
+    height: auto;
+    display: inline-block; /* Faz com que a imagem se comporte como um elemento em linha */
+    vertical-align: middle; /* Alinha verticalmente no centro */
+}
+
+#welcome-section h1 {
+    font-size: 3rem;
+    display: inline-block; /* Faz com que o título se comporte como um elemento em linha */
+}
+
+/* Estilo da seção de projetos */
+#projects {
+    background-color: #8cacc2;
+    padding: 50px 0;
+}
+
+.project-tile {
+    background-color: #fff;
+    padding: 20px;
+    margin: 20px;
+    margin-left: 60px;
+    margin-right: 60px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.74);
+    transition: transform 0.3s ease;
+}
+
+.project-tile:hover {
+    transform: translateX(-8px);
+}
+
+.project-tile h2 {
+    font-size: 1.5rem;
+    color: #007ACC;
+}
+
+.project-tile p {
+    margin-top: 10px;
+}
+
+.project-tile a {
+    text-decoration: none;
+    color: #FFA500;
+    display: block;
+    margin-top: 10px;
+}
+
+
+#profile-link {
+    display: block;
+    text-align: center;
+    padding: 20px;
+    background-color: #007ACC;
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+}
+
+#profile-link:hover {
+    background-color: #00568B;
+}
+
+/* Estilo da seção de contato */
+#contact {
+    background-color: #525050;
+    color: #fff; 
+    padding: 50px 0;
+    text-align: center;
+}
+
+#contact h2 {
+    font-size: 2rem;
+}
+
+#contact ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+#contact li {
+    font-size: 1.2rem;
+}
+
+#contact a {
+    text-decoration: none;
+    color: #007ACC;
+    transition: color 0.3s ease;
+}
+
+#contact a:hover {
+    color: #00568B;
+}