Merge branch 'release/v1.0.0'

.gitignore

@@ -0,0 +1,4 @@
+.sass-cache/
+*.css.map
+*.sass.map
+*.scss.map

README.md

@@ -1,3 +1,15 @@
 # website
 
-This is the repository of my personal website
+This is the repository of my personal website
+
+## Tecnologies used
+- HTML
+- [SASS](https://sass-lang.com/)
+
+## External Resources
+- Landing page photograph: <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@willianjusten?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Willian Justen de Vasconcellos"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Willian Justen de Vasconcellos</span></a>
+- [Normalize.css](https://necolas.github.io/normalize.css/)
+- [Animate.css](https://daneden.github.io/animate.css/)
+- [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans)
+- [Open Sans](https://fonts.google.com/specimen/Open+Sans)
+

css/normalize.css

@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

css/styles.css

@@ -0,0 +1,256 @@
+@import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css");
+@font-face {
+  font-family: "IBM Plex Sans Semi-Bold";
+  src: url("../fonts/IBMPlexSans-SemiBold.ttf"); }
+@font-face {
+  font-family: "Open Sans Regular";
+  src: url("../fonts/OpenSans-Regular.ttf"); }
+* {
+  padding: 0px;
+  margin: 0px;
+  font-family: "Open Sans Regular"; }
+
+html, body {
+  height: 100%;
+  width: 100%; }
+
+#landing {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  background: url("../img/willian-justen-de-vasconcellos-595793-unsplash.jpg") no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+  #landing h1 {
+    font-size: 48px;
+    font-family: "IBM Plex Sans Semi-Bold";
+    color: #ffffff; }
+  #landing #more-arrow {
+    font-size: 38px;
+    position: absolute;
+    bottom: 100px;
+    color: #ffffff;
+    cursor: pointer; }
+  @media screen and (max-width: 900px) {
+    #landing h1 {
+      font-size: 40px; }
+    #landing #more-arrow {
+      font-size: 32px;
+      bottom: 50px; } }
+  @media screen and (max-width: 580px) {
+    #landing h1 {
+      font-size: 30px; }
+    #landing #more-arrow {
+      font-size: 26px; } }
+  @media screen and (max-width: 390px) {
+    #landing h1 {
+      font-size: 26px; }
+    #landing #more-arrow {
+      font-size: 20px;
+      bottom: 35px; } }
+  @media screen and (max-width: 340px) {
+    #landing h1 {
+      font-size: 22px; } }
+
+#content {
+  padding-top: 25px;
+  padding-bottom: 25px;
+  padding-left: 250px;
+  padding-right: 250px;
+  background-color: #f5f5f5; }
+  @media screen and (max-width: 1200px) {
+    #content {
+      padding-left: 150px;
+      padding-right: 150px; } }
+  @media screen and (max-width: 580px) {
+    #content {
+      padding-left: 75px;
+      padding-right: 75px; } }
+  @media screen and (max-width: 390px) {
+    #content {
+      padding-left: 50px;
+      padding-right: 50px; } }
+  @media screen and (max-width: 340px) {
+    #content {
+      padding-left: 35px;
+      padding-right: 35px; } }
+  #content section {
+    margin-top: 75px;
+    margin-bottom: 75px; }
+    #content section h3 {
+      font-size: 32px;
+      margin-bottom: 15px;
+      font-family: "IBM Plex Sans Semi-Bold"; }
+
+#projects .wrapper {
+  margin-top: 25px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 50px; }
+  @media screen and (max-width: 1464px) {
+    #projects .wrapper {
+      grid-template-columns: repeat(2, 1fr); } }
+  @media screen and (max-width: 900px) {
+    #projects .wrapper {
+      grid-template-columns: none; } }
+  #projects .wrapper .project {
+    min-height: 350px;
+    border-radius: 4px;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    background-color: #ffffff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+    #projects .wrapper .project:nth-child(6n+1) .button {
+      background-image: -webkit-linear-gradient(left, #6200ea, #1976d2);
+      background-image: linear-gradient(90deg, #6200ea 0, #1976d2); }
+    #projects .wrapper .project:nth-child(6n+2) .button {
+      background-image: -webkit-linear-gradient(left, #9c2780, #ff3d00);
+      background-image: linear-gradient(90deg, #9c2780 0, #ff3d00); }
+    #projects .wrapper .project:nth-child(6n+3) .button {
+      background-image: -webkit-linear-gradient(left, #0097a7, #ccff90);
+      background-image: linear-gradient(90deg, #0097a7 0, #ccff90); }
+    #projects .wrapper .project:nth-child(6n+4) .button {
+      background-image: -webkit-linear-gradient(left, #e65100, #ffa000);
+      background-image: linear-gradient(90deg, #e65100 0, #ffa000); }
+    #projects .wrapper .project:nth-child(6n+5) .button {
+      background-image: -webkit-linear-gradient(left, #4527a0, #7b1fa2);
+      background-image: linear-gradient(90deg, #4527a0 0, #7b1fa2); }
+    #projects .wrapper .project:nth-child(6n+6) .button {
+      background-image: -webkit-linear-gradient(left, #f6fc9c, #eaf818);
+      background-image: linear-gradient(90deg, #f6fc9c 0, #eaf818);
+      color: #000000; }
+    #projects .wrapper .project .content {
+      padding: 35px; }
+      #projects .wrapper .project .content p {
+        margin-top: 15px; }
+    #projects .wrapper .project .button {
+      margin: 15px 15px 20px 15px;
+      padding: 20px 50px;
+      border-radius: 40px;
+      color: #fff;
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+      font-family: "IBM Plex Sans Semi-Bold";
+      text-decoration: none;
+      text-align: center;
+      text-transform: uppercase;
+      cursor: pointer; }
+      #projects .wrapper .project .button:hover {
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
+      #projects .wrapper .project .button:active {
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
+      #projects .wrapper .project .button:focus {
+        outline: none; }
+
+#skills h4 {
+  font-size: 22px;
+  margin-top: 10px;
+  margin-bottom: 5px; }
+#skills .wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0px 50px;
+  margin-bottom: 50px; }
+  @media screen and (max-width: 900px) {
+    #skills .wrapper {
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center; } }
+  #skills .wrapper .skill {
+    height: 35px;
+    width: 100%;
+    max-width: 1000px;
+    position: relative;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    border-radius: 5px;
+    background: #ffffff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+    #skills .wrapper .skill h5 {
+      font-size: 1em;
+      line-height: 35px;
+      position: absolute;
+      margin-left: 15px;
+      color: #ffffff; }
+    #skills .wrapper .skill div[class^="filled-"], #skills .wrapper .skill div[class*=" filled-"] {
+      height: 35px;
+      background-color: #52a2ad;
+      border-radius: 5px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+    #skills .wrapper .skill .filled-1 {
+      width: 20%; }
+    #skills .wrapper .skill .filled-2 {
+      width: 40%; }
+    #skills .wrapper .skill .filled-3 {
+      width: 60%; }
+    #skills .wrapper .skill .filled-4 {
+      width: 80%; }
+    #skills .wrapper .skill .filled-5 {
+      width: 100%; }
+
+#interests ul {
+  margin-left: 15px;
+  margin-top: 10px; }
+  #interests ul li {
+    list-style-position: inside;
+    color: #7f8c8d; }
+
+footer {
+  width: 100%;
+  background: #2c2c54;
+  display: flex;
+  flex-flow: column nowrap; }
+  footer .helpful-links {
+    width: 100%;
+    margin-top: 40px;
+    margin-bottom: 40px;
+    color: #dddddd;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around; }
+    @media screen and (max-width: 900px) {
+      footer .helpful-links {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 50px; } }
+    @media screen and (max-width: 580px) {
+      footer .helpful-links {
+        grid-template-columns: none; } }
+    footer .helpful-links a {
+      font-size: 18px;
+      color: inherit;
+      text-decoration: none;
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center; }
+      footer .helpful-links a i {
+        font-size: 48px;
+        margin-bottom: 15px; }
+  footer .info {
+    margin-top: 10px;
+    margin-bottom: 50px;
+    color: #dddddd; }
+    footer .info p {
+      text-align: center; }
+      footer .info p a {
+        color: inherit;
+        text-decoration: none; }
+        footer .info p a:hover {
+          text-decoration: underline; }
+        footer .info p a i {
+          margin-right: 10px; }
+      @media screen and (max-width: 580px) {
+        footer .info p a {
+          display: block;
+          margin-bottom: 3px; }
+        footer .info p span {
+          display: none; } }
+
+/*# sourceMappingURL=styles.css.map */

index.html

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Néfix Estrada's Website</title>
+	<meta name="description" content="This the personal website of Néfix Estrada">
+
+	<link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="stylesheet" href="css/animate.min.css">
+</head>
+<body>
+
+    <section id="landing">
+        <h1>Néfix Estrada's Website</h1>
+        <i id="more-arrow" class="fas fa-angle-down animated infinite bounce slow delay-1s"></i>
+    </section>
+
+    <div id="content">
+
+        <section id="about">
+            <h3>About</h3>
+            <p>
+                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. 
+            </p>
+        </section>
+
+        <section id="projects">
+            <h3>Projects</h3>
+
+            <div class="wrapper">
+                <div class="project">
+                    <div class="content">
+                        <h4>PXE Cloud</h4>
+					<p>
+                            PXE Cloud is an easy to setup and easy to manage environment to boot live images and OS installlers through iPXE.
+                        </p>
+                    </div>
+                    <a href="https://github.com/pxe-cloud/pxe-cloud" class="button">Read more</a>
+                </div>
+                <div class="project">
+                    <div class="content">
+                        <h4>Backup Project</h4>
+                        <p>
+                            Backup Project is an API with a front-end to manage your backups with Borg Backup. 
+                        </p>
+                    </div>
+                    <a href="https://github.com/NefixEstrada/BackupProject/tree/develop" class="button">Read more</a>
+                </div>
+                <div class="project">
+					<div class="content">
+						<h4>autoqbid</h4>
+						<p>
+							autoqbid is a Selenium script that automates the time insertion inside Qbid.
+						</p>
+					</div>
+                    <a href="https://github.com/NefixEstrada/autoqbid" class="button">Read more</a>
+                </div>
+                <div class="project">
+					<div class="content">
+						<h4>Gocker CI/CD</h4>
+						<p>
+							Gocker CI/CD is a CI/CD for Docker written in Go. It monitorizes your Dockerfiles and containers and manages the updating process.
+						</p>
+					</div>
+                    <a href="https://gitea.nefixestrada.com/nefix/gocker-ci-cd/" class="button">Read more</a>
+                </div>
+
+				<div class="project">
+					<div class="content">
+						<h4>The Docs</h4>
+						<p>
+							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.
+						</p>
+					</div>
+					<a class="button" href="http://thedocs.isardvdi.com">Read More</a>
+				</div>
+            </div>
+        </section>
+
+        <section id="skills">
+			<h3>Skills</h3>
+
+			<h4>Front-end</h4>
+			<div class="wrapper">
+				<div class="skill">
+					<h5>HTML</h5>
+					<div class="filled-4"></div>
+				</div>
+				<div class="skill">
+					<h5>CSS</h5>
+					<div class="filled-3"></div>
+				</div>
+				<div class="skill">
+					<h5>SASS</h5>
+					<div class="filled-3"></div>
+				</div>
+				<div class="skill">
+					<h5>Bootstrap</h5>
+					<div class="filled-3"></div>
+				</div>
+				<div class="skill">
+					<h5>JS</h5>
+					<div class="filled-4"></div>
+				</div>
+				<div class="skill">
+					<h5>VueJS</h5>
+					<div class="filled-2"></div>
+				</div>
+			</div>
+
+			<h4>Back-end & scripting</h4>
+			<div class="wrapper">
+				<div class="skill">
+					<h5>NodeJS</h5>
+					<div class="filled-4"></div>
+				</div>
+				<div class="skill">
+					<h5>ExpressJS</h5>
+					<div class="filled-3"></div>
+				</div>
+				<div class="skill">
+					<h5>Python</h5>
+					<div class="filled-4"></div>
+				</div>
+				<div class="skill">
+					<h5>Flask</h5>
+					<div class="filled-3"></div>
+				</div>
+				<div class="skill">
+					<h5>Golang</h5>
+					<div class="filled-2"></div>
+				</div>
+				<div class="skill">
+					<h5>Bash</h5>
+					<div class="filled-3"></div>
+				</div>
+			</div>
+
+			<h4>Databases</h4>
+			<div class="wrapper">
+				<div class="skill">
+					<h5>SQL</h5>
+					<div class="filled-3"></div>
+				</div>
+				<div class="skill">
+					<h5>NoSQL</h5>
+					<div class="filled-3"></div>
+				</div>
+				<div class="skill">
+					<h5>PostgreSQL</h5>
+					<div class="filled-3"></div>
+				</div>
+				<div class="skill">
+					<h5>MariaDB</h5>
+					<div class="filled-2"></div>
+				</div>
+				<div class="skill">
+					<h5>MongoDB</h5>
+					<div class="filled-2"></div>
+				</div>
+			</div>
+
+			<h4>Sysamdin & DevOps</h4>
+			<div class="wrapper">
+				<div class="skill">
+					<h5>Docker</h5>
+					<div class="filled-4"></div>
+				</div>
+				<div class="skill">
+					<h5>Docker Compose</h5>
+					<div class="filled-4"></div>
+				</div>
+				<div class="skill">
+					<h5>GNU/Linux</h5>
+					<div class="filled-4"></div>
+				</div>
+				<div class="skill">
+					<h5>Networking</h5>
+					<div class="filled-3"></div>
+				</div>
+				<div class="skill">
+					<h5>Virtualization</h5>
+					<div class="filled-4"></div>
+				</div>
+				<div class="skill">
+					<h5>Server management</h5>
+					<div class="filled-4"></div>
+				</div>
+			</div>
+		</section>
+
+        <section id="interests">
+			<h3>Interests</h3>
+			<p>Currently, I'm trying to learn / improving one of the following topics:</p>
+			<ul>
+				<li><a href="https://golang.org/">Golang</a></li>
+				<li><a href="https://en.wikipedia.org/wiki/Microservices">Microservices</a> <a href="https://github.com/micro/micro">(Go Micro)</a></li>
+				<li><a href="https://grpc.io/">gRPC</a></li>
+				<li><a href="https://en.wikipedia.org/wiki/Test-driven_development">Test driven developement</a></li>
+				<li><a href="https://en.wikipedia.org/wiki/Agile_software_development">Agile developement</a></li>
+				<li><a href="https://www.ansible.com/">Ansible</a></li>
+				<li><a href="https://kubernetes.io/">Kubernetes</a></li>
+				<li><a href="https://nixos.org/">Nix + NixOS</a></li>
+				<li><a href="https://devhints.io/vim">Advanced Vim</a></li>
+			</ul>
+		</section>
+
+		<section id="contact">
+			<h3>Contact</h3>
+			<p>If you want to contact me, you can send me a mail to <a href="mailto:nefixestrada@gmail">nefixestrada@gmail.com</a></p>
+		</section>
+		
+    </div>
+
+
+    <footer>
+		<div class="helpful-links">
+			<a href="https://github.com/NefixEstrada"><i class="fab fa-github"></i>GitHub</a>
+			<a href="https://gitea.nefixestrada.com/nefix"><i class="fas fa-code-branch"></i>Gitea</a>
+			<a href="https://docs.nefixestrada.com"><i class="fas fa-book"></i>Personal Documentation</a>
+			<a href="https://blog.nefixestrada.com"><i class="fas fa-rss"></i>Personal Blog</a>
+		</div>
+
+		<div class="info">
+			<p>
+				<a href="https://gitea.nefixestrada.com/nefix/website"><i class="fas fa-code"></i>Source Code</a>
+				<span>| </span>Built by <strong>Néfix Estrada</strong>, 2018
+			</p>
+		</div>
+	</footer>
+</body>
+</html>

scss/colors.scss

@@ -0,0 +1,46 @@
+// Main background color
+$bg: #f5f5f5;
+
+// Main color of the landing page image
+
+// Color for the list bullets
+$list-bullets: #7f8c8d;
+
+// Footer background
+$footer-bg: #2c2c54;
+
+// Footer text color
+$footer-text: #dddddd;
+
+// Button gradients
+$red-gradient: (
+    colorA: #9c2780,
+    colorB: #ff3d00
+);
+
+$orange-gradient: (
+    colorA: #e65100,
+    colorB: #ffa000
+);
+
+$teal-gradient: (
+    colorA: #0097a7,
+    colorB: #ccff90
+);
+
+$purple-gradient: (
+    colorA: #4527a0,
+    colorB: #7b1fa2
+);
+
+$blue-gradient: (
+    colorA: #6200ea,
+    colorB: #1976d2
+);
+
+$yellow-gradient: (
+    colorA: #f6fc9c,
+    colorB: #eaf818
+);
+
+$gradients: $blue-gradient, $red-gradient, $teal-gradient, $orange-gradient, $purple-gradient, $yellow-gradient;

scss/content.scss

@@ -0,0 +1,56 @@
+#content {
+    // Size
+    padding-top: 25px;
+    padding-bottom: 25px;
+    padding-left: 250px;
+    padding-right: 250px;
+
+	// Responsive Design
+	@include media(max-width, medium) {
+		// Size
+		padding-left: 150px;
+		padding-right: 150px;
+	}
+
+	// Responsive Design
+	@include media(max-width, small) {
+		// Size
+		padding-left: 75px;
+		padding-right: 75px;
+	}
+
+	// Responsive Design
+	@include media(max-width, really-small) {
+		// Size
+		padding-left: 50px;
+		padding-right: 50px;
+	}
+
+	// Responsive Design
+	@include media(max-width, ultra-small) {
+		// Size
+		padding-left: 35px;
+		padding-right: 35px;
+	}
+
+    // Visual
+    background-color: $bg;
+
+    section {
+        // Position
+        margin-top: 75px;
+        margin-bottom: 75px;
+
+        h3 {
+            // Size
+            font-size: 32px;
+
+            // Position
+            margin-bottom: 15px;
+
+            // Visual
+            font-family: $ibm-plex-sans;
+        }
+    }
+
+}

scss/fonts.scss

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

scss/footer.scss

@@ -0,0 +1,108 @@
+footer {
+	// Size
+	width: 100%;
+
+	// Visual
+	background: $footer-bg;
+
+	// Flexbox
+	display: flex;
+	flex-flow: column nowrap;
+
+	.helpful-links {
+		// Size
+		width: 100%;
+
+		// Position
+		margin-top: 40px;
+		margin-bottom: 40px;
+		
+		// Visual
+		color: $footer-text;
+		
+		// Flexbox
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-around;
+
+		// Responsive Design
+		@include media("max-width", "almost-medium") {
+			// Grid
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			grid-gap: 50px;
+		}
+
+		// Responsive Design
+		@include media("max-width", "small") {
+			// Grid
+			grid-template-columns: none;
+		}
+
+		a {
+			// Size
+			font-size: 18px;
+
+			// Visual
+			color: inherit;
+			text-decoration: none;
+
+			// Flexbox
+			display: flex;
+			flex-flow: column nowrap;
+			align-items: center;
+
+			i {
+				// Size
+				font-size: 48px;
+
+				// Position
+				margin-bottom: 15px;
+			}
+		}
+	}
+
+	.info {
+		// Position
+		margin-top: 10px;
+		margin-bottom: 50px;
+
+		// Visual
+		color: $footer-text;
+
+		p {
+			// Position
+			text-align: center;
+
+			a {
+				// Visual
+				color: inherit;
+				text-decoration: none;
+
+				&:hover {
+					// Visual
+					text-decoration: underline;
+				}
+
+				i {
+					// Position
+					margin-right: 10px;
+				}
+			}
+
+			// Responsive Design
+			@include media("max-width", "small") {
+				a {
+					// Position
+					display: block;
+					margin-bottom: 3px;
+				}
+
+				span {
+					// Visual
+					display: none;
+				}
+			}
+		}
+	}
+}

scss/global.scss

@@ -0,0 +1,14 @@
+* {
+    // Position
+    padding: 0px;
+    margin: 0px;
+
+    // Visual
+    font-family: $open-sans;
+}
+
+html, body {
+    // Size
+    height: 100%;
+    width: 100%;
+}

scss/interests.scss

@@ -0,0 +1,16 @@
+#interests {
+	
+	ul {
+		// Position
+		margin-left: 15px;
+		margin-top: 10px;
+
+		li {
+			// Position
+			list-style-position: inside;
+
+			// Visual
+			color: $list-bullets;
+		}
+	}
+}

