-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
225 lines (181 loc) · 10.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/styles.css">
<!-- Fonts -->
<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;1,100;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
<title>RS - Portfolio
</title>
</head>
<body>
<header>
<navbar class="navbar">
<div class="logo">Rafael Santiago </div>
<div class="toggle__menu" id="toggle__menu"><img src="img/icons/menu.svg"></div>
<ul class="menu" id="menu">
<li class="menu__link"><a href="#home" id="menu__home">Home</a></li>
<li class="menu__link"><a href="#last-projects" id="menu__last-projects">Last Projects</a></li>
<li class="menu__link"><a href="#about-me" id="menu__about-me">About Me</a></li>
<li class="menu__link"><a href="#contact" id="menu__contact">Contact</a></li>
</ul>
<div class="progress-bar"></div>
<div class="bar"></div>
</navbar>
</header>
<section class="section__main" id="home">
<div class="main__card">
<image class="avatar" src="img/pictures/avatar.png" alt="profile picture"></image>
<h1 class="main__h1"><strong>Front end Web Developer</strong></h1>
<p class="main__name">RAFAEL SANTIAGO</p>
<p class="main__paragraph"><em>I design and develop useful, attractive and efficient websites based on UX Design for the clients and stakeholders needs.</em></p>
<button class="button button_contact">Contact me</button>
<button class="button ghost_button button_projects"> My Projects</button>
</div>
<div class="main__banner">
<img src="/img/icons/html.svg" alt="html icon">
<img src="/img/icons/css.svg" alt="css icon">
<img src="/img/icons/js.svg" alt="js icon">
<img src="/img/icons/jquery.svg" alt="jquery icon">
<img src="/img/icons/bootstrap.svg" alt="bootstrap icon">
<img src="/img/icons/wordpress.svg" alt="wordpress icon">
<img src="/img/icons/git.svg" alt="git icon">
<img src="/img/icons/github.svg" alt="github icon">
<img src="/img/icons/react.svg" alt="react icon">
<img src="/img/icons/figma.svg" alt="figma icon">
<h3>HTML</h3>
<h3>CSS</h3>
<h3>JavaScript</h3>
<h3>jQuery</h3>
<h3>Bootstrap</h3>
<h3>Wordpress</h3>
<h3>Git</h3>
<h3>GitHub</h3>
<h3>React</h3>
<h3>Figma</h3>
</div>
</section>
<!-- Section Projects -->
<!-- Add breakpoint at 950px width -->
<section class="projects__section" id="last-projects">
<h2 class="projects__title" id="projects-title-h2"><span class="typed"></span></h2>
<div class="card__container">
<!-- Data Scientist Web -->
<div class=""><img class="card__img" src="/img/backgrounds/data-science-web.jpg" alt="background data scientist website"></div>
<div class="card__text">
<h4 class="card__title-h4">Website for<br> Professional Data Scientist </h4>
<p class="card__paragraph">
Based on HTML and CSS with animations on CSS and JavaScript this site was design considering the UX for potential clients, recruiters or people interested with specific ideas or projects.
<br>
<br>
Uploaded on a private hosting and following Google Analytics results it was possible to improve the position in Google working on SEO with meta tags, copywrite and UI.
</p>
<div class="buttons__card">
<button class="button button_code"> Code</button>
<button class="button ghost_button button_live"> Live</button>
</div>
</div>
<!-- Coach Web -->
<div><img class="card__img" src="/img/backgrounds/bg-coaching.jpg" alt="background ontologic coach website"></div>
<div class="card__text card__text-coach">
<h4 class="card__title-h4">Website for<br> Professional Data Scientist </h4>
<p class="card__paragraph">
Based on HTML and CSS with animations on CSS and JavaScript this site was design considering the UX for potential clients, recruiters or people interested with specific ideas or projects.
<br>
<br>
Uploaded on a private hosting and following Google Analytics results it was possible to improve the position in Google working on SEO with meta tags, copywrite and UI.
</p>
<div class="buttons__card buttons__card-left">
<button class="button button_code"> Code</button>
<button class="button ghost_button button_live"> Live</button>
</div>
</div>
<!-- Card Web Photographer -->
<div><img class="card__img" src="/img/backgrounds/bg-photos.jpg" alt="background photographer website"></div>
<div class="card__text card__text-photos">
<h4 class="card__title-h4">Photographer Website</h4>
<p class="card__paragraph">
Based on HTML and CSS with animations on CSS and JavaScript this site was design considering the UX for potential clients, recruiters or people interested with specific ideas or projects.
<br>
<br>
Uploaded on a private hosting and following Google Analytics results it was possible to improve the position in Google working on SEO with meta tags, copywrite and UI.
</p>
<div class="buttons__card">
<button class="button button_code"> Code</button>
<button class="button ghost_button button_live"> Live</button>
</div>
</div>
</div>
</section>
<!-- Section About me -->
<section class="about-me" id="about-me">
<h2 class="projects__title" id="about-me-h2"><About-me></h2>
<div class="about-me__visionmission">
<img src="/img/icons/target-icon.svg" class="target" alt="target icon">
<img src="/img/icons/eye.svg" class="eye" alt="eye icon">
<h3>My Mission</h3>
<h3>My Vision</h3>
<p class="about-me__p mission">Build a website that a client required and overcome their expectations for good focused on User Experience (UX) with a User Interface (UI) needed to make attractive sites using a clean, clear, effective and efficient languages as HTML, CSS and Javascript.</p>
<p class="about-me__p vision">Maintain and improve through the new technology in the markets an effective connection based on empathy and logic with customers or stakeholder to satisfy their needs.</p>
</div>
<div class="how-i-work">
<div class="how-i-work__process">
<img src="/img/icons/work-process.svg" alt="designing in process icon">
<h3>My Work Process</h3>
<p class="about-me__p about-me__p-work-process">For an excellent web design is important is to clarify what is needed and who are going to be the users for that my first step begins creating an idea based on UX Design for later design a potential design. Once the client or stakeholders approve it the development work begins to finally have an operative and responsive website.</p>
</div>
<div class="how-i-work__steps">
<div>
<img src="/img/icons/ux-icon.svg" alt="User experience UX icon">
<p>UX Design helps to define an effective design understanding and focusing on the needs and feedback from the users who will use the website.</p>
</div>
<div>
<img src="/img/icons/UI-icon.svg" alt="User interface UI icon">
<p>Colors, typography, interactions, images, all should have a purpouse. Creating mock-ups and prototypes helps to move fast correcting and validating all details for the final design .</p>
</div>
<div>
<img src="/img/icons/web-layout-icon.svg" alt="Web layout icon">
<p>Web layout begins and it is time to code a functional and efficient code with HTML, CSS, Javascript and if is needed any framework or software that the client, stakeholders or the project needed.</p>
</div>
<div>
<img src="img/icons/responsive-design-icon.svg" alt="Responsive web design icon">
<p>A responsive web design is finally developed and tested. If needed any change from feedbacks or changes in the project it is made.</p>
</div>
</div>
</div>
<div class="how-i-work-empty-space"></div>
</section>
<!-- Section Contact -->
<section class="contact" id="contact">
<h2 class="projects__title"><Contact-me></h2>
<div class="form_container">
<h2 class="form_title">Get in touch</h2>
<form class="form" action="https://formsubmit.co/contact@rafaelsantiago.site"
method="POST">
<div class="form-name">Name</div>
<input type="text" id="name" class="form_input" placeholder="Name" name="name">
<div class="form-name">E-mail</div>
<input type="email" id="name" class="form_input" placeholder="E-mail" name="email">
<div class="form-name">Your message here</div>
<textarea class="form_input form_input--message" placeholder="Message" name="message"></textarea>
<input type="submit" value="Submit" class="button">
</form>
</div>
<footer class="footer">
<p class="footer__p">Designed & Developed by Rafael Santiago © 2023</p>
</footer>
</section>
<!-- Scripts -->
<script src="js/progress.js"></script>
<script src="js/menu.js"></script>
<script src="/js/show-scroll.js"></script>
<script src="/js/typewrite-effect.js"></script>
<script src="/js/typewrite-effect-config.js"></script>
</body>
</html>