about page (#198)

* about page: humble beginnings (#197)

* The beginnings of the About page

* Updated PinkPalette with some Pantone TCX colors

* Updated about.component.html

* fixed build

* refactored about to current standards (v0.6.3) (#199)

* deleted accidental files

* renamed files to `about-page`

* brought the existing about page up to current standards

* and some padding for good taste

* refactored about to current standards (v0.7.0) (#202)

* reimagined the about page layout
added an (un)professional headhot to src control

* fix linting

* flagged the about page

* removed comment

* reverted pink palette (#203)

src/app/app-routing.module.ts

@@ -12,6 +12,10 @@ const routes: Routes = [
 		canActivateChild: [ FeatureFlagGuard ],
 		children: [
 			{
+				path: 'about',
+				loadChildren: () => import('src/app/pages/about/about-page.module')
+					.then(module => module.AboutPageModule),
+			}, {
 				path: 'background',
 				loadChildren: () => import('src/app/pages/background/background-page.module')
 					.then(module => module.BackgroundPageModule),

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AboutPageComponent } from 'src/app/pages/about/about-page.component';
+
+const routes: Routes = [
+	{
+		path: '',
+		component: AboutPageComponent,
+		data: {
+			featureFlag: true,
+			title: 'about me',
+		},
+	},
+];
+
+@NgModule({
+	imports: [ RouterModule.forChild(routes) ],
+	exports: [ RouterModule ],
+})
+export class AboutPageRoutingModule { }

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

@@ -0,0 +1,33 @@
+<mat-card>
+	<mat-card-header>
+		<mat-card-title>
+			<dyslexic-text text="NATHANIEL HOLDEN"></dyslexic-text>
+		</mat-card-title>
+	</mat-card-header>
+
+	<img mat-card-image
+		 src="assets/images/climbing_the_castle.jpg"
+		 alt="climbing the face of the castle"/>
+</mat-card>
+
+<mat-card>
+	<mat-card-header>
+		<mat-card-title>
+			<dyslexic-text text="ABOUT ME"></dyslexic-text>
+		</mat-card-title>
+	</mat-card-header>
+	<mat-card-content>
+		<span>&#123;</span>
+
+		<small>name:</small>
+		<dyslexic-text text="Nathaniel Holden"></dyslexic-text>
+
+		<small>title:</small>
+		<dyslexic-text text="Software Engineer"></dyslexic-text>
+
+		<small>location:</small>
+		<dyslexic-text text="Denver, CO"></dyslexic-text>
+
+		<span>&#125;</span>
+	</mat-card-content>
+</mat-card>

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

@@ -0,0 +1,50 @@
+@use 'src/styles/mixins/page-layout' as *;
+
+:host {
+	@include page-layout(500px);
+
+	.mat-card {
+		overflow: visible;
+
+		.mat-card-header {
+			position: absolute;
+			width: 100%;
+
+			::ng-deep .mat-card-header-text {
+				width: calc(100% - 32px);
+			}
+
+			.mat-card-title {
+				margin-top: -1.75rem;
+				font-weight: bold;
+				text-align: center;
+			}
+		}
+
+		.mat-card-image {
+			margin: -16px -16px -22px;
+			border-radius: inherit;
+		}
+
+		.mat-card-content {
+			display: grid;
+			grid-template-columns: max-content auto;
+			column-gap: 1.5rem;
+
+			font-size: 1.25rem;
+			line-height: 1.25rem;
+
+			> span, > small {
+				grid-column: 1;
+			}
+
+			> small {
+				margin-left: 1.5rem;
+			}
+
+			> dyslexic-text {
+				grid-column: 2;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+	selector: 'about-page',
+	templateUrl: './about-page.component.html',
+	styleUrls: [ './about-page.component.scss' ],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AboutPageComponent { }

src/app/pages/about/about-page.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 { AboutPageRoutingModule } from 'src/app/pages/about/about-page-routing.module';
+import { AboutPageComponent } from 'src/app/pages/about/about-page.component';
+
+@NgModule({
+	declarations: [
+		AboutPageComponent,
+	],
+	imports: [
+		CoreModule,
+		DyslexicTextModule,
+	],
+	exports: [
+		AboutPageRoutingModule,
+	],
+})
+export class AboutPageModule { }