Improve typer-js integration

ricardomfmsousa · Oct 6, 2018 · 6c75879 · 6c75879
1 parent 4389917
commit 6c75879
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 61 deletions.
diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html
@@ -1,6 +1,30 @@
 <div class="image-bg"><i></i></div>
 
 <div class="intro-content">
-  <div class="presentation"><h1></h1><h2></h2></div>
+  <div class="presentation">
+    <h1>
+      <span class="name">I'm &lt;span class="de-emphasize">Ricardo&lt;/span> Sousa.</span>
+    </h1>
+    <h2 *ngIf="showTechnologies">
+      <span class="title">&lt;span class="de-emphasize">Software&lt;/span> Developer</span>
+      <span class="dot">&lt;span class="de-emphasize"> &sdot; &lt;/span></span>
+      <span class="jscript">Javascript &lt;span class="de-emphasize">/&lt;/span> Typescript</span>
+      <span class="style">LESS &lt;span class="de-emphasize">/&lt;/span> SCSS &lt;span class="de-emphasize">/&lt;/span>
+        CSS
+      </span>
+      <span class="framework">Angular &lt;span class="de-emphasize">/&lt;/span> React &lt;span class="de-emphasize">/&lt;/span>
+        Vue
+      </span>
+      <span class="markup">HTML &lt;span class="de-emphasize">/&lt;/span>
+        XML &lt;span class="de-emphasize">/&lt;/span>
+        YML &lt;span class="de-emphasize">/&lt;/span> Markdown
+      </span>
+      <span class="backend">
+        NodeJS &lt;span class="de-emphasize">/&lt;/span> PHP &lt;span class="de-emphasize">/&lt;/span> Java</span>
+      <span class="db">MySQL &lt;span class="de-emphasize">/&lt;/span> MongoDB</span>
+      <span class="devops">Shell script &lt;span class="de-emphasize">/&lt;/span> Docker</span>
+      <span class="obs">&lt;span class="de-emphasize">WEB&lt;/span> technologies passionate!</span>
+    </h2>
+  </div>
   <app-social-drawer [items]="socialDrawerItems"></app-social-drawer>
 </div>
diff --git a/src/app/views/home/home.component.scss b/src/app/views/home/home.component.scss
@@ -28,6 +28,50 @@ $patternURL: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCA‌AAAA
   text-align: center;
   background: linear-gradient(45deg, transparent, rgba(0, 0, 0, 0.6));
   background-size: 2px 2px;
