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">
          <div class="quotes">
            <QuotesLogo />
          </div>
          <h2>
            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="title">Chief People Officer</span>
            </span>
          </div>
        </div>
        <div class="col-lg-6 px-5">
          <div class="px-5 pb-4">
            <h2 class="title">VISION</h2>
            <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-5 pt-4">
            <h2 class="title">MISSION</h2>
            <p class="pr-5">
              Guide, empower, equip, and accelerate DoD program offices and
              weapon systems through their DevSecOps journeys.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="values-container">
      <h2>VALUE STATEMENTS</h2>
      <p class="section-description mx-auto px-5">
        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">
            <h6>EMPOWER</h6>
            <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">
            <h6>OBSESS</h6>
            <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">
            <h6>VALUE</h6>
            <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">
            <h6>NOURISH</h6>
            <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 class="bg">
        <div class="bg-mask"></div>
        <div class="wave-divider">
          <svg viewBox="0 70 500 60" preserveAspectRatio="none">
            <rect x="0" y="0" width="500" height="500" />
            <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" />
          </svg>
        </div>
      </div>
    </div>
    <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 mb-5 principle"
        >
          <h6>{{ principle.name }}</h6>
          <p class="px-4">
            {{ principle.text }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import QuotesLogo from "@/assets/images/icons/Quotes.svg";

export default {
  name: "Home",
  components: { PageHeader, QuotesLogo },
  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">
// since the top section is short we need to modify styles of the parent to make the wisps look ok
.who-we-are-page {
  #app .wisps > .mask {
    background-image: linear-gradient(
      to bottom,
      $primary-bg-color 0%,
      $gradient-alpha 25%,
      $gradient-alpha 50%,
      $primary-bg-color 65%
    );
  }
}

.who-we-are {
  margin-bottom: 2rem;
  p {
    font-size: 0.8rem;
    line-height: 1.5rem;
  }
  @include media-breakpoint-up(lg) {
    .section-description {
      max-width: 60%;
    }
  }

  .quote-container {
    margin-bottom: 5rem;
    .quote {
      font-weight: 800;
      .quotes {
        padding-bottom: 1rem;
      }
      h2 {
        line-height: 2.5rem;
      }
      .attrib {
        font-size: 0.8rem;

        .title {
          text-decoration: italic;
          font-weight: 400;
          font-style: italic;
        }
      }
    }
  }

  .values-container {
    --default-bg: #000000;
    --bottom-bg: #031727;

    position: relative;
    padding-top: 10rem;
    padding-bottom: 3rem;

    h2,
    h6,
    p {
      color: $secondary-text-color !important;
    }

    & > .container {
      margin-top: 5px;
      .row > * {
        padding-left: 5rem;
        padding-right: 5rem;
        margin-bottom: 3rem;
      }
    }

    .bg {
      position: absolute;
      overflow: auto;
      background-image: url(~@/assets/images/tech-bg.jpg);
      background-attachment: fixed;
      background-repeat: no-repeat;

      background-color: var(--bottom-bg);
      width: 100%;
      height: 100%;
      z-index: -1;
      bottom: 0;

      .bg-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: $gradient-alpha;
        background-image: linear-gradient(
          to bottom,
          $gradient-alpha -10%,
          var(--bottom-bg) 100%
        );
      }

      .wave-divider {
        --divider-height: 4rem;

        position: relative;
        height: var(--divider-height);
        width: 100%;
        float: left;
        z-index: 0;
        position: relative;

        svg {
          width: 100%;
          height: 100%;
          transform: scale(1, 1);
          path {
            fill: $primary-bg-color;
            stroke: none;
          }
          rect {
            fill: transparent;
          }
        }
      }
    }
  }

  .principles-container {
    margin-top: 6rem;
    h2 {
      margin-bottom: 4rem;
    }
    .principle {
      p {
        font-size: 0.8rem;
      }
    }
  }
}
</style>