The site is more or less working. Some weirdness with animations though

2018-10-20 20:11:33 -04:00
parent c6f5c3d86e
commit 67c314924f
48 changed files with 1337 additions and 71 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,34 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+### Angular ###
+### Angular ##
+## compiled output
+/dist
+/tmp
+/app/**/*.js
+/app/**/*.js.map
+
+# dependencies
+/node_modules
+/bower_components
+
+# IDEs and editors
+/.idea
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+
--- a/README.md
+++ b/README.md
@@ -1,27 +0,0 @@
-# TestWebsite
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.1.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/package-lock.json
+++ b/package-lock.json
@@ -124,6 +124,14 @@
        "tslib": "^1.9.0"
      }
    },
+    "@angular/cdk": {
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.4.7.tgz",
+      "integrity": "sha512-18x0U66fLD5kGQWZ9n3nb75xQouXlWs7kUDaTd8HTrHpT1s2QIAqlLd1KxfrYiVhsEC2jPQaoiae7VnBlcvkBg==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
    "@angular/cli": {
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.2.1.tgz",
@@ -357,6 +365,23 @@
      "integrity": "sha512-L6upXuyO42Z5XhtvbDoDuQEmXEOdSYeGOBmXSxb3ywb/0eh8kHk1Xft+8aaKKtazYjol0t+M+DlZgehqvk4vEA==",
      "dev": true
    },
+    "@angular/material": {
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.4.7.tgz",
+      "integrity": "sha512-SdNx7Xovi24Kw9eU6lkLhY/7f2M7L9F+/uh6XuPr4jbGgCUVVpeeVI5ztZhsZRbj1sN+/r1p5w8u62apWWl5Ww==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+          "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+          "optional": true
+        }
+      }
+    },
    "@angular/platform-browser": {
      "version": "6.1.7",
      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.1.7.tgz",
@@ -9826,6 +9851,11 @@
        "minimalistic-assert": "^1.0.0"
      }
    },
+    "web-animations-js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.1.tgz",
+      "integrity": "sha1-Om2bwVGWN3qQ+OKAP6UmIWWwRRA="
+    },
    "webdriver-js-extender": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -11,17 +11,20 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^6.1.0",
+    "@angular/animations": "^6.1.7",
+    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
+    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.2.0",
+    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,6 @@
-<!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+  <app-toolbar></app-toolbar>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<main [@routerTransition]="getState(o)">
+  <router-outlet #o="outlet"></router-outlet>
+</main>
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,10 +1,22 @@
-import { TestBed, async } from '@angular/core/testing';
+import {async, TestBed} from '@angular/core/testing';
 import {AppComponent} from './app.component';
+import {ToolbarComponent} from "./toolbar/toolbar.component";
+import {RouterTestingModule} from "@angular/router/testing";
+import {MatSidenavModule, MatToolbarModule} from "@angular/material";
+import {NoopAnimationsModule} from "@angular/platform-browser/animations";
+
 describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        MatToolbarModule,
+        MatSidenavModule,
+        NoopAnimationsModule,
+      ],
      declarations: [
-        AppComponent
+        AppComponent,
+        ToolbarComponent
      ],
    }).compileComponents();
  }));
