:star:

3 files changed, 345 insertions, 0 deletions

diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
new file mode 100644
index 0000000..31764ee
--- /dev/null
+++ b/components/navigation/Bar.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <nav>
+      <span id="brand">
+        <a href="/">::</a>
+      </span>
+
+      <ul id="menu">
+        <li><a id="menu-item-1" href="/">/home</a></li>
+        <li>
+          <a id="menu-item-2" href="/skills">/skills</a>
+        </li>
+        <!-- <li><a id="menu-item-3" href="/projects">/projects</a></li> -->
+        <!-- <li><a id="menu-item-4" href="/about">/about me</a></li> -->
+        <!-- <li><a id="menu-item-5" href="https://blog.fuwn.me">/blog</a></li> -->
+      </ul>
+
+      <div id="toggle">
+        <div class="span">
+          menu
+        </div>
+      </div>
+    </nav>
+
+    <div id="resize">
+      <div class="close-btn">
+        close
+      </div>
+
+      <ul id="menu">
+        <li><a href="/">home<span>.</span></a></li>
+        <li><a href="/skills">skills<span>.</span></a></li>
+        <li><a href="/projects">projects<span>.</span></a></li>
+        <li><a href="/about">about me<span>.</span></a></li>
+        <li><a href="/blog">blog<span>.</span></a></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header'
+}
+</script>
diff --git a/components/navigation/Footer.vue b/components/navigation/Footer.vue
new file mode 100644
index 0000000..5fd72c6
--- /dev/null
+++ b/components/navigation/Footer.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="footer">
+    <div class="container">
+      <br><br><br><br>
+
+      <div class="info">
+        <div class="row">
+          <div id="personal" class="col-lg-4">
+            <p class="wow fadeInUp">
+              <code>println!(Fuwn.copyleft);<br></code>
+            </p>
+            <h4 class="wow fadeInUp" data-wow-delay="0.2s">
+              <a id="info-item-1" href="/">fuwn 2020</a>
+            </h4>
+            <br><br>
+          </div>
+
+          <div id="media" class="col-lg-4">
+            <p class="wow fadeInUp" data-wow-delay="0s">
+              <code>$ ls -a links/<br></code>
+            </p>
+
+            <ul>
+              <li id="tw" class="wow fadeInUp" data-wow-delay="0.8s">
+                <a id="media-item-1" :href="'https://twitter.com/' + socials.twitter">tw</a>
+              </li>
+              <li id="gh" class="wow fadeInUp" data-wow-delay="1s">
+                <a id="media-item-3" :href="'https://github.com/' + socials.github">gh</a>
+              </li>
+            </ul>
+            <br><br>
+          </div>
+
+          <div id="address" class="col-lg-4">
+            <p class="wow fadeInUp" data-wow-delay="0s">
+              <code>$ echo $CONTACTS<br></code>
+            </p>
+            <h4 class="wow fadeInUp" data-wow-delay="0.2s">
+              <a href="/contacts">
+                <img
+                  src="../../assets/images/contacts-flash.gif"
+                  alt=""
+                >
+              </a>
+            </h4>
+            <br><br>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import socials from '../../assets/json/socials.json'
+
+export default {
+  name: 'Footer',
+  data: () => {
+    return {
+      socials
+    }
+  }
+}
+</script>
diff --git a/components/navigation/ResponsiveBar.vue b/components/navigation/ResponsiveBar.vue
new file mode 100644
index 0000000..a638811
--- /dev/null
+++ b/components/navigation/ResponsiveBar.vue
@@ -0,0 +1,235 @@
+<template>
+  <nav>
+    <input id="nav" type="checkbox" class="hidden">
+    <label for="nav" class="nav-btn">
+      <i />
+      <i />
+      <i />
+    </label>
+    <div class="logo">
+      <a href="/">::</a>
+    </div>
+    <div class="nav-wrapper">
+      <ul>
+        <!-- <li>$ ls -a routes/</li> -->
+        <li><a href="/">..</a></li>
+        <li><a href="/skills">skills</a></li>
+        <li><a href="/interests">interests</a></li>
+        <li><a href="/contacts">contacts</a></li>
+      </ul>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'ResponsiveBar'
+}
+</script>
+
+<style scoped lang="scss">
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  /* font-family: Poppins, serif; */
+  font-weight: 400;
+  background-position: center;
+  background-size: cover;
+}
+
+nav {
+  padding: 8px;
+}
+
+.logo {
+  float: left;
+  padding: 8px;
+  margin-left: 16px;
+  margin-top: 8px;
+  color: white;
+}
+
+.logo a {
+  color: white;
+  /* text-transform: uppercase; */
+  font-weight: 700;
+  font-size: 18px;
+  letter-spacing: 0; /* px */
+  text-decoration: none;
+}
+
+nav ul {
+  float: right;
+}
+
+nav ul li {
+  display: inline-block;
+  float: left;
+}
+
+nav ul li:not(:first-child) {
+  margin-left: 48px;
+}
+
+nav ul li:last-child {
+  margin-right: 24px;
+}
+
+nav ul li a {
+  display: inline-block;
+  outline: none;
+  color: white;
+  /* text-transform: uppercase; */
+  text-decoration: none;
+  font-size: 14px;
+  letter-spacing: 1.2px;
+  // font-weight: 600;
+}
+
+@media screen and (max-width: 864px) {
+  .logo {
+    padding: 0;
+  }
+
+  .nav-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background: #0f0f0f;
+    opacity: 0;
+    transition: all 0.2s ease;
+  }
+
+  .nav-wrapper ul {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+  }
+
+  .nav-wrapper ul li {
+    display: block;
+    float: none;
+    width: 100%;
+    text-align: right;
+    margin-bottom: 10px;
+  }
+
+  .nav-wrapper ul li:nth-child(1) a {
+    transition-delay: 0.2s;
+  }
+
+  .nav-wrapper ul li:nth-child(2) a {
+    transition-delay: 0.3s;
+  }
+
+  .nav-wrapper ul li:nth-child(3) a {
+    transition-delay: 0.4s;
+  }
+
+  .nav-wrapper ul li:nth-child(4) a {
+    transition-delay: 0.5s;
+  }
+
+  .nav-wrapper ul li:not(:first-child) {
+    margin-left: 0;
+  }
+
+  .nav-wrapper ul li a {
+    padding: 10px 24px;
+    opacity: 0;
+    color: white; /* #000 */
+    font-size: 14px;
+    // font-weight: 600;
+    letter-spacing: 1.2px;
+    transform: translateX(-20px);
+    transition: all 0.2s ease;
+  }
+
+  .nav-btn {
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    display: block;
+    width: 48px;
+    height: 48px;
+    cursor: pointer;
+    z-index: 9999;
+    border-radius: 50%;
+  }
+
+  .nav-btn i {
+    display: block;
+    width: 20px;
+    height: 2px;
+    background: white;
+    border-radius: 2px;
+    margin-left: 14px;
+  }
+
+  .nav-btn i:nth-child(1) {
+    margin-top: 16px;
+  }
+
+  .nav-btn i:nth-child(2) {
+    margin-top: 4px;
+    opacity: 1;
+  }
+
+  .nav-btn i:nth-child(3) {
+    margin-top: 4px;
+  }
+}
+
+#nav:checked + .nav-btn {
+  transform: rotate(45deg);
+}
+
+#nav:checked + .nav-btn i {
+  background: white;
+  transition: transform 0.2s ease;
+}
+
+#nav:checked + .nav-btn i:nth-child(1) {
+  transform: translateY(6px) rotate(180deg);
+}
+
+#nav:checked + .nav-btn i:nth-child(2) {
+  opacity: 0;
+}
+
+#nav:checked + .nav-btn i:nth-child(3) {
+  transform: translateY(-6px) rotate(90deg);
+}
+
+#nav:checked ~ .nav-wrapper {
+  z-index: 9990;
+  opacity: 1;
+}
+
+#nav:checked ~ .nav-wrapper ul li a {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.hidden {
+  display: none;
+}
+</style>