-
daniel.cushman authoreddaniel.cushman authored
DSOPTimeline.vue 6.58 KiB
<template>
<v-container class="bg-color col-12">
<v-row class="nasa-background pa-0 ma-0">
<v-row class="header text-left col-12 col-sm-11 col-md-8 col-lg-6">
<v-row class="col-12 col-sm-12 pb-1 pb-sm-0 pl-0">
<h2>{{ PageMetaDevSecOpsTimeline.subheading }}</h2>
</v-row>
<v-row class="col-10 col-sm-12 pb-3 pl-0 pt-0 pb-sm-0 mt-2">
<h1>{{ PageMetaDevSecOpsTimeline.title }}</h1>
</v-row>
<v-row class="col-12 col-lg-12 px-0">
<h4 class="subhead">
{{ PageMetaDevSecOpsTimeline.description }}
</h4>
</v-row>
</v-row>
<v-row class="legacy-section d-flex col-12 pt-8">
<v-row class="justify-center col-12 pb-0">
<h2>Traditional Legacy Process</h2>
</v-row>
<v-row class="justify-center col-12 pt-6 pt-sm-0 pb-0 pl-0 ma-auto">
Timeline of how long a mission application would take going from
acquisition to deployment
</v-row>
</v-row>
<v-row class="justify-center col-12 pt-8 pb-0 px-0 pl-mdAndUp-12 mx-0">
<img
src="~@/assets/images/Traditional_Legacy_Process.png"
width="320px"
/>
</v-row>
</v-row>
<v-row class="tech-section d-flex col-12 pt-0 pt-md-8">
<div class="tech-bg justify-center mt-0 mt-sm-16">
<v-row class="tech-content justify-center text-left col-md-8 col-lg-6">
<h3 class="pt-16 pt-sm-0 px-1">
<b>
<div id="quotes">
<QuotesLogo />
</div>
THE CAPABILITIES OF WEAPONS SYSTEMS AND OTHER CRITICAL SYSTEMS ARE
DEFINED BY THE QUICKNESS OF SOFTWARE DEVELOPMENT AND DEPLOYMENT
</b>
</h3>
<div class="tech-line col-12 px-0">
<img
src="~@/assets/images/Line 36-2.png"
height="3px"
width="20%"
/>
<img src="~@/assets/images/Line 36.png" width="75%" height="2px" />
</div>
</v-row>
</div>
<div class="p1-logo col-12 col-sm-8 pb-4 pt-0 pt-sm-4 my-8">
<img
src="/static/p1-logo.png"
width="200px"
class="pt-8 pb-0 pb-sm-6"
/>
<h3 class="pt-6 pt-sm-8 pb-4">
THE BENEFITS OF THE DEVSECOPS / AGILE PROCESS
</h3>
<p>
Agile processes focus on interative development cycles in which
feedback is continuously reintegrated, while DevSecOps methodologies
emphasize security at the earliest stages of development
</p>
</div>
</v-row>
<v-row
class="infinity-section d-flex justify-space-between col-12 pt-0 pt-sm-8"
>
<div v-if="$vuetify.breakpoint.smAndDown" class="col-12 pt-0 pb-16 px-0">
<img class="infinity-cycle" src="~@/assets/images/Infinity.png" />
</div>
<v-row>
<div
class="text-left text-sm-center text-md-right col-10 col-md-4 col-lg-4 pl-md-12 ma-auto"
>
<h4 class="pl-md-0">
A Continuous cycle of research, development, testing, and security
</h4>
<div
class="text-sm-center text-md-right mr-0 mr-md-8 ml-8 ml-md-0 pt-4 pb-8 pb-sm-0"
>
<div>Cyber Scanning - 1</div>
<div>Software Assurance - 2</div>
<div>Testing - 3</div>
<div>Accreditation - 4</div>
</div>
</div>
<div
v-if="$vuetify.breakpoint.mdAndUp"
class="col-12 col-md-7 col-lg-8 ma-auto"
>
<img class="infinity-cycle" src="~@/assets/images/Infinity.png" />
</div>
</v-row>
</v-row>
<v-row class="dev-btn justify-center col-12 ma-0 mx-0 pt-0 pt-sm-8 pb-16">
<DownloadButton
class="pb-12"
text="DevSecOps & Agile Savings"
:internalFilePath="UberGraphic"
icon="mdi-image"
:iconSize="36"
:btnSpanTextClass="'ml-2 mr-2'"
btnColor="primary"
fileMultipleColor="#002743"
downloadColor="#002743"
textColor="#002743"
/>
</v-row>
<vue-easy-lightbox
escDisabled
moveDisabled
:visible="lightbox.visible"
:imgs="lightbox.imgs"
:index="lightbox.index"
@hide="handleHide"
></vue-easy-lightbox>
</v-container>
</template>
<script>
import { PageMeta } from "@/constants/PageMeta";
import QuotesLogo from "@/assets/images/icons/Quotes-WH.svg";
import UberGraphic from "@/assets/images/Uber-Graphic.png";
import DownloadButton from "@/components/Base/DownloadButton";
export default {
name: "DSOPTimeline",
components: { QuotesLogo, DownloadButton },
methods: {
showImg(index) {
this.lightbox.index = index;
this.lightbox.visible = true;
},
handleHide() {
this.lightbox.visible = false;
},
getImageUrl(filename) {
return require(`@/assets/images/${filename}`);
},
},
data: function () {
return {
lightbox: {
visible: false,
index: 0, // default: 0
},
PageMetaDevSecOpsTimeline: PageMeta.DevSecOpsTimeline,
UberGraphic,
};
},
};
</script>
<style lang="scss" scoped>
body h1,
h2,
h3,
h4,
p {
color: white !important;
}
.bg-color {
background-color: rgb(1, 16, 27);
padding: 0px;
}
.nasa-background {
width: auto;
height: auto;
background-image: url(~@/assets/images/nasa-rTZW4f02zY8-unsplash-021.png) !important;
background-size: contain;
background-repeat: no-repeat;
background-position-y: -85px;
background-position-x: -60px;
background-repeat: no-repeat;
background-attachment: scroll;
color: white;
}
.header {
margin-left: 5em;
padding-top: 5em;
}
.legacy-section {
margin: auto;
margin-top: 4em;
}
.tech-section {
margin: auto;
margin-top: -32px;
.tech-bg {
background-image: url(~@/assets/images/tech-bg.jpg);
box-shadow: 50px 50px 50px 0 #01101b inset, -50px -50px 50px 0 #01101b inset;
background-color: rgba(2, 24, 39, 0.3);
background-size: cover;
background-blend-mode: soft-light;
background-position: center;
}
.tech-content {
margin: auto;
#quotes {
display: block;
padding-bottom: 1rem;
color: white;
}
.tech-line {
display: inline;
}
}
}
.p1-logo {
margin: auto;
}
.infinity-section {
margin: auto;
min-height: 350px;
color: white;
.infinity-cycle {
width: 100%;
}
.dev-btn {
color: black;
}
}
@media (max-width: 970px) {
.header {
margin: auto;
padding-top: 2em;
}
}
@media (max-width: 600px) {
.header h2 {
font-size: 32px;
line-height: 1.2;
}
}
</style>