scss/landing.scss

@@ -0,0 +1,94 @@
+#landing {
+    // Size
+    height: 100%;
+    width: 100%;
+
+    // Flex
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+
+    // Visual
+    background: url("../img/willian-justen-de-vasconcellos-595793-unsplash.jpg") no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    @include materialShadow(1, false);
+
+	h1 {
+		// Size
+		font-size: 48px;
+
+		// Visual
+		font-family: $ibm-plex-sans;
+		color: #ffffff;
+
+    }
+
+    #more-arrow {
+        // Size
+        font-size: 38px;
+
+        // Position
+        position: absolute;
+        bottom: 100px;
+
+        // Visual
+        color: #ffffff;
+        cursor: pointer;
+    }
+	// Responsive Design
+	@include media(max-width, almost-medium) {
+		h1 {
+			// Size
+			font-size: 40px;
+		}
+
+		#more-arrow {
+			// Size
+			font-size: 32px;
+
+			// Position
+			bottom: 50px;
+		}
+	}
+
+	// Responsive Design
+	@include media(max-width, small) {
+		h1 {
+			// Size
+			font-size: 30px;
+		}
+
+		#more-arrow {
+			// Size
+			font-size: 26px;
+		}
+	}
+
+	// Responsive Design
+	@include media(max-width, really-small) {
+		h1 {
+			// Size
+			font-size: 26px;
+		}
+
+		#more-arrow {
+			// Size
+			font-size: 20px;
+
+			// Position
+			bottom: 35px;
+		}
+	}
+
+	// Responsive Design
+	@include media(max-width, ultra-small) {
+		h1 {
+			// Size
+			font-size: 22px;
+		}
+	}
+}

