Added some content

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 

src/app/app.component.html

@@ -1,64 +1,60 @@
 <div class="w-100">
-  <div class="container d-flex align-items-center" style="height: 600px">
+    <div class="container d-flex align-items-center" style="height: 600px">
-    <div class="w-100 text-center">
+        <div class="w-100 text-center">
-      <typewriter [text]="quote"></typewriter>
+            <typewriter [text]="quote"></typewriter>
+        </div>
     </div>
-  </div>
+    <div class="container mb-md-5 p-0 bg-white">
-  <div class="container mb-md-5 p-0 bg-white">
+        <div class="px-4" style="background-color: #1c7fc1">
-    <div class="px-4" style="background-color: #1c7fc1">
+            <mat-card style="max-width: 600px; transform: translateY(-33%)">
-      <mat-card style="max-width: 600px; transform: translateY(-33%)">
+                <mat-card-content class="d-flex p-3">
-        <mat-card-content class="d-flex p-3">
+                    <div class="d-none d-md-block pr-3">
-          <div class="d-none d-md-block pr-3">
+                        <img src="assets/img/portrait.jpg" width="150px" height="150px" style="border-radius: 50%">
-            <img src="assets/portrait.jpg" width="150px" height="150px" style="border-radius: 50%">
+                    </div>
-          </div>
+                    <div>
-          <div>
+                        <h1 class="mb-0">Zakary Timson</h1>
-            <h1 class="mb-0">Zakary Timson</h1>
+                        <h5 class="text-muted">FULL STACK SOFTWARE ENGINEER</h5>
-            <h5 class="text-muted">FULL STACK SOFTWARE ENGINEER</h5>
+                        <div class="mt-3">
-            <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-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><i class="mr-2 fa fa-envelope"></i> <a href="mailto:zaktimson@gmail.com">zaktimson@gmail.com</a></div>
+                            </div>
-              <div><i class="mr-2 fab fa-github"></i> <a href="https://github.com/ztimson" target="_blank">github.com/ztimson</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>
-        </mat-card-content>
+        <div class="p-4">
-      </mat-card>
+            <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 class="p-4">
-      <h3>About Me</h3>
-      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
-      aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
-      enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
-      ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-      adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-      voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
-      aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
-      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
-    </div>
-    <div class="p-4">
-      <h3>Projects</h3>
-      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
-      aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
-      enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
-      ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-      adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-      voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
-      aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
-      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
-    </div>
-    <div class="p-4">
-      <h3>References</h3>
-      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
-      aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
-      enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
-      ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
-      adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-      voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
-      aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
-      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
-    </div>
-    <footer class="p-1 bg-dark text-center" style="color: grey">
-      © 2019 ZaksCode
-    </footer>
-  </div>
 </div>
-

src/app/app.module.ts

@@ -1,24 +1,27 @@
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MaterialModule} from './material.module';
 import {FormsModule} from '@angular/forms';
-import {TypewriterComponent} from './typewriter/typewriter.component';
+import {TypewriterComponent} from './components/typewriter/typewriter.component';
+import {SlideShowComponent} from './components/slideShow/slideShow.component';
 
 @NgModule({
-  declarations: [
+    declarations: [
-    AppComponent,
+        AppComponent,
-    TypewriterComponent
+        SlideShowComponent,
-  ],
+        TypewriterComponent
-  imports: [
+    ],
-    BrowserModule,
+    imports: [
-    BrowserAnimationsModule,
+        BrowserModule,
-    FormsModule,
+        BrowserAnimationsModule,
-    MaterialModule
+        FormsModule,
-  ],
+        MaterialModule
-  providers: [],
+    ],
-  bootstrap: [AppComponent]
+    providers: [],
+    bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/components/slideShow/slide.ts

@@ -0,0 +1,7 @@
+import {SafeUrl} from '@angular/platform-browser';
+
+export interface Slide {
+    title: string
+    description: string
+    image: string | SafeUrl
+}

src/app/components/slideShow/slideShow.component.html

@@ -0,0 +1,22 @@
+<div id="carouselIndicators" class="carousel slide h-100" data-ride="carousel">
+    <ol class="carousel-indicators">
+        <li *ngFor="let ignore of slides; let i = index" data-target="#carouselIndicators" [attr.data-slide-to]="i"></li>
+    </ol>
+    <div class="carousel-inner">
+        <div *ngFor="let slide of slides" class="carousel-item">
+            <img class="d-block w-100" [src]="slide.image" alt="project.name">
+            <div class="carousel-caption d-none d-md-block">
+                <h5>{{slide.title}}</h5>
+                <p>{{slide.description}}</p>
+            </div>
+        </div>
+    </div>
+    <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+    </a>
+    <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+    </a>
+</div>

src/app/components/slideShow/slideShow.component.ts

@@ -0,0 +1,10 @@
+import {Component, Input} from '@angular/core';
+import {Slide} from './slide';
+
+@Component({
+  selector: 'slideshow',
+  templateUrl: 'slideShow.component.html'
+})
+export class SlideShowComponent {
+    @Input() slides: Slide[];
+}

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

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

src/app/typewriter/typewriter.component.ts

@@ -1,18 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {Observable, timer} from 'rxjs';
-import {filter, map} from 'rxjs/operators';
-
-@Component({
-  selector: 'typewriter',
-  template: `<div class="d-inline typewriter"><h1>{{output | async}}</h1></div>`,
-  styleUrls: ['typewriter.component.scss']
-})
-export class TypewriterComponent {
-  @Input() text: string;
-
-  output: Observable<string>;
-
-  constructor() {
-    this.output = timer(1500, 100).pipe(filter(n => n <= this.text.length), map(n => this.text.slice(0, n)))
-  }
-}

src/styles.scss

@@ -8,5 +8,5 @@ html, body {
 body {
   margin: 0;
   font-family: Roboto, sans-serif;
-  background: #ffffff url("/assets/background.jpg") no-repeat fixed center;
+  background: #ffffff url("/assets/img/background.jpg") no-repeat fixed center;
 }