Merge branch 'master' into BULL-182

src/config/external-links.js

+export const trainingResources = {
+  cohortFAQ: "https://onboarding.il2.dsop.io/",
+  devSecOpsTraining: "https://software.af.mil/training",
+  containerRegistry: "https://software.af.mil/dsop/documents",
+  agile: "https://software.af.mil/training/training-agile",
+  devOps: "https://software.af.mil/training/devops",
+  microservices: "https://software.af.mil/training/microservices",
+  kubernetes: "https://software.af.mil/training/kubernetes"
+};
+
+export const selfLearning = {
+  kubernetes: {
+    beginner:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlydFzQzkYYDdQK7k5cEKubQ",
+    intermediate:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlx8dSFH_jFLK40Tt7KUXTN_",
+    advanced:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlytdAJiVqbHucWOvn5LrTNW"
+  },
+  serviceMesh: {
+    beginner:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlxtC4rDIMQ8QiG5UBCjz7VH",
+    intermediate:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlwWK_Y_Cas8Nyw-DsdbH6vl",
+    advanced:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlx8VW2MFONMRwS_-2rSJwdn"
+  },
+  microservices: {
+    beginner:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlz_U2_RaONTGYLkz0lh-A_L",
+    intermediate:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlxqjuAXxoRMjvspaEE8L2cB",
+    advanced:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlw4CF4F4t3gVV3j0512CMsu"
+  },
+  kafka: {
+    beginner:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlzz0zt03Ludtid7icrXBesg",
+    intermediate:
+      "https://www.youtube.com/playlist?list=PLSIv_F9TtLlxxXX0oCzt7laO6mD61UIQw"
+  }
+};

src/views/Resources.vue

 <template>
   <div>
