Browse Source

Finished (and started) the website

Now the website is finished (for the moment)
tags/v1.0.0^2^2
Néfix Estrada 9 months ago
parent
commit
d0068df6dd

+ 11
- 0
css/animate.min.css
File diff suppressed because it is too large
View File


+ 341
- 0
css/normalize.css View File

@@ -0,0 +1,341 @@
1
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
2
+
3
+/* Document
4
+   ========================================================================== */
5
+
6
+/**
7
+ * 1. Correct the line height in all browsers.
8
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
9
+ */
10
+
11
+html {
12
+  line-height: 1.15; /* 1 */
13
+  -webkit-text-size-adjust: 100%; /* 2 */
14
+}
15
+
16
+/* Sections
17
+   ========================================================================== */
18
+
19
+/**
20
+ * Remove the margin in all browsers.
21
+ */
22
+
23
+body {
24
+  margin: 0;
25
+}
26
+
27
+/**
28
+ * Correct the font size and margin on `h1` elements within `section` and
29
+ * `article` contexts in Chrome, Firefox, and Safari.
30
+ */
31
+
32
+h1 {
33
+  font-size: 2em;
34
+  margin: 0.67em 0;
35
+}
36
+
37
+/* Grouping content
38
+   ========================================================================== */
39
+
40
+/**
41
+ * 1. Add the correct box sizing in Firefox.
42
+ * 2. Show the overflow in Edge and IE.
43
+ */
44
+
45
+hr {
46
+  box-sizing: content-box; /* 1 */
47
+  height: 0; /* 1 */
48
+  overflow: visible; /* 2 */
49
+}
50
+
51
+/**
52
+ * 1. Correct the inheritance and scaling of font size in all browsers.
53
+ * 2. Correct the odd `em` font sizing in all browsers.
54
+ */
55
+
56
+pre {
57
+  font-family: monospace, monospace; /* 1 */
58
+  font-size: 1em; /* 2 */
59
+}
60
+
61
+/* Text-level semantics
62
+   ========================================================================== */
63
+
64
+/**
65
+ * Remove the gray background on active links in IE 10.
66
+ */
67
+
68
+a {
69
+  background-color: transparent;
70
+}
71
+
72
+/**
73
+ * 1. Remove the bottom border in Chrome 57-
74
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
75
+ */
76
+
77
+abbr[title] {
78
+  border-bottom: none; /* 1 */
79
+  text-decoration: underline; /* 2 */
80
+  text-decoration: underline dotted; /* 2 */
81
+}
82
+
83
+/**
84
+ * Add the correct font weight in Chrome, Edge, and Safari.
85
+ */
86
+
87
+b,
88
+strong {
89
+  font-weight: bolder;
90
+}
91
+
92
+/**
93
+ * 1. Correct the inheritance and scaling of font size in all browsers.
94
+ * 2. Correct the odd `em` font sizing in all browsers.
95
+ */
96
+
97
+code,
98
+kbd,
99
+samp {
100
+  font-family: monospace, monospace; /* 1 */
101
+  font-size: 1em; /* 2 */
102
+}
103
+
104
+/**
105
+ * Add the correct font size in all browsers.
106
+ */
107
+
108
+small {
109
+  font-size: 80%;
110
+}
111
+
112
+/**
113
+ * Prevent `sub` and `sup` elements from affecting the line height in
114
+ * all browsers.
115
+ */
116
+
117
+sub,
118
+sup {
119
+  font-size: 75%;
120
+  line-height: 0;
121
+  position: relative;
122
+  vertical-align: baseline;
123
+}
124
+
125
+sub {
126
+  bottom: -0.25em;
127
+}
128
+
129
+sup {
130
+  top: -0.5em;
131
+}
132
+
133
+/* Embedded content
134
+   ========================================================================== */
135
+
136
+/**
137
+ * Remove the border on images inside links in IE 10.
138
+ */
139
+
140
+img {
141
+  border-style: none;
142
+}
143
+
144
+/* Forms
145
+   ========================================================================== */
146
+
147
+/**
148
+ * 1. Change the font styles in all browsers.
149
+ * 2. Remove the margin in Firefox and Safari.
150
+ */
151
+
152
+button,
153
+input,
154
+optgroup,
155
+select,
156
+textarea {
157
+  font-family: inherit; /* 1 */
158
+  font-size: 100%; /* 1 */
159
+  line-height: 1.15; /* 1 */
160
+  margin: 0; /* 2 */
161
+}
162
+
163
+/**
164
+ * Show the overflow in IE.
165
+ * 1. Show the overflow in Edge.
166
+ */
167
+
168
+button,
169
+input { /* 1 */
170
+  overflow: visible;
171
+}
172
+
173
+/**
174
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
175
+ * 1. Remove the inheritance of text transform in Firefox.
176
+ */
177
+
178
+button,
179
+select { /* 1 */
180
+  text-transform: none;
181
+}
182
+
183
+/**
184
+ * Correct the inability to style clickable types in iOS and Safari.
185
+ */
186
+
187
+button,
188
+[type="button"],
189
+[type="reset"],
190
+[type="submit"] {
191
+  -webkit-appearance: button;
192
+}
193
+
194
+/**
195
+ * Remove the inner border and padding in Firefox.
196
+ */
197
+
198
+button::-moz-focus-inner,
199
+[type="button"]::-moz-focus-inner,
200
+[type="reset"]::-moz-focus-inner,
201
+[type="submit"]::-moz-focus-inner {
202
+  border-style: none;
203
+  padding: 0;
204
+}
205
+
206
+/**
207
+ * Restore the focus styles unset by the previous rule.
208
+ */
209
+
210
+button:-moz-focusring,
211
+[type="button"]:-moz-focusring,
212
+[type="reset"]:-moz-focusring,
213
+[type="submit"]:-moz-focusring {
214
+  outline: 1px dotted ButtonText;
215
+}
216
+
217
+/**
218
+ * Correct the padding in Firefox.
219
+ */
220
+
221
+fieldset {
222
+  padding: 0.35em 0.75em 0.625em;
223
+}
224
+
225
+/**
226
+ * 1. Correct the text wrapping in Edge and IE.
227
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
228
+ * 3. Remove the padding so developers are not caught out when they zero out
229
+ *    `fieldset` elements in all browsers.
230
+ */
231
+
232
+legend {
233
+  box-sizing: border-box; /* 1 */
234
+  color: inherit; /* 2 */
235
+  display: table; /* 1 */
236
+  max-width: 100%; /* 1 */
237
+  padding: 0; /* 3 */
238
+  white-space: normal; /* 1 */
239
+}
240
+
241
+/**
242
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
243
+ */
244
+
245
+progress {
246
+  vertical-align: baseline;
247
+}
248
+
249
+/**
250
+ * Remove the default vertical scrollbar in IE 10+.
251
+ */
252
+
253
+textarea {
254
+  overflow: auto;
255
+}
256
+
257
+/**
258
+ * 1. Add the correct box sizing in IE 10.
259
+ * 2. Remove the padding in IE 10.
260
+ */
261
+
262
+[type="checkbox"],
263
+[type="radio"] {
264
+  box-sizing: border-box; /* 1 */
265
+  padding: 0; /* 2 */
266
+}
267
+
268
+/**
269
+ * Correct the cursor style of increment and decrement buttons in Chrome.
270
+ */
271
+
272
+[type="number"]::-webkit-inner-spin-button,
273
+[type="number"]::-webkit-outer-spin-button {
274
+  height: auto;
275
+}
276
+
277
+/**
278
+ * 1. Correct the odd appearance in Chrome and Safari.
279
+ * 2. Correct the outline style in Safari.
280
+ */
281
+
282
+[type="search"] {
283
+  -webkit-appearance: textfield; /* 1 */
284
+  outline-offset: -2px; /* 2 */
285
+}
286
+
287
+/**
288
+ * Remove the inner padding in Chrome and Safari on macOS.
289
+ */
290
+
291
+[type="search"]::-webkit-search-decoration {
292
+  -webkit-appearance: none;
293
+}
294
+
295
+/**
296
+ * 1. Correct the inability to style clickable types in iOS and Safari.
297
+ * 2. Change font properties to `inherit` in Safari.
298
+ */
299
+
300
+::-webkit-file-upload-button {
301
+  -webkit-appearance: button; /* 1 */
302
+  font: inherit; /* 2 */
303
+}
304
+
305
+/* Interactive
306
+   ========================================================================== */
307
+
308
+/*
309
+ * Add the correct display in Edge, IE 10+, and Firefox.
310
+ */
311
+
312
+details {
313
+  display: block;
314
+}
315
+
316
+/*
317
+ * Add the correct display in all browsers.
318
+ */
319
+
320
+summary {
321
+  display: list-item;
322
+}
323
+
324
+/* Misc
325
+   ========================================================================== */
326
+
327
+/**
328
+ * Add the correct display in IE 10+.
329
+ */
330
+
331
+template {
332
+  display: none;
333
+}
334
+
335
+/**
336
+ * Add the correct display in IE 10.
337
+ */
338
+
339
+[hidden] {
340
+  display: none;
341
+}

