-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (133 loc) · 6.15 KB
/
index.html
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
<!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 Antônio</title>
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<header>
<nav>
<div class="logo">Meu Portfólio</a></div>
<ul class="nav-links">
<li><a href="#sobre">Sobre</a></li>
<li><a href="#projetos">Projetos</a></li>
<li><a href="#habilidades">Habilidades</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<section id="perfil" class="perfil">
<img src="https://i.ibb.co/mRf4Wx7/fotor-1717444578922.png" alt="Foto de Perfil" class="foto-perfil">
<a href="index.html" class="nome-perfil">Antônio Nascimento</a>
</section>
<section id="home" class="home">
<div class="intro">
<h1>Olá, sou um <span class="highlight">Programador</span></h1>
<p>Crio soluções eficientes com tecnologia moderna.</p>
<a href="#projetos" class="btn">Veja meus projetos</a>
</div>
</section>
<section id="sobre" class="sobre">
<h2 class="fade-in">Sobre Mim</h2>
<p class="fade-in">Olá! Meu nome é Antônio Nascimento.
<br>
Sou um programador com uma paixão por tecnologia e desenvolvimento web.
<br>
Desde que comecei minha jornada na programação, me dediquei a aprender e dominar as linguagens HTML, CSS, JavaScript, SQL e Python.
<br>
Minha aventura no mundo da programação começou à 5 anos atrás.
<br>
Ao longo do tempo, criei vários projetos que me ajudaram a melhorar minhas habilidades e a compreender melhor o desenvolvimento web.</p>
<br>
<h3>Sou editor do blog:</h3>
<a href="https://programartudo.blogspot.com" target="_blank">https://programartudo.blogspot.com</a>
<h3>Canal no Youtube:</h3>
<a href="https://www.youtube.com/channel/UCvUtyzVxB5LcIPccivbS0pQ" target="_blank">youtube.com/ProgramarTudo</a>
<h3>Perfil GitHub:</h3>
<a href="https://github.com/Ninja1375" target="_blank">https://github.com/Ninja1375</a>
</section>
<section id="projetos" class="projetos">
<h2 class="fade-in">Meus Projetos</h2>
<div class="grid-container">
<div class="projeto fade-in">
<h3>Teste de Visão Online</h3>
<p>
O "Teste de Visão Online" é uma ferramenta interativa e acessível projetada para avaliar rapidamente aspectos fundamentais da sua visão diretamente no conforto da sua casa, sem a necessidade de visitas presenciais a uma clínica oftalmológica.</p>
</div>
<div class="projeto fade-in">
<h3>Calculadora de Regra de Três Simples</h3>
<p>Esta calculadora de regra de três permite calcular proporções tanto diretamente proporcionais quanto inversamente proporcionais de maneira simples e rápida.</p>
</div>
<div class="projeto fade-in">
<h3>Editor de Fotos Responsivo</h3>
<p>Um editor de fotos responsivo, interativo, dinâmico e funcional. Este editor tem várias funcionalidades e com um design de última geração.</p>
</div>
<div class="projeto fade-in">
<h3>Jogo do Labirinto</h3>
<p>Este jogo representa um labirinto, Este jogo tem um cronômetro que começa a contar assim que a página é recarregada. Tem também um contador de movimentos do jogador, tem as setas clicável nas direções direita, esquerda, cima e baixo. </p>
</div>
<div class="projeto fade-in">
<h3>Gerador de Placas de Preço</h3>
<p>Este projeto consiste em uma sistema que gera placas de preços, ideal para supermercados e etc... O usuário pode preencher os dados e atualizar conforme sua necessidade, no final você terá uma placa de preço linda e funcional, depois da placa gerada você pode baixar a placa no formato PNG.</p>
</div>
</div>
</section>
<section id="habilidades" class="habilidades">
<h2 class="fade-in">Minhas Habilidades</h2>
<div class="grid-container">
<div class="habilidade fade-in">
<h3>HTML:</h3>
<p>Experiência em criar estruturas de páginas web semânticas e acessíveis.</p>
</div>
<div class="habilidade fade-in">
<h3>CSS:</h3>
<p>Habilidade em estilizar páginas web utilizando técnicas modernas de CSS, incluindo flexbox e grid.</p>
</div>
<div class="habilidade fade-in">
<h3>JavaScript:</h3>
<p>Conhecimento em JavaScript para criar interatividade e funcionalidade em páginas web.</p>
</div>
<div class="habilidade fade-in">
<h3>SQL:</h3>
<p>Proficiente em SQL para gerenciamento de banco de dados, consultas e manipulação de dados.</p>
</div>
<div class="habilidade fade-in">
<h3>Python:</h3>
<p>Conhecimento avançado em Python para desenvolvimento de scripts, automação e análise de dados.</p>
</div>
</div>
</section>
<section id="contato" class="contato">
<h2 class="fade-in">Contato</h2>
<form action="https://formspree.io/f/mjkbvpdv" method="POST" class="fade-in">
<input type="text" name="name" placeholder="Nome" required>
<input type="email" name="email" placeholder="Email" required>
<textarea name="message" placeholder="Mensagem" required></textarea>
<button type="submit" class="btn">Enviar</button>
</form>
</section>
<footer>
<p>© 2024 Meu Portfólio. Todos os direitos reservados.</p>
<div class="social-icons">
<a href="https://www.youtube.com/channel/UCvUtyzVxB5LcIPccivbS0pQ" target="_blank" class="social-icon">
<i class="fab fa-youtube"></i>
</a>
<a href="https://github.com/Ninja1375" target="_blank" class="social-icon">
<i class="fab fa-github"></i>
</a>
<a href="https://programartudo.blogspot.com/" target="_blank" class="social-icon">
<i class="fab fa-blogger"></i>
</a>
</div>
</footer>
</body>
</html>