Merge branch 'BULL-200' into 'master'

BULL-200

See merge request platform-one/private/bullhorn/platform1-site!146

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/router/index.js

@@ -58,6 +58,20 @@ const routes = [
       breadcrumb: 'Who We Are',
     },
   },
+  {
+    path: '/who-we-are/leadership',
+    name: 'Leadership',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "who-we-are" */ '@/views/Leadership.vue'),
+    meta: {
+      title: 'Platform One | Who We Are | Leadership',
+      bodyClass: 'leadership-page',
+      breadcrumb: 'Leadership Team',
+    },
+  },
   {
     path: '/products/abms-adce/onboarding/3-day-workshop',
     name: '3DayWorkshop',
@@ -198,6 +212,7 @@ const router = new VueRouter({
     if (to.hash) {
       return {
         selector: to.hash,
+        offset: { x: 0, y: 120 },
       };
     }
 

src/views/Leadership.vue

+<template>
+  <div class="services">
+    <PageHeader title="LEADERSHIP TEAM" />
+    <v-container>
+      <v-row
+        v-for="(person, index) in people"
+        :key="person.name"
+        class="justify-content-center"
+        :id="person.id_tag"
+      >
+        <div v-if="index % 2 === 0" class="col-md-3">
+          <img
+            class="img-fluid"
+            :src="getImageUrl(person.img)"
+            :alt="person.name"
+            width="346px"
+          />
+        </div>
+        <div class="text-left col-md-5">
+          <div>
+            <strong>{{ person.name }}</strong>
+          </div>
+          <div>
+            {{ person.position }}
+          </div>
+          <br />
+          <div>
+            {{ person.bio }}
+          </div>
+          <br />
+          <div>
+            <v-btn
+              v-if="person.externalBio"
+              color="primary"
+              class="mt-4"
+              :href="person.externalBio"
+              target="_blank"
+            >
+              Read More
+            </v-btn>
+          </div>
+        </div>
+        <div v-if="index % 2 === 1" class="col-md-3">
+          <img
+            class="img-fluid"
+            :src="getImageUrl(person.img)"
+            :alt="person.name"
+            width="346px"
+          />
+        </div>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+<script>
+import PageHeader from "@/components/PageHeader";
+
+export default {
+  name: "Services",
+  components: { PageHeader },
+  methods: {
+    getImageUrl(filename) {
+      return require(`@/assets/images/leadership/${filename}`);
+    },
+  },
+  data: function () {
+    return {
+      people: [
+        {
+          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/",
+          id_tag: "nic_chaillan",
+        },
+        {
+          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/",
+          id_tag: "brad_ferguson",
+        },
+        {
+          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? ",
+          id_tag: "rob_slaughter",
+        },
+        {
+          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.",
+          id_tag: "austen_bryan",
+        },
+        {
+          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.",
+          id_tag: "jeff_mccoy",
+        },
+        {
+          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.",
+          id_tag: "matt_huston",
+        },
+        {
+          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.",
+          id_tag: "molly_cain",
+        },
+        {
+          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.",
+          id_tag: "josh_wolf",
+        },
+        {
+          img: "Bunny_Hernandez.jpg",
+          name: "BUNNY HERNANDEZ",
+          position: "Chief Empathy Officer",
+          bio: "Bio coming soon...",
+          id_tag: "bunny_hernandez",
+        },
+        {
+          img: "Heather_Bates.jpg",
+          name: "HEATHER BATES",
+          position: "Chief People Officer",
+          bio: "Bio coming soon...",
+          id_tag: "heather_bates",
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.services {
+  margin-bottom: 2rem;
+
+  h6 {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  .container {
+    .row {
+      justify-content: center;
+    }
+  }
+
+  ul {
+    & > li {
+      margin-bottom: 1rem;
+    }
+  }
+  @include lg-up {
+    .section-description {
+      max-width: 60%;
+    }
+  }
+  @include md-down {
+    h4 > br {
+      display: none;
+    }
+  }
+}
+</style>

src/views/WhoWeAre.vue

@@ -106,79 +106,285 @@
         </div>
       </div>
     </div>
+    <Wave class="values-container dark">
+      <div class="container justify-content-center col-md-8">
+        <div class="row justify-content-center">
+          <h2>MEET THE LEADERSHIP TEAM</h2>
+        </div>
+        <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">
+              >
+                <router-link
+                  tag="div"
+                  :to="`/who-we-are/leadership/#${card.id_tag}`"
+                  class="image-wrapper px-4 mt-4 text-left justify-content-center"
+                >
+                  <img
+                    class="img-fluid"
+                    :src="getImageUrl(card.img)"
+                    :alt="card.name"
+                    :width="card.width"
+                  />
+                  <h4>{{ card.name }}</h4>
+                  <p>{{ card.position }}</p>
+                </router-link>
+              </v-col>
+            </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>
 </template>
 <script>
-import PageHeader from '@/components/PageHeader';
-import QuotesLogo from '@/assets/images/icons/Quotes.svg';
-import Wave from '@/components/Wave';
+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 },
-  data: function() {
+  name: "WhoWeAre",
+  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',
+          name: "Scale",
           text:
             "Features aren't complete until they are tested, automated, documented, and with training modules.",
         },
         {
-          name: 'Mission Obsessed',
+          name: "Mission Obsessed",
           text:
-            'Obsess over the code that will form the baseline for weapon systems across the DoD: ships, planes, tanks, and nukes.',
+            "Obsess over the code that will form the baseline for weapon systems across the DoD: ships, planes, tanks, and nukes.",
         },
         {
-          name: 'Everyone Codes',
+          name: "Everyone Codes",
           text:
-            'What we do is code.  All of us... even if it is 3 hours a week using Youtube videos. No exceptions.',
+            "What we do is code.  All of us... even if it is 3 hours a week using Youtube videos. No exceptions.",
         },
         {
-          name: 'Ownership',
+          name: "Ownership",
           text:
-            'Own every aspect of what you do, what you write, what you say, and what you use.',
+            "Own every aspect of what you do, what you write, what you say, and what you use.",
         },
         {
-          name: 'Simple and Robust',
+          name: "Simple and Robust",
           text:
             "Make features as if 100,000 developers will use what you've developed.",
         },
         {
-          name: 'Continual Learning',
-          text: 'We always look to improve our baseline and our brains.',
+          name: "Continual Learning",
+          text: "We always look to improve our baseline and our brains.",
         },
         {
-          name: 'Live in the trenches',
+          name: "Live in the trenches",
           text:
             "Success or failure is found in the details.  Don't ignore them because you don't have time to understand.",
         },
         {
-          name: 'No Egos',
+          name: "No Egos",
           text:
             "We will never be the best at everything, so don't claim or try to be.  Be open-minded about what others can bring to the table.",
         },
         {
-          name: 'Invest in People',
+          name: "Invest in People",
           text:
-            'The best investment you can make is in yourselves. The next best investment you can make is in the people next to you.',
+            "The best investment you can make is in yourselves. The next best investment you can make is in the people next to you.",
         },
         {
-          name: 'We Serve',
+          name: "We Serve",
           text:
-            'We exist to help others succeed.  When they succeed, we succeed.  If you can help someone, do it.',
+            "We exist to help others succeed.  When they succeed, we succeed.  If you can help someone, do it.",
         },
         {
-          name: 'Shoot for the moon',
+          name: "Shoot for the moon",
           text:
             "Be bold and strive to make monumental changes that sound so crazy people won't believe you... even after you've done it.",
         },
         {
-          name: 'Smart Decisions',
+          name: "Smart Decisions",
           text:
             "Encourage decisions to be made by the individuals with the most information.  If it's a technical decision, that means technical people, even if they are the lowest ranking.",
         },
       ],
+      cards: [
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          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",
+        },
+        {
+          img: "Bunny_Hernandez.jpg",
+          name: "BUNNY HERNANDEZ",
+          position: "Chief Empathy Officer",
+          bio: "Bio coming soon...",
+          width: "225px",
+          flex: "3",
+          id_tag: "bunny_hernandez",
+        },
+        {
+          img: "Heather_Bates.jpg",
+          name: "HEATHER BATES",
+          position: "Chief People Officer",
+          bio: "Bio coming soon...",
+          width: "225px",
+          flex: "3",
+          id_tag: "heather_bates",
+        },
+      ],
     };
   },
 };
@@ -222,6 +428,10 @@ export default {
     }
   }
 
+  .image-wrapper {
+    cursor: pointer;
+  }
+
   .principles-container {
     margin-top: 3rem;
     h2 {
@@ -240,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>