Improvements to styles on smaller screens

Used smaller margins, padding and fonts to better fit content on the
Home, Projects and Contact screens.

Also fixed crossfade animation between screens.

package-lock.json

@@ -1536,6 +1536,7 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
+      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -2744,7 +2745,8 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -3140,7 +3142,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "depd": {
       "version": "1.1.2",
@@ -4196,7 +4199,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4217,12 +4221,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4237,17 +4243,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4364,7 +4373,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4376,6 +4386,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4390,6 +4401,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4397,12 +4409,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4421,6 +4435,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4501,7 +4516,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4513,6 +4529,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4598,7 +4615,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4634,6 +4652,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4653,6 +4672,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4696,12 +4716,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -4710,6 +4732,7 @@
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
       "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4722,6 +4745,7 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
+      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -4759,7 +4783,8 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "get-stream": {
       "version": "3.0.0",
@@ -5006,7 +5031,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -5753,7 +5779,8 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -6363,6 +6390,7 @@
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -6375,7 +6403,8 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -6671,7 +6700,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -7299,6 +7329,7 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
+      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -8465,6 +8496,7 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
+      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -8476,6 +8508,7 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
+          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -8486,7 +8519,8 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -8495,6 +8529,7 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
+      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -8505,6 +8540,7 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -8515,6 +8551,7 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
+          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -9789,6 +9826,7 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "dev": true,
+      "optional": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -11145,6 +11183,7 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
+      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }

src/app/app.component.html

@@ -1,6 +1,6 @@
 <div style="text-align:center">
   <app-toolbar></app-toolbar>
 </div>
-<main [@routerTransition]="getState(o)">
+<main [@routerTransition]="o.isActivated ? o.activatedRoute : ''">
   <router-outlet #o="outlet"></router-outlet>
 </main>

src/app/app.component.ts

@@ -1,31 +1,40 @@
 import {Component} from '@angular/core';
-import {RouterOutlet} from "@angular/router";
+import {RouterOutlet} from '@angular/router';
-import {animate, query, style, transition, trigger} from "@angular/animations";
+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('* <=> *', [
-  transition('* => *', [
+    // Initial state of new route
-    // The query function has three params.
+    query(':enter',
-    // First is the event, so this will apply on entering or when the element is added to the DOM.
+      style({
-    // Second is a list of styles or animations to apply.
+        position: 'fixed',
-    // Third we add a config object with optional set to true, this is to signal
+        width: '100%',
-    // angular that the animation may not apply as it may or may not be in the DOM.
+        // transform: 'translateX(-100%)'
-    query(
+        opacity: 0
-      ':enter',
+      }),
-      [style({opacity: 0})],
+      {optional: true}),
-      {optional: true}
+
-    ),
+    // move page off screen right on leave
-    query(
+    query(':leave',
-      ':leave',
+      animate('300ms ease-in-out',
-      // here we apply a style and use the animate function to apply the style over 0.3 seconds
+        style({
-      [style({opacity: 1}), animate('0.3s', style({opacity: 0}))],
+          position: 'fixed',
-      {optional: true}
+          width: '100%',
-    ),
+          // transform: 'translateX(100%)'
-    query(
+          opacity: 0
-      ':enter',
+        })
-      [style({opacity: 0}), animate('0.3s', style({opacity: 1}))],
+      ),
-      {optional: true}
+      {optional: true}),
-    )
+
+    // move page in screen from left to right
+    query(':enter',
+      animate('300ms ease-in-out',
+        style({
+          opacity: 1,
+          // transform: 'translateX(0%)'
+        })
+      ),
+      {optional: true}),
   ])
 ]);
 
@@ -38,7 +47,7 @@ export const routerTransition = trigger('routerTransition', [
 export class AppComponent {
 
   getState(outlet: RouterOutlet) {
-    return outlet.activatedRouteData.state
+    return outlet.activatedRouteData.state;
   }
 }
 

src/app/app.module.ts

@@ -2,15 +2,15 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
-import {MatSidenavModule, MatToolbarModule} from "@angular/material";
+import {MatSidenavModule, MatToolbarModule} from '@angular/material';
 import {ToolbarComponent} from './toolbar/toolbar.component';
-import {RouterModule, Routes} from "@angular/router";
+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 {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { ProjectKeywordPipe } from './project-keyword.pipe';
+import {ProjectKeywordPipe} from './project-keyword.pipe';
 
 const appRoutes: Routes = [
   {path: 'resume', component: ResumeComponent, data: {state: 'resume'}},
@@ -31,7 +31,7 @@ const appRoutes: Routes = [
     ProjectKeywordPipe,
   ],
   imports: [
-    RouterModule.forRoot(appRoutes),
+    RouterModule.forRoot(appRoutes, {useHash: true}),
     BrowserModule,
     BrowserAnimationsModule,
     MatToolbarModule,
@@ -41,5 +41,6 @@ const appRoutes: Routes = [
   providers: [],
   bootstrap: [AppComponent]
 })
+
 export class AppModule {
 }

src/app/contact/contact.component.css

@@ -24,3 +24,28 @@
   color: #0FA0CE;
   cursor: pointer;
 }
+
+@media (max-width: 768px) {
+  .icon-layout {
+    padding: .1em;
+    margin: .5em .25em .5em .25em
+  }
+
+  .subtitle {
+    margin: 1em .5em;
+  }
+}
+
+@media (max-width: 425px) {
+  .icon-layout {
+    font-size: 14px;
+  }
+
+  h2 {
+    font-size: 24px;
+  }
+
+  .subtitle {
+    margin: 1em .5em;
+  }
+}

src/app/contact/contact.component.html

@@ -5,17 +5,17 @@
 
     <div style="display: flex; justify-content: center; width: 100%">
       <div class="icon-layout" (click)="linkedInClicked()">
-        <img src="../../assets/linked-in.png" class="icon">
+        <img src="../../assets/linked-in.png" class="icon" alt="LinkedIn">
         <span class="icon-text">LinkedIn</span>
       </div>
 
       <div class="icon-layout" (click)="githubClicked()">
-        <img src="../../assets/github.png" class="icon">
+        <img src="../../assets/github.png" class="icon" alt="Github">
         <span class="icon-text">GitHub</span>
       </div>
 
       <div class="icon-layout" (click)="emailClicked()">
-        <img src="../../assets/gmail.png" class="icon">
+        <img src="../../assets/gmail.png" class="icon" alt="GMail">
         <span class="icon-text">Email</span>
       </div>
     </div>

src/app/home/home.component.css

@@ -19,3 +19,24 @@
 .overlay-text {
   color: white;
 }
+
+.headshot {
+  width: 27%;
+  margin: 2em 0 1em 0
+}
+
+@media (max-width: 768px) {
+  .headshot {
+    width: 40%;
+  }
+
+  .overlay-text {
+    font-size: 32px;
+  }
+}
+
+@media (max-width: 425px) {
+  .overlay-text {
+    font-size: 24px;
+  }
+}

src/app/home/home.component.html

@@ -1,10 +1,10 @@
 <div class="home-container">
   <div class="overlay" style="position: absolute;">
-    <img src="../../assets/CubeSpace.jpg" class="image">
+    <img src="../../assets/CubeSpace.jpg" class="image" alt="background">
   </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">
+      <img src="../../assets/cameron-headshot.jpg" class="headshot" alt="headshot photo">
       <h1 class="overlay-text">Cameron Cordes</h1>
       <p
         class="thin-subtitle" style="color: white;">

src/app/projects/projects.component.css

@@ -5,7 +5,13 @@
 
 @media (max-width: 768px) {
   .project-item {
-    width: 75%;
+    width: 90%;
+    font-size: 14px;
+  }
+
+  img {
+    max-width: 40%;
+    margin: 0 0 1em 0;
   }
 }
 

src/app/projects/projects.component.html

@@ -1,7 +1,7 @@
 <div class="center-column">
   <div class="project-item" *ngFor="let project of projects">
     <h4>{{project.title}}</h4>
-    <img src={{project.imgLocation}} width="50%">
+    <img src={{project.imgLocation}} width="50%" alt="{{project.title}} icon">
     <p class="subtitle" style="margin: 0">{{project.applicationType}}</p>
     <p class="thin-subtitle" [innerHTML]="project.description | projectKeyword"></p>
   </div>

src/app/toolbar/toolbar.component.css

@@ -12,3 +12,9 @@ span:hover {
   color: #1DAEDD;
   cursor: pointer;
 }
+
+@media (max-width: 425px) {
+  span {
+    font-size: 14px;
+  }
+}

src/styles.css

@@ -20,7 +20,7 @@ h1, h2, h3, p, span {
   margin: 1em auto;
 }
 
-@media (min-width: 480px) and (max-width: 768px) {
+@media (max-width: 768px) {
   .body-text {
     font-size: 14px;
     width: 80%;
@@ -37,9 +37,13 @@ h1, h2, h3, p, span {
   .subtitle {
     font-size: 14px;
   }
+
+  h4 {
+    font-size: 22px;
+  }
 }
 
-@media (min-width: 768px){
+@media (min-width: 768px) {
   .body-text {
     font-size: 16px;
   }