Ma2903.github.io/index.html at main · Ma2903/Ma2903.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Manoela Pinheiro | Portfólio Full-Stack</title>
  <meta name="description" content="Portfólio de Manoela Pinheiro com foco em frontend, experiência visual, animações e projetos full-stack." />
  <meta name="keywords" content="Manoela Pinheiro, Portfolio, Frontend, React, Vue, Node.js, Full Stack" />
  <link rel="icon" type="image/png" href="favicon.png" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <canvas id="starfield" aria-hidden="true"></canvas>
  <div class="moon-haze" aria-hidden="true"></div>

  <header class="header" id="header">
    <nav class="nav container">
      <a href="#home" class="logo"><span>M</span>anoela</a>
      <div class="nav-menu" id="nav-menu">
        <a href="#about" class="nav-link">Sobre</a>
        <a href="#timeline" class="nav-link">Jornada</a>
        <a href="#skills" class="nav-link">Habilidades</a>
        <a href="#projects" class="nav-link">Projetos</a>
        <a href="#contact" class="nav-link">Contato</a>
      </div>
      <button class="nav-toggle" id="nav-toggle" aria-label="Abrir menu">☰</button>
    </nav>
  </header>

  <main id="home">
    <section class="hero section">
      <div class="container hero-grid">
        <div>
          <p class="eyebrow">Desenvolvedora Full-Stack Júnior</p>
          <h1>Frontend com vibe lunar: <span>suave aos olhos, forte em resultado</span>.</h1>
          <p class="hero-text">
            Construo produtos web com JavaScript/TypeScript e Node.js, unindo design limpo, animações refinadas e experiência do usuário para transformar ideias em interfaces marcantes.
          </p>
          <div class="hero-actions">
            <a class="btn btn-primary" href="#projects">Ver projetos</a>
            <a class="btn btn-secondary" href="currículo Manoela Pinheiro da Silva.pdf" download>Baixar currículo</a>
          </div>
          <div class="tech-pills">
            <span>⚛ React</span><span>🟢 Node.js</span><span>🧩 Vue</span><span>🔐 JWT/OAuth</span><span>🌐 Inglês B1</span>
          </div>
        </div>

        <div class="hero-visual" id="hero-visual" aria-hidden="true">
          <div class="moon-core"></div>
          <div class="moon-crater crater-1"></div>
          <div class="moon-crater crater-2"></div>
          <div class="moon-crater crater-3"></div>
          <div class="moon-ring"></div>
          <div class="moon-glow"></div>
          <div class="floating-icon icon-a">⚛</div>
          <div class="floating-icon icon-b">🟩</div>
          <div class="floating-icon icon-c">🧠</div>
          <div class="floating-icon icon-d">💡</div>
          <div class="hero-card">UI • UX • Frontend • Performance</div>
        </div>
      </div>
    </section>

    <section id="about" class="section">
      <div class="container two-columns">
        <img src="eu.jfif" alt="Foto de Manoela Pinheiro" class="profile" />
        <article class="panel glow-panel">
          <h2>🌙 Sobre mim</h2>
          <p>Sou Desenvolvedora Full-Stack Júnior, com foco principal em JavaScript/TypeScript e Node.js, atuando no frontend e backend.</p>
          <p>No frontend, trabalho com HTML, CSS, JavaScript/TypeScript, Vue.js e React.js, com atenção à semântica, responsividade e clareza visual.</p>
          <p>No backend, desenvolvo APIs REST com Node.js e Express, autenticação JWT/OAuth, integração com MongoDB (Mongoose) e MySQL, além de WebSockets para tempo real. Já atuei como PO, Scrum Master e Dev em ambientes ágeis.</p>
        </article>
      </div>
    </section>

    <section id="timeline" class="section">
      <div class="container">
        <h2>🗓 Linha do tempo acadêmica</h2>
        <div class="timeline-vertical">
          <article class="timeline-item panel glow-panel">
            <span class="timeline-dot" aria-hidden="true"></span>
            <span class="timeline-year">2021 — 2023</span>
            <h3>Ensino Médio com Técnico em Desenvolvimento de Sistemas</h3>
            <p>Formação técnica com base em lógica, desenvolvimento web, versionamento e fundamentos de banco de dados.</p>
          </article>

          <article class="timeline-item panel glow-panel">
            <span class="timeline-dot" aria-hidden="true"></span>
            <span class="timeline-year">2024 — 2025</span>
            <h3>Tecnóloga em Análise e Desenvolvimento de Sistemas</h3>
            <p>Graduação em ADS com aprofundamento em APIs, arquitetura, engenharia de software e metodologias ágeis.</p>
          </article>

          <article class="timeline-item panel glow-panel">
            <span class="timeline-dot" aria-hidden="true"></span>
            <span class="timeline-year">Finalizado em 2023</span>
            <h3>Formação em Inglês (B1)</h3>
            <p>Leitura de documentação técnica internacional e comunicação funcional para estudos e trabalho em tecnologia.</p>
          </article>
        </div>
      </div>
    </section>

    <section id="skills" class="section">
      <div class="container">
        <h2>✨ Habilidades & Conhecimentos</h2>
        <div class="skills-grid">
          <article class="panel skill-panel"><h3>🎨 Frontend</h3><p>HTML, CSS, JavaScript, TypeScript, React.js, Vue.js, componentização, UI/UX e acessibilidade.</p></article>
          <article class="panel skill-panel"><h3>🧱 Backend</h3><p>Node.js, Express, APIs REST, JWT, OAuth, WebSockets, arquitetura MVC e fundamentos de microserviços.</p></article>
          <article class="panel skill-panel"><h3>🗃 Banco de Dados</h3><p>MySQL, SQLite, MongoDB, modelagem de dados, triggers e procedures (nível básico).</p></article>
          <article class="panel skill-panel"><h3>⚙ DevOps & Ferramentas</h3><p>Git, GitHub, GitHub Actions, GitHub Pages, estudos em Docker, VirtualBox e Cloud (Azure, AWS, GCP).</p></article>
          <article class="panel skill-panel"><h3>🧪 Outras linguagens</h3><p>PHP (intermediário), C# (básico-intermediário), Python (básico) e C++ introdutório.</p></article>
          <article class="panel skill-panel"><h3>🤝 Soft skills</h3><p>Comunicação, liderança colaborativa, planejamento, estimativa, organização e gestão de conflitos.</p></article>
        </div>
      </div>
    </section>

    <section id="projects" class="section">
      <div class="container">
        <h2>🚀 Projetos em destaque</h2>
        <p class="muted">Projetos acadêmicos e pessoais cobrindo frontend, backend, integrações e entrega completa.</p>

        <div class="project-toolbar">
          <div class="project-filters" id="project-filters">
            <button class="filter-btn active" data-filter="all">Todos</button>
            <button class="filter-btn" data-filter="frontend">Frontend</button>
            <button class="filter-btn" data-filter="backend">Backend</button>
            <button class="filter-btn" data-filter="fullstack">Full-Stack</button>
            <button class="filter-btn" data-filter="api">API</button>
          </div>
          <input id="project-search" class="project-search" type="search" placeholder="Buscar projeto por nome ou tecnologia..." aria-label="Buscar projeto" />
        </div>

        <div id="projects-grid" class="projects-grid"></div>
      </div>
    </section>

    <section id="contact" class="section">
      <div class="container panel contact-panel glow-panel">
        <h2>💬 Vamos conversar?</h2>
        <p>Disponível para oportunidades em desenvolvimento web com foco em frontend e experiência do usuário.</p>
        <div class="contact-links">
          <a class="btn btn-primary" href="mailto:manoelap2903@gmail.com">📧 Email</a>
          <a class="btn btn-secondary" href="https://github.com/Ma2903" target="_blank" rel="noopener">🐙 GitHub</a>
          <a class="btn btn-secondary" href="https://www.linkedin.com/in/manoela-p-44aa75259/" target="_blank" rel="noopener">💼 LinkedIn</a>
          <a class="btn btn-secondary" href="https://www.linkedin.com/in/manoelaps/" target="_blank" rel="noopener">🌐 LinkedIn (atual)</a>
        </div>
      </div>
    </section>
  </main>

  <button id="back-to-top" class="back-to-top" aria-label="Voltar ao topo">↑</button>

  <footer class="footer">
    <p>© <span id="current-year"></span> Manoela Pinheiro. Feito com carinho e foco em experiência visual.</p>
  </footer>

  <script src="scripts.js"></script>
</body>
</html>