+ 256
- 0
css/styles.css View File

@@ -0,0 +1,256 @@
1
+@import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css");
2
+@font-face {
3
+  font-family: "IBM Plex Sans Semi-Bold";
4
+  src: url("../fonts/IBMPlexSans-SemiBold.ttf"); }
5
+@font-face {
6
+  font-family: "Open Sans Regular";
7
+  src: url("../fonts/OpenSans-Regular.ttf"); }
8
+* {
9
+  padding: 0px;
10
+  margin: 0px;
11
+  font-family: "Open Sans Regular"; }
12
+
13
+html, body {
14
+  height: 100%;
15
+  width: 100%; }
16
+
17
+#landing {
18
+  height: 100%;
19
+  width: 100%;
20
+  display: flex;
21
+  flex-flow: column nowrap;
22
+  justify-content: center;
23
+  align-items: center;
24
+  background: url("../img/willian-justen-de-vasconcellos-595793-unsplash.jpg") no-repeat center center fixed;
25
+  -webkit-background-size: cover;
26
+  -moz-background-size: cover;
27
+  -o-background-size: cover;
28
+  background-size: cover;
29
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
30
+  #landing h1 {
31
+    font-size: 48px;
32
+    font-family: "IBM Plex Sans Semi-Bold";
33
+    color: #ffffff; }
34
+  #landing #more-arrow {
35
+    font-size: 38px;
36
+    position: absolute;
37
+    bottom: 100px;
38
+    color: #ffffff;
39
+    cursor: pointer; }
40
+  @media screen and (max-width: 900px) {
41
+    #landing h1 {
42
+      font-size: 40px; }
43
+    #landing #more-arrow {
44
+      font-size: 32px;
45
+      bottom: 50px; } }
46
+  @media screen and (max-width: 580px) {
47
+    #landing h1 {
48
+      font-size: 30px; }
49
+    #landing #more-arrow {
50
+      font-size: 26px; } }
51
+  @media screen and (max-width: 390px) {
52
+    #landing h1 {
53
+      font-size: 26px; }
54
+    #landing #more-arrow {
55
+      font-size: 20px;
56
+      bottom: 35px; } }
57
+  @media screen and (max-width: 340px) {
58
+    #landing h1 {
59
+      font-size: 22px; } }
60
+
61
+#content {
62
+  padding-top: 25px;
63
+  padding-bottom: 25px;
64
+  padding-left: 250px;
65
+  padding-right: 250px;
66
+  background-color: #f5f5f5; }
67
+  @media screen and (max-width: 1200px) {
68
+    #content {
69
+      padding-left: 150px;
70
+      padding-right: 150px; } }
71
+  @media screen and (max-width: 580px) {
72
+    #content {
73
+      padding-left: 75px;
74
+      padding-right: 75px; } }
75
+  @media screen and (max-width: 390px) {
76
+    #content {
77
+      padding-left: 50px;
78
+      padding-right: 50px; } }
79
+  @media screen and (max-width: 340px) {
80
+    #content {
81
+      padding-left: 35px;
82
+      padding-right: 35px; } }
83
+  #content section {
84
+    margin-top: 75px;
85
+    margin-bottom: 75px; }
86
+    #content section h3 {
87
+      font-size: 32px;
88
+      margin-bottom: 15px;
89
+      font-family: "IBM Plex Sans Semi-Bold"; }
90
+
91
+#projects .wrapper {
92
+  margin-top: 25px;
93
+  display: grid;
94
+  grid-template-columns: repeat(3, 1fr);
95
+  grid-gap: 50px; }
96
+  @media screen and (max-width: 1464px) {
97
+    #projects .wrapper {
98
+      grid-template-columns: repeat(2, 1fr); } }
99
+  @media screen and (max-width: 900px) {
100
+    #projects .wrapper {
101
+      grid-template-columns: none; } }
102
+  #projects .wrapper .project {
103
+    min-height: 350px;
104
+    border-radius: 4px;
105
+    display: flex;
106
+    flex-flow: column nowrap;
107
+    justify-content: space-between;
108
+    background-color: #ffffff;
109
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
110
+    #projects .wrapper .project:nth-child(6n+1) .button {
111
+      background-image: -webkit-linear-gradient(left, #6200ea, #1976d2);
112
+      background-image: linear-gradient(90deg, #6200ea 0, #1976d2); }
113
+    #projects .wrapper .project:nth-child(6n+2) .button {
114
+      background-image: -webkit-linear-gradient(left, #9c2780, #ff3d00);
115
+      background-image: linear-gradient(90deg, #9c2780 0, #ff3d00); }
116
+    #projects .wrapper .project:nth-child(6n+3) .button {
117
+      background-image: -webkit-linear-gradient(left, #0097a7, #ccff90);
118
+      background-image: linear-gradient(90deg, #0097a7 0, #ccff90); }
119
+    #projects .wrapper .project:nth-child(6n+4) .button {
120
+      background-image: -webkit-linear-gradient(left, #e65100, #ffa000);
121
+      background-image: linear-gradient(90deg, #e65100 0, #ffa000); }
122
+    #projects .wrapper .project:nth-child(6n+5) .button {
123
+      background-image: -webkit-linear-gradient(left, #4527a0, #7b1fa2);
124
+      background-image: linear-gradient(90deg, #4527a0 0, #7b1fa2); }
125
+    #projects .wrapper .project:nth-child(6n+6) .button {
126
+      background-image: -webkit-linear-gradient(left, #f6fc9c, #eaf818);
127
+      background-image: linear-gradient(90deg, #f6fc9c 0, #eaf818);
128
+      color: #000000; }
129
+    #projects .wrapper .project .content {
130
+      padding: 35px; }
131
+      #projects .wrapper .project .content p {
132
+        margin-top: 15px; }
133
+    #projects .wrapper .project .button {
134
+      margin: 15px 15px 20px 15px;
135
+      padding: 20px 50px;
136
+      border-radius: 40px;
137
+      color: #fff;
138
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
139
+      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
140
+      font-family: "IBM Plex Sans Semi-Bold";
141
+      text-decoration: none;
142
+      text-align: center;
143
+      text-transform: uppercase;
144
+      cursor: pointer; }
145
+      #projects .wrapper .project .button:hover {
146
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
147
+      #projects .wrapper .project .button:active {
148
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
149
+      #projects .wrapper .project .button:focus {
150
+        outline: none; }
151
+
152
+#skills h4 {
153
+  font-size: 22px;
154
+  margin-top: 10px;
155
+  margin-bottom: 5px; }
156
+#skills .wrapper {
157
+  display: grid;
158
+  grid-template-columns: repeat(2, 1fr);
159
+  grid-gap: 0px 50px;
160
+  margin-bottom: 50px; }
161
+  @media screen and (max-width: 900px) {
162
+    #skills .wrapper {
163
+      display: flex;
164
+      flex-flow: column nowrap;
165
+      align-items: center; } }
166
+  #skills .wrapper .skill {
167
+    height: 35px;
168
+    width: 100%;
169
+    max-width: 1000px;
170
+    position: relative;
171
+    margin-top: 15px;
172
+    margin-bottom: 15px;
173
+    border-radius: 5px;
174
+    background: #ffffff;
175
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
176
+    #skills .wrapper .skill h5 {
177
+      font-size: 1em;
178
+      line-height: 35px;
179
+      position: absolute;
180
+      margin-left: 15px;
181
+      color: #ffffff; }
182
+    #skills .wrapper .skill div[class^="filled-"], #skills .wrapper .skill div[class*=" filled-"] {
183
+      height: 35px;
184
+      background-color: #52a2ad;
185
+      border-radius: 5px;
186
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
187
+    #skills .wrapper .skill .filled-1 {
188
+      width: 20%; }
189
+    #skills .wrapper .skill .filled-2 {
190
+      width: 40%; }
191
+    #skills .wrapper .skill .filled-3 {
192
+      width: 60%; }
193
+    #skills .wrapper .skill .filled-4 {
194
+      width: 80%; }
195
+    #skills .wrapper .skill .filled-5 {
196
+      width: 100%; }
197
+
198
+#interests ul {
199
+  margin-left: 15px;
200
+  margin-top: 10px; }
201
+  #interests ul li {
202
+    list-style-position: inside;
203
+    color: #7f8c8d; }
204
+
205
+footer {
206
+  width: 100%;
207
+  background: #2c2c54;
208
+  display: flex;
209
+  flex-flow: column nowrap; }
210
+  footer .helpful-links {
211
+    width: 100%;
212
+    margin-top: 40px;
213
+    margin-bottom: 40px;
214
+    color: #dddddd;
215
+    display: flex;
216
+    flex-flow: row nowrap;
217
+    justify-content: space-around; }
218
+    @media screen and (max-width: 900px) {
219
+      footer .helpful-links {
220
+        display: grid;
221
+        grid-template-columns: repeat(2, 1fr);
222
+        grid-gap: 50px; } }
223
+    @media screen and (max-width: 580px) {
224
+      footer .helpful-links {
225
+        grid-template-columns: none; } }
226
+    footer .helpful-links a {
227
+      font-size: 18px;
228
+      color: inherit;
229
+      text-decoration: none;
230
+      display: flex;
231
+      flex-flow: column nowrap;
232
+      align-items: center; }
233
+      footer .helpful-links a i {
234
+        font-size: 48px;
235
+        margin-bottom: 15px; }
236
+  footer .info {
237
+    margin-top: 10px;
238
+    margin-bottom: 50px;
239
+    color: #dddddd; }
240
+    footer .info p {
241
+      text-align: center; }
242
+      footer .info p a {
243
+        color: inherit;
244
+        text-decoration: none; }
245
+        footer .info p a:hover {
246
+          text-decoration: underline; }
247
+        footer .info p a i {
248
+          margin-right: 10px; }
249
+      @media screen and (max-width: 580px) {
250
+        footer .info p a {
251
+          display: block;
252
+          margin-bottom: 3px; }
253
+        footer .info p span {
254
+          display: none; } }
255
+
256
+/*# sourceMappingURL=styles.css.map */

BIN
fonts/IBMPlexSans-SemiBold.ttf View File


BIN
fonts/OpenSans-Regular.ttf View File


BIN
img/willian-justen-de-vasconcellos-595793-unsplash.jpg View File


+ 235
- 0
index.html View File

@@ -0,0 +1,235 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+    <meta charset="UTF-8">
5
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
+    <title>Néfix Estrada's Website</title>
8
+	<meta name="description" content="This the personal website of Néfix Estrada">
9
+
10
+	<link rel="stylesheet" href="css/normalize.css">
11
+    <link rel="stylesheet" href="css/styles.css">
12
+    <link rel="stylesheet" href="css/animate.min.css">
13
+</head>
14
+<body>
15
+
16
+    <section id="landing">
17
+        <h1>Néfix Estrada's Website</h1>
18
+        <i id="more-arrow" class="fas fa-angle-down animated infinite bounce slow delay-1s"></i>
19
+    </section>
20
+
21
+    <div id="content">
22
+
23
+        <section id="about">
24
+            <h3>About</h3>
25
+            <p>
26
+                Hey there! My name is <strong>Néfix Estrada</strong> and this is my website. I'm a student based in Barcelona that loves programming, scripting and managing servers in my free time. I'm always trying to learn new technologies, interesting things that I found out or that someone has told me, optimizing and tinkering my self-hosted services and my dotfiles... Recently, I've been learning Golang with a special focus in microservices. 
27
+            </p>
28
+        </section>
29
+
30
+        <section id="projects">
31
+            <h3>Projects</h3>
32
+
33
+            <div class="wrapper">
34
+                <div class="project">
35
+                    <div class="content">
36
+                        <h4>PXE Cloud</h4>
37
+					<p>
38
+                            PXE Cloud is an easy to setup and easy to manage environment to boot live images and OS installlers through iPXE.
39
+                        </p>
40
+                    </div>
41
+                    <a href="https://github.com/pxe-cloud/pxe-cloud" class="button">Read more</a>
42
+                </div>
43
+                <div class="project">
44
+                    <div class="content">
45
+                        <h4>Backup Project</h4>
46
+                        <p>
47
+                            Backup Project is an API with a front-end to manage your backups with Borg Backup. 
48
+                        </p>
49
+                    </div>
50
+                    <a href="https://github.com/NefixEstrada/BackupProject/tree/develop" class="button">Read more</a>
51
+                </div>
52
+                <div class="project">
53
+					<div class="content">
54
+						<h4>autoqbid</h4>
55
+						<p>
56
+							autoqbid is a Selenium script that automates the time insertion inside Qbid.
57
+						</p>
58
+					</div>
59
+                    <a href="https://github.com/NefixEstrada/autoqbid" class="button">Read more</a>
60
+                </div>
61
+                <div class="project">
62
+					<div class="content">
63
+						<h4>Gocker CI/CD</h4>
64
+						<p>
65
+							Gocker CI/CD is a CI/CD for Docker written in Go. It monitorizes your Dockerfiles and containers and manages the updating process.
66
+						</p>
67
+					</div>
68
+                    <a href="https://gitea.nefixestrada.com/nefix/gocker-ci-cd/" class="button">Read more</a>
69
+                </div>
70
+
71
+				<div class="project">
72
+					<div class="content">
73
+						<h4>The Docs</h4>
74
+						<p>
75
+							The Docs is the documentation website that, together with my mentors, we wrote during my intership. It contains tutorials and configurations in advanced topics such as clusters and high avaliability.
76
+						</p>
77
+					</div>
78
+					<a class="button" href="http://thedocs.isardvdi.com">Read More</a>
79
+				</div>
80
+            </div>
81
+        </section>
82
+
83
+        <section id="skills">
84
+			<h3>Skills</h3>
85
+
86
+			<h4>Front-end</h4>
87
+			<div class="wrapper">
88
+				<div class="skill">
89
+					<h5>HTML</h5>
90
+					<div class="filled-4"></div>
91
+				</div>
92
+				<div class="skill">
93
+					<h5>CSS</h5>
94
+					<div class="filled-3"></div>
95
+				</div>
96
+				<div class="skill">
97
+					<h5>SASS</h5>
98
+					<div class="filled-3"></div>
99
+				</div>
100
+				<div class="skill">
101
+					<h5>Bootstrap</h5>
102
+					<div class="filled-3"></div>
103
+				</div>
104
+				<div class="skill">
105
+					<h5>JS</h5>
106
+					<div class="filled-4"></div>
107
+				</div>
108
+				<div class="skill">
109
+					<h5>VueJS</h5>
110
+					<div class="filled-2"></div>
111
+				</div>
112
+			</div>
113
+
114
+			<h4>Back-end & scripting</h4>
115
+			<div class="wrapper">
116
+				<div class="skill">
117
+					<h5>NodeJS</h5>
118
+					<div class="filled-4"></div>
119
+				</div>
120
+				<div class="skill">
121
+					<h5>ExpressJS</h5>
122
+					<div class="filled-3"></div>
123
+				</div>
124
+				<div class="skill">
125
+					<h5>Python</h5>
126
+					<div class="filled-4"></div>
127
+				</div>
128
+				<div class="skill">
129
+					<h5>Flask</h5>
130
+					<div class="filled-3"></div>
131
+				</div>
132
+				<div class="skill">
133
+					<h5>Golang</h5>
134
+					<div class="filled-2"></div>
135
+				</div>
136
+				<div class="skill">
137
+					<h5>Bash</h5>
138
+					<div class="filled-3"></div>
139
+				</div>
140
+			</div>
141
+
142
+			<h4>Databases</h4>
143
+			<div class="wrapper">
144
+				<div class="skill">
145
+					<h5>SQL</h5>
146
+					<div class="filled-3"></div>
147
+				</div>
148
+				<div class="skill">
149
+					<h5>NoSQL</h5>
150
+					<div class="filled-3"></div>
151
+				</div>
152
+				<div class="skill">
153
+					<h5>PostgreSQL</h5>
154
+					<div class="filled-3"></div>
155
+				</div>
156
+				<div class="skill">
157
+					<h5>MariaDB</h5>
158
+					<div class="filled-2"></div>
159
+				</div>
160
+				<div class="skill">
161
+					<h5>MongoDB</h5>
162
+					<div class="filled-2"></div>
163
+				</div>
164
+			</div>
165
+
166
+			<h4>Sysamdin & DevOps</h4>
167
+			<div class="wrapper">
168
+				<div class="skill">
169
+					<h5>Docker</h5>
170
+					<div class="filled-4"></div>
171
+				</div>
172
+				<div class="skill">
173
+					<h5>Docker Compose</h5>
174
+					<div class="filled-4"></div>
175
+				</div>
176
+				<div class="skill">
177
+					<h5>GNU/Linux</h5>
178
+					<div class="filled-4"></div>
179
+				</div>
180
+				<div class="skill">
181
+					<h5>Networking</h5>
182
+					<div class="filled-3"></div>
183
+				</div>
184
+				<div class="skill">
185
+					<h5>Virtualization</h5>
186
+					<div class="filled-4"></div>
187
+				</div>
188
+				<div class="skill">
189
+					<h5>Server management</h5>
190
+					<div class="filled-4"></div>
191
+				</div>
192
+			</div>
193
+		</section>
194
+
195
+        <section id="interests">
196
+			<h3>Interests</h3>
197
+			<p>Currently, I'm trying to learn / improving one of the following topics:</p>
198
+			<ul>
199
+				<li><a href="https://golang.org/">Golang</a></li>
200
+				<li><a href="https://en.wikipedia.org/wiki/Microservices">Microservices</a> <a href="https://github.com/micro/micro">(Go Micro)</a></li>
201
+				<li><a href="https://grpc.io/">gRPC</a></li>
202
+				<li><a href="https://en.wikipedia.org/wiki/Test-driven_development">Test driven developement</a></li>
203
+				<li><a href="https://en.wikipedia.org/wiki/Agile_software_development">Agile developement</a></li>
204
+				<li><a href="https://www.ansible.com/">Ansible</a></li>
205
+				<li><a href="https://kubernetes.io/">Kubernetes</a></li>
206
+				<li><a href="https://nixos.org/">Nix + NixOS</a></li>
207
+				<li><a href="https://devhints.io/vim">Advanced Vim</a></li>
208
+			</ul>
209
+		</section>
210
+
211
+		<section id="contact">
212
+			<h3>Contact</h3>
213
+			<p>If you want to contact me, you can send me a mail to <a href="mailto:nefixestrada@gmail">nefixestrada@gmail.com</a></p>
214
+		</section>
215
+		
216
+    </div>
217
+
218
+
219
+    <footer>
220
+		<div class="helpful-links">
221
+			<a href="https://github.com/NefixEstrada"><i class="fab fa-github"></i>GitHub</a>
222
+			<a href="https://gitea.nefixestrada.com/nefix"><i class="fas fa-code-branch"></i>Gitea</a>
223
+			<a href="https://docs.nefixestrada.com"><i class="fas fa-book"></i>Personal Documentation</a>
224
+			<a href="https://blog.nefixestrada.com"><i class="fas fa-rss"></i>Personal Blog</a>
225
+		</div>
226
+
227
+		<div class="info">
228
+			<p>
229
+				<a href="https://gitea.nefixestrada.com/nefix/website"><i class="fas fa-code"></i>Source Code</a>
230
+				<span>| </span>Built by <strong>Néfix Estrada</strong>, 2018
231
+			</p>
232
+		</div>
233
+	</footer>
234
+</body>
235
+</html>

+ 46
- 0
scss/colors.scss View File

@@ -0,0 +1,46 @@
1
+// Main background color
2
+$bg: #f5f5f5;
3
+
4
+// Main color of the landing page image
5
+
6
+// Color for the list bullets
7
+$list-bullets: #7f8c8d;
8
+
9
+// Footer background
10
+$footer-bg: #2c2c54;
11
+
12
+// Footer text color
13
+$footer-text: #dddddd;
14
+
15
+// Button gradients
16
+$red-gradient: (
17
+    colorA: #9c2780,
18
+    colorB: #ff3d00
19
+);
20
+
21
+$orange-gradient: (
22
+    colorA: #e65100,
23
+    colorB: #ffa000
24
+);
25
+
26
+$teal-gradient: (
27
+    colorA: #0097a7,
28
+    colorB: #ccff90
29
+);
30
+
31
+$purple-gradient: (
32
+    colorA: #4527a0,
33
+    colorB: #7b1fa2
34
+);
35
+
36
+$blue-gradient: (
37
+    colorA: #6200ea,
38
+    colorB: #1976d2
39
+);
40
+
41
+$yellow-gradient: (
42
+    colorA: #f6fc9c,
43
+    colorB: #eaf818
44
+);
45
+
46
+$gradients: $blue-gradient, $red-gradient, $teal-gradient, $orange-gradient, $purple-gradient, $yellow-gradient;

+ 56
- 0
scss/content.scss View File

@@ -0,0 +1,56 @@
1
+#content {
2
+    // Size
3
+    padding-top: 25px;
4
+    padding-bottom: 25px;
5
+    padding-left: 250px;
6
+    padding-right: 250px;
7
+
8
+	// Responsive Design
9
+	@include media(max-width, medium) {
10
+		// Size
11
+		padding-left: 150px;
12
+		padding-right: 150px;
13
+	}
14
+
15
+	// Responsive Design
16
+	@include media(max-width, small) {
17
+		// Size
18
+		padding-left: 75px;
19
+		padding-right: 75px;
20
+	}
21
+
22
+	// Responsive Design
23
+	@include media(max-width, really-small) {
24
+		// Size
25
+		padding-left: 50px;
26
+		padding-right: 50px;
27
+	}
28
+
29
+	// Responsive Design
30
+	@include media(max-width, ultra-small) {
31
+		// Size
32
+		padding-left: 35px;
33
+		padding-right: 35px;
34
+	}
35
+
36
+    // Visual
37
+    background-color: $bg;
38
+
39
+    section {
40
+        // Position
41
+        margin-top: 75px;
42
+        margin-bottom: 75px;
43
+
44
+        h3 {
45
+            // Size
46
+            font-size: 32px;
47
+
48
+            // Position
49
+            margin-bottom: 15px;
50
+
51
+            // Visual
52
+            font-family: $ibm-plex-sans;
53
+        }
54
+    }
55
+
56
+}

