WhoWeAre.vue 14.91 KiB
<template>
<div class="who-we-are">
<PageHeader />
<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">
Accelerate the DoD's dominance by delivering innovative, trusted
technologies today.
</p>
</div>
<div class="px-4 pt-4">
<h4 class="mx-0">MISSION</h4>
<p class="pr-5">
Transform how the DoD delivers warfighter capability through
innovative frameworks, collaborative culture, and secure software.
</p>
</div>
</div>
</div>
</div>
<Wave class="values-container dark">
<div class="px-8">
<div class="mb-16">
<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>
<v-container class="text-left">
<v-row class="mb-16">
<v-col
md="6"
cols="12"
v-for="value in valueStatements"
:key="value.title"
>
<v-card width="100%" height="100%" class="px-16 py-16">
<div class="mb-5 value-header-text">{{ value.title }}</div>
<div class="value-text">
{{ value.text }}
</div>
</v-card>
</v-col>
</v-row>
</v-container>
</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 custom-padding">
<div class="col-md-12">
<div class="row justify-content-center pb-10">
<h2>MEET THE LEADERSHIP TEAM</h2>
<p class="p-5 leadership-sub">
Our leaders range in personality from the Pointy-haired boss from
Dilbert to Bill Lumbergh from Office Space but, like, in a good
way. They are instrumental in driving the vision for Platform One
and our continued growth and improvement. They keep the mood nice
and light-hearted while removing blockers and knocking down
barriers for our teams. If you want to know why P1 is such a great
place to work, learn about our leaders.
</p>
</div>
<div class="row text-left white-mobile">
<v-container class="leadership-container" fluid>
<v-row>
<v-col
class="col-12 col-sm-6 col-md-4 col-lg-4 py-10 custom-padding"
v-for="(card, index) in cards"
:key="card.name"
>
<v-img
class="img-fluid clickable d-none d-sm-flex"
:src="card.img"
:alt="card.name"
@click="changeDialog(index)"
/>
<v-img
class="img-fluid clickable d-flex d-sm-none"
:src="card.img"
:alt="card.name"
/>
<h4 class="pt-4">{{ card.name }}</h4>
<p class="leadership-position">{{ card.position }}</p>
<p class="w-75 d-flex d-sm-none">{{ card.bio }}</p>
</v-col>
</v-row>
</v-container>
</div>
</div>
</div>
</Wave>
<div class="bio-modal" v-if="dialog" @click="closeDialog()">
<div class="bio-modal-content container">
<div class="row">
<div class="col-md-3 col-sm-4 text-left">
<v-img class="img-fluid mx-auto" :src="this.img" width="225px" />
<h4 class="px-0">{{ this.name }}</h4>
<p>{{ this.position }}</p>
</div>
<div class="col-md-8 col-sm-7 text-left">
<p>{{ this.bio }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader.vue";
import QuotesLogo from "@/assets/images/icons/Quotes.svg";
import Wave from "@/components/Wave.vue";
export default {
name: "WhoWeAre",
components: { PageHeader, QuotesLogo, Wave },
methods: {
isNotMobile() {
if (screen.width > 600) {
return true;
} else {
return false;
}
},
changeDialog(index) {
if (this.dialog === true) {
this.dialog = false;
this.img = null;
this.name = null;
this.position = null;
this.bio = null;
} else {
this.dialog = true;
this.index = index;
this.img = this.cards[index].img;
this.name = this.cards[index].name;
this.position = this.cards[index].position;
this.bio = this.cards[index].bio;
}
},
closeDialog() {
this.dialog = false;
},
},
data: function () {
return {
dialog: false,
img: null,
name: null,
position: null,
bio: null,
index: null,
leader: {},
valueStatements: [
{
title: "EMPOWER",
text: "Empower individuals and teams with the trust to be accountable and grow Platform One into an organization that drives change personally and professionally.",
},
{
title: "OBSESS",
text: "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.",
},
{
title: "VALUE",
text: "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.",
},
{
title: "NOURISH",
text: "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.",
},
],
principles: [
{
name: "Scale",
text: "Features aren't complete until they are tested, automated, documented, and with training modules.",
},
{
name: "Mission Obsessed",
text: "Obsessed 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: new URL(
"../assets/images/leadership/Lt-col-brian-viola.webp",
import.meta.url
).href,
name: "LT COL BRIAN VIOLA",
position: "Materiel Leader",
bio: "Lt Col Brian Viola is currently the Materiel Leader of Platform One, Air Force Lifecycle Management Center, Cryptologic & Cyber System Division, Cyber Systems Group. He attended Louisiana State University and commissioned through the Reserve Officer Training Corps. Most recently, Lt Col Viola served as the Commander for the 346th Test Squadron.",
flex: "4",
id_tag: "brian_viola",
},
{
img: new URL(
"../assets/images/leadership/Duong-Hang.webp",
import.meta.url
).href,
name: "DUONG HANG",
position: "Deputy Materiel Leader",
bio: "Loves coders in uniform",
flex: "4",
id_tag: "duong_hang",
},
{
img: new URL(
"../assets/images/leadership/cam-cady.webp",
import.meta.url
).href,
name: "MAJOR CAMDON CADY",
position: "Chief of Operations and Chief Technology Officer",
bio: "Expert waffle maker",
flex: "4",
id_tag: "cam",
},
{
img: new URL(
"../assets/images/leadership/kevin-twibell.webp",
import.meta.url
).href,
name: "KEVIN TWIBELL",
position: "Chief Information Security Officer",
bio: "Let’s stop talking about all the things we want to change and start doing it.",
flex: "4",
id_tag: "kevin_twibell",
},
{
img: new URL(
"../assets/images/leadership/Phillip-Record.webp",
import.meta.url
).href,
name: 'PHILLIP "CASPER" RECORD',
position: "",
bio: "Phillip is..well...Phillip. Yeah, that about sums it up...",
flex: "4",
id_tag: "phillip_record",
},
],
};
},
};
</script>
<style lang="scss" scoped>
// hide the wisps since the top section is so small on this page
.who-we-are-page {
main.v-main {
background-image: none !important;
}
}
.value-header-text {
text-transform: uppercase;
color: black;
font-weight: 800;
word-break: break-word;
font-size: 26px;
}
.value-text {
font-size: 15px;
}
.who-we-are {
@include lg-up {
.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;
}
}
}
.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;
}
.leadership-sub {
width: 87%;
}
/* The Modal (background) */
.bio-modal {
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
padding-top: 200px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.bio-modal-content {
background-color: #fff;
margin: auto;
padding: 20px;
width: 60%;
}
.clickable {
cursor: pointer;
width: 250px;
filter: grayscale(100%);
transition: all 0.2s ease-in-out;
}
.clickable:hover {
transform: scale(1.05);
filter: grayscale(0%);
}
.custom-padding h4 {
padding-left: 0px;
}
.container.leadership-container {
margin-left: 70px;
}
@media only screen and (max-width: 1263px) {
.container.leadership-container {
margin-left: 25px;
}
}
@media only screen and (max-width: 959px) {
.container.leadership-container {
margin-left: 110px;
}
}
@media only screen and (max-width: 820px) {
.container.leadership-container {
margin-left: 90px;
}
}
@media only screen and (max-width: 730px) {
.container.leadership-container {
margin-left: 40px;
}
}
@media only screen and (max-width: 599px) {
.clickable {
width: 100%;
cursor: default;
}
.custom-padding {
padding: 0;
padding-top: 0px !important;
}
.container.leadership-container {
margin-left: 0px;
}
.custom-padding h4,
.custom-padding p {
padding: 0px 35px 0 35px;
}
.white-mobile {
background-color: #fff !important;
}
.white-mobile p,
.white-mobile h4 {
color: #4a4a4a !important;
}
}
.leadership-position {
width: 80%;
}
}
</style>