-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (121 loc) · 5.17 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
<!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" />
<title>Gustavo Portfolio</title>
<link rel="stylesheet" href="style.css" />
<script defer src="main.js"></script>
<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=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="logo">
<p id="firstN">GUSTAVO</p>
<p id="lastN">MONTE</p>
</div>
<div class="about">
<a href="">ABOUT</a>
<a href="#contactSlider">CONTACT</a>
</div>
</header>
<main>
<!-- landing page -->
<section>
<div class="wrapper">
<div class="container">
<div class="typed-out">WELCOME</div>
<div class="typed-out-new">BEM VINDO</div>
</div>
<a href="#secondSection"class="arrowCall"></a>
</div>
</section>
<!-- about me page -->
<!-- Copyright: All images were taken from Wikipedia.com -->
<section id="secondSection" class="aboutWrapper">
<div class="iconWrapper-left iconWrapper">
<img src="icons/html5.svg" class="iconStandard htmlIcon"></img>
<img src="icons/css3.svg" class="iconStandard"></img>
<img src="icons/js.svg" class="iconStandard jscript"></img>
<img src="icons/bash.svg" class="iconStandard bashIcon"></img>
<img src="icons/docker.svg" class="iconStandard dockerIcon"></img>
<img src="icons/mysql.svg" class="iconStandard sqlIcon"></img>
</div>
<div class="iconWrapper-right iconWrapper">
<img src="icons/react.svg" class="iconStandard reactIcon"></img>
<img src="icons/Tux.svg" class="iconStandard tuxIcon"></img>
<img src="icons/visualStudio.svg" class="iconStandard "></img>
<img src="icons/windows.svg" class="iconStandard windowsIcon"></img>
<img src="icons/sass.svg" class="iconStandard "></img>
<img src="icons/apple.svg" class="iconStandard appleIcon"></img>
</div>
<div class="aboutMe-text">
<h2>About me</h2>
<p class="aboutMe">
Hey there 👋! My name is Gustavo and I’m a Brazilian Web developer
currently enrolled at Langara College. I enjoy working and learning
from others and my coding philosophy is that I always strive to
deliver new and great experiences to users and to developers as
well, since a big part of a developer’s job relies on maintaining
and updating an existing code base which can end up being very time
consuming for the company if their developers struggle untangling an
obscurelogic that was implemented there.The
icons you see here are the technologies that I am familiar
with.
</p>
</div>
</section>
<section class="projects">
<h2>Portfolio</h2>
<div class="cards-container">
<div class="cards card1">
<div class="cards-side cards-side1 firstProject">
<h2>COMPANY 1</h2>
</div>
<div class="cards-side cards-side2">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, culpa animi? Dolore quisquam quam earum corrupti delectus eum aspernatur quas.</p>
</div>
</div>
<div class="cards card2">
<div class="cards-side cards-side1 secondProject">
<h2>COMPANY 2</h2>
</div>
<div class="cards-side cards-side2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias enim minima necessitatibus officiis facere eligendi laudantium aperiam saepe sint suscipit?</p>
</div>
</div>
<div class="cards card3">
<div class="cards-side cards-side1 thirdProject">
<h2>COMPANY 3</h2>
</div>
<div class="cards-side cards-side2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut veniam magni eum quia doloremque repellendus laborum voluptatum perspiciatis sit consectetur!</p>
</div>
</div>
</div>
</section>
<section id="contactSlider" class="contactSection">
<p class="linkedinText">LINKEDIN</p>
<p class="githubText">GITHUB</p>
<h2>Contact</h2>
<div class="contactWrapper">
<div class="contactIcons">
<div class="linkedinContainer">
<a href="https://www.linkedin.com/">
<img src="icons/linkedin.png" class="iconStandard linkedinIcon contactIcon" id="linked" alt="">
</a>
</div>
<div class="githubContainer">
<a href="https://github.com/">
<img src="icons/github.svg" class="iconStandard githubIcon contactIcon " id="gitImg" alt="">
</a>
</div>
</div>
</div>
</section>
</main>
</body>
</html>