-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
225 lines (202 loc) · 13.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/cda6bfb3f9.js" crossorigin="anonymous"></script>
<title>Guilherme Ramos UX Designer</title>
</head>
<body>
<!-- Header -->
<div id="header">
<div class="header-desk">
<div class="index-button">
<div class="index-button-line"></div>
<a href="./index.html" class="index-button-text">Code by Guilherme Ramos</a>
</div>
<div class="menu">
<a href="./index.html#works" class="menu-button">Projects</a>
<a href="./index.html#contacts" class="menu-button">Contact</a>
<a href="./about.html" class="menu-button">About</a>
</div>
</div>
<div class="header-mobile">
<div class="index-button">
<div class="index-button-line"></div>
<a href="./index.html" class="index-button-text">Code by Guilherme Ramos</a>
</div>
<div id="menu-button">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</div>
<div id="dropdown-menu-mask" >
<div id="dropdown-menu">
<div id="dropdown-menu-header">
<div id="close-menu-button">
<i class="fa-solid fa-x"></i>
</div>
</div>
<div id="dropdown-menu-list">
<a href="./index.html#works" class="dropdown-menu-list-item">Projects</a>
<a href="./index.html#contacts" class="dropdown-menu-list-item">Contact</a>
<a href="./about.html" id="dropdown-menu-list-item-about" class="dropdown-menu-list-item">About</a>
</div>
</div>
<div class="mask"></div>
</div>
<!-- Hero -->
<div class="sections hero-section">
<div class="container hero-section-container">
<div class="hero-section-title Position">Guilherme Ramos</div>
<div class="hero-section-text-box">
<div class="hero-section-title">Guilherme Ramos</div>
<div class="hero-section-subtitle">
<p class="hero-section-subtitle-text">UX Designer</p>
<div class="hero-section-subtitle-line"></div>
</div>
</div>
<div class="hero-section-imgbox">
<img src="./assets/images/home/bw-guilherme-profile.png" alt="Photo of Guilherme Ramos, a product designer, smiling while seated outdoors in a wooded area, wearing a dark coat and a beanie." class="hero-section-img">
</div>
</div>
</div>
<!-- Projects -->
<div id="works" class="section projects-section">
<div class="container projects-section-container">
<div class="section-header">
<div class="section-header-text">My projects</div>
<div class="section-header-line"></div>
</div>
<div class="card-project">
<div class="card-project-img-tile"><img src="./assets/images/home/projects/coverMyWebsite.png" alt="Portfolio of Guilherme Ramos displayed on a tablet, laptop, and smartphone, showcasing a consistent design with his name and title 'UX Designer' prominently visible on all devices."></div>
<div class="card-project-description">
<div class="card-project-description-tags">
<div class="cpd-tag">Figma</div>
<div class="cpd-tag">Photoshop</div>
<div class="cpd-tag">Web development</div>
</div>
<div class="card-project-description-text">
<div class="cpd-title">This website</div>
<div class="cpd-subtitle">This portfolio website was my first project as a 'developer.' Since I had been needing my own website for some time, I took the opportunity to learn coding—something I’ve always been interested in—while applying my design skills more effectively.</div>
</div>
<div class="card-project-description-footer">
<div class="cpd-year">2024</div>
</div>
</div>
</div>
<div class="card-project">
<div class="card-project-description">
<div class="card-project-description-tags">
<div class="cpd-tag">Figma</div>
<div class="cpd-tag">UI</div>
<div class="cpd-tag">UX</div>
</div>
<div class="card-project-description-text">
<div class="cpd-title">banQi Personal Loan</div>
<div class="cpd-subtitle">A redesign of the UI for de personal loan hiring flow for the banQi digital account.</div>
</div>
<div class="card-project-description-footer">
<div class="cpd-year">2023</div>
<div class="cpd-buttons">
<a class="cpd-calltoaction" href="./banqi.html"> View case <i class="fa-solid fa-arrow-right"></i> </a>
</div>
</div>
</div>
<div class="card-project-img-tile"><img src="./assets/images/home/projects/coverBanqi.png" alt="A hand on a dark blue background, holding an iPhone, with a blue and white interface displaying charts representing loan numbers."></div>
</div>
<div class="card-project">
<div class="card-project-img-tile"><img src="./assets/images/home/projects/coverKaspersky.png" alt="A gamer landing page with the title 'Keep your gaming experience secured' and a woman playing on a computer, displayed across multiple devices with a dark gray background."></div>
<div class="card-project-description">
<div class="card-project-description-tags">
<div class="cpd-tag">Adobe XD</div>
<div class="cpd-tag">Photoshop</div>
<div class="cpd-tag">UI</div>
<div class="cpd-tag">Study</div>
</div>
<div class="card-project-description-text">
<div class="cpd-title">Kaspersky LP</div>
<div class="cpd-subtitle">Study case of a gaming landing page for Kaspersky.</div>
</div>
<div class="card-project-description-footer">
<div class="cpd-year">2020</div>
<div class="cpd-buttons">
<a href="https://www.behance.net/gallery/107930345/Landing-Page-Kaspersky-Gaming-mode" class="cpd-calltoaction" target="_blank">View case <i class="fa-solid fa-arrow-right"></i> </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="sections testimonials-section">
<div class="testimonials-section-container">
<div class="testimonials-text">
<div class="testimonials-title">Testimonials</div>
<div class="testimonials-subtitle">What people say about me.</div>
</div>
<div class="testimonials-grid">
<div class="testimonials-card card1">
<svg class="testimonials-card-icon" xmlns="http://www.w3.org/2000/svg" height="20" width="17.5" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#fc9e4f" d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"/></svg>
<div class="testimonials-card-text">
<p>Guilherme is an exemplary professional, extremely talented, highly organized, and someone who consistently collaborates and works exceptionally well with other designers, product managers, software teams, and stakeholders in general.</p>
</div>
<div class="testimonial-card-owner">
<div class="testimonials-card-name">Luis Arratia</div>
<div class="testimonials-card-role">Design Lead</div>
</div>
</div>
<div class="testimonials-card card2">
<svg class="testimonials-card-icon" xmlns="http://www.w3.org/2000/svg" height="20" width="17.5" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#fc9e4f" d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"/></svg>
<div class="testimonials-card-text">
<p>Guilherme is a highly dedicated and organized professional in his projects.</p>
<br>
<p>He takes on a leadership role within the team, guiding workflow directions,sharing ideas, and presenting results.</p>
</div>
<div class="testimonial-card-owner">
<div class="testimonials-card-name">Thalita Gonçalves</div>
<div class="testimonials-card-role">UX Writer Specialist</div>
</div>
</div>
<div class="testimonials-card card3">
<svg class="testimonials-card-icon" xmlns="http://www.w3.org/2000/svg" height="20" width="17.5" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#fc9e4f" d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"/></svg>
<div class="testimonials-card-text">
<p>Guilherme is adaptable and always adjusts his projects with ease, delivering a great user experience aligned with the business's current needs. A resilient professional who consistently seeks alternatives.</p>
</div>
<div class="testimonial-card-owner">
<div class="testimonials-card-name">Guilherme de Paula</div>
<div class="testimonials-card-role">UX Researcher Specialist</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact -->
<div id="contacts" class="sections contact-section">
<div class=" contact-section-container">
<div class="contact-title">Let's work together</div>
<div class="contact-list">
<div class="contact-list-title">Contact</div>
<div class="contact-list-menu">
<a href="mailto:[email protected]" class="contact">E-mail</a>
<a href="https://www.linkedin.com/in/guilherme-dsn/" target="_blank" rel="noopener noreferrer" class="contact">Linkedin</a>
<a href="https://www.behance.net/guilherme-dsn" target="_blank" rel="noopener noreferrer" class="contact">Behance</a>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="footer-container">
<div class="footer-column footer-copyright">© 2025 All rights reserved.</div>
<div class="footer-column footer-localtime-text">Local time:<div id="clock"></div> <div id="timezone">(BRT)</div></div>
<button class="footer-column footer-button">Back to top <i class="fa-solid fa-arrow-up"></i> </button>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>