+ 16
- 0
scss/fonts.scss View File

@@ -0,0 +1,16 @@
1
+// IBM Plex Sans Semi-Bold (main title landing page)
2
+@font-face {
3
+    font-family: "IBM Plex Sans Semi-Bold";
4
+    src: url("../fonts/IBMPlexSans-SemiBold.ttf");
5
+}
6
+$ibm-plex-sans: "IBM Plex Sans Semi-Bold";
7
+
8
+// Open Sans (font for all the text)
9
+@font-face {
10
+    font-family: "Open Sans Regular";
11
+    src: url("../fonts/OpenSans-Regular.ttf");
12
+}
13
+$open-sans: "Open Sans Regular";
14
+
15
+// Font Awesome
16
+@import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css");

+ 108
- 0
scss/footer.scss View File

@@ -0,0 +1,108 @@
1
+footer {
2
+	// Size
3
+	width: 100%;
4
+
5
+	// Visual
6
+	background: $footer-bg;
7
+
8
+	// Flexbox
9
+	display: flex;
10
+	flex-flow: column nowrap;
11
+
12
+	.helpful-links {
13
+		// Size
14
+		width: 100%;
15
+
16
+		// Position
17
+		margin-top: 40px;
18
+		margin-bottom: 40px;
19
+		
20
+		// Visual
21
+		color: $footer-text;
22
+		
23
+		// Flexbox
24
+		display: flex;
25
+		flex-flow: row nowrap;
26
+		justify-content: space-around;
27
+
28
+		// Responsive Design
29
+		@include media("max-width", "almost-medium") {
30
+			// Grid
31
+			display: grid;
32
+			grid-template-columns: repeat(2, 1fr);
33
+			grid-gap: 50px;
34
+		}
35
+
36
+		// Responsive Design
37
+		@include media("max-width", "small") {
38
+			// Grid
39
+			grid-template-columns: none;
40
+		}
41
+
42
+		a {
43
+			// Size
44
+			font-size: 18px;
45
+
46
+			// Visual
47
+			color: inherit;
48
+			text-decoration: none;
49
+
50
+			// Flexbox
51
+			display: flex;
52
+			flex-flow: column nowrap;
53
+			align-items: center;
54
+
55
+			i {
56
+				// Size
57
+				font-size: 48px;
58
+
59
+				// Position
60
+				margin-bottom: 15px;
61
+			}
62
+		}
63
+	}
64
+
65
+	.info {
66
+		// Position
67
+		margin-top: 10px;
68
+		margin-bottom: 50px;
69
+
70
+		// Visual
71
+		color: $footer-text;
72
+
73
+		p {
74
+			// Position
75
+			text-align: center;
76
+
77
+			a {
78
+				// Visual
79
+				color: inherit;
80
+				text-decoration: none;
81
+
82
+				&:hover {
83
+					// Visual
84
+					text-decoration: underline;
85
+				}
86
+
87
+				i {
88
+					// Position
89
+					margin-right: 10px;
90
+				}
91
+			}
92
+
93
+			// Responsive Design
94
+			@include media("max-width", "small") {
95
+				a {
96
+					// Position
97
+					display: block;
98
+					margin-bottom: 3px;
99
+				}
100
+
101
+				span {
102
+					// Visual
103
+					display: none;
104
+				}
105
+			}
106
+		}
107
+	}
108
+}

