ztimson/zakscode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Made my site pretty

Browse Source
This commit is contained in:
ztimson
2020-03-06 14:27:47 -05:00
parent f3eb3171ed
commit 200574099b
15 changed files with 145 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@ -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

8
src/app/components/console/console.component.html Normal file
View File

@ -0,0 +1,8 @@
<div clas="p-1" style="background-color: #353535; color: #fff;">
<div class="pl-2 pt-2" style="height: 10rem;">
<h4 *ngFor="let o of output">{{o}}</h4>
</div>
<div class="pl-2 pb-2">
<h4 class="d-inline mr-2" style="color: #22ff22">></h4><typewriter [text]="input" (done)="enter()"></typewriter>
</div>
</div>

32
src/app/components/console/console.component.ts Normal file
View File

@ -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;
}
}

34
src/app/components/typewriter/typewriter.component.scss
View File

@ -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; }
}
}

20
src/app/components/typewriter/typewriter.component.ts
View File

@ -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: `
<div class="d-inline typewriter"><h1>{{output | async}}</h1></div>`,
<div class="d-inline typewriter"><h4 class="d-inline">{{output | async}}</h4></div>`,
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<void>();
output: Observable<string>;
}

69
src/app/home/home.component.html
View File

@ -1,11 +1,7 @@
<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">
<div class="w-100" style="height: calc(100vh - 140px)"></div>
<div class="container p-0 bg-white">
<div class="px-4" style="background-color: #732222">
<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">
@ -23,44 +19,49 @@
</div>
</mat-card-content>
</mat-card>
</div><div class="p-4">
<h3>Disclaimer</h3>
This site is currently under complete renovations as it moves from Django to Angular + Firebase
</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.
<console></console>
</div>
<div class="p-4 text-white" style="background-color: #1c7fc1">
<div class="p-4">
<h3>About Me</h3>
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<p>
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.
</p>
</div>
<div class="flex-shrink-1 p-3">
<img src="assets/img/keyboard-in-hand.jpg" height="150px" width="auto" style="border-radius: 50%">
</div>
</div>
</div>
<!-- <div class="p-4 text-white" style="background-color: #1c7fc1">
<h3>Projects</h3>
<div style="height: 400px">
<slideshow></slideshow>
</div>
</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>
<br>
<a href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
<br>
<a href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
<br>
<a href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
<br>
<a href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing"
target="_blank">CD Project Red</a>
<h3>Resume & References</h3>
<a class="btn btn-outline-primary" href="https://docs.google.com/document/d/1xP6HASPerXKMJM_x6-PhHVvoYgq-Hym5IRO7g47EX8o/edit?usp=sharing" target="_blank">Resume</a>
<div class="ml-3 btn-group" role="group" aria-label="Basic example">
<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyNWw0UDFzT0ZTeVU/view?usp=sharing" target="_blank">Manager</a>
<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyaFBhcXBEaGp6YWc/view?usp=sharing" target="_blank">Contractor</a>
<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyM0YtTWcxQzk0dEE/view?usp=sharing" target="_blank">Teacher</a>
<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyX2owd0xURjh3RlE/view?usp=sharing" target="_blank">Principle</a>
<a class="btn btn-outline-info" href="https://drive.google.com/file/d/0B_iz0vkzXmAyMHdaM1BjZ1MwbWxva2lOY290NElwanN4b2JV/view?usp=sharing" target="_blank">CD Project Red</a>
</div>
</div>
<footer class="p-1 bg-dark text-center" style="color: grey">
Copyright © Zakary Timson 2019 | All Rights Reserved
</footer>
<div class="skirt"></div>
</div>
</div>

14
src/app/home/home.component.ts
View File

@ -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<string>;
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 { }