presentation video changed

Author: 7bitcoder

angular.json

@@ -26,9 +26,10 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": [              
+            "scripts": [
               "node_modules/vanta/vendor/three.r119.min.js",
-              "node_modules/vanta/dist/vanta.net.min.js"
+              "node_modules/vanta/dist/vanta.net.min.js",
+              "node_modules/disable-scroll/src/index.js"
             ]
           },
           "configurations": {
@@ -122,6 +123,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "shrapsen"
-}
+}

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { PresentationElementComponent } from './presentation-element/presentatio
 import { HttpClientModule } from '@angular/common/http'
 import { ProjectsService } from './projects.service';
 import { EndingPageComponent } from './ending-page/ending-page.component'
+import disableScroll from 'disable-scroll';
 
 @NgModule({
   declarations: [

src/app/ending-page/ending-page.component.css

@@ -1,48 +1,19 @@
-a {
-  text-decoration: none;
-}
-a:hover 
-{
-   text-decoration:none; 
-   cursor:pointer;  
-}
 #Ebackground {
     float: left;
-    z-index: -1;
     width: 100vw;
     height: 100vh;
 }
-#EmainPage {
-    float: left;
-    position: fixed;
-    height: 92vh;
-    width: 100vw;
-}
-#EleftSide{
-    float: left;
-    width: 90vw;
-}
-#ElogoContainer{
-    margin-top: 20vh;
+#endContainer{
+    float:left;
     margin-left: 10vw;
-    display: block;
+    margin-top: 40vh;
 }
-#Elogo {
-    font-family: 'lato';
-    font-size: 130px;
-    color: white;
-    display: block;
-}
-
-#ElanguagesDescription{
+.end{
+    float: left;
+    width: 100%;
+    margin-top: 30px;
     color: white;
     font-family: 'lato';
-    font-size: 40px;
+    font-size: 60px;
     color: white;
-    display: inline;
-}
-.ElanguageLogo {
-    height: 120px;
-    margin-left: 50px;
-    float: left;
-}
+}

src/app/ending-page/ending-page.component.html

@@ -1,20 +1,6 @@
-<div     appParallax [ratio]="-0.3" id="Ebackground">
-    <div appParallax [ratio]="-0.5" id="EmainPage">
-        <div id="EleftSide">
-            <div id="ElogoContainer">
-                <div id="Elogo">Shrapsen</div>
-            </div>
-            <div style="margin-top: 15vh; margin-left: 2vw;">
-                <div id="ElanguagesDescription">Languages that i use:</div>
-                <div style="clear: both;"></div>
-                <div style="margin-top: 5vh; margin-left: -50px;">
-                    <img class="ElanguageLogo" src="../assets/images/cSharpLogo.png">
-                    <img class="ElanguageLogo" src="../assets/images/pythonLogo.png">
-                    <img class="ElanguageLogo" src="../assets/images/javaLogo.png">
-                    <img class="ElanguageLogo" src="../assets/images/cppLogo3.png">
-                    <img class="ElanguageLogo" src="../assets/images/jsLogo.png">
-                </div>
-            </div>
-        </div>
+<div id="Ebackground">
+    <div id="endContainer">
+        <div class="end">Made by Sylwester Dawida</div>
+        <div class="end">Sylwo1003@gmail.com</div>
     </div>
 </div>

src/app/ending-page/ending-page.component.ts

@@ -14,7 +14,7 @@ export class EndingPageComponent implements OnInit {
   ngOnInit(): void {
 
     VANTA.NET({
-      el: "#background",
+      el: "#Ebackground",
       mouseControls: true,
       touchControls: true,
       gyroControls: false,

src/app/parallax.directive.ts

@@ -5,19 +5,18 @@ import { Directive, Input, ElementRef, HostListener } from '@angular/core';
 })
 export class ParallaxDirective {
 
-  @Input('ratio') parallaxRatio : number = 1;
- initialTop :number = 0;
+  @Input('ratio') parallaxRatio: number = 1;
+  initialTop: number = 0;
 
-  constructor(private eleRef : ElementRef) {
+  constructor(private eleRef: ElementRef) {
     this.initialTop = this.eleRef.nativeElement.getBoundingClientRect().top
   }
 
   @HostListener("window:scroll", ["$event"])
-  onWindowScroll(event){
+  onWindowScroll(event) {
     const componentPosition = this.eleRef.nativeElement.offsetTop + window.innerHeight
     const scrollPosition = window.pageYOffset
-    console.log(componentPosition + " " + this.initialTop)
-    if(scrollPosition > this.initialTop){
+    if (scrollPosition > this.initialTop) {
       this.eleRef.nativeElement.style.top = (this.initialTop - (window.scrollY * this.parallaxRatio)) + 'px'
     }
   }

src/app/presentation-element/presentation-element.component.css

@@ -19,7 +19,7 @@
 }
 #presentationImg{
     float: left;
-    width: auto;
+    width: 40vw;
     height: 50vh;
     margin-top: 10vh;
 }

src/app/presentation-element/presentation-element.component.html

@@ -2,8 +2,14 @@
     <div [@backgroundIn]="animatePage ? 'show' : '*'" id="elBacgroundBar">
     </div>
     <div id="element">
-        <img [@imageIn]="animatePage ? 'show' : '*'" id="presentationImg" [src]='imageLink'>
-        <div [@textIn]="animatePage ? 'show' : '*'" id="description">
+        <div [@imageIn]="animatePage ? 'show' : '*'" id="presentationImg">
+            <iframe [@imageIn]="animatePage ? 'show' : '*'" width="100%" height="100%"
+                src="https://www.youtube.com/embed/veHqJSC-9Lo" frameborder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen></iframe>
+        </div>
+        <!---<img [@imageIn]="animatePage ? 'show' : '*'" id="presentationImg" [src]='imageLink'>--->
+        <div [@textIn]="animatePage  ? 'show' : '*'" id="description">
             <div id="title">
                 {{title}}
             </div>

src/app/presentation-element/presentation-element.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, HostBinding, HostListener, ElementRef } from '@angular/core';
 import { trigger, state, style, transition, animate, query, stagger, sequence } from '@angular/animations';
+import disableScroll from 'disable-scroll';
 
 @Component({
   selector: 'app-presentation-element',
@@ -51,15 +52,18 @@ export class PresentationElementComponent implements OnInit {
 
   constructor(public el: ElementRef) { }
 
+  animationDone($event) {
+    disableScroll.off();
+  }
+
   @HostListener('window:scroll', ['$event'])
   checkScroll() {
     if (!this.animatePage) {
-      const componentPosition = this.el.nativeElement.offsetTop + window.innerHeight * (this.index + 1.9)
+      const componentPosition = this.el.nativeElement.offsetTop + window.innerHeight * 0.7 //* (this.index + 1.9)
       const scrollPosition = window.pageYOffset
 
       if (scrollPosition >= componentPosition) {
         this.animatePage = true;
-        console.log(componentPosition)
       }
     }
   }

src/app/presentation/presentation.component.html

@@ -1,7 +1,7 @@
 <div id="presentationBck">
     <div style="float: left; height: 100vh; width: 100vw; min-width: 500px;">
         <div [@flyInOut]="show ? 'show' : '*'" id="myProjectsContainer">
-            <div id="myProjects">my projects</div>
+            <div id="myProjects">My projects</div>
         </div>
     </div>
     <div *ngFor="let project of projects; index as i" style="float: left;">