Newer
Older
<template>
<div class="big-bang">
<PageHeader
title="Big Bang"
subtext
description="Big Bang is the Platform One Infrastructure as Code / Configuration as Code package that deploys a software factory in a customer owned environment. We call this IAC/CAC."
<v-container class="px-md-8 px-auto" fluid>
<v-container class="px-md-16" fluid>
<h2 class="my-3 mx-md-16 mx-auto">
Empowering you to create custom environments for your mission
</h2>
Big Bang will help you build a custom software factory for your
specific mission needs to enable faster development and deployment of
your mission applications.
</p>
</v-container>
<div class="my-16 px-md-8 px-auto card-summary">
<h2 class="my-4 mt-sm-8 px-auto">The Big Bang Advantage</h2>
<div class="row justify-center">
<div class="col-md-6 col-lg-4 card-container">
<LockOpenVariantIcon class="logo" />
<h4>AVOID VENDOR LOCK</h4>
<div class="text">
between Upstream, Rancher, Konvoy, Tanzu Kubernetes Grid, or
OpenShift Container Partner.
</div>
</div>
<div class="col-md-6 col-lg-4 card-container">
<ClockEndIcon class="logo" />
<h4>FASTER ATO VIA RECIPROCITY</h4>
<div class="text">
Our Platform is accredited DOD wide and we can work AO to AO to
ensure reciprocity.
</div>
</div>
<div class="col-md-6 col-lg-4 card-container">
<HammerWrenchIcon class="logo" />
<h4>WIDE RANGE OF TOOL CHOICES</h4>
<div class="text">
We offer multiple tools at each stage of CI/CD pipeline. The tool
choices can be customized to your preference and to the
programming language of your choice.
<br />
<v-btn
text
class="link"
:href="getImageUrl('P1 - Tool Chain-2.jpg')"
target="_blank"
>
Platform One's Tool Chain
</v-btn>
</div>
</div>
<div class="col-md-6 col-lg-4 card-container">
<PackageVariantIcon class="logo" />
<h4>OUT OF THE BOX AUTOMATION</h4>
<div class="text">
The DSOP platform is deployed using out of the box IaC/CaC
delivered as a package.
</div>
</div>
<div class="col-md-6 col-lg-4 card-container">
<KeyboardSettingsIcon class="logo" />
<h4>P1 TRAINING FOR OPS TEAMS</h4>
<div class="text">
We train platform ops team for
<Tooltip text="SRE" tooltip="Site Reliability Engineering" />
work.
<div class="row justify-center">
<div class="col-4">
<strong>Stage 1</strong> - We create your DevSecOps (DSOP) Software
Factory. We set this up for you.
</div>
</div>
<div class="image-wrapper col-8 col-md-6" @click="() => showImg(0)">
<img
class="img-fluid"
src="@/assets/images/Big Bang Graphics-03.png"
alt="Big Bang Stage 1"
/>
</div>
</div>
<div class="row justify-center">
<div class="col-4">
<strong>Stage 2</strong> - You use the DevSecOps (DSOP) Software
Factory to build and deploy your mission applications. You run these
pipelines to build and deploy mission applications any number of
times.
</div>
</div>
<div class="image-wrapper pt-4 col-6" @click="() => showImg(1)">
<img
class="img-fluid"
src="@/assets/images/Big Bang Graphics-04.png"
alt="Big Bang Stage 2"
/>
</div>
</div>
</v-container>
<Wave>
<div class="container px-8 py-0">
<div class="row">
<div class="col-md-6 d-flex text-center text-md-left mb-4 mb-md-0">
<h2 class="ma-auto px-0">
We move fast,
<br />but we move smart.
</h2>
</div>
<div class="col-md-6 text-left">
The Big Bang team will deploy a Software Factory with tools that are
built for your specific mission needs. We believe the sooner we can
get you squared away on our level of automation and security
standards (which is high, why else would we invite you to join our
elite team of products and services), the sooner you can serve the
users and warfighters within DoD that need your product or solution
yesterday.
</div>
</div>
</div>
</Wave>
<div class="container my-4 px-auto">
<h2>BECOMING A BIG BANG CUSTOMER</h2>
<div class="row justify-center">
<div class="image-wrapper pt-4 px-0 col-8" @click="() => showImg(2)">
<img
class="img-fluid"
<div class="row justify-center">
<div class="col-md-6 col-lg-4 card-container-bottom">
<WorkshopIcon class="logo" />
<h4>BIG BANG WORKSHOP</h4>
<div class="text">
A seminar targed towards anyone interested in learning about the
big bang tech stack.
</div>
<div class="col-md-6 col-lg-4 card-container-bottom">
<ResidencyIcon class="logo" />
A multi-week course targeted toward engineers wanting hands-on
experience deploying Big Bang in our sandbox environment.
<router-link class="mt-4" to="/products/big-bang/onboarding">
</div>
</div>
<Wave>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mx-auto">
READY TO TAKE THE NEXT STEP TO GET IN BIG BANG?
</h2>
</div>
<div class="col-12 mt-4">
href="https://jira.il2.dso.mil/servicedesk/customer/portal/36/create/202"
color="primary"
href="https://repo1.dso.mil/platform-one/big-bang/umbrella/-/blob/master/README.md"
target="_blank"
>
Learn More
</v-btn>
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<div class="container my-4 px-8">
<h2 class="my-4 mt-sm-8 px-0">WHERE WE ARE TODAY</h2>
<p class="text-center">
We are working hard, but don't quite have all of our capabilities
operational.
<br />Check back often for updates!
</p>
<div class="d-flex flex-wrap my-4">
<div class="mx-auto my-4 text-left">
<h4 class="mb-4 mx-auto px-0">The Big Bang Milestones</h4>
<div class="milestones-wrapper mx-2 mb-16">
<div
v-for="milestone in milestones"
:key="milestone.text"
class="milestone pl-4 mb-4 position-relative"
>
<div class="bullet" :class="{ done: milestone.done }"></div>
<div class="text d-flex align-items-center">
<div class="img-container mr-2 d-flex justify-content-center">
<img
v-if="milestone.logo"
:src="getImageUrl(`logos/tool-logos/${milestone.logo}`)"
class="tool-logo"
:alt="milestone.text"
/>
</div>
{{ milestone.text }}
</div>
<div v-if="milestone.details">
<div
v-for="detail in milestone.details"
:key="detail"
class="milestone-detail font-italic"
>
{{ detail }}
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 px-4 my-auto text-center">
<h4>
Have questions about Big Bang?
</h4>
href="https://confluence.il2.dso.mil/questions/topics/10813444/bigbang"
target="_blank"
>
FAQs
</v-btn>
</div>
</div>
<vue-easy-lightbox
escDisabled
moveDisabled
:visible="lightbox.visible"
:imgs="lightbox.imgs"
:index="lightbox.index"
@hide="handleHide"
></vue-easy-lightbox>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import Wave from "@/components/Wave";
import VueEasyLightbox from "vue-easy-lightbox";
import WorkshopIcon from "@/assets/images/icons/Icon_Workshop.svg";
import ResidencyIcon from "@/assets/images/icons/Icon_Residency.svg";
import ClockEndIcon from "@/assets/images/icons/Icon_ClockEnd.svg";
import HammerWrenchIcon from "@/assets/images/icons/Icon_HammerWrench.svg";
import KeyboardSettingsIcon from "@/assets/images/icons/Icon_KeyboardSettings.svg";
import LockOpenVariantIcon from "@/assets/images/icons/Icon_LockOpenVariant.svg";
import PackageVariantIcon from "@/assets/images/icons/Icon_PackageVariant.svg";
import BBLogo from "@/assets/images/logos/Big_Bang_Color_Logo_White_text.png";
export default {
name: "BigBang",
components: {
PageHeader,
Wave,
WorkshopIcon,
ResidencyIcon,
ClockEndIcon,
HammerWrenchIcon,
KeyboardSettingsIcon,
LockOpenVariantIcon,
},
methods: {
showImg(index) {
this.lightbox.index = index;
this.lightbox.visible = true;
},
handleHide() {
this.lightbox.visible = false;
},
getImageUrl(filename) {
return require(`@/assets/images/${filename}`);
// lightbox state
lightbox: {
visible: false,
index: 0, // default: 0
imgs: [
require("@/assets/images/Big Bang Graphics-03.png"),
require("@/assets/images/Big Bang Graphics-04.png"),
require("@/assets/images/Becoming a BB Customer_2-07.png"),
],
done: false,
text: "coming soon - Azure Support",
text: "coming soon - Open Source version",
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
};
</script>
<style lang="scss">
.big-bang {
.mm-logo {
width: 250px;
}
.milestones-wrapper {
background-image: linear-gradient(black 33%, rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 3px 10px;
background-repeat: repeat-y;
padding-top: 8px;
position: relative;
.bullet {
border: 1px solid black;
background-color: #ffffff;
border-radius: 50%;
display: inline-block;
position: absolute;
left: -7px;
top: 3px;
height: 17px;
width: 17px;
&.done {
background-color: $p1-light-green;
}
}
.img-container {
width: 24px;
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
.tool-logo {
max-width: 24px;
max-height: 24px;
}
}
.text {
font-weight: 600;
}
.milestone:last-child {
background-color: #ffffff;
margin-bottom: 0 !important;
}
.milestone:first-child {
margin-top: -12px;
}
}
.image-wrapper {
cursor: pointer;
}
.bb-logo {
max-width: 200px;
}
// lightbox stuff
.vel-modal {
.vel-img {
background-color: #ffffff;
}
.vel-toolbar {
.toobar-btn.toolbar-btn__rotate {
display: none;
}
}
}
.row {
margin-left: 0;
margin-right: 0;
}
display: flex;
flex-direction: column;
align-items: center;
padding-left: 2rem;
padding-right: 2rem;
margin-bottom: 1rem;
a {
.btn-link {
word-wrap: none;
}
}
h4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
@include xs {
align-items: flex-start;
text-align: left;
h4 {
margin-left: 0;
padding-left: 0;
}
}
}
.card-container-bottom {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;