mobile carousel working

package.json

@@ -23,6 +23,7 @@
     "vue": "^2.6.11",
     "vue-analytics": "^5.22.1",
     "vue-body-class": "^3.0.2",
+    "vue-carousel-3d": "^1.0.1",
     "vue-easy-lightbox": "^0.13.0",
     "vue-router": "^3.1.6",
     "vue-text-highlight": "^2.0.10",

src/views/WhoWeAre.vue

@@ -111,7 +111,7 @@
         <div class="row justify-content-center">
           <h2>MEET THE LEADERSHIP TEAM</h2>
         </div>
-        <div class="row justify-content-center">
+        <div class="row justify-content-center" v-if="isNotMobile()">
           <v-container fluid>
             <v-row dense>
               <v-col v-for="card in cards" :key="card.name" :cols="card.flex">
@@ -134,6 +134,60 @@
             </v-row>
           </v-container>
         </div>
+        <div class="row justify-content-center" v-else>
+          <carousel-3d
+            ref="carousel"
+            :autoplay="true"
+            :autoplay-timeout="3000"
+            :width="175"
+            :display="5"
+            :border="0"
+            :clickable="true"
+            :on-main-slide-click="testClick"
+          >
+            <slide v-for="(card, i) in cards" :index="i" :key="card.name">
+              <figure>
+                <img :src="getImageUrl(card.img)" :alt="card.name" />
+              </figure>
+              <figcaption>
+                {{ card.name }}
+                <br />
+                {{ card.position }}
+              </figcaption>
+            </slide>
+          </carousel-3d>
+        </div>
+        <v-dialog v-model="dialog" width="90%">
+          <v-card>
+            <v-card-title class="headline dark">
+              {{leader.name}}
+            </v-card-title>
+
+            <v-card-text class="white--text text-left dark">
+              {{leader.bio}}
+              <br />
+              <v-btn
+                v-if="leader.externalBio"
+                color="secondary"
+                class="mt-4"
+                :href="leader.externalBio"
+                target="_blank"
+              >
+                Read More
+              </v-btn>
+            </v-card-text>
+
+            <v-card-actions class="dark">
+              <v-spacer></v-spacer>
+              <v-btn
+                color="secondary"
+                @click="dialog = false"
+              >
+                Close
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
       </div>
     </Wave>
   </div>
@@ -142,17 +196,32 @@
 import PageHeader from "@/components/PageHeader";
 import QuotesLogo from "@/assets/images/icons/Quotes.svg";
 import Wave from "@/components/Wave";
