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">
            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>
  </div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import QuotesLogo from "@/assets/images/icons/Quotes.svg";
import Wave from "@/components/Wave";

export default {
  name: "WhoWeAre",
  components: { PageHeader, QuotesLogo, Wave },
  data: function() {
    return {
      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, places, 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."
        }
      ]
    };
  }
};
</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 {
  margin-bottom: 2rem;
  @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;
      }
    }
  }

  .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;
      }
    }
  }
}
</style>