diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html index cd765bd..bc91ea4 100644 --- a/src/app/views/home/home.component.html +++ b/src/app/views/home/home.component.html @@ -1,6 +1,30 @@
-

+
+

+ I'm <span class="de-emphasize">Ricardo</span> Sousa. +

+

+ <span class="de-emphasize">Software</span> Developer + <span class="de-emphasize"> ⋅ </span> + Javascript <span class="de-emphasize">/</span> Typescript + LESS <span class="de-emphasize">/</span> SCSS <span class="de-emphasize">/</span> + CSS + + Angular <span class="de-emphasize">/</span> React <span class="de-emphasize">/</span> + Vue + + HTML <span class="de-emphasize">/</span> + XML <span class="de-emphasize">/</span> + YML <span class="de-emphasize">/</span> Markdown + + + NodeJS <span class="de-emphasize">/</span> PHP <span class="de-emphasize">/</span> Java + MySQL <span class="de-emphasize">/</span> MongoDB + Shell script <span class="de-emphasize">/</span> Docker + <span class="de-emphasize">WEB</span> technologies passionate! +

+
diff --git a/src/app/views/home/home.component.scss b/src/app/views/home/home.component.scss index 995584d..7b941a6 100644 --- 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 index 3b0c0f8..e121508 100644 --- a/src/app/views/home/home.component.ts +++ b/src/app/views/home/home.component.ts @@ -1,6 +1,11 @@ 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'; @@ -8,13 +13,17 @@ import * as typer from 'typer-js'; 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 Ricardo 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(`Software Developer`) + .line({ container: '.title' }) .pause(2000) - .continue(` ⋅ `) - .continue(`Javascript / Typescript`) + .continue({ container: '.dot' }) + .continue({ container: '.jscript' }) .pause(1500) .back('empty', -21) - .continue(`LESS / SCSS / CSS`) + .continue({ container: '.style' }) .pause(1500) .back('empty', -21) - .continue( - `Angular / React / Vue` - ) + .continue({ container: '.framework' }) .pause(1500) .back('empty', -21) - .continue( - `HTML / XML /` + - ` YML / Markdown` - ) + .continue({ container: '.markup' }) .pause(2000) .back('empty', -21) - .continue( - `NodeJS / PHP / Java` - ) + .continue({ container: '.backend' }) .pause(1500) .back('empty', -21) - .continue(`MySQL / MongoDB`) + .continue({ container: '.db' }) .pause(1500) .back('empty', -21) - .continue(`Shell script / Docker`) + .continue({ container: '.devops' }) .pause(2000) .back('empty', -21) - .continue(`WEB technologies passionate!`) + .continue({ container: '.obs' }) .pause(5000) .back('empty', -21) .empty() diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 8ebf655..7af8958 100644 --- 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; - } - } -}