Made my site pretty

package.json

@@ -22,15 +22,16 @@
         "@angular/platform-browser": "~7.2.0",
         "@angular/platform-browser-dynamic": "~7.2.0",
         "@angular/router": "~7.2.0",
+        "@thisissoon/angular-inviewport": "^4.2.2",
         "core-js": "^2.5.4",
-        "hammerjs": "^2.0.8",
         "firebase": "^5.1.0",
+        "hammerjs": "^2.0.8",
         "rxjs": "~6.3.3",
         "tslib": "^1.9.0",
         "zone.js": "~0.8.26"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~0.13.0",
+        "@angular-devkit/build-angular": "^0.13.9",
         "@angular/cli": "~7.3.8",
         "@angular/compiler-cli": "~7.2.0",
         "@angular/language-service": "~7.2.0",

src/app/app.module.ts

@@ -14,11 +14,13 @@ import {AppComponent} from './app.component';
 import {AppRouting} from './app.routing';
 import {AdminComponent} from './admin/admin.component';
 import {AngularFireAuthModule} from '@angular/fire/auth';
+import {ConsoleComponent} from './components/console/console.component';
 
 @NgModule({
     declarations: [
         AdminComponent,
         AppComponent,
+        ConsoleComponent,
         HomeComponent,
         SlideShowComponent,
         TypewriterComponent

src/app/components/console/console.component.html

@@ -0,0 +1,8 @@
+<div clas="p-1" style="background-color: #353535; color: #fff;">
+    <div class="pl-2 pt-2" style="height: 10rem;">
+        <h4 *ngFor="let o of output">{{o}}</h4>
+    </div>
+    <div class="pl-2 pb-2">
+        <h4 class="d-inline mr-2" style="color: #22ff22">></h4><typewriter [text]="input" (done)="enter()"></typewriter>
+    </div>
+</div>

src/app/components/console/console.component.ts

@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+import {AppStore} from '../../app.store';
+import {map} from 'rxjs/operators';
+
+@Component({
+    selector: 'console',
+    templateUrl: './console.component.html'
+})
+export class ConsoleComponent {
+    private done = false;
+
+    input = './motd.sh';
+    output = [];
+    quote;
+
+    constructor(private store: AppStore) {
+        store.quotes.subscribe(quotes => {
+            const quote = quotes[Math.floor(Math.random() * quotes.length)];
+            this.quote = quote.text;
+        });
+    }
+
+    enter() {
+        if(this.done) return;
+        setTimeout(() =>  {
+            this.output.push(this.input);
+            this.input = '';
+            setTimeout(() => this.output.push(this.quote), 500);
+        }, 1500);
+        this.done = true;
+    }
+}

src/app/components/typewriter/typewriter.component.scss

@@ -1,14 +1,14 @@
 @import url("https://fonts.googleapis.com/css?family=Arvo");
 
-.typewriter h1 {
+.typewriter {
-  color: white;
+    h1,h2,h3,h4,h5,h6 {
         overflow: hidden;
-  border-right: .15em solid white;
         margin: 0 auto;
         letter-spacing: .15em;
         animation: blink-caret 1s step-end infinite;
         display: inline;
         font-family: 'Arvo', serif;
+    }
 
     @keyframes typing {
         from { width: 0 }
@@ -16,7 +16,7 @@
     }
 
     @keyframes blink-caret {
-    from, to { border-color: transparent }
+        from, to { border-right: .15em solid; }
-    50% { border-color: white; }
+        50% { border: none; }
     }
 }

src/app/components/typewriter/typewriter.component.ts

@@ -1,21 +1,27 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {Observable, timer} from 'rxjs';
-import {filter, map} from 'rxjs/operators';
+import {filter, map, tap} from 'rxjs/operators';
 
 @Component({
     selector: 'typewriter',
     template: `
-        <div class="d-inline typewriter"><h1>{{output | async}}</h1></div>`,
+        <div class="d-inline typewriter"><h4 class="d-inline">{{output | async}}</h4></div>`,
     styleUrls: ['typewriter.component.scss']
 })
 export class TypewriterComponent {
     @Input() delay = 1500;
     @Input() speed = 100;
-
+    @Input() set text(text: string) {
-    @Input()
+        this.output = timer(this.delay, this.speed).pipe(
-    set text(text: string) {
+            filter(n => n <= (text.length || 0)),
-        this.output = timer(this.delay, this.speed).pipe(filter(n => n <= (text.length || 0)), map(n => text.slice(0, n)));
+            tap(n => {
+                if(n == text.length) this.done.emit();
+            }),
+            map(n => text.slice(0, n))
+        );
     }
 
+    @Output() done = new EventEmitter<void>();
+
     output: Observable<string>;
 }

src/app/home/home.component.html

@@ -1,11 +1,7 @@
 <div class="w-100">
-    <div class="container d-flex align-items-center" style="height: 600px">
+    <div class="w-100" style="height: calc(100vh - 140px)"></div>
-        <div class="w-100 text-center">
+    <div class="container p-0 bg-white">
-            <typewriter [text]="quote | async"></typewriter>
+        <div class="px-4" style="background-color: #732222">
-        </div>
-    </div>
-    <div class="container mb-md-5 p-0 bg-white">
-        <div class="px-4" style="background-color: #1c7fc1">
             <mat-card style="max-width: 600px; transform: translateY(-33%)">
                 <mat-card-content class="d-flex p-3">
                     <div class="d-none d-md-block pr-3">
@@ -23,44 +19,49 @@
                     </div>
                 </mat-card-content>
             </mat-card>
-        </div><div class="p-4">
-            <h3>Disclaimer</h3>
-            This site is currently under complete renovations as it moves from Django to Angular + Firebase
         </div>
         <div class="p-4">
-            <h3>About Zak</h3>
+            <console></console>
+        </div>
+        <div class="p-4">
+            <h3>About Me</h3>
+            <div class="d-flex align-items-center">
+                <div class="flex-grow-1">
+                    <p>
                         Zak was born with a keyboard in hand and was learning his first programming language by thirteen. Nearly
                         entirely self taught, Zak challenged his programming courses through both highschool and college while
                         working in the industry to gain professional experience. He is very passionate about technology and as a
                         lifelong learner it has opened the door to many other hobbies like robotics, space and physics. Some of his
                         personal projects include a full sized arcade machine, home automation and a power wall for a home solar
                         system.
+                    </p>
                 </div>
-        <div class="p-4 text-white" style="background-color: #1c7fc1">
+                <div class="flex-shrink-1 p-3">
+                    <img src="assets/img/keyboard-in-hand.jpg" height="150px" width="auto" style="border-radius: 50%">
+                </div>
+            </div>
+
+        </div>
+        <!-- <div class="p-4 text-white" style="background-color: #1c7fc1">
             <h3>Projects</h3>
             <div style="height: 400px">
                 <slideshow></slideshow>
             </div>
-        </div>
+        </div> -->
         <div class="p-4">
-            <h3>Information</h3>
+            <h3>Resume & References</h3>
-            <a class="btn btn-primary"
+            <a class="btn btn-outline-primary" href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing" target="_blank">Resume</a>
-               href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing"
+            <div class="ml-3 btn-group" role="group" aria-label="Basic example">
-               target="_blank">Resume</a>
+                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
-            <h5>References</h5>
+                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
-            <a href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
+                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
-            <br>
+                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
-            <a href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
+                <a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Project Red</a>
-            <br>
+            </div>
-            <a href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
-            <br>
-            <a href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
-            <br>
-            <a href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing"
-               target="_blank">CD Project Red</a>
         </div>
         <footer class="p-1 bg-dark text-center" style="color: grey">
             Copyright © Zakary Timson 2019 | All Rights Reserved
         </footer>
+        <div class="skirt"></div>
     </div>
 </div>

src/app/home/home.component.ts

@@ -1,19 +1,7 @@
 import { Component } from '@angular/core';
-import {AppStore} from '../app.store';
-import {Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
 
 @Component({
   selector: 'home',
   templateUrl: './home.component.html'
 })
-export class HomeComponent {
+export class HomeComponent { }
-  quote: Observable<string>;
-
-  constructor(private store: AppStore) {
-    this.quote = store.quotes.pipe(map(quotes => {
-        let quote = quotes[Math.floor(Math.random() * quotes.length)];
-        return quote.text;
-    }))
-  }
-}

src/index.html

@@ -6,9 +6,18 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name=”robots” content=”index,nofollow” />
+  <meta property=”og:type” content=”website” />
+  <meta property=”og:title” content=”Zakary Timson” />
+  <meta property=”og:description” content=”Cloud Architecture & Software Engineering” />
+  <meta property=”og:image” content=”https://zakscode.com/assets/img/ZaksCode.png” />
+  <meta property=”og:url” content=”https://zakscode.com” />
+  <meta property=”og:site_name” content=”ZaksCode” />
+  <meta name=”twitter:title” content=”Zakary Timson” />
+  <meta name=”twitter:description” content=”Cloud Architecture & Software Engineering” />
+  <meta name=”twitter:image” content=”https://zakscode.com/assets/img/ZaksCode.png” />
+
   <link rel="icon" type="image/png" href="assets/img/logo.png">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1,5 +1,21 @@
 @import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css");
 @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:300,400,500");
+
+::-webkit-scrollbar-track {
+	background-color: #354B72;
+}
+
+::-webkit-scrollbar {
+	width: 10px;
+	background-color: #354B72;
+}
+
+::-webkit-scrollbar-thumb {
+	border-radius: 5px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5);
+	background-color: #354B72;
+}
 
 html, body {
   height: 100%;
@@ -8,5 +24,11 @@ html, body {
 body {
   margin: 0;
   font-family: Roboto, sans-serif;
-  background: #ffffff url("/assets/img/background.jpg") no-repeat fixed center;
+  background: #354B72 url("/assets/img/ZaksCode.gif") no-repeat fixed center;
+}
+
+.skirt {
+  height: 3rem;
+  width: 100%;
+  background-color: #354B72;
 }