Made my site pretty
This commit is contained in:
ztimson
@@ -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
8
src/app/components/console/console.component.html
Normal 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
32
src/app/components/console/console.component.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 { }
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
BIN
src/assets/img/ZaksCode.gif
Normal file
BIN
src/assets/img/ZaksCode.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
src/assets/img/ZaksCode.png
Normal file
BIN
src/assets/img/ZaksCode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 595 KiB |
BIN
src/assets/img/keyboard-in-hand.jpg
Normal file
BIN
src/assets/img/keyboard-in-hand.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
@@ -6,9 +6,18 @@
|
||||
<base href="/">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name=”robots” content=”index,nofollow” />
|
||||
<meta property=”og:type” content=”website” />
|
||||
<meta property=”og:title” content=”Zakary Timson” />
|
||||
<meta property=”og:description” content=”Cloud Architecture & Software Engineering” />
|
||||
<meta property=”og:image” content=”https://zakscode.com/assets/img/ZaksCode.png” />
|
||||
<meta property=”og:url” content=”https://zakscode.com” />
|
||||
<meta property=”og:site_name” content=”ZaksCode” />
|
||||
<meta name=”twitter:title” content=”Zakary Timson” />
|
||||
<meta name=”twitter:description” content=”Cloud Architecture & Software Engineering” />
|
||||
<meta name=”twitter:image” content=”https://zakscode.com/assets/img/ZaksCode.png” />
|
||||
|
||||
<link rel="icon" type="image/png" href="assets/img/logo.png">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user