-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (129 loc) · 5.27 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" class="dark-theme">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raquel R.</title>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon_io/favicon-16x16.png">
<link rel="manifest" href="./assets/favicon_io/site.webmanifest">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="./assets/css/base.css">
<link rel="stylesheet" href="./assets/css/inicio.css">
<link rel="stylesheet" href="./assets/css/mediasQueries.css">
</head>
<body>
<header class="header">
<!-- Ícone para mudar o tema light/dark -->
<button type="button" id="changeTheme-btn" class="btn_theme">
<i class="changeTheme_icon fa fa-sun" aria-hidden="true"></i>
</button>
<div class="header_content grid">
<div class="header_text">
<h1 class="header_title">Raquel Roessing</h1>
<h2 class="header_subtitle">Desenvolvedora front-end</h2>
<div class="header_socials">
<a href="https://www.linkedin.com/in/raquel-frassing/">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://github.com/frassing">
<i class="fab fa-github-square"></i>
</a>
</div>
</div>
<!-- Ilustração só vai aparecer em telas maiores que 620px -->
<div class="header_animation">
<img src="./assets/img/header/chOP-pana.svg" alt="ilustração de mulher com um laptop">
<img src="./assets/img/header/windowOP-pana.svg" alt="ilustração janela de um site">
<img src="./assets/img/header/bgOP-pana.svg" alt="ilustração fundo branco">
</div>
</div>
</header>
<main class="inicio_main grid">
<section id="intro" class="grid">
<img src="https://avatars.githubusercontent.com/u/116108339?v=4" class="img_profile" alt="imagem da autora Raquel">
<div class="intro_text">
<p>Olá, bem-vindo(a) ao meu portfólio! Sou a Raquel, estudante de Análise e Desenvolvimento de Sistemas na UNINTER; atualmente estou dedicando-me a estudar Desenvolvimento Web front-end, tenho focado em HTML5, CSS3 e JavaScript.</p>
<p>Use o menu para navegar e saber mais sobre mim ou para fazer o download do meu currículo, e se quiser conversar, entre em contato.</p>
</div>
</section>
<nav class="menu menu_inicio">
<ul class="menu_lista grid">
<li class="menu_item">
<a href="./assets/pages/sobre.html" class="menu_link flex">
<i class="fa fa-user" aria-hidden="true"></i>
<span>Sobre</span>
</a>
</li>
<li class="menu_item">
<a href="./assets/pages/projetos.html" class="menu_link flex">
<i class="fa fa-folder" aria-hidden="true"></i>
<span>Projetos</span>
</a>
</li>
<li class="menu_item">
<a href="./assets/pages/contato.html" class="menu_link flex">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>Contato</span>
</a>
</li>
<li class="menu_item">
<!-- Arquivo do currículo em pdf -->
<a href="./assets/cv_RaquelRoessing.pdf" class="menu_link flex" download="RaquelRoessing-CV">
<i class="fa fa-download" aria-hidden="true"></i>
<span>CV</span>
</a>
</li>
</ul>
</nav>
</main>
<footer class="footer">
<div class="creditos">
<ul class="creditos_lista grid">
<li>
Ilustração de Pana <a href="https://storyset.com/illustration/online-page/pana" target="_blank">by Storyset</a>
</li>
<li>
Ilustração de Rafiki <a href="https://storyset.com/illustration/profile-data/rafiki" target="_blank">by Storyset</a>
</li>
<li>
Ilustração de Rafiki <a href="https://storyset.com/illustration/profile-interface/rafiki" target="_blank">by Storyset</a>
</li>
<li>
Ilustração de bro <a href="https://storyset.com/illustration/appreciation/bro" target="_blank">by Storyset</a>
</li>
<li>
Inspiração Nav mobile - <a href="https://youtu.be/27JtRAI3QO8" target="_blank">Bedimcode</a>
</li>
<li>
Inspiração cards animados - <a href="https://www.youtube.com/watch?v=CmZhfLiJRp8" target="_blank">Helton Lima</a>
</li>
<li>
Inspiração tema claro/escuro - <a href="https://www.youtube.com/watch?v=rnkdLX6mOD4" target="_blank">dpw</a> e <a href="https://www.youtube.com/watch?v=JrIHtMNJbkU" target="_blank">Girl Coding</a>
</li>
<li>
Efeito de glassmorphism gerado em <a href="https://hype4.academy/tools/glassmorphism-generator" target="_blank">Hype4.Academy</a>
</li>
<li>
Favicon gerado em <a href="https://favicon.io/">favicon.io</a>
</li>
</ul>
</div>
<div class="footer_socials">
<a href="https://www.linkedin.com/in/raquel-frassing/">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://github.com/frassing">
<i class="fab fa-github"></i>
</a>
<a href="https://www.instagram.com/fra.ssing/">
<i class="fab fa-instagram"></i>
</a>
</div>
<p class="copyright">© 2023 | Desenvolvido por Raquel Roessing</p>
</footer>
<script src="./assets/js/script.js"></script>
</body>
</html>