improve code style

axherrm · Jan 19, 2024 · 316a4ca · 316a4ca
1 parent 36feeb8
commit 316a4ca
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 17 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <main #outest_container>
-  <div #background style="width: 100vw; height: 100vh; display: flex; position: fixed; z-index: -100">
+  <div #backgroundImg id="background-img">
 <!--    <img-->
 <!--      srcset= "../assets/avatar_600.png 600w,-->
 <!--               ../assets/avatar_1000x533.png 1000w,-->
@@ -13,25 +13,24 @@
 <!--      alt=""-->
 <!--      style="min-width:100vw; min-height:100vh; width: auto; height: auto; object-fit: cover;"-->
 <!--    />-->
-    <img width="6000" height="3200"
-      ngSrc="./assets/avatar/" ngSrcset="600w, 1000w, 1500w, 2000w, 2500w, 3000w, 6000w"
-      alt="" style="min-width:100vw; min-height:100vh; width: auto; height: auto; object-fit: cover;"/>
+    <img width="6000" height="3200" alt="" ngSrc="./assets/avatar/"
+         ngSrcset="600w, 1000w, 1500w, 2000w, 2500w, 3000w, 6000w"/>
   </div>
 
   <div class="progressbar-container"><div #progress_bar class="progressbar"></div></div>
 
-  <div #lang_selector style="right: calc(2vh + 64px); top: 2vh; position: fixed; z-index: 1000; display: var(--display-side-elements)">
+  <div #lang_selector id="lang-selector">
     <p-speedDial [model]="dataService.languagesMenuItems" direction="down" showIcon="pi pi-language" class="language-speed-dial" buttonClassName="language-button"></p-speedDial>
   </div>
 
-  <div style="position:relative; top: -30vh; display: table; height: 130vh; width: 100vw;">
-    <div style="display: table-cell; vertical-align: middle; text-align: center;">
-      <h1 id="main-heading" [innerHTML]="dataService.languagePack.heading"></h1>
-      <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
+  <div class="content-container">
+    <div style="position:relative; top: -30vh; display: table; height: 130vh; width: 100vw;">
+      <div style="display: table-cell; vertical-align: middle; text-align: center;">
+        <h1 id="main-heading" [innerHTML]="dataService.languagePack.heading"></h1>
+        <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
+      </div>
     </div>
-  </div>
 
-  <div style="text-align: center; display: flex; flex-direction: column; align-items: center">
     <heading-card #education_card [heading]="dataService.languagePack.education" type="light" styleClass="alarm-clock-animated"></heading-card>
     <p-timeline id="eduction-tl" [value]="dataService.education" align="alternate" [style]="{'width': '70%', 'display': 'inline-block'}">
       <ng-template pTemplate="marker">

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,6 +1,21 @@
-@use 'style/language';
+@use 'style/language-selector';
 @use 'style/lenis';
 
+#background-img {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: -100;
+  display: flex;
+  img {
+    min-width:100vw;
+    min-height:100vh;
+    width: auto;
+    height: auto;
+    object-fit: cover;
+  }
+}
+
 #main-heading {
   color: #ffffff;
   font-size: 7vw;
@@ -40,6 +55,13 @@
   }
 }
 
+.content-container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+}
+
 :host ::ng-deep {
 
   .p-timeline-event-separator {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -35,7 +35,7 @@ import "./js/lenis.js";
 })
 export class AppComponent {
 
-  @ViewChild("background", {read: ElementRef}) background: ElementRef;
+  @ViewChild("backgroundImg", {read: ElementRef}) backgroundImage: ElementRef;
   @ViewChild("outest_container", {read: ElementRef}) outestContainer: ElementRef;
   @ViewChild("progress_bar", {read: ElementRef}) progressBar: ElementRef;
   @ViewChild("education_card", {read: ElementRef}) educationCard: ElementRef;
@@ -92,17 +92,20 @@ export class AppComponent {
         start: "top 90%",
         trigger: this.educationCard.nativeElement,
         end: "top top",
-        // markers: true, // TODO remove
         scrub: true,
       }
     });
     tl
-      .to(this.background.nativeElement, {
+      .to(this.backgroundImage.nativeElement, {
         filter: "blur(2px)"
       })
-      .from(this.langSelector.nativeElement, {
+      .fromTo(this.langSelector.nativeElement, {
         opacity: 0,
-        ease: "power1.in"
+        ease: "power1.in",
+        display: "none"
+      }, {
+        display: "var(--display-side-elements)",
+        opacity: 1,
       }, "<");
   }
 

diff --git a/src/app/style/language.scss → src/app/style/language-selector.scss b/src/app/style/language.scss → src/app/style/language-selector.scss
@@ -31,3 +31,11 @@
     }
   }
 }
+
+#lang-selector {
+  position: fixed;
+  right: calc(2vh + 64px);
+  top: 2vh;
+  z-index: 1000;
+  display: var(--display-side-elements);
+}