@@ -13,15 +25,4 @@ describe('AppComponent', () => {
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
-  it(`should have as title 'TestWebsite'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('TestWebsite');
-  }));
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to TestWebsite!');
-  }));
 });
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,44 @@
 import {Component} from '@angular/core';
+import {RouterOutlet} from "@angular/router";
+import {animate, query, style, transition, trigger} from "@angular/animations";
+
+export const routerTransition = trigger('routerTransition', [
+  // The '* => *' will trigger the animation to change between any two states
+  transition('* => *', [
+    // The query function has three params.
+    // First is the event, so this will apply on entering or when the element is added to the DOM.
+    // Second is a list of styles or animations to apply.
+    // Third we add a config object with optional set to true, this is to signal
+    // angular that the animation may not apply as it may or may not be in the DOM.
+    query(
+      ':enter',
+      [style({opacity: 0})],
+      {optional: true}
+    ),
+    query(
+      ':leave',
+      // here we apply a style and use the animate function to apply the style over 0.3 seconds
+      [style({opacity: 1}), animate('0.3s', style({opacity: 0}))],
+      {optional: true}
+    ),
+    query(
+      ':enter',
+      [style({opacity: 0}), animate('0.3s', style({opacity: 1}))],
+      {optional: true}
+    )
+  ])
+]);

@Component({
  selector: 'app-root',
+  animations: [routerTransition],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'TestWebsite';
+
+  getState(outlet: RouterOutlet) {
+    return outlet.activatedRouteData.state
  }
+}
+
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,15 +2,44 @@ import { BrowserModule } from '@angular/platform-browser';
 import {NgModule} from '@angular/core';

 import {AppComponent} from './app.component';
+import {MatSidenavModule, MatToolbarModule} from "@angular/material";
+import {ToolbarComponent} from './toolbar/toolbar.component';
+import {RouterModule, Routes} from "@angular/router";
+import {ResumeComponent} from './resume/resume.component';
+import {ContactComponent} from './contact/contact.component';
+import {HomeComponent} from './home/home.component';
+import {ProjectsComponent} from './projects/projects.component';
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import { ProjectKeywordPipe } from './project-keyword.pipe';
+
+const appRoutes: Routes = [
+  {path: 'resume', component: ResumeComponent, data: {state: 'resume'}},
+  {path: 'projects', component: ProjectsComponent, data: {state: 'project'}},
+  {path: 'contact', component: ContactComponent, data: {state: 'contact'}},
+  {path: 'home', component: HomeComponent, data: {state: 'home'}},
+  {path: '', pathMatch: 'full', redirectTo: 'home'}
+];

@NgModule({
  declarations: [
-    AppComponent
+    AppComponent,
+    ToolbarComponent,
+    ResumeComponent,
+    ContactComponent,
+    HomeComponent,
+    ProjectsComponent,
+    ProjectKeywordPipe,
  ],
  imports: [
-    BrowserModule
+    RouterModule.forRoot(appRoutes),
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatToolbarModule,
+    MatSidenavModule,
+    RouterModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}
--- a/src/app/contact/contact.component.css
+++ b/src/app/contact/contact.component.css
@@ -0,0 +1,26 @@
+.icon-text {
+  margin: 0 8px;
+  line-height: 32px
+}
+
+.icon {
+  height: 32px;
+}
+
+.icon-layout {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 1em .5em 1em .5em;
+  padding: .5em;
+  -webkit-transition: color 300ms;
+  -moz-transition: color 300ms;
+  -ms-transition: color 300ms;
+  -o-transition: color 300ms;
+  transition: color 300ms;
+}
+
+.icon-layout:hover {
+  color: #0FA0CE;
+  cursor: pointer;
+}
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -0,0 +1,25 @@
+<div
+  style="background: url(../../assets/terminal-background.jpg) repeat-y;width: 100%; height: 100%; background-size: contain">
+  <div class="center-column" style="position: absolute; z-index: 1; margin-top: 2em">
+    <h2>Social Media</h2>
+
+    <div style="display: flex; justify-content: center; width: 100%">
+      <div class="icon-layout" (click)="linkedInClicked()">
+        <img src="../../assets/linked-in.png" class="icon">
+        <span class="icon-text">LinkedIn</span>
+      </div>
+
+      <div class="icon-layout" (click)="githubClicked()">
+        <img src="../../assets/github.png" class="icon">
+        <span class="icon-text">GitHub</span>
+      </div>
+
+      <div class="icon-layout" (click)="emailClicked()">
+        <img src="../../assets/gmail.png" class="icon">
+        <span class="icon-text">Email</span>
+      </div>
+    </div>
+    <p class="subtitle">Contact me to connect, collaborate or just to chat.</p>
+  </div>
+  <div style="background: white; height: 100%; opacity: 0.78"></div>
+</div>
--- a/src/app/contact/contact.component.spec.ts
+++ b/src/app/contact/contact.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/contact/contact.component.ts
+++ b/src/app/contact/contact.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.css']
+})
+export class ContactComponent {
+
+  constructor() { }
+
+
+  linkedInClicked() {
+    window.open("https://www.linkedin.com/in/cameron-cordes-3b166583/")
+  }
+
+  githubClicked() {
+    window.open("https://github.com/Stampede10343")
+  }
+
+  emailClicked() {
+    window.open("mailto:cameronc.dev@gmail.com")
+  }
+}
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -0,0 +1,21 @@
+.overlay {
+  background: black;
+  position: relative;
+}
+
+.image {
+  opacity: 0.1;
+  width: 100%;
+  height: auto;
+}
+
+.home-container {
+  background: #2f2f31;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+}
+
+.overlay-text {
+  color: white;
+}
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -0,0 +1,23 @@
+<div class="home-container">
+  <div class="overlay" style="position: absolute;">
+    <img src="../../assets/CubeSpace.jpg" class="image">
+  </div>
+  <div class="center-column" style="height: 100%">
+    <div style="width: 100%; margin: 0 auto; position: absolute">
+      <img src="../../assets/cameron-headshot.jpg" style="width: 27%; margin: 2em 0 1em 0">
+      <h1 class="overlay-text">Cameron Cordes</h1>
+      <p
+        class="thin-subtitle" style="color: white;">
+        Android and iOS Developer</p>
+      <p class="body-text">Hello! I'm Cameron, I am a software developer focusing on mobile Android and iOS
+        applications. I love software development, I enjoy creating things, solving problems and making simple, smart
+        solutions to business problems.</p>
+      <p class="body-text">I first discovered programming by making bots for the classic Massively Multiplayer Online
+        Role Playing Game Runescape. I learned that you could automate leveling up your skills by writing scripts to do
+        the process for you. So I started reading other peoples scripts, learning the scripting language Pascal. I
+        quickly realized that I could build something that could help myself and others level up their characters in the
+        game and have fun learning and solving problems and thus sparked my love of programming and eventually software
+        development.</p>
+    </div>
+  </div>
+</div>
--- a/src/app/home/home.component.spec.ts
+++ b/src/app/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/project-keyword.pipe.spec.ts
+++ b/src/app/project-keyword.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ProjectKeywordPipe } from './project-keyword.pipe';
+
+describe('ProjectKeywordPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ProjectKeywordPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
--- a/src/app/project-keyword.pipe.ts
+++ b/src/app/project-keyword.pipe.ts
@@ -0,0 +1,21 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'projectKeyword'
+})
+export class ProjectKeywordPipe implements PipeTransform {
+  private keywords = ['MySQL', 'Node', 'Express', 'RxJava', 'Dagger 2', 'Model View Presenter', 'Retrofit', 'Realm', 'Room', 'Model-View-View Model'];
+
+  transform(value: String, args?: any): any {
+    this.keywords.forEach(keyword => {
+      let keywordIndex = value.indexOf(keyword);
+      if (keywordIndex != -1) {
+        let boldKeyword = '<b>' + value.substring(keywordIndex, keywordIndex + keyword.length) + '</b>';
+        value = value.replace(keyword, boldKeyword);
+      }
+    });
+
+    return value;
+  }
+
+}
--- a/src/app/projects/project-item.ts
+++ b/src/app/projects/project-item.ts
@@ -0,0 +1,6 @@
+export class ProjectItem {
+  title: String;
+  applicationType: String;
+  description: String
+  imgLocation: String
+}
--- a/src/app/projects/project.service.spec.ts
+++ b/src/app/projects/project.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProjectService } from './project.service';
+
+describe('ProjectService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ProjectService = TestBed.get(ProjectService);
+    expect(service).toBeTruthy();
+  });
+});
--- a/src/app/projects/project.service.ts
+++ b/src/app/projects/project.service.ts
@@ -0,0 +1,51 @@
+import {Injectable} from '@angular/core';
+import {ProjectItem} from "./project-item";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProjectService {
+
+  constructor() {
+  }
+
+  getProjects(): Promise<Array<ProjectItem>> {
+    return Promise.resolve(projects)
+  }
+}
+
+const projects = [
+  {
+    title: "Secure Notes",
+    applicationType: "Android Application (Kotlin)",
+    description: "Secure Notes is a simple note taking application with security in mind. There is a focus on clean" +
+    " code, Model-View-View Model and loosely coupled components. I built this app to experiment with different" +
+    " Android database libraries (Realm and Room), encryption and security, as well as a single Activity approach to" +
+    " an Android app. (Under development).",
+    imgLocation: "../../assets/note-icon.png"
+  },
+  {
+    title: "CorpsTime",
+    applicationType: "Android Application (Java and Kotlin)",
+    description: "CorpsTime is an Android application to view news, scores and the schedule of Drum Corps International" +
+    " competitions. CorpsTime uses the Model View Presenter pattern and libraries such as Dagger 2, Retrofit and RxJava.",
+    imgLocation: "../../assets/corpstime.png"
+  },
+  {
+    title: "CorpsTime Scraper and API",
+    applicationType: "Express API powered by Node (Javascript)",
+    description: "The CorpsTime scraper and API is the supporting code for the CorpsTime mobile application, written" +
+    " in Javascript using Express, Node, and MySQL to gather and prepare data for the CorpsTime client. The scraper" +
+    " runs nightly during the Drum Corps season to pull data from different websites and store and format it to be" +
+    " later retrieved by the API. The API includes a handful of endpoints to get scores, different competing corps and" +
+    " the upcoming events during the season.",
+    imgLocation: ""
+  },
+  {
+    title: "Android Hues",
+    applicationType: "Android Application (Kotlin)",
+    description: "Android Hues is an Android application to control your Phillips Hue lights at home. Hues uses RxJava," +
+    " Dagger 2 and the Phillips Hue SDK in order to control the color, brightness and power state of your lights.",
+    imgLocation: "../../assets/android-hues.png"
+  }
+];
--- a/src/app/projects/projects.component.css
+++ b/src/app/projects/projects.component.css
@@ -0,0 +1,22 @@
+.project-item {
+  width: 40%;
+  margin: 1em 0 1em;
+}
+
+@media (max-width: 768px) {
+  .project-item {
+    width: 75%;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1080px) {
+  .project-item {
+    width: 60%;
+  }
+}
+
+@media (min-width: 1920px) {
+  .project-item {
+    width: 30%;
+  }
+}
--- a/src/app/projects/projects.component.html
+++ b/src/app/projects/projects.component.html
@@ -0,0 +1,9 @@
+<div class="center-column">
+  <div class="project-item" *ngFor="let project of projects">
+    <h4>{{project.title}}</h4>
+    <img src={{project.imgLocation}} width="50%">
+    <p class="subtitle" style="margin: 0">{{project.applicationType}}</p>
+    <p class="thin-subtitle" [innerHTML]="project.description | projectKeyword"></p>
+  </div>
+  <div style="height: 4em"></div>
+</div>
--- a/src/app/projects/projects.component.spec.ts
+++ b/src/app/projects/projects.component.spec.ts
@@ -0,0 +1,26 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ProjectsComponent} from './projects.component';
+import {ProjectKeywordPipe} from "../project-keyword.pipe";
+
+describe('ProjectsComponent', () => {
+  let component: ProjectsComponent;
+  let fixture: ComponentFixture<ProjectsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProjectsComponent, ProjectKeywordPipe]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/projects/projects.component.ts
+++ b/src/app/projects/projects.component.ts
@@ -0,0 +1,24 @@
+import {Component, OnInit} from '@angular/core';
+import {ProjectService} from "./project.service";
+import {ProjectItem} from "./project-item";
+
+@Component({
+  selector: 'app-projects',
+  templateUrl: './projects.component.html',
+  styleUrls: ['./projects.component.css'],
+})
+export class ProjectsComponent implements OnInit {
+  projects: Array<ProjectItem>;
+
+  constructor(private projectService: ProjectService) {
+  }
+
+  ngOnInit(): void {
+    this.getProjects()
+  }
+
+  getProjects() {
+    return this.projectService.getProjects().then(projects => this.projects = projects)
+  }
+
+}
--- a/src/app/resume/resume.component.css
+++ b/src/app/resume/resume.component.css
@@ -0,0 +1,103 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font: 16px Helvetica, Sans-Serif;
+  line-height: 24px;
+  background: url(../../assets/noise.jpg);
+}
+
+.clear {
+  clear: both;
+}
+
+#page-wrap {
+  width: 800px;
+  margin: 40px auto 60px;
+}
+
+#pic {
+  float: right;
+  margin: -30px 0 0 0;
+}
+
+h1 {
+  margin: 0 0 16px 0;
+  padding: 0 0 16px 0;
+  font-size: 42px;
+  font-weight: bold;
+  letter-spacing: -2px;
+  border-bottom: 1px solid #888;
+}
+
+h2 {
+  font-size: 20px;
+  margin: 0 0 6px 0;
+  position: relative;
+}
+
+h2 span {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font-style: italic;
+  font-family: Georgia, Serif;
+  font-size: 16px;
+  color: #888;
+  font-weight: normal;
+}
+
+p {
+  margin: 0 0 16px 0;
+}
+
+a {
+  color: #888;
+  text-decoration: none;
+  border-bottom: 1px dotted #888;
+}
+
+a:hover {
+  border-bottom-style: solid;
+  color: black;
+}
+
+ul {
+  margin: 0 0 32px 17px;
+}
+
+#objective {
+  width: 500px;
+  float: left;
+}
+
+#objective p {
+  font-family: Georgia, serif;
+  font-style: italic;
+  color: #666;
+}
+
+dt {
+  font-style: italic;
+  font-weight: bold;
+  font-size: 18px;
+  text-align: right;
+  padding: 0 26px 0 0;
+  width: 150px;
+  float: left;
+  height: 100px;
+  border-right: 2px solid #888;
+}
+
+dd {
+  width: 600px;
+  float: right;
+}
+
+dd.clear {
+  float: none;
+  margin: 0;
+  height: 15px;
+}
--- a/src/app/resume/resume.component.html
+++ b/src/app/resume/resume.component.html
@@ -0,0 +1,74 @@
+<div id="page-wrap">
+
+  <img src="../../assets/cthulu.png" alt="Photo of Cthulu" id="pic"/>
+
+  <div id="contact-info" class="vcard">
+
+    <!-- Microformats! -->
+
+    <h1 class="fn">Cameron Ryan Kenneth Cordes</h1>
+
+    <p>
+      Cell: <span class="tel">330-421-6010</span><br/>
+      Email: <a class="email" href="mailto:cameronc.dev@gmail.com">cameronc.dev@gmail.com</a>
+    </p>
+  </div>
+
+  <div id="objective">
+  </div>
+
+  <div class="clear"></div>
+
+  <dl>
+    <dd class="clear"></dd>
+
+    <dt>Education</dt>
+    <dd>
+      <h2>Baldwin Wallace University</h2>
+      <p><strong>Major:</strong> Computer Science<br/>
+        <strong>Minor:</strong> Math</p>
+    </dd>
+
+    <dd class="clear"></dd>
+
+    <dt>Skills</dt>
+    <dd>
+      <h2>Computer skills</h2>
+      <p>Windows, Linux, OSX, Android Studio, Visual Studio, XCode, Microsoft productivity software (Word, Excel, etc).</p>
+    </dd>
+
+    <dd class="clear"></dd>
+
+    <dt>Experience</dt>
+    <dd>
+      <h2>Progressive Insurance <span>Mobile Developer Jan 2018 - Present</span></h2>
+      <ul>
+        <li>Inspired and won highest peasant death competition among servants</li>
+        <li>Helped coordinate managers to grow cult following</li>
+        <li>Provided untimely deaths to all who opposed</li>
+      </ul>
+
+      <h2>Hyland Software <span>Developer II - Westlake, OH - 2016 - 2018</span></h2>
+      <ul>
+        <li>Developed a camera interface and photo viewer using Android Camera API for a consistent method of capturing photos and reviewing them</li>
+        <li>Wrote an image downloading module with in memory caching</li>
+        <li>Started an initiative to use the Model View Presenter pattern to enable more testable code</li>
+      </ul>
+    </dd>
+
+    <dd class="clear"></dd>
+
+    <dt>Hobbies</dt>
+    <dd>Music, Movies, Motorcycles, Homebrewing, Travel</dd>
+
+    <dd class="clear"></dd>
+
+    <dt>References</dt>
+    <dd>Available on request</dd>
+
+    <dd class="clear"></dd>
+  </dl>
+
+  <div class="clear"></div>
+
+</div>
--- a/src/app/resume/resume.component.spec.ts
+++ b/src/app/resume/resume.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResumeComponent } from './resume.component';
+
+describe('ResumeComponent', () => {
+  let component: ResumeComponent;
+  let fixture: ComponentFixture<ResumeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResumeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResumeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/resume/resume.component.ts
+++ b/src/app/resume/resume.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-resume',
+  templateUrl: './resume.component.html',
+  styleUrls: ['./resume.component.css']
+})
+export class ResumeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/toolbar/toolbar.component.css
+++ b/src/app/toolbar/toolbar.component.css
@@ -0,0 +1,14 @@
+span {
+  margin-left: 1em;
+  margin-right: 1em;
+  -webkit-transition: color 300ms;
+  -moz-transition: color 300ms;
+  -ms-transition: color 300ms;
+  -o-transition: color 300ms;
+  transition: color 300ms;
+}
+
+span:hover {
+  color: #1DAEDD;
+  cursor: pointer;
+}
--- a/src/app/toolbar/toolbar.component.html
+++ b/src/app/toolbar/toolbar.component.html
@@ -0,0 +1,8 @@
+<mat-sidenav-container>
+  <mat-toolbar>
+    <span routerLink="/home" routerLinkActive="active">Home</span>
+    <span routerLink="/resume" routerLinkActive="active">Resume</span>
+    <span routerLink="/projects" routerLinkActive="active">Projects</span>
+    <span routerLink="/contact" routerLinkActive="active">Contact</span>
+  </mat-toolbar>
+</mat-sidenav-container>
--- a/src/app/toolbar/toolbar.component.spec.ts
+++ b/src/app/toolbar/toolbar.component.spec.ts
@@ -0,0 +1,47 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ToolbarComponent} from './toolbar.component';
+import {MatSidenavModule, MatToolbarModule} from "@angular/material";
+import {RouterTestingModule} from "@angular/router/testing";
+import {Component} from "@angular/core";
+
+@Component({template: ''})
+class DummyComponent {
+}
+
+describe('ToolbarComponent', () => {
+  let component: ToolbarComponent;
+  let fixture: ComponentFixture<ToolbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatToolbarModule,
+        MatSidenavModule,
+        RouterTestingModule.withRoutes([{path: 'home', component: DummyComponent}])
+      ],
+      declarations: [ToolbarComponent, DummyComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToolbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should contain a material toolbar', () => {
+    expect(fixture.debugElement.children[0].nativeElement.className).toBe("mat-drawer-container mat-sidenav-container")
+  });
+
+  it('should contain 4 links, Home, Resume, Projects, Contact', () => {
+    let debugElements = fixture.debugElement.queryAll((element) => {
+      return element.nativeElement.class == 'span'
+    });
+    expect(debugElements[0].nativeElement).toBe("span");
+  });
+});
--- a/src/app/toolbar/toolbar.component.ts
+++ b/src/app/toolbar/toolbar.component.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.css']
+})
+export class ToolbarComponent {
+
+  constructor() {
+  }
+}
--- a/src/assets/CubeSpace.jpg
+++ b/src/assets/CubeSpace.jpg
--- a/src/assets/android-hues.png
+++ b/src/assets/android-hues.png
--- a/src/assets/cameron-headshot.jpg
+++ b/src/assets/cameron-headshot.jpg
--- a/src/assets/corpstime.png
+++ b/src/assets/corpstime.png
--- a/src/assets/cthulu.png
+++ b/src/assets/cthulu.png
--- a/src/assets/github.png
+++ b/src/assets/github.png
--- a/src/assets/gmail.png
+++ b/src/assets/gmail.png
--- a/src/assets/linked-in.png
+++ b/src/assets/linked-in.png
--- a/src/assets/noise.jpg
+++ b/src/assets/noise.jpg
--- a/src/assets/note-icon.png
+++ b/src/assets/note-icon.png
--- a/src/assets/terminal-background.jpg
+++ b/src/assets/terminal-background.jpg
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,10 @@
 <html lang="en">
 <head>
  <meta charset="utf-8">
-  <title>TestWebsite</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400|Roboto:100,300,400" rel="stylesheet">
+
+  <title>Cameron's Website</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
--- a/src/normalize.css
+++ b/src/normalize.css
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -51,7 +51,7 @@ import 'core-js/es7/reflect';
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+import 'web-animations-js';  // Run `npm install --save web-animations-js`.

 /**
 * By default, zone.js will patch all possible macroTask and DomEvents
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,89 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
+
+body {
+  margin: 0;
+}
+
+html, body {
+  height: 100%;
+}
+
+h1, h2, h3, p, span {
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-weight: 300;
+}
+
+.body-text {
+  color: white;
+  width: 50%;
+  margin: 1em auto;
+}
+
+@media (min-width: 480px) and (max-width: 768px) {
+  .body-text {
+    font-size: 14px;
+    width: 80%;
+  }
+
+  .very-thin-subtitle {
+    font-size: 14px;
+  }
+
+  .thin-subtitle {
+    font-size: 14px;
+  }
+
+  .subtitle {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 768px){
+  .body-text {
+    font-size: 16px;
+  }
+
+  .very-thin-subtitle {
+    font-size: 16px;
+  }
+
+  .thin-subtitle {
+    font-size: 16px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+  }
+}
+
+.very-thin-subtitle {
+  font-family: Montserrat, serif;
+  font-weight: 200;
+}
+
+.thin-subtitle {
+  font-family: Montserrat, serif;
+  font-weight: 300;
+}
+
+.subtitle {
+  font-family: Montserrat, serif;
+  font-weight: 400;
+}
+
+.dark-background {
+  background: #555555;
+}
+
+.center-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  text-align: center
+}
+
+.active {
+  color: #1DAEDD;
+}