WhoWeAre.vue

<template>
  <div class="who-we-are">
    <PageHeader title="WHO WE ARE" />
    <div class="container quote-container">
      <div class="row text-left">
        <div class="col-lg-6 quote px-8">
          <div class="quotes">
            <QuotesLogo />
          </div>
          <h2 class="px-0 ma-0">
            We care about the pulse of our organization and use it to help
            continuously improve our processes!
          </h2>
          <div class="attrib mt-4">
            <span class="name">
              - Andrew Belk,
              <span class="font-italic font-weight-regular">
                Chief People Officer
              </span>
            </span>
          </div>
        </div>
        <div class="col-lg-6 px-4">
          <div class="px-4 pb-4">
            <h4 class="mx-0">VISION</h4>
            <p class="pr-5">
              Create an innovative, collaborative, and unified defense
              department that delivers freedom through continuous integration
              and continuous deployments.
            </p>
          </div>
          <div class="px-4 pt-4">
            <h4 class="mx-0">MISSION</h4>
            <p class="pr-5">
              Guide, empower, equip, and accelerate DoD program offices and
              weapon systems through their DevSecOps journeys.
            </p>
          </div>
        </div>
      </div>
    </div>
    <Wave class="values-container dark">
      <div class="px-8">
        <h2>VALUE STATEMENTS</h2>
        <p class="section-description mx-auto mt-2 px-4">
          Our values were determined through a working session that was
          open-invite to the entire P1 team. The people defined what was
          important to them instead of having someone tell them what to value!
        </p>
        <div class="container text-left">
          <div class="row">
            <div class="col-md-6">
              <h4 class="mx-0">EMPOWER</h4>
              <p>
                Empower individuals and teams with the trust to be accountable
                and grow Platform One into an organization that drives change
                personally and professionally.
              </p>
            </div>
            <div class="col-md-6">
              <h4 class="mx-0">OBSESS</h4>
              <p>
                Obsessively know our customers and solve their challenges by
                delivering actual, functional solutions instead of arguing about
                requirements and process. Continue to improve the solution well
                into the future.
              </p>
            </div>
            <div class="col-md-6">
              <h4 class="mx-0">VALUE</h4>
              <p>
                We. Value. Diversity. We are committed to Diversity and
                Inclusion. Employees in our inclusive environments feel
                appreciated for their unique characteristics and therefore
                comfortable sharing their ideas and other aspects of their true
                and authentic selves.
              </p>
            </div>
            <div class="col-md-6">
              <h4 class="mx-0">NOURISH</h4>
              <p>
                Nourish a culture of open, safe, candid communication, and
                decision making at all levels. We accomplish this by a
                heightened sense of self-awareness and encourage people to know
                their own faults and continuously work to improve them. When
                engaged in conversation, seek to understand the other's point of
                view prior to attempting to change his or her opinions.
              </p>
            </div>
          </div>
        </div>
      </div>
    </Wave>
    <div class="container principles-container">
      <h2>CORE PRINCIPLES</h2>
      <div class="row">
        <div
          v-for="principle in principles"
          :key="principle.name"
          class="col-md-6 col-lg-4 principle"
        >
          <h4>{{ principle.name }}</h4>
          <p>
            {{ principle.text }}
          </p>
        </div>
      </div>
    </div>
    <!-- <Wave :bottom="false">
      <div class="container col-md-8">
        <div class="row justify-content-center">
          <h2>MEET THE LEADERSHIP TEAM</h2>
        </div>
        <div class="row" 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"
                >
                  <v-img
                    class="img-fluid mx-auto"
                    :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 { 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",
          text:
            "Features aren't complete until they are tested, automated, documented, and with training modules."
        },
        {
          name: "Mission Obsessed",
          text:
            "Obsess over the code that will form the baseline for weapon systems across the DoD: ships, planes, tanks, and nukes."
        },
        {
          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."
        },
        {
          name: "Ownership",
          text:
            "Own every aspect of what you do, what you write, what you say, and what you use."
        },
        {
          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: "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",
          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",
          text:
            "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",
          text:
            "We exist to help others succeed.  When they succeed, we succeed.  If you can help someone, do it."
        },
        {
          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",
          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"
        }
      ]
    };
  }
};
</script>
<style lang="scss">
// hide the wisps since the top section is so small on this page
.who-we-are-page {
  main.v-main {
    background-image: none !important;
  }
}
.who-we-are {
  @include media-breakpoint-up(lg) {
    .section-description {
      max-width: 60%;
    }
  }

  .quote-container {
    margin-bottom: 2rem;
    h4 {
      padding-left: 0;
    }
    .quote {
      margin-bottom: 1rem;
      font-weight: 800;
      .quotes {
        padding-bottom: 1rem;
      }
    }
  }

  .values-container {
    position: relative;
    .container {
      padding: 0;
      h4 {
        padding: 0;
      }
    }
  }

  .image-wrapper {
    cursor: pointer;
  }

  .principles-container {
    margin-top: 3rem;
    h2 {
      margin-bottom: 1rem;
    }
    .row > * {
      padding-left: 2rem;
      padding-right: 2rem;
    }
    @include xs {
      .row > * {
        text-align: left;
      }
      h4 {
        padding: 0;
      }
    }
  }

  .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>