-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
233 lines (225 loc) · 8.98 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
<!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="style.css">
<title>My Website</title>
</head>
<body>
<!-- Header -->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1><span>P</span>aulo <span>A</span>ndres</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger">
<div class="bar"></div>
</div>
<ul>
<li><a href="#hero" data-after="Home">Home</a></li>
<li><a href="#services" data-after="Service">Services</a></li>
<li><a href="#projects" data-after="Projects">Projects</a></li>
<li><a href="#about" data-after="About">About</a></li>
<li><a href="#contact" data-after="Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- End Header -->
<!-- Hero Section -->
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, <span></span></h1>
<h1>My Name is <span></span></h1>
<h1>Paulo <span></span></h1>
<a href="#projects" type="button" class="cta">Portfolio</a>
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Service Section -->
<section id="services">
<div class="services container">
<div class="service-top">
<h1 class="section-title">Serv<span>i</span>ces</h1>
<p>A short list mentioning each type of service I can offer
for you, right at the point that I am keeping to work daily to maintain the constancy of
learning and also practicing excellence!</p>
</div>
<div class="service-bottom">
<div class="service-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" alt="service"/></div>
<h2>Web Design</h2>
<p>I do ui/ux design for the website that helps website to get a unique
look.</p>
</div>
<div class="service-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" alt="service"/></div>
<h2>Web Dev</h2>
<p>I also develop the websites. I create high performance website with blazing fast
speed.</p>
</div>
<div class="service-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" alt="service"/></div>
<h2>App Dev</h2>
<p>I develop mobile application. I create mobile app with eye catching
ui.</p>
</div>
<div class="service-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" alt="service"/></div>
<h2>Data Analytics</h2>
<p>I also create and develop database models using modern softwares to
structure informations.</p>
</div>
</div>
</div>
</section>
<!-- End Service Section -->
<!-- Projects Section -->
<section id="projects">
<div class="projects container">
<div class="projects-header">
<h1 class="section-title">Recent <span>Projects</span></h1>
</div>
<div class="all-projects">
<div class="project-item">
<div class="project-info">
<h1>Habits</h1>
<h2>App Tracker</h2>
<p>An application that uses user informations to track his habits, including morning walk, drink water,
and some orthers in a daily operation, who'll decline new tries at the same day, making a fun experience
that can keep saving his exercises every day and will always wait till a new register.</p>
</div>
<div class="project-img">
<img src="./img/img-4.jpg" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>League of Legends</h1>
<h2>Riot Games - Login Screen</h2>
<p>A simple clone of the login screen of the Riot Games website, that demands the email, password and offer
an account authentication with Facebook, Google or Apple. Was created just to practise my programming languagues
knowledge, for example, HTML, CSS and the last one, JavaScript to some user interactions.</p>
</div>
<div class="project-img">
<img src="./img/img-6.png" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Gamehub</h1>
<h2>Personal Gamer Account</h2>
<p>An simple interface that demonstrates the most loved games i do play and have in my favorites list,
together with the streamers that i always watch in the Twicth platform. This project was created with primarily
HTML, and complete with CSS to modernize the main visual of the page.</p>
</div>
<div class="project-img">
<img src="./img/img-7.png" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Guess Your Future Game</h1>
<h2>Game to Discover</h2>
<p>This is a game that i created for new practices with the JavaScript languague, he will say to the user
a answer that is required. The funny part here is the game "may reveal your destiny", giving the impression
of knowing the future of each one of the questions. Can you believe that?</p>
</div>
<div class="project-img">
<img src="./img/img-8.png" alt="img">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Projects Section -->
<!-- About Section -->
<section id="about">
<div class="about container">
<div class="col-left">
<div class="about-img">
<img src="./img/img-10.jpeg" alt="img">
</div>
</div>
<div class="col-right">
<h1 class="section-title">About <span>me</span></h1>
<h2>Full Stack Developer</h2>
<p>A full-stack developer who can build both the front end and the back end of a website.
Starting even with the front end (the parts of a website a user sees and interacts with)
till the back end (the behind-the-scenes data storage and processing),
which one demanding different skill sets. Besides that, i do love create solutions
and solve people's problems with technology.</p>
<a href="#" class="cta">Download Resume</a>
</div>
</div>
</section>
<!-- End About Section -->
<!-- Contact Section -->
<section id="contact">
<div class="contact container">
<div>
<h1 class="section-title">Contact <span>info</span></h1>
</div>
<div class="contact-items">
<div class="contact-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/phone.png" alt="contact"/></div>
<div class="contact-info">
<h1>Phone</h1>
<h2>+55 1194697-1486</h2>
</div>
</div>
<div class="contact-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/new-post.png" alt="contact"/></div>
<div class="contact-info">
<h1>Email</h1>
<h2>[email protected]</h2>
</div>
</div>
<div class="contact-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/map-marker.png" alt="contact"/></div>
<div class="contact-info">
<h1>Address</h1>
<h2>Itaquera, São Paulo, Brazil</h2>
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
<!-- Footer -->
<section id="footer">
<div class="footer container">
<div class="brand">
<h1><span>P</span>aulo <span>A</span>ndres</h1>
</div>
<h2>Your Complete Web Solution</h2>
<div class="social-icon">
<div class="social-item">
<a href="https://github.com/andrvss"><img src="https://img.icons8.com/bubbles/100/000000/github.png" alt="github"/></a>
</div>
<div class="social-item">
<a href="https://www.instagram.com/p.andrvss/"><img src="https://img.icons8.com/bubbles/100/000000/instagram-new.png" alt="instagram"/></a>
</div>
<div class="social-item">
<a href="https://www.linkedin.com/in/paulo-andres/"><img src="https://img.icons8.com/bubbles/100/000000/linkedin.png" alt="linkedin" /></a>
</div>
<div class="social-item">
<a href="https://www.behance.net/PauloAndres_"><img src="https://img.icons8.com/bubbles/100/000000/behance.png" alt="behance"/></a>
</div>
</div>
<p>Copyright © 2020 Paulo. All rights reserved</p>
</div>
</section>
<!-- End Footer -->
<script src="./app.js"></script>
</body>
</html>