about page: humble beginnings (#197)

* The beginnings of the About page

* Updated PinkPalette with some Pantone TCX colors

* Updated about.component.html

* fixed build

src/app/app-routing.module.ts

@@ -4,8 +4,12 @@ import { RouterModule, Routes } from '@angular/router';
 const routes: Routes = [
 	{
 		path: '',
-		redirectTo: '/snek',
+		redirectTo: '/about',
 		pathMatch: 'full'
+	}, {
+		path: 'about',
+		loadChildren: () => import('./pages/about/about.module')
+			.then(module => module.AboutModule),
 	}, {
 		path: 'background',
 		loadChildren: () => import('src/app/pages/background/background-page.module')

src/app/core/colors/models/color-palettes/color-palettes.constant.ts

@@ -29,10 +29,10 @@ export const PinkPalette = new ColorPalette(
 	Color.fromString('#fdb4c8'),
 	Color.fromString('#fda1ba'),
 	Color.fromString('#fc8eac'),
-	Color.fromString('#fb7b9e'),
-	Color.fromString('#fa4274'),
-	Color.fromString('#f92e66'),
-	Color.fromString('#d4063e'),
+	Color.fromString('#e96a97'), // Pantone 16-2126 TCX [Azalea Pink]
+	Color.fromString('#b61c50'), // Pantone 18-1950 TCX [Jazzy]
+	Color.fromString('#a52350'), // Pantone 19-2039 TCX [Granita]
+	Color.fromString('#77202f'), // Pantone 19-1652 TCX [Rhubarb]
 	'pink-palette',
 	'Flamingo',
 );

src/app/pages/about/about-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AboutComponent } from 'src/app/pages/about/about.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		component: AboutComponent,
+	},
+];
+
+@NgModule({
+	imports: [ RouterModule.forChild(routes) ],
+	exports: [ RouterModule ]
+})
+export class AboutRoutingModule { }

src/app/pages/about/about.component.html

@@ -0,0 +1,45 @@
+<mat-card class="about-me">
+	<mat-card-header>
+		<mat-card-title>
+			<div mat-card-avatar title="Its me! Well, you probably don't think so, but I sure do."></div>
+<!--			<img mat-card-image src="https://lh3.googleusercontent.com/a-/AOh14GjpIqEggqEXg631mIKBfdJ6mne8ZWgcG8HgILWMQg=s0"-->
+<!--				 alt="Its me! Well, you probably don't think so, but I sure do.">-->
+			<dyslexic-text [text]="'About Me'"></dyslexic-text>
+		</mat-card-title>
+	</mat-card-header>
+	<mat-card-content>
+
+		<mat-card>
+			<mat-card-content>
+				<div>&#123;</div>
+				<div><dyslexic-text [text]="'name: Nathaniel Holden'"></dyslexic-text></div>
+				<div><dyslexic-text [text]="'title: Software Engineer'"></dyslexic-text></div>
+				<div><dyslexic-text [text]="'location: Upstate New York'"></dyslexic-text></div>
+				<div>&#125;</div>
+			</mat-card-content>
+		</mat-card>
+
+		<p>
+			<dyslexic-text [text]="'When you hit the gong, it sends a message to an arduino listener that strikes the gong.'"></dyslexic-text>
+		</p>
+	</mat-card-content>
+</mat-card>
+
+<!--<mat-card>-->
+<!--	<mat-card-header>-->
+<!--		<mat-icon [svgIcon]="GongIcon"></mat-icon>-->
+<!--		<mat-card-title>-->
+<!--			<dyslexic-text [text]="'gong'" [suffix]="'.io'"></dyslexic-text>-->
+<!--		</mat-card-title>-->
+<!--	</mat-card-header>-->
+<!--	<mat-card-content>-->
+<!--		<img mat-card-image src="https://images.reverb.com/image/upload/s&#45;&#45;h6GEum9o&#45;&#45;/f_auto,t_large/v1580782954/kxhgkqs4mfgopbbpg43b.jpg"-->
+<!--			 alt="Its me! Well, you probably don't think so, but I sure do.">-->
+<!--		<p>-->
+<!--			<dyslexic-text [text]="'The gong is real. It is a real gong.'"></dyslexic-text>-->
+<!--		</p>-->
+<!--		<p>-->
+<!--			<dyslexic-text [text]="'When you hit the gong, it sends a message to an arduino listener that strikes the gong.'"></dyslexic-text>-->
+<!--		</p>-->
+<!--	</mat-card-content>-->
+<!--</mat-card>-->

