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.

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 {animate, query, style, transition, trigger} from "@angular/animations";
+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}
-    )
+  transition('* <=> *', [
+    // Initial state of new route
+    query(':enter',
+      style({
+        position: 'fixed',
+        width: '100%',
+        // transform: 'translateX(-100%)'
+        opacity: 0
+      }),
+      {optional: true}),
+
+    // move page off screen right on leave
+    query(':leave',
+      animate('300ms ease-in-out',
+        style({
+          position: 'fixed',
+          width: '100%',
+          // transform: 'translateX(100%)'
+          opacity: 0
+        })
+      ),
+      {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 { ProjectKeywordPipe } from './project-keyword.pipe';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+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;
   }