+ 14
- 0
scss/global.scss View File

@@ -0,0 +1,14 @@
1
+* {
2
+    // Position
3
+    padding: 0px;
4
+    margin: 0px;
5
+
6
+    // Visual
7
+    font-family: $open-sans;
8
+}
9
+
10
+html, body {
11
+    // Size
12
+    height: 100%;
13
+    width: 100%;
14
+}

+ 16
- 0
scss/interests.scss View File

@@ -0,0 +1,16 @@
1
+#interests {
2
+	
3
+	ul {
4
+		// Position
5
+		margin-left: 15px;
6
+		margin-top: 10px;
7
+
8
+		li {
9
+			// Position
10
+			list-style-position: inside;
11
+
12
+			// Visual
13
+			color: $list-bullets;
14
+		}
15
+	}
16
+}

+ 94
- 0
scss/landing.scss View File

@@ -0,0 +1,94 @@
1
+#landing {
2
+    // Size
3
+    height: 100%;
4
+    width: 100%;
5
+
6
+    // Flex
7
+    display: flex;
8
+    flex-flow: column nowrap;
9
+    justify-content: center;
10
+    align-items: center;
11
+
12
+    // Visual
13
+    background: url("../img/willian-justen-de-vasconcellos-595793-unsplash.jpg") no-repeat center center fixed;
14
+    -webkit-background-size: cover;
15
+    -moz-background-size: cover;
16
+    -o-background-size: cover;
17
+    background-size: cover;
18
+    @include materialShadow(1, false);
19
+
20
+	h1 {
21
+		// Size
22
+		font-size: 48px;
23
+
24
+		// Visual
25
+		font-family: $ibm-plex-sans;
26
+		color: #ffffff;
27
+
28
+    }
29
+
30
+    #more-arrow {
31
+        // Size
32
+        font-size: 38px;
33
+
34
+        // Position
35
+        position: absolute;
36
+        bottom: 100px;
37
+
38
+        // Visual
39
+        color: #ffffff;
40
+        cursor: pointer;
41
+    }
42
+	// Responsive Design
43
+	@include media(max-width, almost-medium) {
44
+		h1 {
45
+			// Size
46
+			font-size: 40px;
47
+		}
48
+
49
+		#more-arrow {
50
+			// Size
51
+			font-size: 32px;
52
+
53
+			// Position
54
+			bottom: 50px;
55
+		}
56
+	}
57
+
58
+	// Responsive Design
59
+	@include media(max-width, small) {
60
+		h1 {
61
+			// Size
62
+			font-size: 30px;
63
+		}
64
+
65
+		#more-arrow {
66
+			// Size
67
+			font-size: 26px;
68
+		}
69
+	}
70
+
71
+	// Responsive Design
72
+	@include media(max-width, really-small) {
73
+		h1 {
74
+			// Size
75
+			font-size: 26px;
76
+		}
77
+
78
+		#more-arrow {
79
+			// Size
80
+			font-size: 20px;
81
+
82
+			// Position
83
+			bottom: 35px;
84
+		}
85
+	}
86
+
87
+	// Responsive Design
88
+	@include media(max-width, ultra-small) {
89
+		h1 {
90
+			// Size
91
+			font-size: 22px;
92
+		}
93
+	}
94
+}

