Setup routing
This commit is contained in:
@@ -1,60 +1 @@
|
||||
<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%">
|
||||
</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>
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
@@ -1,19 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
import {AppStore} from './app.store';
|
||||
import {Observable} from 'rxjs';
|
||||
import {map} from 'rxjs/operators';
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html'
|
||||
selector: 'app-root',
|
||||
templateUrl: 'app.component.html'
|
||||
})
|
||||
export class AppComponent {
|
||||
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;
|
||||
}))
|
||||
}
|
||||
set title(title: string) {
|
||||
document.getElementsByTagName('title')[0].innerHTML = `Zaks Code${title ? ` - ${title}` : ''}`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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: {} }
|
||||
|
||||
14
src/app/app.routing.ts
Normal file
14
src/app/app.routing.ts
Normal file
@@ -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 {}
|
||||
60
src/app/home/home.component.html
Normal file
60
src/app/home/home.component.html
Normal file
@@ -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>
|
||||
19
src/app/home/home.component.ts
Normal file
19
src/app/home/home.component.ts
Normal file
@@ -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;
|
||||
}))
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user