-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·221 lines (211 loc) · 8.4 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
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Luis Felipe | Frontend developer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<meta name="description"
content="Meu nome é Luis felipe, desenvolvo interfaces modernas e de alta qualidade, concentrado em performance, animações, responsividade e SEO.">
<meta name="keywords"
content="sites, web, frontend,desenvolvimento, luis felipe, programador, front-end, website, portfólio">
<meta name="language" content="Portuguese">
<meta name="author" content="Luis Felipe">
<link href="./src/img/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link type="image/png" href="./src/img/favicon-32x32.png" rel="icon" sizes="32x32">
<link type="image/png" href="./src/img/favicon-16x16.png" rel="icon" sizes="16x16">
<link type="image/x-icon" href="./src/img/favicon.ico" rel="shortcut icon">
<link href="./src/img/site.webmanifest" rel="manifest">
<script src="https://unpkg.com/scrollreveal"></script>
<link href="./src/css/style.css" rel="stylesheet">
</head>
<body>
<header class="header" id="header">
<div class="header-container">
<a class="logo" href="#">Luis Felipe</a>
<nav id="nav">
<button id="btn-mobile" aria-controls="menu" aria-expanded="false" aria-haspopup="true" aria-label="Abrir Menu">
<span id="hamburger"></span>
</button>
<ul class="menu" id="menu">
<li><a href="#home">Home</a></li>
<li><a href="#sobremin">Sobre mim</a></li>
<li><a href="#experiencia">Experiência</a></li>
<li><a href="#projetos">Projetos</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="main-container">
<div class="home" id="home">
<div class="main-info">
<div class="main-info-item">
<p>olá, eu sou</p>
<h1 class="typing-animation">luis felipe</h1>
<h2>Desenvolvedor Front-end.</h2>
</div>
<div class="main-info-icons">
<a href="https://www.linkedin.com/in/luis-felipe-ab42431b8/" target="_blank" rel="noopener"><img
src="./src/icons/linkedin.svg" alt="icone linkedin" width="27" height="auto"><button>
linkedin
</button>
</a>
<a class="link-icon" href="https://github.com/luisfelipecode" target="_blank" rel="noopener"><img
src="./src/icons/github.svg" alt="icone github" width="27" height="auto"><button>
github
</button>
</a>
</div>
</div>
<img class="bg" src="./src/img/bg.svg" alt="img background" loading="lazy" width="600" height="auto">
</div>
<section class="info-sobremin" id="sobremin">
<section class="section-container">
<div class="my-profile">
<img src="https://avatars.githubusercontent.com/u/86485826?v=4" title="my profile photo" alt="minha foto"
loading="lazy" width="370" height="370">
</div>
<div class="sobremin">
<h3>Sobre Mim</h3>
<h4>Teresina, Brasil</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quia
eveniet, recusandae ipsum magni quo est illo consectetur dignissimos
corporis, odit voluptate, porro debitis.
</p>
<div class="social">
<a href="#"><img src="./src/icons/Vector.svg" alt="icon twitter" width="30" height="auto"></a>
<a href="#"><img src="./src/icons/twitch.svg" alt="icon twitch" width="30" height="auto"></a>
<a href="#"><img src="./src/icons/youtube.svg" alt="icon youtube" width="30" height="auto"></a>
<a href="#"><img src="./src/icons/figma.svg" alt="icon figma" width="30" height="auto"></a>
<a href="#"><img src="./src/icons/codepen.svg" alt="icon codepen" width="30" height="auto"></a>
<a href="#"><img src="./src/icons/face.svg" alt="icon facebook" width="19" height="auto"></a>
</div>
<div class="contato-social">
<a href="#"><img src="./src/icons/file.svg" alt="icon file" width="30"
height="auto"><span>Currículo</span></a>
<a href="mailto:[email protected]"><img src="./src/icons/mail.svg" alt="icon E-mail" width="30"
height="auto"><span>E-mail</span></a>
</div>
</div>
</section>
</section>
<section class="experiencia" id="experiencia">
<h2>EXPERIÊNCIA</h2>
<div class="divisao">
<ul class="xp">
<li class="li ativo">Curso TI</li>
<li class="li">Em aberto</li>
<li class="li">Em aberto</li>
<li class="li">Em aberto</li>
</ul>
<div class="detalhes">
<div>
<h2 class="titulo">Técnico em informática</h2>
<p class="data">Fev 2020 - 2022</p>
</div>
<p class="local">UFPI/CTT COLÉGIO TÉCNICO DE TERESINA</p>
<p class="desc desc2">
No curso técnico em informática aprendi várias linguagens de
programação (PHP,PYTHON), linguagem de marcação (HTML5) e linguagem
de estilização (CSS3), tive também aprendizados com banco de dados
com SQL por meio do MySQL. E como um bom curso de informática,
aprendi a fazer manutenção e formatação desktops.
</p>
</div>
</div>
</section>
<section class="projetos" id="projetos">
<div class="projetos-container">
<h2>Projetos</h2>
<div class="projetos-list">
<div class="projeto">
<img class="image-project" src="./src/img/Rectangle19.svg" alt="projeto 1">
<div class="projeto-info">
<h2 class="name-project"></h2>
<p class="description"></p>
<div class="projetos-links">
<p class="technologies">...</p>
<a class="gitHub-link" href target="_blank" rel="noopener"><img src="./src/icons/link.svg"
alt="icon link"><button class="btn-projeto">
Visualizar
</button>
</a>
</div>
</div>
</div>
<div class="projeto">
<img class="image-project" src="./src/img/Rectangle19.svg" alt="projeto 1">
<div class="projeto-info">
<h2 class="name-project"></h2>
<p class="description"></p>
<div class="projetos-links">
<p class="technologies"></p>
<a class="gitHub-link" href target="_blank" rel="noopener"><img src="./src/icons/link.svg"
alt="icon link"><button class="btn-projeto">
Visualizar
</button>
</a>
</div>
</div>
</div>
<div class="projeto">
<img class="image-project" src="./src/img/Rectangle19.svg" alt="projeto 1">
<div class="projeto-info">
<h2 class="name-project"></h2>
<p class="description"></p>
<div class="projetos-links">
<p class="technologies"></p>
<a class="gitHub-link" href="https://github.com/luisfelipecode/lista-tarefas" target="_blank"
rel="noopener"><img src="./src/icons/link.svg" alt="icon link"><button class="btn-projeto">
Visualizar
</button>
</a>
</div>
</div>
</div>
</div>
</div>
<a class="repos" href="https://github.com/luisfelipecode?tab=repositories" target="_blank"
rel="noopener">Repositórios no GitHub
</a>
</section>
<section class="contato" id="contato">
<div class="contato-container">
<h2>👋 Entre em Contato</h2>
<form class="form">
<div class="input-group">
<label for="nome">Nome</label>
<input id="nome" type="text" placeholder="Nome">
<label for="email">E-mail</label>
<input id="email" type="text" placeholder="E-mail">
<label for="msg">Mensagem</label>
<input class="input-msg" id="msg" type="text" placeholder="Mensagem">
</div>
<button class="btn-contato">Enviar</button>
</form>
</div>
</section>
<footer>
<div class="footer-container">
<div class="footer-info">
<p>@ 2022 - Luis Felipe</p>
<p>
Powered by
<img src="./src/icons/iuricode-logo-footer1.svg" alt="icon link" loading="lazy">
</p>
</div>
</div>
<img class="scroll" src="./src/icons/scroll-top.svg" alt="icone scroll" onclick="subirTopo()">
</footer>
</div>
</main>
<script src="./dist/js/index.js"></script>
<script src="./dist/js/mobile.js"></script>
<script src="./dist/js/data.js"></script>
</body>
</html>