From 34f9265c86083914ce4eeaee84ddbf448972fdc6 Mon Sep 17 00:00:00 2001
From: timothypidashev <pidashev.tim@gmail.com>
Date: Thu, 15 Jul 2021 03:37:51 +0000
Subject: [PATCH] learning vue with bootstrap integration

---
 components/Logo.vue             |  79 --------------------
 components/bootstrapAbout.vue   |  31 ++++++++
 components/bootstrapContact.vue | 124 ++++++++++++++++++++++++++++++++
 components/bootstrapNav.vue     |  37 ++++++++++
 pages/index.vue                 |  77 ++------------------
 5 files changed, 198 insertions(+), 150 deletions(-)
 delete mode 100644 components/Logo.vue
 create mode 100644 components/bootstrapAbout.vue
 create mode 100644 components/bootstrapContact.vue
 create mode 100644 components/bootstrapNav.vue

diff --git a/components/Logo.vue b/components/Logo.vue
deleted file mode 100644
index 6c72854..0000000
--- a/components/Logo.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two" />
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
-</template>
-
-<style>
-.VueToNuxtLogo {
-  display: inline-block;
-  animation: turn 2s linear forwards 1s;
-  transform: rotateX(180deg);
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  width: 245px;
-}
-
-.Triangle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-.Triangle--one {
-  border-left: 105px solid transparent;
-  border-right: 105px solid transparent;
-  border-bottom: 180px solid #41b883;
-}
-
-.Triangle--two {
-  top: 30px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 87.5px solid transparent;
-  border-right: 87.5px solid transparent;
-  border-bottom: 150px solid #3b8070;
-}
-
-.Triangle--three {
-  top: 60px;
-  left: 35px;
-  animation: goright 0.5s linear forwards 3.5s;
-  border-left: 70px solid transparent;
-  border-right: 70px solid transparent;
-  border-bottom: 120px solid #35495e;
-}
-
-.Triangle--four {
-  top: 120px;
-  left: 70px;
-  animation: godown 0.5s linear forwards 3s;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 60px solid #fff;
-}
-
-@keyframes turn {
-  100% {
-    transform: rotateX(0deg);
-  }
-}
-
-@keyframes godown {
-  100% {
-    top: 180px;
-  }
-}
-
-@keyframes goright {
-  100% {
-    left: 70px;
-  }
-}
-</style>
diff --git a/components/bootstrapAbout.vue b/components/bootstrapAbout.vue
new file mode 100644
index 0000000..aa64d19
--- /dev/null
+++ b/components/bootstrapAbout.vue
@@ -0,0 +1,31 @@
+<template>
+  <b-jumbotron id="about" bg-variant="white" class="rounded-0 mb-0">
+    <b-row>
+      <b-col
+        md="4"
+        order-md="2"
+        class="d-flex align-items-center justify-content-center"
+      >
+        <b-img fluid src="~assets/john-doe.jpeg" alt="John Doe" class="img" />
+      </b-col>
+
+      <b-col md="8" order-md="1">
+        <b-container>
+          <h2 class="display-4">John Doe</h2>
+
+          <p class="lead">
+            I am also known as joker, <del>shadow</del> king, and
+            &#647;n&#477;sp&#592;&#654;.<br />I hate the hierarchy, so I broke
+            it.
+          </p>
+        </b-container>
+      </b-col>
+    </b-row>
+  </b-jumbotron>
+</template>
+
+<style scoped>
+.img {
+  max-height: 300px;
+}
+</style>
diff --git a/components/bootstrapContact.vue b/components/bootstrapContact.vue
new file mode 100644
index 0000000..40bb339
--- /dev/null
+++ b/components/bootstrapContact.vue
@@ -0,0 +1,124 @@
+<template>
+  <b-container
+    id="contact"
+    fluid
+    bg-variant="primary"
+    class="bg-primary mh-100 px-0 text-white"
+  >
+    <b-container fluid class="content py-3 mh-100">
+      <b-container>
+        <h3 class="mb-4">Contact Me</h3>
+
+        <p>
+          You know I am busy teaching people lessons, so reach me through my
+          sidekick <del>Cecile</del> <ins>Zeke</ins>.
+        </p>
+
+        <hr class="bg-white" />
+
+        <b-row>
+          <b-col md="7" class="mb-5 mb-md-0 py-3">
+            <b-form
+              action="https://formspree.io/yasmin@yasminzy.com"
+              method="POST"
+            >
+              <b-form-group>
+                <b-form-input
+                  id="name"
+                  class="form-control"
+                  type="text"
+                  name="name"
+                  placeholder="Name"
+                  required
+                />
+              </b-form-group>
+
+              <b-form-group>
+                <b-form-input
+                  id="email"
+                  class="form-control"
+                  type="email"
+                  name="_replyto"
+                  aria-describedby="emailHelp"
+                  placeholder="Email"
+                  required
+                />
+              </b-form-group>
+
+              <b-form-group>
+                <b-form-textarea
+                  id="message"
+                  class="form-control"
+                  rows="3"
+                  name="message"
+                  placeholder="Message"
+                  required
+                />
+              </b-form-group>
+
+              <input type="hidden" name="_subject" value="Bootstrap Demo" />
+              <input
+                type="hidden"
+                name="_next"
+                value="https://www.yasminzy.com"
+              />
+
+              <b-button
+                type="submit"
+                class="bg-white btn d-flex align-items-center text-dark"
+              >
+                SEND
+                <ion-icon name="send" class="pl-2 text-primary" />
+              </b-button>
+            </b-form>
+          </b-col>
+
+          <b-col md="3" offset-md="1">
+            <b-list-group class="mb-5">
+              <b-list-group-item
+                v-for="(item, index) in contact"
+                :key="index"
+                class="
+                  bg-transparent
+                  border-left-0 border-right-0 border-top-0
+                  px-0
+                "
+              >
+                <div>
+                  <p class="font-weight-bold mb-2 text-uppercase">
+                    {{ item.label }}
+                  </p>
+
+                  <small>{{ item.content }}</small>
+                </div>
+              </b-list-group-item>
+            </b-list-group>
+          </b-col>
+        </b-row>
+      </b-container>
+    </b-container>
+  </b-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      contact: [
+        {
+          label: "Telephone",
+          content: "(12) 345-6789"
+        },
+        {
+          label: "Email",
+          content: "king[at]welston.com"
+        },
+        {
+          label: "Address",
+          content: "2021 Black Speech Bubble, ID"
+        }
+      ]
+    };
+  }
+};
+</script>
diff --git a/components/bootstrapNav.vue b/components/bootstrapNav.vue
new file mode 100644
index 0000000..0b76266
--- /dev/null
+++ b/components/bootstrapNav.vue
@@ -0,0 +1,37 @@
+<template>
+  <b-navbar toggleable="lg" type="dark" variant="dark" class="w-100">
+    <b-navbar-brand to="/">
+      <b-img
+        class="d-inline-block align-top"
+        src="~assets/logo.svg"
+        alt="Logo"
+        width="30"
+        height="30"
+      />
+      <span class="font-weight-bold">Unordinary</span>
+    </b-navbar-brand>
+
+    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+    <b-collapse id="nav-collapse" is-nav>
+      <b-navbar-nav>
+        <b-nav-item v-for="(item, index) in menu" :key="index" :href="item.to">
+          {{ item.label }}
+        </b-nav-item>
+      </b-navbar-nav>
+    </b-collapse>
+  </b-navbar>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menu: [
+        { to: "#about", label: "About" },
+        { to: "#contact", label: "Contact" }
+      ]
+    };
+  }
+};
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 87e9196..be46719 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,74 +1,9 @@
 <template>
-  <div class="container">
-    <div>
-      <logo />
-      <h1 class="title">
-        nuxtjs
-      </h1>
-      <h2 class="subtitle">
-        My astonishing Nuxt.js project
-      </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          rel="noopener"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
-    </div>
+  <div>
+    <h1>Bootstrap Demo</h1>
+
+    <BootstrapNav />
+    <BootstrapAbout />
+    <BootstrapContact />
   </div>
 </template>
-
-<script>
-import Logo from '~/components/Logo.vue'
-
-export default {
-  components: {
-    Logo
-  }
-}
-</script>
-
-<style>
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
-}
-</style>