+import { Carousel3d, Slide } from "vue-carousel-3d";
 
 export default {
   name: "WhoWeAre",
-  components: { PageHeader, QuotesLogo, Wave },
+  components: { PageHeader, QuotesLogo, Wave, Carousel3d, Slide },
   methods: {
     getImageUrl(filename) {
       return require(`@/assets/images/leadership/${filename}`);
     },
+    isNotMobile() {
+      if (screen.width > 600) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    testClick() {
+      // alert(this.cards[this.$refs.carousel.currentIndex].name);
+      this.leader = this.cards[this.$refs.carousel.currentIndex];
+      this.dialog = true;
+    },
   },
   data: function () {
     return {
+      dialog: false,
+      leader: {},
       principles: [
         {
           name: "Scale",
@@ -219,6 +288,9 @@ export default {
           img: "Nic_Chaillan.jpg",
           name: "NICOLAS M. CHAILLAN",
           position: "CSO, US Air Force",
+          bio:
+            "Mr. Nicolas M. Chaillan is appointed as the first Air Force Chief Software Officer (CSO), under Dr. William Roper, the Assistant Secretary of the Air Force for Acquisition, Technology, and Logistics, Arlington, VA. He is also the Co-lead for the DoD Enterprise DevSecOps Initiative (DSOP) with the Department of Defense Chief Information Officer. As the Air Force’s senior software czar, Mr. Chaillan is responsible for enabling Air Force programs in the transition to Agile and DevSecOps to establish force-wide DevSecOps capabilities and best practices, including continuous Authority to Operate (c-ATO) processes and faster streamlined technology adoption.",
+          externalBio: "https://software.af.mil/team/nicolas-m-chaillan-hqe/",
           width: "350px",
           flex: "6",
           id_tag: "nic_chaillan",
@@ -227,6 +299,9 @@ export default {
           img: "Brad_Ferguson.jpg",
           name: "BRAD FERGUSON",
           position: "Deputy CSO, US Air Force",
+          bio:
+            "Mr. Brad Ferguson, is currently serving as the Deputy, Chief Software Office under Mr. Nicolas Chaillan, Secretary of the Air Force’s Chief Software Officer, Arlington, VA. Responsible for enabling the CSO efforts with Air Force programs in the transition to Agile and DevSecOps to establish force-wide Digital Air Force capabilities and tactics, tools and procedures, including continuous Authority to Operate (c-ATO) processes and faster streamlined technology adoption.",
+          externalBio: "https://software.af.mil/team/brad-e-ferguson/",
           width: "350px",
           flex: "6",
           id_tag: "brad_ferguson",
@@ -235,6 +310,8 @@ export default {
           img: "Rob_Slaughter.jpg",
           name: "DR MAJ ROB SLAUGHTER",
           position: "Director",
+          bio:
+            "Rob Slaughter is the Director of Platform One. He sets the priorities and drives the vision for our platform while bringing in Program Offices from every service to drive inter-service collaboration. It is no understatement to say that he’s the reason we’re all here. He preaches the good word to our customers but has also been instrumental in working with our Acquisition team to get contracts in place. He drives our badge-less, happy go lucky culture and ensures that we continue to be a vendor agnostic solution. It is a well-known fact that his greatest accomplishment was establishing Waffle Wednesday bringing smiles to everyone’s face. After all, he knows happy people make better products and better serve customers. Is there anything this guy can’t do? ",
           width: "225px",
           flex: "3",
           id_tag: "rob_slaughter",
@@ -243,6 +320,8 @@ export default {
           img: "Austen_Bryan.jpg",
           name: "CAPT AUSTEN BRYAN",
           position: "Chief Operating Officer",
+          bio:
+            "Austen Bryan is our Chief Operations Officer and champion for our internal team.  He is Platform One’s bridge to the LevelUP Acquisition and contracts team. His leadership and guidance add structure to our chaos and get us from idea to creation so we are not just vaporware. His tentacles reach deep into Platform One but he keeps his head above water driving our vision and keeping a system view. He leads our engagements/solutions with various Program Offices and backs up Rob on basically everything which is a wide variety in this startup mode we operate in. Some days he’s the CFO, some days he hires people. What did he want to do? Code.",
           width: "225px",
           flex: "3",
           id_tag: "austen_bryan",
@@ -251,6 +330,8 @@ export default {
           img: "Jeff_McCoy.jpg",
           name: "JEFF MCCOY",
           position: "Chief Technology Officer",
+          bio:
+            "Jeff McCoy is the CTO for Platform One, a group of nerds helping the DoD do DevSecOps right.  They recently brought telework tools to tens-of-thousands of federal employees in a couple days, put Kubernetes on a fighter jet, are helping modernize major weapon systems and sport a Baby Yoda logo.  Before Platform One, Jeff was the CTO of SpaceCAMP delivering modern software for Space Force and also helped create DDS’s Rogue Squadron building counter-UAS software for special forces and North American defense.  Jeff also really sucks at job interviews and was hired as the first Air Force UX designer for Kessel Run only to be reassigned as a lead engineer for the program the first day on the job.",
           width: "225px",
           flex: "3",
           id_tag: "jeff_mccoy",
@@ -259,6 +340,8 @@ export default {
           img: "Matt_Huston.jpg",
           name: "MATT HUSTON",
           position: "Chief of Enterprise Services",
+          bio:
+            "Matt Huston is Platform One’ Chief of Enterprise Services, our Chief Information Security Officer. Matt drives our Enterprise to always be better and always deliver what’s needed to our customers. As the Chief of Platform at Space CAMP prior to Platform One, he was instrumental in standing up the c-ATO’d environment and obtaining the accreditation for the DoD’s second C-ATO. Now at Platform one, he is driving our declarative, open source platform development. Matt grew up in Kessel Run, alongside Jeff McCoy.",
           width: "225px",
           flex: "3",
           id_tag: "matt_huston",
@@ -267,6 +350,8 @@ export default {
           img: "Molly_Cain.jpg",
           name: "MOLLY CAIN",
           position: "Chief Futures Officer",
+          bio:
+            "Molly Cain is fueled by a curiosity to pursue interesting problems alongside fellow futurists, Molly's path to becoming a communications and leadership strategist and Chief Futures Officer for Platform One and emerging technology “disruptor ecosystem,” has been nothing but unpredictable - and she prefers it that way. Molly is a government and civic innovation strategist, executive communications consultant and advisor to public/private sector entities. She is an expert at identifying + designing new ventures for organizational change, launching new verticals, organizing never-before-done collaborations, relying on an uncanny skill to connect topics + people in seemingly unrelated, but perfectly complimentary, ways.",
           width: "225px",
           flex: "3",
           id_tag: "molly_cain",
@@ -275,6 +360,8 @@ export default {
           img: "Not_Provided.jpg",
           name: "JOSH WOLF",
           position: "Chief Engineer",
+          bio:
+            "Josh Wolf is our Chief Engineer and helps drive not only the technical vision but also the implementation with our teams and is a large part of Platform One’s success. He loves to find new tools to integrate into our baseline and drives GitOps adoption. Josh came from Space CAMP, was instrumental to standing up our C-ATO’d development environment covering all the bases from cloud infrastructure, to CI/CD pipelines, to hardened base images. If there’s ever something he doesn’t know much about (which is hard to find), rest assured that he’ll come back in after the weekend as one of our leading experts.",
           width: "225px",
           flex: "3",
           id_tag: "josh_wolf",
@@ -283,6 +370,7 @@ export default {
           img: "Bunny_Hernandez.jpg",
           name: "BUNNY HERNANDEZ",
           position: "Chief Empathy Officer",
+          bio: "Bio coming soon...",
           width: "225px",
           flex: "3",
           id_tag: "bunny_hernandez",
@@ -291,6 +379,7 @@ export default {
           img: "Heather_Bates.jpg",
           name: "HEATHER BATES",
           position: "Chief People Officer",
+          bio: "Bio coming soon...",
           width: "225px",
           flex: "3",
           id_tag: "heather_bates",
@@ -361,5 +450,28 @@ export default {
       }
     }
   }
+
+  .carousel-3d-container figure {
+    margin: 0;
+    background-color: #05101a;
+  }
+
+  .carousel-3d-container figcaption {
+    position: absolute;
+    background-color: #05101a;
+    color: #fff;
+    bottom: 0;
+    position: absolute;
+    bottom: 0;
+    padding: 10px;
+    font-size: 12px;
+    min-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .mobile-card {
+    background-color: #05101a;
+    color: #ffffff;
+  }
 }
 </style>