scss/mixins.scss

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

scss/projects.scss

@@ -0,0 +1,95 @@
+#projects {
+
+    .wrapper {
+        // Position
+        margin-top: 25px;
+
+        // Grid
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 50px;
+
+		// Responsive Design
+		@include media("max-width", "large") {
+			// Grid
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		// Responsive Design
+		@include media("max-width", "almost-medium") {
+			// Grid
+			grid-template-columns: none;
+		}
+
+        .project {
+            // Size
+            min-height: 350px;
+            border-radius: 4px;
+
+            // Flexbox
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: space-between;
+
+            // Visual
+            background-color: #ffffff;
+            @include materialShadow(1, false);
+
+            @for $i from 1 through length($gradients) {
+                &:nth-child(#{length($gradients)}n+#{$i}) {
+                    .button {
+                        @include gradient(
+                            map-get(nth($gradients, $i), "colorA"),
+                            map-get(nth($gradients, $i), "colorB")
+                        );
+
+                        @if nth($gradients, $i) ==  $yellow-gradient {
+                            color: #000000;
+                        }
+                    }
+                }
+            }
+
+            .content {
+                // Position
+                padding: 35px;
+
+				p {
+					// Position
+					margin-top: 15px;
+				}
+            } 
+                                                          
+            .button {
+                // Size
+                margin: 15px 15px 20px 15px;
+                padding: 20px 50px;
+                border-radius: 40px;
+
+                // Visual
+                color: #fff;
+                @include materialShadow(2, true);
+
+                font-family: $ibm-plex-sans;
+                text-decoration: none;
+                text-align: center;
+                text-transform: uppercase;
+                cursor: pointer;
+
+                &:hover {
+                    @include materialShadow(3, false);
+                }
+
+                &:active {
+                    // Visual
+                    @include materialShadow(2, false);
+                }
+
+                &:focus {
+                    // Visual
+                    outline: none;
+                }
+            }
+        }
+    }
+}