+ 24
- 0
scss/mixins.scss View File

@@ -0,0 +1,24 @@
1
+// Material design shadows
2
+@mixin materialShadow($level, $transition) {
3
+    @if ($level == 1) {
4
+        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
5
+    } @else if ($level == 2) {
6
+        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
7
+    } @else if ($level == 3) {
8
+        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
9
+    } @else if ($level == 4) {
10
+        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
11
+    } @else if ($level == 5) {
12
+        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
13
+    }
14
+
15
+    @if ($transition == true) {
16
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
17
+    }
18
+}
19
+
20
+// Gradients
21
+@mixin gradient($colorA, $colorB) {
22
+    background-image: -webkit-linear-gradient(left, $colorA, $colorB);
23
+    background-image: linear-gradient(90deg, $colorA 0, $colorB);
24
+}

+ 95
- 0
scss/projects.scss View File

@@ -0,0 +1,95 @@
1
+#projects {
2
+
3
+    .wrapper {
4
+        // Position
5
+        margin-top: 25px;
6
+
7
+        // Grid
8
+        display: grid;
9
+        grid-template-columns: repeat(3, 1fr);
10
+        grid-gap: 50px;
11
+
12
+		// Responsive Design
13
+		@include media("max-width", "large") {
14
+			// Grid
15
+			grid-template-columns: repeat(2, 1fr);
16
+		}
17
+
18
+		// Responsive Design
19
+		@include media("max-width", "almost-medium") {
20
+			// Grid
21
+			grid-template-columns: none;
22
+		}
23
+
24
+        .project {
25
+            // Size
26
+            min-height: 350px;
27
+            border-radius: 4px;
28
+
29
+            // Flexbox
30
+            display: flex;
31
+            flex-flow: column nowrap;
32
+            justify-content: space-between;
33
+
34
+            // Visual
35
+            background-color: #ffffff;
36
+            @include materialShadow(1, false);
37
+
38
+            @for $i from 1 through length($gradients) {
39
+                &:nth-child(#{length($gradients)}n+#{$i}) {
40
+                    .button {
41
+                        @include gradient(
42
+                            map-get(nth($gradients, $i), "colorA"),
43
+                            map-get(nth($gradients, $i), "colorB")
44
+                        );
45
+
46
+                        @if nth($gradients, $i) ==  $yellow-gradient {
47
+                            color: #000000;
48
+                        }
49
+                    }
50
+                }
51
+            }
52
+
53
+            .content {
54
+                // Position
55
+                padding: 35px;
56
+
57
+				p {
58
+					// Position
59
+					margin-top: 15px;
60
+				}
61
+            } 
62
+                                                          
63
+            .button {
64
+                // Size
65
+                margin: 15px 15px 20px 15px;
66
+                padding: 20px 50px;
67
+                border-radius: 40px;
68
+
69
+                // Visual
70
+                color: #fff;
71
+                @include materialShadow(2, true);
72
+
73
+                font-family: $ibm-plex-sans;
74
+                text-decoration: none;
75
+                text-align: center;
76
+                text-transform: uppercase;
77
+                cursor: pointer;
78
+
79
+                &:hover {
80
+                    @include materialShadow(3, false);
81
+                }
82
+
83
+                &:active {
84
+                    // Visual
85
+                    @include materialShadow(2, false);
86
+                }
87
+
88
+                &:focus {
89
+                    // Visual
90
+                    outline: none;
91
+                }
92
+            }
93
+        }
94
+    }
95
+}

