-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (193 loc) · 8.62 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv=”content-language” content=”pt-br”>
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="manifest" href="manifest.json">
<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;700;800;900&family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/pattern.css" />
<link rel="stylesheet" href="./assets/css/style.css" />
<link rel="stylesheet" href="./assets/css/responsive.css" />
<meta name="author" content="Guilherme Costa de Medeiros">
<meta name="keywords" content="portfolio, tecnologia, programação, guilherme, costa, desenvolvedor, web">
<meta name="description" content="Ahoy! Me chamo Guilherme Costa e sou Desenvolvedor Web. Meu atual objetivo como programador é buscar conhecimento, aprendizado e experiência para me tornar um profissional cada vez mais capacitado.">
<link rel="canonical" href="https://guilhermecostam.github.io/">
<title>Guilherme Costa | Desenvolvedor Web</title>
<!-- Open Graph-->
<meta property="og:locale" content="pt_BR">
<meta property="og:type" content="website">
<meta property="og:title" content="Guilherme Costa | Desenvolvedor Web">
<meta property="og:description" content="Ahoy! Me chamo Guilherme Costa e sou Desenvolvedor Web. Meu atual objetivo como programador é buscar conhecimento, aprendizado e experiência para me tornar um profissional cada vez mais capacitado.">
<meta property="og:url" content="https://guilhermecostam.github.io/">
<meta property="og:site_name" content="Guilherme Costa | Desenvolvedor Web">
<meta property="article:publisher" content="https://guilhermecostam.github.io/">
<meta property="og:image" content="https://guilhermecostam.github.io/assets/img/preview.png">
<!-- Twitter -->
<meta name="twitter:card" content="Sumário">
<meta name="twitter:site" content="@gcostamdr">
<meta name="twitter:title" content="Guilherme Costa | Desenvolvedor Web">
<meta name="twitter:description" content="Ahoy! Me chamo Guilherme Costa e sou Desenvolvedor Web. Meu atual objetivo como programador é buscar conhecimento, aprendizado e experiência para me tornar um profissional cada vez mais capacitado.">
<meta name="twitter:url" content="https://twitter.com/gcostamdr">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<p>GC<span>.dev</span></p>
</div>
<nav>
<ul class="menu">
<li><a href="#about" class="menu-item">QUEM SOU</a></li>
<li><a href="#cases" class="menu-item">CASES</a></li>
</ul>
<a href="#contact" class="btn-primary"><span>😃 ENTRE EM CONTATO</span></a>
<ul class="menu-social">
<li>
<a href="http://linkedin.com.br/in/guilhermecostam" target="_blank">
<img src="./assets/img/icon-linkedin.svg" alt="Meu Linkedin">
</a>
</li>
<li>
<a href="https://t.me/guilhermecostam" target="_blank">
<img src="./assets/img/icon-telegram.svg" alt="Meu Telegram">
</a>
</li>
<li>
<a href="https://github.com/guilhermecostam" target="_blank">
<img src="./assets/img/icon-github.svg" alt="Meu GitHub"/>
</a>
</li>
</ul>
<i class="toggle close-menu"></i>
</nav>
<i class="toggle open-menu"></i>
</div>
</header>
<main>
<section class="s-hero">
<div class="container">
<div class="title-box">
<h1>
Olá!<span class="wave">👋🏻</span> Eu sou <br><span class="name">Guilherme Costa</span>
</h1>
<h2>Desenvolvedor Back-End</h2>
<div class="techs">
<img src="./assets/img/php.svg" alt="Tecnologias - PHP">
<img src="./assets/img/laravel.svg" alt="Tecnologias - Laravel">
<img src="./assets/img/mysql.svg" alt="Tecnologias - MySQL">
<img src="./assets/img/git.svg" alt="Tecnologias - GIT">
<img src="./assets/img/docker.svg" alt="Tecnologias - Docker">
</div>
<a href="#about" class="btn-primary empty">Rolar para baixo</a>
</div>
</div>
</section>
<section id="about" class="s-about">
<div class="container">
<div class="about-me">
<h2>QUEM SOU<span>.</span></h2>
<p>
Ahoy! Meu nome é Guilherme Costa e sou um Desenvolvedor Web com o objetivo
de facilitar a vida das pessoas através da tecnologia. <br /><br />
Iniciei meus estudos em Informática no ano de 2017 e, desde então, estive em
constante aprendizado para me tornar um profissional cada vez mais experiente,
estudando vários conceitos fundamentais da programação e da computação.
</p>
<ul>
<li>
<a href="http://linkedin.com.br/in/guilhermecostam" target="_blank">
<img src="./assets/img/icon-linkedin.svg" alt="Meu Linkedin"/>
</a>
</li>
<li>
<a href="https://t.me/guilhermecostam" target="_blank">
<img src="./assets/img/icon-telegram.svg" alt="Meu Telegram"/>
</a>
</li>
<li>
<a href="https://github.com/guilhermecostam" target="_blank">
<img src="./assets/img/icon-github.svg" alt="Meu GitHub"/>
</a>
</li>
</ul>
</div>
<div class="my-picture">
<img src="./assets/img/picture.png" alt="Foto de Perfil"/>
</div>
</div>
</section>
<section id="cases" class="s-cases">
<div class="container">
<div class="title-cases">
<h2>CASES<span>.</span></h2>
</div>
<div class="cases">
<!-- <div class="case">
<img src="./assets/img/case2.jpg" alt="Case 2" />
</div> -->
<div class="case">
<a href="https://github.com/guilhermecostam/LamiaPHP" target="_blank">
<img src="./assets/img/LamiaPHP.png" alt="LamiaPHP Framework" />
</a>
</div>
<!-- <div class="case">
<img src="./assets/img/case3.jpg" alt="Case 3" />
</div> -->
</div>
</div>
</section>
<section id="contact" class="s-contact">
<div class="container">
<div class="title-contact">
<h2>
ENTRE EM <br />
CONTATO<span>.</span>
</h2>
<span class="tag">#LetsGoUp 🚀</span>
<ul class="links-contact">
<li>
<a href="http://linkedin.com.br/in/guilhermecostam" target="_blank">
<img src="./assets/img/icon-linkedin.svg" alt="Meu Linkedin"/> <span>Linkedin</span>
</a>
</li>
<li>
<a href="https://t.me/guilhermecostam" target="_blank">
<img src="./assets/img/icon-telegram.svg" alt="Meu Telegram"/> <span>Telegram</span>
</a>
</li>
</ul>
</div>
<img src="./assets/img/contact.svg" alt="Ilustração de Contato" />
</div>
</section>
</main>
<footer>
<div class="container">
<div class="copy">
<p>
Feito com ❤️ e carinho por
<a href="http://linkedin.com.br/in/guilhermecostam" target="_blank" class="footer-link">
Guilherme Costa.
</a>
</p>
</div>
</div>
<div class="scroll-to-top">
<span class="btn btn-position btn-style">👆🏻</span>
</div>
</footer>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>