scss/responsive.scss

@@ -0,0 +1,14 @@
+$breakpoints: (
+	large: 1464px,
+	medium: 1200px,
+	almost-medium: 900px,
+	small: 580px,
+	really-small: 390px,
+	ultra-small: 340px
+);
+
+@mixin media($width-value, $breakpoint) {
+	@media screen and ($width-value: map-get($breakpoints, $breakpoint)) {
+		@content;
+	} 
+}

scss/skills.scss

@@ -0,0 +1,97 @@
+#skills {
+
+	h4 {
+		// Size
+		font-size: 22px;
+
+		// Position
+		margin-top: 10px;
+		margin-bottom: 5px;
+	}
+
+	.wrapper {
+		// Grid
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-gap: 0px 50px;
+
+		// Position
+		margin-bottom: 50px;
+
+		// Responsive Design
+		@include media("max-width", "almost-medium") {
+			// Flexbox
+			display: flex;
+			flex-flow: column nowrap;
+			align-items: center;
+		}
+
+		.skill {
+
+			// Size
+			height: 35px;
+			width: 100%;
+			max-width: 1000px;
+
+			// Position
+			position: relative;
+			margin-top: 15px;
+			margin-bottom: 15px;
+
+			// Visual
+			border-radius: 5px;
+			background: #ffffff;
+			@include materialShadow(1, false);
+
+			h5 {
+				// Size
+				font-size: 1em;
+				line-height: 35px;
+
+				// Position
+				position: absolute; 
+				margin-left: 15px;
+				
+				// Visual
+				color: #ffffff;
+			}
+
+			div[class^="filled-"], div[class*=" filled-"] {
+				// Size
+				height: 35px;
+
+				// Visual
+				background-color: #52a2ad;
+				border-radius: 5px;
+				box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+			}
+
+			.filled-1 {
+				// Size
+				width: 20%;
+			}
+
+			.filled-2 {
+				// Size
+				width: 40%;
+			}
+
+			.filled-3 {
+				// Size
+				width: 60%;
+			}
+
+			.filled-4 {
+				// Size
+				width: 80%;
+			}
+
+			.filled-5 {
+				// Size
+				width: 100%;
+			}
+
+		}
+	}
+}
+

scss/styles.scss

@@ -0,0 +1,11 @@
+@import "mixins";
+@import "fonts";
+@import "colors";
+@import "responsive";
+@import "global";
+@import "landing";
+@import "content";
+@import "projects";
+@import "skills";
+@import "interests";
+@import "footer";