Added 'fish' section with animations

src/components/Fishes.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export default class Fishes extends React.Component {
+	render() {
+		return (
+			<div id={'fish-container'} className='fish-container'>
+				<div className={'fish right front01 tang tang-01-right'}></div>
+				{/*<div className={'fish right front02 tang tang-02-right'}></div>*/}
+				<div className={'fish right front03 tang tang-03-right'}></div>
+				{/*<div className={'fish right front04 tang tang-04-right'}></div>*/}
+				{/*<div className={'fish left front01 tang tang-01-left'}></div>*/}
+				<div className={'fish left front02 tang tang-02-left'}></div>
+				{/*<div className={'fish left front03 tang tang-03-left'}></div>*/}
+				<div className={'fish left front04 tang tang-04-left'}></div>
+				<div className={'fish right front01 shark shark-01-right'}></div>
+				{/*<div className={'fish right front02 shark shark-02-right'}></div>*/}
+				<div className={'fish right front03 shark shark-03-right'}></div>
+				{/*<div className={'fish right front04 shark shark-04-right'}></div>*/}
+				{/*<div className={'fish left front01 shark shark-01-left'}></div>*/}
+				<div className={'fish left front02 shark shark-02-left'}></div>
+				{/*<div className={'fish left front03 shark shark-03-left'}></div>*/}
+				<div className={'fish left front04 shark shark-04-left'}></div>
+				<div className={'fish right front01 guppy guppy-01-right'}></div>
+				{/*<div className={'fish right front02 guppy guppy-02-right'}></div>*/}
+				<div className={'fish right front03 guppy guppy-03-right'}></div>
+				{/*<div className={'fish right front04 guppy guppy-04-right'}></div>*/}
+				{/*<div className={'fish left front01 guppy guppy-01-left'}></div>*/}
+				<div className={'fish left front02 guppy guppy-02-left'}></div>
+				{/*<div className={'fish left front03 guppy guppy-03-left'}></div>*/}
+				<div className={'fish left front04 guppy guppy-04-left'}></div>
+				<div className={'fish left peter'}>
+					<img src="https://backend.peterstenberg.no/wp-content/uploads/2019/06/peter.gif" alt=""/>
+				</div>
+			</div>
+		)
+	}
+}

src/index.js

@@ -11,7 +11,7 @@ import Footer from "./components/Footer";
 
 
 class App extends React.Component {
-	authenticate(){
+	authenticate() {
 		return new Promise(resolve => setTimeout(resolve, 2000))
 	}
 
@@ -20,8 +20,7 @@ class App extends React.Component {
 		this.state = {
 			logo: {},
 			logoSmall: {},
-			slideshowFirst: [],
-			slideshowSecond: [],
+			slideshow: [],
 			icons: {},
 			contactInfo: {}
 		}
@@ -31,7 +30,7 @@ class App extends React.Component {
 
 		this.authenticate().then(() => {
 			const ele = document.getElementById('ipl-progress-indicator')
-			if(ele){
+			if (ele) {
 				// fade out
 				ele.classList.add('available')
 				setTimeout(() => {
@@ -48,8 +47,7 @@ class App extends React.Component {
 				this.setState({
 					logo: response.acf.logo,
 					logoSmall: response.acf.logo_small,
-					slideshowFirst: response.acf.slideshow_first,
-					slideshowSecond: response.acf.slideshow_second,
+					slideshow: response.acf.slideshow_first,
 					icons: {
 						cameraIcon: response.acf.icon_camera.url,
 						anchorIcon: response.acf.icon_anchor.url,
@@ -76,15 +74,12 @@ class App extends React.Component {
 			<div id={'home'} className={'page-container'}>
 				<Navigation logoSmall={this.state.logoSmall}/>
 				<div className={'slideshow-container slideshow-first'}>
-					<Slideshow images={this.state.slideshowFirst}/>
+					<Slideshow images={this.state.slideshow}/>
 					<Logo logo={this.state.logo}/>
 				</div>
 				<Gallery
 					icons={this.state.icons}
 				/>
-				<div className={'slideshow-container slideshow-second'}>
-					<Slideshow images={this.state.slideshowSecond}/>
-				</div>
 				<Contact/>
 				<About
 					logo={this.state.logo}

src/styles.scss

@@ -36,5 +36,5 @@ h1, h2, h3, h4, h6, h6, p, a {
 #particles-js {
 	height: 100%;
 	position: fixed;
-	z-index: 2;
+	z-index: 10;
 }

src/styles/_about.scss

@@ -3,6 +3,7 @@
 */
 
 .about {
+	z-index: 11;
 	@include center-flex;
 	position: relative;
 	height: 100vh;

src/styles/_contact.scss

@@ -3,11 +3,12 @@
 */
 
 .contact {
+	overflow: hidden;
 	height: 100vh;
 	position: relative;
 
 	.contact-form-container {
-		z-index: 1;
+		z-index: 11;
 		position: absolute;
 		top: 0;
 		bottom: 0;
@@ -139,18 +140,22 @@ input[type=password] {
 }
 
 .background2 {
+	z-index: 4;
 	background: url('https://backend.peterstenberg.no/wp-content/uploads/2019/06/front01.svg');
 }
 
 .background3 {
+	z-index: 3;
 	background: url('https://backend.peterstenberg.no/wp-content/uploads/2019/06/front02.svg');
 }
 
 .background4 {
+	z-index: 2;
 	background: url('https://backend.peterstenberg.no/wp-content/uploads/2019/06/front03.svg');
 }
 
 .background5 {
+	z-index: 1;
 	background: url('http://backend.peterstenberg.no/wp-content/uploads/2019/06/front04.svg');
 }