cursoemvideo-html-css/index.html at main · BrianMunizSilveira/cursoemvideo-html-css · 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="Brian Muniz Silveira" />
  <meta name="description"
    content="Portfólio técnico documentando a evolução e aprendizado em HTML5 e CSS3 - Do curso inicial às implementações avançadas." />
  <meta name="keywords" content="HTML5, CSS3, Portfólio Técnico, Evolução, Aprendizado, Brian Muniz" />
  <meta name="robots" content="index, follow" />
  <meta name="revisit-after" content="1 days" />
  <meta name="language" content="Portuguese" />
  <meta name="generator" content="Visual Studio Code" />
  <meta name="distribution" content="Global" />
  <meta property="og:title" content="Brian Muniz - Evolução Técnica HTML5 & CSS3">
  <meta property="og:description"
    content="Documentação técnica da evolução em HTML5 e CSS3 - Do aprendizado inicial às implementações avançadas.">
  <meta property="og:type" content="website">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  <meta http-equiv="X-Content-Type-Options" content="nosniff">
  <title>Brian Muniz - Evolução Técnica HTML5 & CSS3</title>

  <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@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Merriweather:wght@300;400;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />

  <link rel="stylesheet" href="./src/css/main.css">
</head>

<body>
  <div class="container">
    <main role="main">
      <!-- Cabeçalho do Portfólio -->
      <header class="profile-header" role="banner">
        <div class="profile-content">
          <h1 class="profile-title">Brian Muniz Silveira</h1>
          <p class="profile-subtitle">Documentação da Evolução Técnica</p>
          <p class="profile-description">
            Este portfólio documenta minha jornada de aprendizado em HTML5 e CSS3,
            desde os fundamentos do Curso em Vídeo até implementações avançadas e
            técnicas modernas desenvolvidas ao longo do tempo.
          </p>
        </div>
      </header>

      <!-- Timeline de Evolução -->
      <section class="evolution-timeline" aria-label="Evolução técnica documentada">
        <div class="timeline-header">
          <h2 class="timeline-title">Jornada de Desenvolvimento</h2>
          <p class="timeline-description">
            Cada seção representa um marco na evolução técnica, demonstrando a progressão
            do conhecimento básico para implementações avançadas e boas práticas.
          </p>
        </div>

        <div class="timeline-grid">
          <!-- Card 1: Exercícios Fundamentais -->
          <article class="portfolio-card">
            <div class="card-header">
              <div class="card-icon" aria-hidden="true">📚</div>
              <div class="card-content">
                <h3 class="card-title">Exercícios Fundamentais</h3>
                <div class="card-meta">
                  <span class="meta-tag">Base Sólida</span>
                  <span class="meta-tag">Fundamentos</span>
                  <span class="meta-tag">Curso em Vídeo</span>
                </div>
              </div>
            </div>

            <p class="card-description">
              Documentação completa dos exercícios realizados durante o curso, organizados
              por módulos com anotações e evoluções aplicadas. Demonstra domínio progressivo
              dos conceitos fundamentais.
            </p>

            <div class="card-highlights">
              <h4 class="highlights-title">Competências Demonstradas</h4>
              <ul class="highlights-list">
                <li>Estruturação semântica HTML5</li>
                <li>Estilização CSS3 responsiva</li>
                <li>Organização modular de código</li>
                <li>Aplicação de boas práticas</li>
              </ul>
            </div>

            <a href="./Exercícios/exercicios.html" class="card-link" rel="next"
              aria-label="Visualizar exercícios fundamentais realizados">
              Explorar Exercícios
            </a>
          </article>

          <!-- Card 2: Desafios Práticos -->
          <article class="portfolio-card">
            <div class="card-header">
              <div class="card-icon" aria-hidden="true">🎯</div>
              <div class="card-content">
                <h3 class="card-title">Desafios & Implementações</h3>
                <div class="card-meta">
                  <span class="meta-tag">Problem Solving</span>
                  <span class="meta-tag">Criatividade</span>
                  <span class="meta-tag">Evolução</span>
                </div>
              </div>
            </div>

            <p class="card-description">
              Soluções originais para desafios propostos, com melhorias e otimizações
              implementadas ao longo do tempo. Evidencia capacidade de resolução de
              problemas e evolução técnica contínua.
            </p>

            <div class="card-highlights">
              <h4 class="highlights-title">Diferenciações Aplicadas</h4>
              <ul class="highlights-list">
                <li>Soluções criativas e funcionais</li>
                <li>Código otimizado e limpo</li>
                <li>Implementações responsivas</li>
                <li>Melhorias de acessibilidade</li>
              </ul>
            </div>

            <a href="./Desafios/d000/index.html" class="card-link" rel="next"
              aria-label="Visualizar desafios e implementações realizadas">
              Ver Implementações
            </a>
          </article>
        </div>
      </section>

      <!-- Seção de Competências Desenvolvidas -->
      <section class="skills-section" aria-label="Competências técnicas desenvolvidas">
        <div class="skills-content">
          <h2 class="skills-title">Competências Desenvolvidas</h2>
          <p class="skills-description">
            Habilidades técnicas adquiridas e aprimoradas durante a jornada de aprendizado,
            demonstrando evolução do conhecimento básico para implementações avançadas.
          </p>

          <div class="skills-grid">
            <div class="skill-item">
              <span class="skill-icon" aria-hidden="true">🏗️</span>
              <h3 class="skill-title">HTML5 Semântico</h3>
              <p class="skill-level">Estruturação avançada</p>
            </div>
            <div class="skill-item">
              <span class="skill-icon" aria-hidden="true">🎨</span>
              <h3 class="skill-title">CSS3 Moderno</h3>
              <p class="skill-level">Grid, Flexbox, Variáveis</p>
            </div>
            <div class="skill-item">
              <span class="skill-icon" aria-hidden="true">📱</span>
              <h3 class="skill-title">Design Responsivo</h3>
              <p class="skill-level">Mobile-first approach</p>
            </div>
            <div class="skill-item">
              <span class="skill-icon" aria-hidden="true">♿</span>
              <h3 class="skill-title">Acessibilidade</h3>
              <p class="skill-level">WCAG Guidelines</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Footer -->
      <footer class="footer" role="contentinfo">
        <div class="footer-content">
          <h3 class="footer-title">Evolução Contínua</h3>
          <p class="footer-description">
            Este portfólio é um documento vivo da minha evolução técnica,
            demonstrando não apenas o que aprendi, mas como aplico e aprimoro
            continuamente essas competências.
          </p>
          <div class="footer-meta">
            <p><i class="fas fa-code-branch"></i> Open Source License - Desenvolvido por Brian Muniz Silveira</p>
          </div>
        </div>
      </footer>
    </main>
  </div>
</body>

</html>