+ 14
- 0
scss/responsive.scss View File

@@ -0,0 +1,14 @@
1
+$breakpoints: (
2
+	large: 1464px,
3
+	medium: 1200px,
4
+	almost-medium: 900px,
5
+	small: 580px,
6
+	really-small: 390px,
7
+	ultra-small: 340px
8
+);
9
+
10
+@mixin media($width-value, $breakpoint) {
11
+	@media screen and ($width-value: map-get($breakpoints, $breakpoint)) {
12
+		@content;
13
+	} 
14
+}

+ 97
- 0
scss/skills.scss View File

@@ -0,0 +1,97 @@
1
+#skills {
2
+
3
+	h4 {
4
+		// Size
5
+		font-size: 22px;
6
+
7
+		// Position
8
+		margin-top: 10px;
9
+		margin-bottom: 5px;
10
+	}
11
+
12
+	.wrapper {
13
+		// Grid
14
+		display: grid;
15
+		grid-template-columns: repeat(2, 1fr);
16
+		grid-gap: 0px 50px;
17
+
18
+		// Position
19
+		margin-bottom: 50px;
20
+
21
+		// Responsive Design
22
+		@include media("max-width", "almost-medium") {
23
+			// Flexbox
24
+			display: flex;
25
+			flex-flow: column nowrap;
26
+			align-items: center;
27
+		}
28
+
29
+		.skill {
30
+
31
+			// Size
32
+			height: 35px;
33
+			width: 100%;
34
+			max-width: 1000px;
35
+
36
+			// Position
37
+			position: relative;
38
+			margin-top: 15px;
39
+			margin-bottom: 15px;
40
+
41
+			// Visual
42
+			border-radius: 5px;
43
+			background: #ffffff;
44
+			@include materialShadow(1, false);
45
+
46
+			h5 {
47
+				// Size
48
+				font-size: 1em;
49
+				line-height: 35px;
50
+
51
+				// Position
52
+				position: absolute; 
53
+				margin-left: 15px;
54
+				
55
+				// Visual
56
+				color: #ffffff;
57
+			}
58
+
59
+			div[class^="filled-"], div[class*=" filled-"] {
60
+				// Size
61
+				height: 35px;
62
+
63
+				// Visual
64
+				background-color: #52a2ad;
65
+				border-radius: 5px;
66
+				box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
67
+			}
68
+
69
+			.filled-1 {
70
+				// Size
71
+				width: 20%;
72
+			}
73
+
74
+			.filled-2 {
75
+				// Size
76
+				width: 40%;
77
+			}
78
+
79
+			.filled-3 {
80
+				// Size
81
+				width: 60%;
82
+			}
83
+
84
+			.filled-4 {
85
+				// Size
86
+				width: 80%;
87
+			}
88
+
89
+			.filled-5 {
90
+				// Size
91
+				width: 100%;
92
+			}
93
+
94
+		}
95
+	}
96
+}
97
+

+ 11
- 0
scss/styles.scss View File

@@ -0,0 +1,11 @@
1
+@import "mixins";
2
+@import "fonts";
3
+@import "colors";
4
+@import "responsive";
5
+@import "global";
6
+@import "landing";
7
+@import "content";
8
+@import "projects";
9
+@import "skills";
10
+@import "interests";
11
+@import "footer";

Loading…
Cancel
Save