+  div.presentation {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 20px;
+    height: 260px;
+    h1 {
+      margin: 5px 0;
+      font-size: 55px;
+      text-transform: uppercase;
+      color: white;
+      font-weight: bold;
+      text-shadow: -5px 0px 10px #101010;
+      margin: 0;
+    }
+    h2 {
+      margin: 10px 0 5px 0;
+      font-weight: 300;
+      font-size: 1.1rem;
+      text-transform: uppercase;
+      color: #ffffff;
+      text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
+      text-align: left;
+    }
+    @media (max-width: 640px) and (min-height: 361px) {
+      top: 40%;
+      h2 {
+        text-align: center;
+        margin-top: 60px;
+      }
+    }
+    h1,
+    h2 {
+      span.de-emphasize {
+        color: #828282;
+      }
+      span:not(.de-emphasize) {
+        display: none;
+      }
+      span:not(.title) {
+        font-weight: bold;
+      }
+    }
+  }
   app-social-drawer {
     position: absolute;
     bottom: 20px;

diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts
@@ -1,20 +1,29 @@
 import { SocialDrawerItem } from '../../shared/components/social-drawer/social-drawer-item.model';
 import { UtilService } from '../../shared/services/util/util.service';
-import { Component, AfterViewInit } from '@angular/core';
+import {
+  Component,
+  AfterViewInit,
+  ViewEncapsulation,
+  ChangeDetectorRef
+} from '@angular/core';
 import { fadeAnimation } from '../../shared/animations/fade-in.animation';
 import * as typer from 'typer-js';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   animations: [fadeAnimation],
-  styleUrls: ['./home.component.scss']
+  styleUrls: ['./home.component.scss'],
+  // Must be used due to typer
+  // TODO: Write an angular version of typer
+  encapsulation: ViewEncapsulation.None
 })
 export class HomeViewComponent implements AfterViewInit {
   public readonly socialDrawerItems: SocialDrawerItem[];
   private readonly cursor: any;
+  public showTechnologies: boolean;
 
-  constructor(private utils: UtilService) {
+  constructor(private utils: UtilService, private cdr: ChangeDetectorRef) {
     this.socialDrawerItems = [
       {
         title: 'Github',
@@ -37,53 +46,51 @@ export class HomeViewComponent implements AfterViewInit {
         action: () => this.utils.openMailTo()
       }
     ].map(s => new SocialDrawerItem(s.title, s.icon, s.action));
-
     this.cursor = { color: 'white', blink: 'soft' };
   }
 
   public ngAfterViewInit(): void {
     typer('.presentation h1', 90)
       .cursor(this.cursor)
-      .line(`I'm <span>Ricardo</span> Sousa.`)
+      .line({ container: '.name' })
       .pause(2000)
       .end(() => this.writeTitleAndTechnologies());
   }
 
   private writeTitleAndTechnologies(): void {
+    // Force the re-render of the technologies heading because typer
+    // messes with the DOM, erasing (not just hiding) the spans
+    this.showTechnologies = false;
+    this.cdr.detectChanges();
+    this.showTechnologies = true;
+    this.cdr.detectChanges();
     typer('.presentation h2', 90)
       .cursor(this.cursor)
-      .line(`<span>Software</span> Developer`)
+      .line({ container: '.title' })
       .pause(2000)
-      .continue(`<span><strong> &sdot; </strong></span>`)
-      .continue(`<strong>Javascript <span>/</span> Typescript</strong>`)
+      .continue({ container: '.dot' })
+      .continue({ container: '.jscript' })
       .pause(1500)
       .back('empty', -21)
-      .continue(`<strong>LESS <span>/</span> SCSS <span>/</span> CSS</strong>`)
+      .continue({ container: '.style' })
       .pause(1500)
       .back('empty', -21)
-      .continue(
-        `<strong>Angular <span>/</span> React <span>/</span> Vue</strong>`
-      )
+      .continue({ container: '.framework' })
       .pause(1500)
       .back('empty', -21)
-      .continue(
-        `<strong>HTML <span>/</span> XML <span>/</span>` +
-          ` YML <span>/</span> Markdown</strong>`
-      )
+      .continue({ container: '.markup' })
       .pause(2000)
       .back('empty', -21)
-      .continue(
-        `<strong>NodeJS <span>/</span> PHP <span>/</span> Java</strong>`
-      )
+      .continue({ container: '.backend' })
       .pause(1500)
       .back('empty', -21)
-      .continue(`<strong>MySQL <span>/</span> MongoDB</strong>`)
+      .continue({ container: '.db' })
       .pause(1500)
       .back('empty', -21)
-      .continue(`<strong>Shell script <span>/</span> Docker</strong>`)
+      .continue({ container: '.devops' })
       .pause(2000)
       .back('empty', -21)
-      .continue(`<strong><span>WEB</span> technologies passionate!</strong>`)
+      .continue({ container: '.obs' })
       .pause(5000)
       .back('empty', -21)
       .empty()

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1,41 +1,3 @@
 /* Set default font family as Ubuntu font family */
 
 @import 'layout';
-div.presentation {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 20px;
-  height: 260px;
-  h1 {
-    margin: 5px 0;
-    font-size: 55px;
-    text-transform: uppercase;
-    color: white;
-    font-weight: bold;
-    text-shadow: -5px 0px 10px #101010;
-    margin: 0;
-  }
-  h2 {
-    margin: 10px 0 5px 0;
-    font-weight: 300;
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    color: #ffffff;
-    text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
-    text-align: left;
-  }
-  @media (max-width: 640px) and (min-height: 361px) {
-    top: 40%;
-    h2 {
-      text-align: center;
-      margin-top: 60px;
-    }
-  }
-  h1,
-  h2 {
-    span {
-      color: #828282;
-    }
-  }
-}