-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (189 loc) · 13.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Developer portfolio, filled with previous projects and interests">
<link rel="icon" href="./images/icon.webp">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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=Bree+Serif&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/responsive.css">
<title>Luisa Lopes' Portfolio</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg bg-primary" data-bs-theme="dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav" style="font-family: 'Bree Serif', serif; font-size: 20px; gap: 15px;">
<a class="nav-link active" aria-current="page" href="#skills">Skills</a>
<a class="nav-link" href="#aboutMe">About Me</a>
<a class="nav-link" href="#previousProjects">Previous Projects</a>
<a class="nav-link" href="#education">Education</a>
<a class="nav-link" href="#languages">Languages</a>
<a class="nav-link" href="#community">Community</a>
<a class="nav-link" href="#contactMe">Contact Me</a>
</div>
</div>
</div>
</nav>
<br><br>
<section id="introText">
<h1>My name's <span class="emphasis">Luisa</span><br>
Nice to meet you
</h1>
</section>
<main>
<section id="skills">
<div class="slider">
<div class="slider-track">
<div class="slide"><img src="./images/python.webp" alt="Python programming language logo"></div>
<div class="slide"><img src="./images/html.png" alt="HTML logo"></div>
<div class="slide"><img src="./images/css.png" alt="CSS logo"></div>
<div class="slide"><img src="./images/javascript.webp" alt="JavaScript logo"></div>
<div class="slide"><img src="./images/sql.webp" alt="SQL logo"></div>
</div>
<div class="slider-track">
<div class="slide"><img src="./images/python.webp" alt="Python programming language logo"></div>
<div class="slide"><img src="./images/html.png" alt="HTML logo"></div>
<div class="slide"><img src="./images/css.png" alt="CSS logo"></div>
<div class="slide"><img src="./images/javascript.webp" alt="JavaScript logo"></div>
<div class="slide"><img src="./images/sql.webp" alt="SQL logo"></div>
</div>
<div class="slider-track">
<div class="slide"><img src="./images/python.webp" alt="Python programming language logo"></div>
<div class="slide"><img src="./images/html.png" alt="HTML logo"></div>
<div class="slide"><img src="./images/css.png" alt="CSS logo"></div>
<div class="slide"><img src="./images/javascript.webp" alt="JavaScript logo"></div>
<div class="slide"><img src="./images/sql.webp" alt="SQL logo"></div>
</div>
</div>
</section>
<section id="aboutMe">
<div class="introduction-contents">
<div class="introduction-image">
<img src="./images/me.webp" alt="A young girl with a tan skin and glasses, smiling at the camera as she holds a white poodle">
<div class="introduction-text">
<h2>About Me</h2>
<p>Hello and welcome to my online portfolio! My name is Luisa Frugoli Lopes. I'm currently 20 years old, residing in Brazil. I'm a second year in Computer Science, and am currently focusing my studies on Fullstack Web Development and Data Analysis.</p>
</div>
</div>
</div>
</section>
<section id="previousProjects">
<h2>Previous Projects</h2>
<div class="container">
<div class="carousel">
<input type="radio" name="slides" checked="checked" id="slide-1">
<input type="radio" name="slides" id="slide-2">
<ul class="carousel__thumbnails">
<li>
<label for="slide-1"><img src="./images/eco.png" alt="The cover of the 'Ecoenergia' website, about environmentally friendly energy sources. It has a green and white color palette. It is coded in Portuguese."></label>
</li>
<li>
<label for="slide-2"><img src="./images/dark.png" alt="The cover of a website about 'Dark', the German Netflix show. It features Middle Aged and Young Jonas, two characters of said show, sat in a bench. It is coded in German."></label>
</li>
</ul>
<ul class="carousel__slides">
<li class="carousel__slide">
<figure>
<div>
<a href="https://herlocksholmes1888.github.io/APS-Ecoenergia/" target="_blank"><img src="./images/eco.png" alt="The cover of the 'Ecoenergia' website, about environmentally friendly energy sources. It has a green and white color palette. It is coded in Portuguese."></a>
</div>
</figure>
</li>
<li class="carousel__slide">
<figure>
<div>
<a href="https://herlocksholmes1888.github.io/dark-netflix/" target="_blank"><img src="./images/dark.png" alt="The cover of a website about 'Dark', the German Netflix show. It features Middle Aged and Young Jonas, two characters of said show, sat in a bench. It is coded in German."></a>
</div>
</figure>
</li>
</ul>
</div>
</div>
</section>
<section id="education">
<h2 style="color: black;">Education</h2>
<div class="institutions">
<div class="fortec">
<div class="institutions-img">
<a href="https://www.fortec.edu.br/" target="_blank"><img src="./images/fortec.png" alt="Escola e Faculdade Fortec-Fatef's logo, a gear in the middle of a triangle, with a hand hovering above it as if protecting it."></a>
</div>
<ul>
<li><strong>Degree:</strong> Certificate Program in IT</li>
<li><strong>Year of admission:</strong> 2019</li>
<li><strong>Status:</strong> Finished</li>
</ul>
<p>
As I got through my high school program, I enlisted in an IT certificate program. That means that, as soon as I was done with high school, I already had an additional degree with practical knowledge on topics such as <span class="emphasis text">Fullstack Development</span>, <span class="emphasis text">Databases</span>, and <span class="emphasis text">Electronics</span>. What started as just an additional degree became a set of abilities that I try to get better at everyday!
</p>
</div>
<div class="unip">
<div class="institutions-img">
<a href="https://www.unip.br/" target="_blank"><img src="./images/unip.webp" alt="Universidade Paulista's logo, a big yellow UNIP with a red dash under it, written 'Universidade Paulista'."></a>
</div>
<ul>
<li><strong>Degree:</strong> Bachelor's Degree in Computer Science</li>
<li><strong>Year of admission:</strong> 2023</li>
<li><strong>Status:</strong> Ongoing</li>
</ul>
<p>
After the pandemic, I decided to move to the next level and started to major in Computer Science. My journey is not yet finished, but I've already developed plenty of my soft skills thanks to the projects I've been doing with my colleagues. So far, I've developed hard skills on <span class="emphasis text">Web Development</span> and <span class="emphasis text">Object Oriented Programming</span>.
</p>
</div>
</div>
</section>
<section id="languages">
<div class="language-knowledge">
<div class="flags">
<img src="./images/brazil.png" alt="The flag of Brazil.">
<img src="./images/usa.webp" alt="The flag of the United States.">
<img src="./images/france.png" alt="The flag of France.">
<img src="./images/germany.png" alt="The flag of Germany.">
</div>
</div>
</section>
<section id="community">
<h2>Community</h2>
<div class="community-contents">
<div class="community-img">
<img src="./images/orange.webp" alt="Orange Juice icon, with the name written in a font with orange text, and a black background. The O is stylized to look like an orange fruit.">
</div>
<div class="community-text">
<p>
I'm active in a Brazilian community of designers, developers and tech enthusiasts sponsored by FCamara, named <span class="emphasis text">Orange Juice</span>. I moderate their Discord server, write some of their articles at Medium and lead Orange English, a initiative that allows non-native anglophones to exchange with each other in English, with a greater focus on acquiring a conversational level rather than a perfect grammar.
</p>
<p>
As a new learner, I can't recommend joining a community enough and, if you understand Portuguese, Orange Juice is a great place to start. Not only do we have coding challenges to keep your skills sharp, we also offer many opportunities for networking through more mundane subjects, such as recommending games to each other or sharing memes.
</p>
<p>
The iniciative that attracts the most people to Orange Juice is the regular opportunity for finding work within FCamara through what is called <span lang="pt-br" class="emphasis text">Programa de Formação</span>. For more information, visit <a href="https://tech.orangejuice.com.br/programadeformacao" target="_blank">this website</a>.
</p>
</div>
</div>
</section>
</main>
<footer>
<section id="contactMe">
<h2>Contact Me</h2>
<div class="social-media">
<a href="https://github.com/herlocksholmes1888" target="_blank" class="icon" alt="GitHub icon"><i class="fa-brands fa-github fa-xl"></i></a>
<a href="https://www.linkedin.com/in/luisa-frugoli-valente-lopes-b5b533231/" target="_blank" class="icon" alt="LinkedIn icon"><i class="fa-brands fa-linkedin fa-xl"></i></a>
<a href="mailto:luisafrugoli11@gmail.com" class="icon" alt="E-mail icon"><i class="fa-solid fa-envelope fa-xl"></i></a>
<a href="https://medium.com/@herlocksholmes1888" target="_blank" class="icon" alt="Medium icon"><i class="fa-brands fa-medium fa-xl"></i></a>
</div>
</section>
<hr>
<section id="copyright">© 2023-2024 Luisa Lopes</section>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>