Setup routing

src/app/app.component.html

@@ -1,60 +1 @@
-<div class="w-100">
+<router-outlet></router-outlet>
-    <div class="container d-flex align-items-center" style="height: 600px">
-        <div class="w-100 text-center">
-            <typewriter [text]="quote | async"></typewriter>
-        </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">
-                        <img src="assets/img/portrait.jpg" width="150px" height="150px" style="border-radius: 50%">
-                    </div>
-                    <div>
-                        <h1 class="mb-0">Zakary Timson</h1>
-                        <h5 class="text-muted">FULL STACK SOFTWARE ENGINEER</h5>
-                        <div class="mt-3">
-                            <div><i class="mr-2 fa fa-map-marker-alt"></i> London Ontario, Canada</div>
-                            <div><i class="mr-2 fa fa-envelope"></i> <a href="mailto:zaktimson@gmail.com">zaktimson@gmail.com</a>
-                            </div>
-                            <div><i class="mr-2 fab fa-github"></i> <a href="https://github.com/ztimson"
-                                                                       target="_blank">github.com/ztimson</a></div>
-                        </div>
-                    </div>
-                </mat-card-content>
-            </mat-card>
-        </div>
-        <div class="p-4">
-            <h3>About Zak</h3>
-            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">
-            <h3>Projects</h3>
-            <div style="height: 400px">
-                <slideshow></slideshow>
-            </div>
-        </div>
-        <div class="p-4">
-            <h3>Information</h3>
-            <a class="btn btn-primary"
-               href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing"
-               target="_blank">Resume</a>
-            <h5>References</h5>
-            <a href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
-            <a 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_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
-            <a 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_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing"
-               target="_blank">CD Project Red</a>
-        </div>
-        <footer class="p-1 bg-dark text-center" style="color: grey">
-            © 2019 ZaksCode
-        </footer>
-    </div>
-</div>

src/app/app.component.ts

@@ -1,19 +1,11 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
-import {AppStore} from './app.store';
-import {Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
 
 @Component({
-  selector: 'app-root',
+    selector: 'app-root',
-  templateUrl: './app.component.html'
+    templateUrl: 'app.component.html'
 })
 export class AppComponent {
-  quote: Observable<string>;
+    set title(title: string) {
-
+        document.getElementsByTagName('title')[0].innerHTML = `Zaks Code${title ? ` - ${title}` : ''}`;
-  constructor(private store: AppStore) {
+    }
-    this.quote = store.quotes.pipe(map(quotes => {
-        let quote = quotes[Math.floor(Math.random() * quotes.length)];
-        return quote.text;
-    }))
-  }
 }

src/app/app.module.ts

@@ -3,27 +3,31 @@ import {NgModule} from '@angular/core';
 import {AngularFireModule} from '@angular/fire';
 import {AngularFirestoreModule, FirestoreSettingsToken} from '@angular/fire/firestore';
 
-import {AppComponent} from './app.component';
+import {HomeComponent} from './home/home.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MaterialModule} from './material.module';
 import {FormsModule} from '@angular/forms';
 import {TypewriterComponent} from './components/typewriter/typewriter.component';
 import {SlideShowComponent} from './components/slideShow/slideShow.component';
 import {environment} from '../environments/environment';
+import {AppComponent} from './app.component';
+import {AppRouting} from './app.routing';
 
 @NgModule({
     declarations: [
         AppComponent,
+        HomeComponent,
         SlideShowComponent,
         TypewriterComponent
     ],
     imports: [
         AngularFireModule.initializeApp(environment.firebase),
         AngularFirestoreModule,
+        AppRouting,
         BrowserModule,
         BrowserAnimationsModule,
         FormsModule,
-        MaterialModule
+        MaterialModule,
     ],
     providers: [
         { provide: FirestoreSettingsToken, useValue: {} }

src/app/app.routing.ts

@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {HomeComponent} from './home/home.component';
+
+@NgModule({
+    imports: [
+        RouterModule.forRoot([
+            {path: '', component: HomeComponent},
+            {path: '**', redirectTo: ''}
+        ])
+    ],
+    exports: [RouterModule]
+})
+export class AppRouting {}

src/app/home/home.component.html

@@ -0,0 +1,60 @@
+<div class="w-100">
+    <div class="container d-flex align-items-center" style="height: 600px">
+        <div class="w-100 text-center">
+            <typewriter [text]="quote | async"></typewriter>
+        </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">
+                        <img src="assets/img/portrait.jpg" width="150px" height="150px" style="border-radius: 50%" alt="Zakary Timson">
+                    </div>
+                    <div>
+                        <h1 class="mb-0">Zakary Timson</h1>
+                        <h5 class="text-muted">FULL STACK SOFTWARE ENGINEER</h5>
+                        <div class="mt-3">
+                            <div><i class="mr-2 fa fa-map-marker-alt"></i> London Ontario, Canada</div>
+                            <div><i class="mr-2 fa fa-envelope"></i> <a href="mailto:zaktimson@gmail.com">zaktimson@gmail.com</a>
+                            </div>
+                            <div><i class="mr-2 fab fa-github"></i> <a href="https://github.com/ztimson"
+                                                                       target="_blank">github.com/ztimson</a></div>
+                        </div>
+                    </div>
+                </mat-card-content>
+            </mat-card>
+        </div>
+        <div class="p-4">
+            <h3>About Zak</h3>
+            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">
+            <h3>Projects</h3>
+            <div style="height: 400px">
+                <slideshow></slideshow>
+            </div>
+        </div>
+        <div class="p-4">
+            <h3>Information</h3>
+            <a class="btn btn-primary"
+               href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing"
+               target="_blank">Resume</a>
+            <h5>References</h5>
+            <a href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
+            <a 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_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
+            <a 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_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing"
+               target="_blank">CD Project Red</a>
+        </div>
+        <footer class="p-1 bg-dark text-center" style="color: grey">
+            © 2019 ZaksCode
+        </footer>
+    </div>
+</div>

src/app/home/home.component.ts

@@ -0,0 +1,19 @@
+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 {
+  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;
+    }))
+  }
+}

yarn.lock

@@ -173,6 +173,11 @@
   dependencies:
     tslib "^1.9.0"
 
+"@angular/fire@~5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@angular/fire/-/fire-5.1.2.tgz#aaf98a3bad27bacbfe422d951bfa7c591abca775"
+  integrity sha512-XTpS2+Vnw+poY5FmybOH5+iIgorIHnLH1/r/Zltt7iigvxajsTBPKD9wvxsT0/CtsDIOPB2ql9q0SJVK08iD1A==
+
 "@angular/forms@~7.2.0":
   version "7.2.12"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-7.2.12.tgz#0ffbbdb2b6fd19bf61cf09e1911d2cbc82b88399"