-    Resources here
+    <v-container class="px-2 px-md-4 px-lg-8 px-xl-16 pb-0">
+      <v-row class="justify-content-left">
+        <v-col cols="12" lg="4" md="6" sm="12" class="py-0 pt-lg-3">
+          <Section hideCollapseButton="true">
+            <h4 slot="header" class="mt-4 w-100">
+              ABMS ADCE Party Bus Survival Guide
+            </h4>
+            <div slot="content">
+              <div class="mx-12">
+                Background information about Platform One, Agile & UCD
+                philosophies, what the team does, security practices and
+                processes, etc.
+              </div>
+              <v-btn
+                color="primary"
+                href="./static/docs/(U) Platform One_Party Bus Survival Guide (27 August 2020).pdf"
+                target="_blank"
+                class="mx-auto no-link my-4"
+                >DOWNLOAD GUIDE
+              </v-btn>
+            </div>
+          </Section>
+        </v-col>
+      </v-row>
+      <v-row>
+        <h2>LINKS</h2>
+      </v-row>
+      <v-row>
+        <v-col>
+          <div class="section d-flex flex-column">
+            <div class="section-header align-items-center w-100 d-flex pa-3">
+              <h4 class="ma-0 pl-5">
+                Training Resources
+              </h4>
+              <v-spacer />
+            </div>
+            <div class="section-content pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                <a
+                  :href="training.cohortFAQ"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Cohort Onboarding FAQs</a
+                >
+              </div>
+            </div>
+            <div class="section-content-alt pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                <a
+                  :href="training.devSecOpsTraining"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >DevSecOps Training Resources</a
+                >
+              </div>
+            </div>
+            <div class="section-content pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                <a
+                  :href="training.containerRegistry"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Documents to DCCSCR/DCAR Container Repository</a
+                >
+              </div>
+            </div>
+            <div class="section-content-alt pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                <a
+                  :href="training.agile"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Agile</a
+                >
+              </div>
+            </div>
+            <div class="section-content pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                <a
+                  :href="training.devOps"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >DevOps</a
+                >
+              </div>
+            </div>
+            <div class="section-content-alt pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                <a
+                  :href="training.microservices"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Microservices</a
+                >
+              </div>
+            </div>
+            <div class="section-content pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                <a
+                  :href="training.kubernetes"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Kubernetes</a
+                >
+              </div>
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+      <v-row>
+        <h2>VIDEOS</h2>
+      </v-row>
+      <v-row>
+        <v-col>
+          <div class="section d-flex flex-column">
+            <div class="section-header align-items-center w-100 d-flex pa-3">
+              <h4 class="ma-0 pl-5">
+                Self-Learning Videos
+              </h4>
+              <v-spacer />
+            </div>
+            <div class="section-content pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                Kubernetes -
+                <a
+                  :href="learning.kubernetes.beginner"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Beginners</a
+                >
+                |
+                <a
+                  :href="learning.kubernetes.intermediate"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Intermediate</a
+                >
+                |
+                <a
+                  :href="learning.kubernetes.advanced"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Advanced</a
+                >
+              </div>
+            </div>
+            <div class="section-content-alt pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                Service Mesh -
+                <a
+                  :href="learning.serviceMesh.beginner"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Beginners
+                </a>
+                |
+                <a
+                  :href="learning.serviceMesh.intermediate"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Intermediate</a
+                >
+                |
+                <a
+                  :href="learning.serviceMesh.advanced"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Advanced</a
+                >
+              </div>
+            </div>
+            <div class="section-content pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                Microservices -
+                <a
+                  :href="learning.microservices.beginner"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Beginners</a
+                >
+                |
+                <a
+                  :href="learning.microservices.intermediate"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Intermediate</a
+                >
+                |
+                <a
+                  :href="learning.microservices.advanced"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Advanced</a
+                >
+              </div>
+            </div>
+            <div class="section-content-alt pa-3 position-relative">
+              <div class="text-left pl-10 link-column">
+                Kafka/KSQL -
+                <a
+                  :href="learning.kafka.beginner"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Beginners</a
+                >
+                |
+                <a
+                  :href="learning.kafka.intermediate"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  >Intermediate</a
+                >
+                | Advanced N/A
+              </div>
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
+
+<script>
+import Section from "@/components/Section";
+import { selfLearning, trainingResources } from "@/config/external-links.js";
+export default {
+  components: { Section },
+  data: () => ({ training: trainingResources, learning: selfLearning })
+};
+</script>
+<style lang="scss" scoped>
+.theme--light {
+  .section {
+    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.2);
+    .section-header {
+      background-color: map-get($material-light, "background-accent-1");
+    }
+    .section-content {
+      background-color: map-get($material-light, "background-accent-2");
+    }
+    .section-content-alt {
+      background-color: map-get($material-light, "background-accent-1");
+    }
+  }
+}
+.theme--dark {
+  .section {
+    box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.42);
+    .section-header {
+      background-color: map-get($material-dark, "background-accent-1");
+    }
+    .section-content {
+      background-color: map-get($material-dark, "background-accent-2");
+    }
+    .section-content-alt {
+      background-color: map-get($material-dark, "background-accent-1");
+    }
+  }
+  .link-column a {
+    color: #12b5f6 !important;
+    &:hover {
+      color: #12b5f6 !important;
+    }
+  }
+}
+.section {
+  .section-header {
+    border-top-left-radius: $border-radius-root;
+    border-top-right-radius: $border-radius-root;
+    min-height: 72px;
+  }
+  .section-content {
+    border-bottom-left-radius: $border-radius-root;
+    border-bottom-right-radius: $border-radius-root;
+
+    &::before {
+      content: "";
+      background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, transparent 100%);
+      display: block;
+      height: 6px;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+  .section-content-alt {
+    border-bottom-left-radius: $border-radius-root;
+    border-bottom-right-radius: $border-radius-root;
+
+    &::before {
+      content: "";
+      background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, transparent 100%);
+      display: block;
+      height: 6px;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+}
+</style>