Added some content
This commit is contained in:
parent
63de2f5019
commit
214b590e8b
@ -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
|
||||
|
||||
|
||||
@ -1,64 +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"></typewriter>
|
||||
<div class="container d-flex align-items-center" style="height: 600px">
|
||||
<div class="w-100 text-center">
|
||||
<typewriter [text]="quote"></typewriter>
|
||||
</div>
|
||||
</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/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 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>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</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 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>
|
||||
|
||||
|
||||
@ -1,24 +1,27 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {NgModule} from '@angular/core';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import {AppComponent} from './app.component';
|
||||
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: [
|
||||
AppComponent,
|
||||
TypewriterComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
FormsModule,
|
||||
MaterialModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
declarations: [
|
||||
AppComponent,
|
||||
SlideShowComponent,
|
||||
TypewriterComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
FormsModule,
|
||||
MaterialModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
7
src/app/components/slideShow/slide.ts
Normal file
7
src/app/components/slideShow/slide.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import {SafeUrl} from '@angular/platform-browser';
|
||||
|
||||
export interface Slide {
|
||||
title: string
|
||||
description: string
|
||||
image: string | SafeUrl
|
||||
}
|
||||
22
src/app/components/slideShow/slideShow.component.html
Normal file
22
src/app/components/slideShow/slideShow.component.html
Normal file
@ -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>
|
||||
10
src/app/components/slideShow/slideShow.component.ts
Normal file
10
src/app/components/slideShow/slideShow.component.ts
Normal file
@ -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[];
|
||||
}
|
||||
21
src/app/components/typewriter/typewriter.component.ts
Normal file
21
src/app/components/typewriter/typewriter.component.ts
Normal file
@ -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>;
|
||||
}
|
||||
@ -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)))
|
||||
}
|
||||
}
|
||||
BIN
src/assets/img/DCP00222.jpg
Normal file
BIN
src/assets/img/DCP00222.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 595 KiB After Width: | Height: | Size: 595 KiB |
|
Before Width: | Height: | Size: 123 KiB After Width: | Height: | Size: 123 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user