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,22 +1,22 @@
 @import url("https://fonts.googleapis.com/css?family=Arvo");
 
-.typewriter h1 {
+.typewriter {
-  color: white;
+    h1,h2,h3,h4,h5,h6 {
-  overflow: hidden;
+        overflow: hidden;
-  border-right: .15em solid white;
+        margin: 0 auto;
-  margin: 0 auto;
+        letter-spacing: .15em;
-  letter-spacing: .15em;
+        animation: blink-caret 1s step-end infinite;
-  animation: blink-caret 1s step-end infinite;
+        display: inline;
-  display: inline;
+        font-family: 'Arvo', serif;
-  font-family: 'Arvo', serif;
+    }
 
-  @keyframes typing {
+    @keyframes typing {
-    from { width: 0 }
+        from { width: 0 }
-    to { width: 100% }
+        to { width: 100% }
-  }
+    }
 
-  @keyframes blink-caret {
+    @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>
-            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.
         </div>
-        <div class="p-4 text-white" style="background-color: #1c7fc1">
+        <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="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;
 }