feat: new

6 files changed, 464 insertions, 0 deletions

diff --git a/assets/styles/components/category-section.scss b/assets/styles/components/category-section.scss
new file mode 100644
index 0000000..893a91b
--- /dev/null
+++ b/assets/styles/components/category-section.scss
@@ -0,0 +1,17 @@
+@media(max-width: 768px) {
+  .project {
+    width: 90% !important;
+    margin: 14px auto;
+  }
+
+  .vertical {
+    display: none;
+  }
+
+  .project1::after, .project2::after, .project3::after, .project4::after,
+  .graphic1::after, .graphic2::after, .graphic3::after, .graphic4::after,
+  .render1::after, .render2::after, .render3::after, .render4::after,
+  .category1::after, .category2::after, .category3::after, .category4::after {
+    display: none;
+  }
+}
diff --git a/assets/styles/components/contact-form.scss b/assets/styles/components/contact-form.scss
new file mode 100644
index 0000000..ef48d1c
--- /dev/null
+++ b/assets/styles/components/contact-form.scss
@@ -0,0 +1,70 @@
+#contact-form {
+  margin: 5% 1.4%;
+}
+
+#contact-form ul {
+  list-style: none;
+  border-radius: 5px;
+  margin-bottom: 40px;
+}
+
+#contact-form li {
+  padding: 10px;
+}
+
+#contact-form li:last-of-type {
+  border-bottom: none;
+}
+
+#contact-form label {
+  display: block;
+  font-size: .8em;
+  color: #999;
+  padding-left: 5px;
+}
+
+#contact-form input, #contact-form textarea {
+  width: 100%;
+  padding: 5px;
+  border: none;
+  resize: vertical;
+  background: transparent;
+  color: #fff;
+  font-weight: bolder;
+}
+
+input:focus {
+  outline: none;
+  border: none;
+}
+
+textarea:focus {
+  outline: none;
+  border: none;
+}
+
+.textarea {
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.send {
+  margin-left: 50px;
+  text-transform: uppercase;
+  padding: 20px 30px;
+  background: transparent;
+  color: #dfdfdf;
+  font-size: 14px;
+  letter-spacing: 2px;
+}
+
+.send:hover {
+  background: #dfdfdf;
+  color: #101010;
+}
+
+@media(max-width: 768px) {
+  #contact-form {
+    margin: 5% -8%;
+    width: 98%;
+  }
+}
diff --git a/assets/styles/components/footer.scss b/assets/styles/components/footer.scss
new file mode 100644
index 0000000..51d16b0
--- /dev/null
+++ b/assets/styles/components/footer.scss
@@ -0,0 +1,165 @@
+.collab {
+  text-align: right;
+}
+
+.collab p {
+  font-weight: lighter !important;
+  margin-bottom: 20px;
+}
+
+.hr {
+  background: rgba(255, 255, 255, 0.2);
+  height: 1px;
+}
+
+.info h4 {
+  font-size: 18px;
+  font-weight: lighter;
+}
+
+.info p {
+  color: grey;
+  font-weight: lighter;
+}
+
+.info li {
+  font-weight: lighter;
+  color: #fff;
+  font-size: 18px;
+  padding-left: 20px;
+}
+
+#fb::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #3b5998;
+}
+
+
+#ig::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #fcaf45;
+}
+
+
+#tw::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #55acee;
+}
+
+
+#yt::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #c4302b;
+}
+
+#gh::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #24292e;
+}
+
+#dc::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #455970;
+}
+
+#em::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #3d5928;
+}
+
+#pp::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #554235;
+}
+
+#st::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #2b3d4e;
+}
+
+#ap::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: rgb(216, 99, 140);
+}
+
+#media, #address {
+  text-align: right;
+}
+
+#media ul {
+  list-style: none;
+}
+
+#media ul li {
+  display: inline-block;
+}
+
+@media(max-width: 768px) {
+  .collab, #personal, #media, #address {
+    text-align: center;
+  }
+
+  .info ul {
+    margin: 0 0 0 -22px;
+    padding: 0;
+  }
+}
+
+/* Honestly, this took way longer to figure out than it should've. I scoured the internet for so long, at one point, I think
+// I had around 20+ tabs open, no idea how I really figured it out, just tried as many solutions until it was solved. - 17:27, 10/20/2018
+*/
+div #no-h, #personal a, a:hover, #media a, a:hover, #address a, a:hover {
+  color: inherit;
+  text-decoration: none;
+  transition: 0.5s;
+}
diff --git a/assets/styles/components/hero.scss b/assets/styles/components/hero.scss
new file mode 100644
index 0000000..db99439
--- /dev/null
+++ b/assets/styles/components/hero.scss
@@ -0,0 +1,19 @@
+.hero {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero h1 {
+  font-weight: lighter;
+  text-align: center;
+  letter-spacing: -2px;
+  line-height: 58px;
+}
+
+@media(max-width: 768px) {
+  .header h1 {
+    font-size: 26px;
+  }
+}
diff --git a/assets/styles/components/navgiation.scss b/assets/styles/components/navgiation.scss
new file mode 100644
index 0000000..53ff6b8
--- /dev/null
+++ b/assets/styles/components/navgiation.scss
@@ -0,0 +1,178 @@
+nav {
+  width: 100%;
+  background: #0f0f0f;
+  height: 80px;
+  position: fixed;
+  z-index: 1;
+}
+
+nav #brand {
+  float: left;
+  display: block;
+  margin-left: 82px;
+  line-height: 80px;
+  font-weight: bold;
+}
+
+nav #brand a {
+  color: #fff;
+  transition: all 0.3s ease-out;
+}
+
+nav #brand a:hover {
+  text-decoration: none;
+}
+
+nav #menu {
+  float: left;
+  right: 80px;
+  position: fixed;
+}
+
+nav #menu li {
+  padding-left: 30px; /* 40px */
+  display: inline-block;
+  cursor: pointer;
+  font-weight: 300;
+  line-height: 80px;
+  position: relative;
+  transition: all 0.3s ease-out;
+}
+
+nav #menu li span {
+  font-weight: 700;
+}
+
+nav #menu li a {
+  color: #fff;
+  transition: 0.5s;
+}
+
+nav #menu li a:hover {
+  text-decoration: none;
+  transition: 0.5s;
+}
+
+#menu-item-1:hover { letter-spacing: 1px; font-family: cursive; }
+#menu-item-2:hover { font-weight: bold; font-family: monospace; }
+#menu-item-3:hover { font-style: italic; font-family: Arial, Helvetica, sans-serif; }
+#menu-item-4:hover { text-decoration: underline !important; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
+#menu-item-5:hover { font-style: bold; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; }
+
+#toggle {
+  position: absolute;
+  right: 30px;
+  top: 20px;
+  font-weight: 300;
+  z-index: 2;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  float: right;
+  transition: all 0.3s ease-out;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.close-btn {
+  position: absolute;
+  right: 16px;
+  font-weight: 300;
+  z-index: 2;
+  cursor: pointer;
+  top: -2px;
+  line-height: 80px;
+}
+
+#resize {
+  z-index: 1;
+  top: 0; // px
+  position: fixed;
+  background: #0f0f0f;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 1s ease-out;
+}
+
+#resize #menu {
+  height: 90px;
+  position: absolute;
+  left: 43%;
+  transform: translateX(-40%);
+  text-align: center;
+  display: table-cell;
+  vertical-align: center;
+}
+
+#resize #menu li {
+  display: block;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 50px;
+  min-height: 50px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease-out;
+}
+
+#resize li:nth-child(1) {
+  margin-top: 100px; /* 140px */
+}
+
+#resize #menu li a {
+  color: #fff;
+}
+
+#resize #menu li a:hover {
+  text-decoration: none;
+}
+
+#resize.active {
+  visibility: visible;
+  opacity: 1;
+}
+
+@media(max-width: 768px) {
+  #toggle {
+    visibility: visible;
+    opacity: 1;
+    margin-top: 6px;
+    margin-right: 4px;
+  }
+
+  nav #brand {
+    margin-left: 24px;
+  }
+
+  #menu a {
+    font-size: 20px;
+    font-weight: 300;
+  }
+
+  #resize li span {
+    font-weight: bolder;
+  }
+
+  nav #menu {
+    display: none;
+  }
+}
+
+@media(min-width: 768px) {
+  #resize {
+    visibility: hidden !important;
+  }
+}
+
+/* .blur {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	min-height: 50px;
+	margin-bottom: 20px;
+	background: rgba(15, 15, 15, 1);
+	z-index: 1010;
+	filter: blur(20px);
+} */
diff --git a/assets/styles/components/project-section.scss b/assets/styles/components/project-section.scss
new file mode 100644
index 0000000..7ba669a
--- /dev/null
+++ b/assets/styles/components/project-section.scss
@@ -0,0 +1,15 @@
+h6 {
+  text-align: center;
+}
+
+.vertical {
+  margin-top: 40px;
+  border-left: 1px solid #fff;
+  height: 80px;
+  position: absolute;
+  left: 50%;
+}
+
+.project {
+  height: 500px;
+}