/
index.html
179 lines (171 loc) · 12.6 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
<!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">
<title>Portifolio - Samuel Conradt do Amaral</title>
<!-- FONT -->
<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=Comfortaa:wght@300;400;500;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,500&display=swap" rel="stylesheet">
<!-- FONTAWESOME -->
<script src="https://kit.fontawesome.com/d9dda7c4a9.js" crossorigin="anonymous"></script>
<!-- LINK CSS -->
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.webp">
<link rel="icon" type="image/webp" sizes="32x32" href="/favicon-32x32.webp">
<link rel="icon" type="image/webp" sizes="16x16" href="/favicon-16x16.webp">
<link rel="manifest" href="/site.webmanifest">
<!-- SEO -->
<meta name="theme-color" content="#ef233c">
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portifolio - Samuel Conradt do Amaral</title>
<meta name="title" content="Portifolio - Samuel Conradt do Amaral" />
<meta name="description" content="Deseja um desenvolvedor profissional e com qualidade de atendimento? Posso ser o que você precisa! A mais de 3 anos estudando, desenvolvendo e trabalhando com web development." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://https://portifolio-samuel.vercel.app/" />
<meta property="og:title" content="Portifolio - Samuel Conradt do Amaral" />
<meta property="og:description" content="Deseja um desenvolvedor profissional e com qualidade de atendimento? Posso ser o que você precisa! A mais de 3 anos estudando, desenvolvendo e trabalhando com web development." />
<meta property="og:image" content="https://portifolio-samuel.vercel.app/images/fundo.webp" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://https://portifolio-samuel.vercel.app/" />
<meta property="twitter:title" content="Portifolio - Samuel Conradt do Amaral" />
<meta property="twitter:description" content="Deseja um desenvolvedor profissional e com qualidade de atendimento? Posso ser o que você precisa! A mais de 3 anos estudando, desenvolvendo e trabalhando com web development." />
<meta property="twitter:image" content="https://portifolio-samuel.vercel.app/images/fundo.webp" />
<meta name="author" content="Samuel Conradt do Amaral" />
<meta name="keywords" content="portifolio, portifolip web designer, web designer, desenvolvedor profissional, programação, css, html, js">
</head>
<body>
<header>
<div class="center">
<div class="logo w50">
<a href="/">Samuel Conradt</a>
</div>
<nav class="w50 menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#sobre">Sobre mim</a></li>
<li><a href="#trabalhos">Trabalhos</a></li>
<li><a href="#tecnologias">Tecnologias</a></li>
<li><a href="#certificados">Certificados</a></li>
</ul>
</nav>
</div>
</header>
<article>
<section id="banner" class="banner-principal">
<div class="box-text" data-animation="left">
<h2><b>Desenvolvedor Web</b> <b class="red">Completo</b> <br>e <b>Designer</b> <b class="red">Profissional</b> </h2>
</div>
<div class="box-items">
<a href="https://api.whatsapp.com/send?phone=5548999270576&text=Ol%C3%A1%2C%20vim%20do%20seu%20site%2C%20poderiamos%20conversar%3F" target="_blank"><i class="fa-brands fa-square-whatsapp"></i></a>
<a href="https://www.instagram.com/13samuelconradt/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a>
</div>
<div class="align-button">
<span id="button-scroll"><i class="fa-solid fa-chevron-down"></i></span>
</div>
</section>
<section class="sections-app" id="sobre" data-animation="right" >
<h2 class="w100">Quem eu sou?</h2>
<div class="flex">
<div class="text-box-sobre" >
<p>Sou um jovem a procura de experiência e aprendizagem. Sempre me aperfeiçoando e aprendendo coisas novas, atuo no mercado de Desenvolvimento Web a mais de 2 anos. Estudo de “design” e programação para manter o website estruturado e funcional, seguindo alguns fundamentos do “design” sempre visando aumentar o público e vendas de nossos clientes de forma bonita e profissional.</p>
</div>
<div class="img-box-sobre">
<img src="images/profile-pic.webp" alt="Samuel Conradt do Amaral" >
</div>
</div>
</section>
<section class="sections-app" id="trabalhos" data-animation="left" >
<h2 class="w100">Meu portifolio</h2>
<div class="box-trabalhos" >
<div class="box-trabalho">
<img width="100%" style="border-radius: 0;" src="images/logo-neila.png" alt="Samuel Conradt do Amaral - Neila Cunha Advocacia logo">
<h3>Neila Cunha Advocacia</h3>
<p class="desc">Antes de mais nada, comecei perguntando a cliente, qual seria o publico alvo do site e o que acompanharia-o, assim fazendo o branding da marca. A primeiro momento realizei o processo de protipagem do website seguindo conceitos do design para paginas web, em seguinda comecei o processo de Desenvolvimento da estrutura do website usando HTML, após apliquei o design com CSS e em seguida a programar as funções de gerenciamento do website e animações com PHP e Javascript</p>
<a href="https://www.neilacunhaadvocacia.com" target="_blank">Ver mais</a>
</div>
<div class="box-trabalho">
<img width="100%" src="images/logo-cleiton.png" alt="Samuel Conradt do Amaral - Cleiton Sliva Representações Logo - Cl Mad logo">
<h3>Cl Mad Representações</h3>
<p class="desc">O cliente foi simples e direto pedindo um site para com que aumentasse suas vendas, na sua representações e que o website contaria com um sistema de cadastro de produtos ao catalogo. A primeiro momento realizei o processo de protipagem do website seguindo conceitos do design para paginas web, em seguinda comecei o processo de Desenvolvimento da estrutura do website usando HTML, após apliquei o design com CSS e em seguida a programar as funções de gerenciamento do website e animações com PHP e Javascript<br><b>Infelizmente a hospedagem do site foi cancelada pelo cliente.</b></p>
<a onclick="javascript:void(0)" style="cursor: pointer;">Ver mais</a>
</div>
<div class="box-trabalho">
<img width="100%" src="images/logo-tunesound.png" alt="Samuel Conradt do Amaral - Cleiton Sliva Representações Logo - Cl Mad logo">
<span></span>
<h3>Tune Sound</h3>
<p class="desc"> Loja Virtual de Instrumentos, um projeto de e-commerce desenvolvido por uma equipe de dois programadores front-end. A loja virtual permite aos usuários navegar e comprar uma variedade de instrumentos musicais com corda. Ele foi desenvolvido no Instituto Federal Catarinense por dois alunos eu e o Gabriel Raupp, para um trabalho da materia de Desenvolvimento Web I. A loja virtual oferece uma ampla gama de produtos, incluindo guitarras, violões e baixo. Os usuários podem explorar os diferentes itens disponíveis e obter informações detalhadas sobre cada produto, como descrição, preço e imagens. O sistema de compra foi feito de forma nativa do JS, sem usar bibliotecas ou plugin, porém o sistema de compras é apenas ilustrativo e não funciona realmente pois não há back-end.</p>
<a href="https://github.com/SameDev/TuneSound" target="_blank">Veja mais no github</a>
</div>
</div>
<a class="github" href="https://github.com/SameDev" target="_blank"><i class="fa-brands fa-github"></i> Veja mais de meus projetos no meu github!</a>
</section>
<section class="sections-app" id="tecnologias" data-animation="right">
<h2 class="w100">Tecnologias que domino</h2>
<div class="box-tecnologias">
<div class="box-tecnologia w25">
<img width="100%" src="images/html5.webp" alt="Samuel Conradt do Amaral - HTML5">
<h3>HTML 5</h3>
</div>
<div class="box-tecnologia w25">
<img width="100%" src="images/css3.webp" alt="Samuel Conradt do Amaral - CSS3">
<h3>CSS 3</h3>
</div>
<div class="box-tecnologia w25">
<img width="100%" style="border-radius: 50%;" src="images/js.webp" alt="Samuel Conradt do Amaral - JS">
<h3>Javascript</h3>
</div>
<div class="box-tecnologia w25">
<img width="100%" src="images/php.webp" alt="Samuel Conradt do Amaral - PHP">
<h3>PHP</h3>
</div>
<div class="box-tecnologia w25">
<img width="100%" src="images/git.webp" alt="Samuel Conradt do Amaral - GIT">
<h3>GIT e Github</h3>
</div>
</div>
</section>
<section class="sections-app" id="certificados" data-animation="right">
<h2 class="w100">Meus Certificados</h2>
<div class="box-certificados">
<div class="box-certificado w25">
<img width="100%" src="images/javascript-cert.webp" alt="Samuel Conradt do Amaral - Curso Javascript Completo">
<h3>Javascript Completo</h3>
<a href="https://cursos.dankicode.com/api/certificados/b73d371a-ceb4-48c0-b825-6eddd387cbb8" target="_blank">Ver</a>
</div>
<div class="box-certificado w25">
<img width="100%" src="images/front-end.webp" alt="Samuel Conradt do Amaral - Curso Front-end Completo">
<h3>WebMaster Front-end</h3>
<a href="https://cursos.dankicode.com/api/certificados/17943356-1b7a-47d1-a547-2492c3764190" target="_blank">Ver</a>
</div>
<div class="box-certificado w25">
<img width="100%" src="images/webdesignexpress.webp" alt="Samuel Conradt do Amaral - Curso WebDesigner Express">
<h3>Web Designer Express</h3>
<a href="https://cursos.dankicode.com/api/certificados/48ebe718-de2b-4858-b1e7-8fd2bd332565" target="_blank">Ver</a>
</div>
<div class="box-certificado w25">
<img width="100%" src="images/logica.webp" alt="Samuel Conradt do Amaral - Curso de Logica de Programação">
<h3>Curso de Logica de Programação</h3>
<a href="https://cursos.dankicode.com/api/certificados/2dabb476-53ce-491e-84c5-43e8fef051e4" target="_blank">Ver</a>
</div>
</div>
<p style="text-align: center; display: block; width: 100%; font-size: 8pt; font-weight: light; margin-top: 20px;">Obs: os certificados estão com datas parecidas devido ao fato de ter deixado para emitir apenas nessa data, porém foram todos cuncluidos antes! <br>Outros certificados não estão listados aqui ainda, pelo motivo de layout</p>
</section>
</article>
<footer>
<h2 class="w100">Entre em contato</h2>
<div class="logo w33">
<a href="/">Samuel Conradt</a>
</div>
<ul class="w33">
<li><a href="mailto:conradtsamuel@gmail.com"><i class="fa-solid fa-envelope"></i> Email: conradtsamuel@gmail.com</a></li>
<li><a href="phone:+554899927-0576"><i class="fa-solid fa-envelope"></i> Telefone: +55 (48) 9 9927-0576</a></li>
</ul>
</footer>
<a href="#banner" id="button"><i class="fa-solid fas fa-chevron-up"></i></a>
<script src="main.js"></script>
<script src="animation.js"></script>
</body>
</html>