diff --git a/package.json b/package.json index cb4cc2a..b623695 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6e3513d..9844fbd 100644 --- a/src/app/app.module.ts +++ b/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 diff --git a/src/app/components/console/console.component.html b/src/app/components/console/console.component.html new file mode 100644 index 0000000..d8b087d --- /dev/null +++ b/src/app/components/console/console.component.html @@ -0,0 +1,8 @@ +
+
+

{{o}}

+
+
+

>

+
+
diff --git a/src/app/components/console/console.component.ts b/src/app/components/console/console.component.ts new file mode 100644 index 0000000..4d64d15 --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/typewriter/typewriter.component.scss b/src/app/components/typewriter/typewriter.component.scss index 8c8e97b..7fba207 100644 --- a/src/app/components/typewriter/typewriter.component.scss +++ b/src/app/components/typewriter/typewriter.component.scss @@ -1,22 +1,22 @@ @import url("https://fonts.googleapis.com/css?family=Arvo"); -.typewriter h1 { - color: white; - overflow: hidden; - border-right: .15em solid white; - margin: 0 auto; - letter-spacing: .15em; - animation: blink-caret 1s step-end infinite; - display: inline; - font-family: 'Arvo', serif; +.typewriter { + h1,h2,h3,h4,h5,h6 { + overflow: hidden; + margin: 0 auto; + letter-spacing: .15em; + animation: blink-caret 1s step-end infinite; + display: inline; + font-family: 'Arvo', serif; + } - @keyframes typing { - from { width: 0 } - to { width: 100% } - } + @keyframes typing { + from { width: 0 } + to { width: 100% } + } - @keyframes blink-caret { - from, to { border-color: transparent } - 50% { border-color: white; } - } + @keyframes blink-caret { + from, to { border-right: .15em solid; } + 50% { border: none; } + } } diff --git a/src/app/components/typewriter/typewriter.component.ts b/src/app/components/typewriter/typewriter.component.ts index 564603c..a78e939 100644 --- a/src/app/components/typewriter/typewriter.component.ts +++ b/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: ` -

{{output | async}}

`, +

{{output | async}}

`, styleUrls: ['typewriter.component.scss'] }) export class TypewriterComponent { @Input() delay = 1500; @Input() speed = 100; - - @Input() - set text(text: string) { - this.output = timer(this.delay, this.speed).pipe(filter(n => n <= (text.length || 0)), map(n => text.slice(0, n))); + @Input() set text(text: string) { + this.output = timer(this.delay, this.speed).pipe( + filter(n => n <= (text.length || 0)), + tap(n => { + if(n == text.length) this.done.emit(); + }), + map(n => text.slice(0, n)) + ); } + @Output() done = new EventEmitter(); + output: Observable; } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 7666923..51caac8 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,11 +1,7 @@
-
-
- -
-
-
-
+
+
+
@@ -23,44 +19,49 @@
-
-

Disclaimer

- This site is currently under complete renovations as it moves from Django to Angular + Firebase
-

About Zak

- 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. +
-
+
+

About Me

+
+
+

+ 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. +

+
+
+ +
+
+ +
+
-

Information

- Resume -
References
- Manager -
- Contractor -
- Teacher -
- Principle -
- CD Project Red +

Resume & References

+ Resume +
+ Manager + Contractor + Teacher + Principle + CD Project Red +
Copyright © Zakary Timson 2019 | All Rights Reserved
+
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index d77ffb4..ff94605 100644 --- a/src/app/home/home.component.ts +++ b/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 { - quote: Observable; - - constructor(private store: AppStore) { - this.quote = store.quotes.pipe(map(quotes => { - let quote = quotes[Math.floor(Math.random() * quotes.length)]; - return quote.text; - })) - } -} +export class HomeComponent { } diff --git a/src/assets/img/DCP00222.jpg b/src/assets/img/DCP00222.jpg deleted file mode 100644 index 09ed203..0000000 Binary files a/src/assets/img/DCP00222.jpg and /dev/null differ diff --git a/src/assets/img/ZaksCode.gif b/src/assets/img/ZaksCode.gif new file mode 100644 index 0000000..e8c8ab9 Binary files /dev/null and b/src/assets/img/ZaksCode.gif differ diff --git a/src/assets/img/ZaksCode.png b/src/assets/img/ZaksCode.png new file mode 100644 index 0000000..3fa3ed9 Binary files /dev/null and b/src/assets/img/ZaksCode.png differ diff --git a/src/assets/img/background.jpg b/src/assets/img/background.jpg deleted file mode 100644 index b31e366..0000000 Binary files a/src/assets/img/background.jpg and /dev/null differ diff --git a/src/assets/img/keyboard-in-hand.jpg b/src/assets/img/keyboard-in-hand.jpg new file mode 100644 index 0000000..a2a87be Binary files /dev/null and b/src/assets/img/keyboard-in-hand.jpg differ diff --git a/src/index.html b/src/index.html index ce11117..b1e71fc 100644 --- a/src/index.html +++ b/src/index.html @@ -6,9 +6,18 @@ + + + + + + + + + + + - - diff --git a/src/styles.scss b/src/styles.scss index 02fd6db..78233f3 100644 --- a/src/styles.scss +++ b/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; +} \ No newline at end of file