-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
253 lines (225 loc) · 11.4 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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Renan's Portfolio</title>
<!-- Styles -->
<link rel="icon" type="image/svg+xml" href="static/svg/favicon.svg">
<link rel="stylesheet" target="_blank" href="static/css/styles.css">
<link rel="stylesheet" target="_blank" href="static/css/main.css">
<link rel="stylesheet" target="_blank" href="static/css/footer.css">
<!-- Fonts -->
<link rel="preconnect" target="_blank" href="https://fonts.googleapis.com">
<link rel="preconnect" target="_blank" href="https://fonts.gstatic.com" crossorigin>
<link target="_blank" href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!-- FA Icons -->
<script src="https://kit.fontawesome.com/162e461e7c.js"></script>
<!-- Scripts -->
<script src="static/scripts/scroll.js" defer></script>
</head>
<body>
<img src="static/svg/big-wave.svg" alt="A blue wave vector that serves as part of the background." id="big-wave" class="svg-background">
<img src="static/svg/small-wave.svg" alt="A blue wave vector that serves as part of the background." id="small-wave" class="svg-background">
<!--<header id="header" class="transparent-header">
<nav>
<a href="#section-1">ABOUT</a>
<a href="#section-2">EDUCATION</a>
<a href="#section-2">SKILLS</a>
<a href="#section-2">PROJECTS</a>
<a href="#contact">CONTACT</a>
</nav>
</header>
!-->
<button id="scrollToTopBtn" title="Back to top">
<i class="fa fa-arrow-up"></i>
</button>
<main>
<section id="section-1">
<div id="section-1-upper">
<div id="gretting">
<h1>HELLO</h1>
<h1>I'M RENAN</h1>
<h2>A <strong>CS student</strong> and tech enthusiast.</h2>
<h2>I'm currently looking for <strong>oportunities</strong>.</h2>
</div>
<div id="profile-picture-container">
<img id="profile-picture" src="static/images/profile-picture.jpg" alt="A picture of Renan Pinho, he's a young white man, he has short dark hair and a full beard. He is smiling and behind him there is a beautiful scenario with a small waterfall.">
</div>
</div>
<div id="section-1-bottom">
<div id="about-title">
<h2>ABOUT ME</h2>
</div>
<div id="about-details">
<p>I'm 22 year old brazilian Computer Science student at Federal University of Pelotas. Passionate about tech and eager to grow, I’m looking for opportunities to apply my skills and contribute to innovative projects.</p>
</div>
</div>
<a class="see-more-container" href="#section-2" >
<h4>CHECK OUT WHAT I'VE BEEN DOING</h4>
<i class="fa-solid fa-chevron-down"></i>
<div id="drop-down-aux-bar"></div>
</a>
</section>
<section id="section-2">
<div id="section-2-upper">
<div id="education">
<h3>EDUCATION</h3>
<div id="education-cards-container">
<div class="education-card">
<i class="fa-solid fa-graduation-cap"></i>
<h4>FEDERAL UNIVERSITY OF PELOTAS</h4>
<p>Computer Science</p>
<p>2022 - 2026</p>
</div>
</div>
</div>
<div class="separation-bar"></div>
<div id="skills">
<h3>SKILLS</h3>
<div id="skill-cards-container">
<div class="skill-card">
<h4>JAVA</h4>
<p>Intermediate</p>
</div>
<div class="skill-card">
<h4>C/C++</h4>
<p>Intermediate</p>
</div>
<div class="skill-card">
<h4>JAVASCRIPT</h4>
<p>Basic</p>
</div>
<div class="skill-card">
<h4>HTML</h4>
<p>Intermediate</p>
</div>
<div class="skill-card">
<h4>CSS</h4>
<p>Intermediate</p>
</div>
<div class="skill-card">
<h4>PYTHON</h4>
<p>Intermediate</p>
</div>
</div>
</div>
<div class="separation-bar"></div>
<div id="socials-and-cv">
<div id="section-2-socials-container">
<h3>MY PROFILES</h3>
<div id="social-icons-container">
<a target="_blank" href="https://github.com/pinhorenan">
<i class="fa-brands fa-square-github"></i>
</a>
<a target="_blank" href="https://www.linkedin.com/in/pinhorenan/">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
<div id="download-cv-container">
<h3>GET MY CV AS A PDF</h3>
<div id="download-button-container">
<a href="static/documents/cv_renan_pinho.pdf">DOWNLOAD CV</a>
</div>
</div>
</div>
</div>
<div id="section-2-bottom">
<h3>SOME OF MY PROJECTS</h3>
<div id="projects-display">
<div class="project-container">
<div class="project-top">
<div class="project-title">
<a target="_blank" href="https://github.com/pinhorenan/DungeonClash">DungeonClash</a>
</div>
<div class="project-techs">
<div class="tech-container"><p>JAVA</p></div>
<div class="tech-container"><p>OOP</p></div>
</div>
</div>
<div class="project-bottom">
<p class="project-description">Dungeon Clash is a project developed for the Object Oriented Programming class. The project's main objective is the implementation of a basic RPG system, inspired by famous tabletop RPGs like Dungeons & Dragons. The game is very simple but applies a lot of OOP concepts. It is text based.</p>
</div>
</div>
<div class="project-container">
<div class="project-top">
<div class="project-title">
<a target="_blank" href="https://github.com/pinhorenan/Age-of-Mages-and-Low-Wages">AMLW</a>
</div>
<div class="project-techs">
<div class="tech-container"><p>C++</p></div>
<div class="tech-container" id="wip-project-card" ><p>WIP</p></div>
</div>
</div>
<div class="project-bottom">
<p class="project-description">AMLW, short for "Age of Mages With Low Wages", is <strong>work-in-progress</strong> project. The idea is to develop a 3D game in C++. It was inspired by my previous game project in Java and my intentions in developing it is to further increase my C++ knowledge and start working with 3D engines.</p>
</div>
</div>
<div class="project-container">
<div class="project-top">
<div class="project-title">
<a target="_blank" href="https://github.com/pinhorenan/pinhorenan.github.io">This Website</a>
</div>
<div class="project-techs">
<div class="tech-container"><p>JS</p></div>
<div class="tech-container"><p>HTML</p></div>
<div class="tech-container"><p>CSS</p></div>
</div>
</div>
<div class="project-bottom">
<p class="project-description">Here you can find the GitHub repo for this website. I started working on it to practice my basic front-end skills and fullfill the need of having a page to display my portfolio. It is subject to future changes and to this point I learned a good amount of CSS and HTML while working on it. I also used the GitHub pages to have it online.</p>
</div>
</div>
</div>
</div>
<a class="see-more-container" href="#contact" >
<h4>NOW IF YOU'D LIKE TO GET IN TOUCH</h4>
<i class="fa-solid fa-chevron-down"></i>
<div id="drop-down-aux-bar"></div>
</a>
</section>
<section id="contact">
<h2>GET IN TOUCH WITH ME</h2>
<div id="contact-cards-container">
<div class="contact-card">
<a target="_blank" href="https://wa.me/5553935051455">
<i class="fa-brands fa-whatsapp"></i>
</a>
</div>
<div class="contact-card">
<a target="_blank" href="mailto:pinhorenan@outlook.com">
<i class="fa-solid fa-envelope"></i>
<p id="email">pinhorenan@outlook.com</p>
</a>
</div>
</div>
</section>
</main>
<footer>
<div id="footer-copyright">
© 2024 Renan Pinho. All rights reserved.
</div>
<div id="footer-links">
<a target="_blank" href="mailto:pinhorenan@outlook.com">
<i class="fa-solid fa-envelope"></i>
</a>
<a target="_blank" href="https://wa.me/5553935051455">
<i class="fa-brands fa-square-whatsapp"></i>
</a>
<a target="_blank" href="https://github.com/pinhorenan">
<i class="fa-brands fa-square-github"></i>
</a>
<a target="_blank" href="https://linkedin.com/in/pinhorenan">
<i class="fa-brands fa-linkedin"></i>
</a>
<a target="_blank" href="https://instagram.com/naner_pinho">
<i class="fa-brands fa-square-instagram"></i>
</a>
<a target="_blank" href="https://twitter.com/pinhorenan">
<i class="fa-brands fa-x-twitter"></i>
</a>
</div>
</footer>
</body>
</html>