-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
203 lines (184 loc) · 9.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Steve Cruz - Personal Website</title>
<script src="src/utils.js" defer></script>
<script src="src/hamburger-menu.js" defer></script>
<script src="src/pop-up.js" defer></script>
<script src="src/carousel.js" defer></script>
<script src="src/floating-button.js" defer></script>
<script src="src/script.js" defer></script>
<link rel="stylesheet" href="styles/wrapper.css">
<link rel="stylesheet" href="styles/main-container.css">
<link rel="stylesheet" href="styles/main-inner-container.css">
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/about.css">
<link rel="stylesheet" href="styles/skills.css">
<link rel="stylesheet" href="styles/projects.css">
<link rel="stylesheet" href="styles/interests.css">
<link rel="stylesheet" href="styles/footer.css">
<link rel="stylesheet" href="styles/utility.css">
<link rel="stylesheet" href="styles/colors.css">
<link rel="stylesheet" href="styles/reset.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<a class="logo-link" href="./">
<h1>Steve Cruz</h1>
</a>
<button class="toggler">
<div class="toggler__icon"></div>
</button>
<div class="popup-window">
<nav class="navbar">
<ul class="navbar__list">
<li class="navbar__list-item">
<a class="navbar__link" href="./">Home</a>
</li>
<li class="navbar__list-item">
<a class="navbar__link" href="./#about">About me</a>
</li>
<li class="navbar__list-item">
<a class="navbar__link" href="./#skills">Skills</a>
</li>
<li class="navbar__list-item">
<a class="navbar__link" href="./#projects">Projects</a>
</li>
<li class="navbar__list-item">
<a class="navbar__link" href="./#interests">Interests</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="main-container">
<section class="home">
<div class="home__left-container">
<div class="home__text-content">
<h1>Steve Cruz</h1>
<div class="home__divider-container">
<svg class="svg-inline--fa fa-star fa-w-18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
<path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
</svg>
</div>
<p>Software Engineer | Former Lawyer</p>
<div class="home__contact__container">
<ul class="contact__list">
<li class="contact__list-item">
<a href="https://github.com/stevescruz" class="contact">
<img src="assets/github.svg" alt="Check my GitHub" class="contact" />
</a>
</li>
<li class="contact__list-item">
<a href="https://www.linkedin.com/in/stevescruz/" class="contact">
<img src="assets/linkedin.svg" alt="Check my LinkedIn" class="contact" />
</a>
</li>
<li class="contact__list-item">
<a href="https://dev.to/stevescruz" class="contact">
<img src="assets/external-link.svg" alt="Check my Dev.to blog" class="contact" />
</a>
</li>
<li class="contact__list-item">
<a href="mailto:[email protected]" class="contact">
<img src="assets/mail.svg" alt="Contact me through my email" class="contact" />
</a>
</li>
</ul>
</div>
<a class="button-link" href="#about">Welcome</a>
</div>
</div>
<div class="home__right-container">
<img src="assets/home-background.jpg" alt="" />
</div>
</section>
<div class="main-inner-container">
<section class="about dotted-pattern">
<!-- The span inside the h1 is to allow the scrolling behavior smooth to work with the header without making the fixed header stay on top of the h1-->
<h1>About me<span id="about" class="section-marker"></h1>
<div class="about__content">
<p>Hi, I am <a target="blank"href="https://www.linkedin.com/in/stevescruz/">Steve</a>! Welcome to my digital playground 🎡. I am a software engineer who is passionate about creating technology to elevate people, and community building. Find me teaching web development on my <a target="blank" href="https://dev.to/stevescruz">personal blog</a> or contributing to the <a target="blank" href="https://www.devchallenge.com.br/">DevChallenge</a> open-source project.</p>
<p>Interested in collaborating? Send me a <a href="mailto:[email protected]">message</a>.</p>
</div>
</section>
<section class="skills dotted-pattern">
<h1>Skills<span id="skills" class="section-marker"></span></h1>
<div class="skills__content">
<div class="skills__table">
<div class="skills__table__header-container">
<img src="assets/database.svg" alt="database icon representing the back-end category" />
<strong>Back-end</strong>
</div>
<ul class="tags-container">
<li class="tag">Node.js</li><li class="tag">TypeScript</li><li class="tag">Java</li><li class="tag">Python</li><li class="tag">SQL</li><li class="tag">PostgreSQL</li><li class="tag">Algorithms</li><li class="tag">Data Structures</li><li class="tag">CRUD</li><li class="tag">RESTful APIs</li><li class="tag">JWT</li><li class="tag">Express</li><li class="tag">AWS</li><li class="tag">MongoDB</li>
</ul>
</div>
<div class="skills__table">
<div class="skills__table__header-container">
<img src="assets/monitor.svg" alt="monitor icon representing the front-end category" />
<strong>Front-end</strong>
</div>
<ul class="tags-container">
<li class="tag">ReactJS</li><li class="tag">JavaScript</li><li class="tag">CSS</li><li class="tag">HTML</li><li class="tag">jQuery</li><li class="tag">Redux</li><li class="tag">Axios</li><li class="tag">Material UI</li><li class="tag">Sass</li><li class="tag">BEM</li><li class="tag">Bootstrap</li><li class="tag">A11y</li><li class="tag">Cross-browser compatibility</span>
<!-- <span>Styled Components</span><span>Story Book</span> -->
</ul>
</div>
<div class="skills__table">
<div class="skills__table__header-container">
<img src="assets/tool.svg" alt="tool icon representing the Methodologies & Other Tools caregory" />
<strong>Methodologies & Other Tools</strong>
</div>
<ul class="tags-container">
<li class="tag">Git</li><li class="tag">npm</li><li class="tag">Yarn</li><li class="tag">Docker</li><li class="tag">Agile</li><li class="tag">Webpack</li><li class="tag">Babel</li><li class="tag">TDD</li><li class="tag">Jest</li><li class="tag">DDD</li><li class="tag">Linux</li>
</ul>
</div>
</div>
</section>
<section class="projects dotted-pattern">
<h1>Projects<span id="projects" class="section-marker"></span></h1>
<div class="carousel projectsCarousel">
<button class="carousel__button carousel__button--left --hidden">
<img src="assets/chevron-left.svg" alt="click to go to the previous image" />
</button>
<div class="carousel__track-container">
<ul class="carousel__track"></ul>
</div>
<button class="carousel__button carousel__button--right --hidden">
<img src="assets/chevron-right.svg" alt="click to go to the next image" />
</button>
<div class="carousel__nav --hidden"></div>
</div>
</section>
<section class="interests dotted-pattern">
<h1>Interests<span id="interests" class="section-marker"></span></h1>
<div class="interests__container">
<div class="interest">
<img src="assets/interest_1.jpg" alt="Red Bayern Munich's ball">
<p>Soccer</p>
</div>
<div class="interest">
<img src="assets/interest_2.jpg" alt="Collection of ancient books">
<p>History</p>
</div>
<div class="interest">
<img src="assets/interest_3.jpg" alt="English telephone booth">
<p>Travelling</p>
</div>
</div>
</section>
<a class="floating-button" href="#">
<img class="floating-button__image" src="assets/chevrons-up.svg" alt="Go to the top of the page">
</a>
</div>
<footer class="footer">
<p>Copyright © 2020 - Steve Cruz</p>
</footer>
</section>
</div>
</body>
</html>