-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (173 loc) · 9.29 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
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>portfólio julia lacerda</title>
<link href="style.css" rel="stylesheet">
<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=Jost:wght@300;400;500;600;700;800&900display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7ac8a51c70.js" crossorigin="anonymous"></script>
</head>
<body class="body">
<header class="header">
<button class="menu-btn" id="menu-btn-abrir"><i class="fa-solid fa-bars"></i></button>
<div class="overlay" id="overlay">
<nav class="nav" id="nav">
<button class="menu-btn menu-btn-fechar" id="menu-btn-fechar"><i class="fa-solid fa-xmark"></i></button>
<ul class="nav-ul">
<li class="nav-li"><a class="nav-link" href="index.html">home</a></li>
<li class="nav-li"><a class="nav-link" href="#projetos-section">projetos</a></li>
<li class="nav-li"><a class="nav-link" href="#sobre-section">sobre</a></li>
<li class="nav-li"><a class="nav-link" href="#contato-section">contato</a></li>
</ul>
</nav>
</div>
</header>
<section class="welcome-section" id="welcome-section">
<div class="welcome-img">
</div>
<div class="welcome-info">
<div class="welcome-info-top">
<h2 class="welcome-title">Julia Lacerda</h2>
<p class="welcome-subtitle">desenvolvedora web</p>
<p class="welcome-location">Florianópolis </p>
</div>
<div class="welcome-info-bottom">
<a class="welcome-redes-sociais" href="#" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
<a class="welcome-redes-sociais" href="#" target="_blank"><i class="fa-brands fa-github"></i></a>
<a class="welcome-redes-sociais" href="https://t.me/ailuj_ailuj" target="_blank"><i class="far fa-paper-plane"></i></a>
<a class="welcome-redes-sociais" href="mailto:julialacerda@protonmail.com" target="_blank"><i class="fas fa-envelope"></i></a>
</div>
</div>
</section>
<section class="projetos-section" id="projetos-section">
<h2 class="sections-title"><span class="underline-rosa">projetos</span></h2>
<div class="container">
<div class="projetos-card">
<img class="projetos-img" src="img/projeto-1.png" alt="Printscreen de uma página web de jogo da forca"/>
<div class="projetos-info">
<h3 class="projetos-title">Jogo da Forca</h3>
<p class="projetos-sobre">Este projeto é parte da minha formação como desenvolvedora frontend. Foi desenvolvido através de um desafio proposto pelo programa ONE, parceria da Oracle e Alura. HTML, CSS e Javascript foram escritos inteiramente por mim. </p>
<a href="https://ailujailuj.github.io/jogo-da-forca/" target="_blank" class="projetos-btn">demo</a>
<a href="https://github.com/ailujailuj/jogo-da-forca" target="_blank" class="projetos-btn">repositório</a>
</div>
</div>
<div class="projetos-card">
<img class="projetos-img" src="img/projeto-2.png" alt="Printscreen de uma página web de decodificação"/>
<div class="projetos-info">
<h3 class="projetos-title">Decodificador</h3>
<p class="projetos-sobre">Este projeto foi realizado durante o projeto ONE. A proposta do projeto era codificar e decodificar um código, de acordo com a chave disponibilizada. O projeto foi inteiramente escrito por mim.</p>
<a href="https://ailujailuj.github.io/cripto/" target="_blank" class="projetos-btn">demo</a>
<a href="https://github.com/ailujailuj/cripto" target="_blank" class="projetos-btn">repositório</a>
</div>
</div>
</div>
</section>
<section class="sobre-section" id="sobre-section">
<h2 class="sections-title"><span class="underline-rosa">sobre</span></h2>
<div>
<h2 class="sobre-title">skills</h2>
<div class="container">
<div>
<img class="icon" src="img/html.png" alt="html icon">
<p>Html 5</p>
</div>
<div>
<img class="icon" src="img/css.png" alt="css icon">
<p>CSS</p>
</div>
<div>
<img class="icon" src="img/javascript.png" alt="javascript icon">
<p>Javascript</p>
</div>
</div>
</div>
<div>
<h2 class="sobre-title">formação</h2>
<div class="container">
<div class="sobre-formacao-card">
<img class="icon-full" src="img/ufsc.png" alt="brasão da ufsc">
<p class="sobre-formacao-curso">Cinema</p>
<p>UFSC</p>
<p class="sobre-formacao-ano"> 2016 - 2021 </p>
</div>
<div class="sobre-formacao-card">
<img class="icon-full" src="img/alura.jpg" alt="logomarca da alura">
<p class="sobre-formacao-curso">Desenvolvimento Web</p>
<p>Alura</p>
<p class="sobre-formacao-ano">2021 - 2022</p>
</div>
<div class="sobre-formacao-card">
<img class="icon-full" src="img/freecodecamp.jfif" alt="logomarca do freecodecamp">
<p class="sobre-formacao-curso">Design Responsivo para Web</p>
<p>FreeCodeCamp</p>
<p class="sobre-formacao-ano">2021</p>
</div>
</div>
</div>
<div class="sobre-mim-div">
<div class="container">
<p class="sobre-texto">Nascida no interior do Rio Grande do Sul, me mudei para Santa Catarina ainda criança. Em 2016 iniciei a graduação no curso de Cinema da UFSC. No curso realizei diversos trabalhos audiovisuais e artísticos. No entanto, as oportunidades profissionais eram escassas e decidi ingressar em uma nova carreira. </p>
<p class="sobre-texto">Iniciei meus estudos na área da tecnologia por meio do site FreeCodeCamp, que promove formações através de desafios. Concluí o curso de Design Responsivo para Web com 300h de formação e com a realização de 4 páginas estáticas. De forma autodidata segui minha formação em plataformas gratuitas de conhecimento, até que surgiu a oportunidade de participar do projeto One.</p>
<p class="sobre-texto">Atualmente me dedico aos estudos de lógica de programação, HTML, CSS, Javascript e Java, buscando consolidar meus conhecimentos e visando uma primeira oportunidade na carreira de desenvolvedora. Sou bastante curiosa, apaixonada por enigmas e interessada pelas coisas do mundo. Em meu tempo livre gosto de me aventurar pelas belezas naturais de minha cidade, Florianópolis, e de estar com meus amigos e com minha família. </p>
</div>
<div>
<h3 class="sobre-title">hobbies</h3>
<div class="container">
<div>
<img class="icon-small" src="img/calcas.png" alt="pants icon">
<p>costurar</p>
</div>
<div>
<img class="icon-small" src="img/fish.png" alt="fish icon">
<p>ir à praia</p>
</div>
<div>
<img class="icon-small" src="img/books.png" alt="books icon">
<p>ler</p>
</div>
<div>
<img class="icon-small" src="img/bike.png" alt="bike icon">
<p>pedalar</p>
</div>
</div>
</div>
</div>
</section>
<section class="contato-section" id="contato-section">
<h2 class="sections-title"><span class="underline-rosa">contato</span></h2>
<form class="contato-form" id="contato-form">
<label for="nome">Nome
<input class="contato-input" type="text" name="nome" id="nome" maxlength="50" data-form="input"data-tipo="nome" required/>
<span data-tipo="nome-error"></span>
</label>
<label for="email">Email
<input class="contato-input" type="email" name="email" id="email" data-form="input" data-tipo="email" required/>
<span data-tipo="email-error"></span>
</label>
<label for="nome">Assunto
<input class="contato-input" type="text" name="assunto" id="assunto" maxlength="50" data-form="input" data-tipo="assunto" required/>
<span data-tipo="assunto-error"></span>
</label>
<label for="nome">Mensagem
<textarea class="contato-input" name="mensagem" id="mensagem" maxlength="300" data-form="input" data-tipo="mensagem" required></textarea>
<span data-tipo="mensagem-error"></span>
</label>
<button id="contato-btn" class="contato-btn" type="submit">enviar</button>
</form>
<div id="contato-submitted-msg" class="contato-submitted-msg">
<span class="contato-check">
<i class="fa-solid fa-check"></i></span>
<h3>Sua mensagem foi enviada!</h3>
</div>
</section>
<footer>
<p>Desenvolvido por Julia Lacerda</p>
<p>Hobbies icons por <a class="footer-link" href="https://thenounproject.com/olgamur_2015/">Olga</a> do <a class="footer-link" href="https://thenounproject.com/">NounProject.com</a></p>
<p><a class="footer-link" href="https://icons8.com/icon/20909/html-5">Html 5</a>, <a class="footer-link" href="https://icons8.com/icon/21278/css3">CSS</a> e <a class="footer-link" href="https://icons8.com/icon/108784/javascript">Javascript</a> icons por <a class="footer-link" href="https://icons8.com/">Icons8</a></p>
</footer>
<script src="script.js"></script>
</body>
</html>