javascript - flex容器中的particle.js背景

Question

编辑：我已经改写了我的问题，希望得到更多的回应。基本上我所需要的只是一个 flex 容器，它像我的一样保存项目，背景中带有particleJS。即使有人可以制作一个以粒子为背景的 flex 容器，我也可以从那里弄清楚.

笔https://codepen.io/marti2221/pen/zdjGJZ

<div id="particles-js">
<div class="container">
<div class="left">
<div class="svg-container">
  <div class="svg-logo">
    <svg width="115px" height="60px">
    <rect x="3" y="3" rx="3px" ry="4px" width="52.2px" height="52.2px"
style="fill: aqua;stroke:aqua;stroke-width:1px;opacity:0.82" />
    <text x="21.5" y="33.6" font-family="sf-san-francisco" font-
size="20" stroke="black" fill="black">T</text>
    <rect x="61.2" y="3" rx="4px" ry="4px" width="52px" height="52px"
style="fill:none;stroke:white;stroke-width:2.4px;opacity:0.82" />
    <text x="79" y="33.6" font-family="sf-san-francisco" font-size="20" 
fill="white">R</text>
    </svg>
  </div>
</div>
<div class="question-container">
  <p class="questions" id="border-bottom">WHO AM I?</p>
  <p class="questions" id="border-top">WHAT DO I DO?</p>
</div>
</div>
<div class="middle">
<div class="top">
  <nav>
    <a>Link1</a>
    <a>Link2</a>
    <a>Link3</a>
    <a>Link4</a>
  </nav>
</div>
<div class="bottom">
  <h1>I am an extremely</br> passionate User Interface</br> Design + 
Developer</h1>
</div>
</div>
<div class="right">
<h2 class="name">TRAVIS MARTIN</h2>
</div>
</div>
</div>
<script 
src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>

.container{
display: flex;
height: 100vh;
}

#particles-js{
height: 100vh;
width: 100vw;
background-image: 
url('https://www.hdwallpapers.net/wallpapers/molecular-
structure-wallpaper-for-1280x800-69-739.jpg');
background-size: cover;
background-repeat: no-repeat;
}



.left{
display: flex;
flex: 1;
background: rgba(9, 0, 31, 0.82);
flex-direction: column;
align-items: center;
padding-top: 40px;
}
.svg-container{
display: flex;
flex-grow: 1;
width: 100%;
padding-left: 80px;
}

/*.svg-logo{
display: flex;
flex-grow: .25;

background: teal;
}*/



.question-container{
display: flex;
flex-grow: 1;
width: 100%;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
margin-top: 40px;
}

.questions{
display: flex;
margin:0 1px 0 0;
color: white;
font-size: 12px;
}
#border-top{
border-top: 2px solid white;
padding: 15px; 

}
#border-bottom{
padding: 13px;
padding-right: 28px;
}


.middle{
display: flex;
flex: 3;

flex-direction: column;
}
.top{
display: flex;
flex: 1;
}
nav{
display: flex;
flex-direction: column;
margin: 50px 0 0 65px;
color: white;

}

a:before {
content: '\2014';
position: absolute;
margin-left: -40px;
}
a{
margin: 10px 0 10px 0;
font-size: 22px;
}


.bottom{
display: flex;
flex: 1;  
}
h1{
margin-left: 25px;
font-size: 55px;
color: white;
}


.right{
display: flex;
flex: .37;
background: rgba(6, 2, 28, 0.94);
flex-direction: column;
justify-content: center;
min-width: 0;
}

.name{
display: flex;
transform: rotate(-180deg);
background: pink;
writing-mode: tb-lr;   
writing-mode: vertical-lr;
font-size: 65px;
align-items: center;

color: white;
}

var options = {"particles":{"number":{"value":99,"density":
{"enable":true,"value_area":552.4033491425909}},"color":
{"value":"#ffffff"},"shape":{"type":"circle","stroke":
{"width":0,"color":"#000000"},"polygon":{"nb_sides":3},"image":
{"src":"img/github.svg","width":70,"height":100}},"opacity":
{"value":1,"random":true,"anim":
{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":
{"value":2,"random":true,"anim":
{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked"
{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,
"width":1},"move":

{"enable":true,"speed":1.5782952832645452,"direction":"none",

"random":true,"straight":false,"out_mode":"out","bounce":false,
"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},
"interactivity":{"detect_on":"canvas","events":{"onhover":
{"enable":false,"mode":"repulse"},"onclick":
{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":
{"distance":400,"line_linked":{"opacity":1}},"bubble":
{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},
 "repulse":{"distance":200,"duration":0.4},"push":
 {"particles_nb":4},"remove":
 {"particles_nb":2}}},"retina_detect":false};

 particlesJS("particles-js", options);