src/app/pages/about/about.component.scss

@@ -0,0 +1,46 @@
+:host {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-around;
+
+	height: 100%;
+	width: 100%;
+	overflow: auto;
+
+	.mat-card-header {
+		width: 100%;
+
+		.mat-card-title {
+			justify-content: space-around;
+
+			dyslexic-text {
+				width: 100%;
+				text-align: center;
+				font-size: 48px;
+			}
+		}
+	}
+
+	.mat-card-avatar {
+		background-image: url('https://lh3.googleusercontent.com/a-/AOh14GjpIqEggqEXg631mIKBfdJ6mne8ZWgcG8HgILWMQg=s0');
+		background-size: cover;
+		display: inline-flex;
+		width: 10rem;
+		height: 10rem;
+	}
+
+	mat-card {
+		min-width: 300px;
+		flex-grow: 1;
+	}
+
+	.about-me {
+		flex-basis: 15%;
+	}
+
+	mat-icon {
+		order: -1;
+		height: 2.5rem;
+		width: 2.5rem;
+	}
+}

src/app/pages/about/about.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+	let component: AboutComponent;
+	let fixture: ComponentFixture<AboutComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [ AboutComponent ]
+		})
+			.compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(AboutComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/pages/about/about.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-about',
+	templateUrl: './about.component.html',
+	styleUrls: [ './about.component.scss' ]
+})
+export class AboutComponent implements OnInit {
+
+	constructor() {
+	}
+
+	ngOnInit(): void {
+	}
+
+}

src/app/pages/about/about.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CoreModule } from 'src/app/core/core.module';
+import { DyslexicTextModule } from 'src/app/features/dyslexic-text/dyslexic-text.module';
+import { AboutRoutingModule } from 'src/app/pages/about/about-routing.module';
+import { AboutComponent } from 'src/app/pages/about/about.component';
+
+@NgModule({
+	declarations: [
+		AboutComponent,
+	],
+	imports: [
+		CoreModule,
+		DyslexicTextModule,
+	],
+	exports: [
+		AboutRoutingModule,
+	],
+})
+export class AboutModule { }

src/app/pages/gong/gong.component.scss

@@ -0,0 +1,31 @@
+:host {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-around;
+
+	height: 100%;
+	width: 100%;
+	overflow: auto;
+
+	mat-card {
+		min-width: 300px;
+		flex-grow: 1;
+	}
+
+	mat-card-header {
+		height: 0;
+		position: -webkit-sticky; /* Safari */
+		position: sticky;
+		top: 1rem;
+	}
+
+	.project-stack {
+		flex-basis: 15%;
+	}
+
+	mat-icon {
+		order: -1;
+		height: 2.5rem;
+		width: 2.5rem;
+	}
+}

src/app/pages/page-not-found/page-not-found.component.scss

@@ -0,0 +1,32 @@
+:host {
+	> mat-card {
+		max-width: 800px;
+		margin: 5rem auto;
+
+		> mat-card-content {
+			display: flex;
+			flex-flow: column nowrap;
+			align-items: center;
+			justify-content: center;
+
+			> mat-icon {
+				width: 15rem;
+				height: 15rem;
+
+				animation-name: ckw;
+				animation-duration: 5s;
+				animation-iteration-count: infinite;
+				transform-origin: 50% 50%;
+			}
+		}
+	}
+}
+
+@keyframes ckw {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}