Added Movies app project and update page layout

src/app/project-keyword.pipe.ts

@@ -4,7 +4,9 @@ import {Pipe, PipeTransform} from '@angular/core';
   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'];
+  private const keywords = [
+    'MySQL', 'Node', 'Express', 'RxJava', 'Dagger 2', 'Model View Presenter', 'Retrofit', 'Realm', 'Room', 'Model-View-View Model', 'SimpleStack'
+  ];
 
   transform(value: String, args?: any): any {
     this.keywords.forEach(keyword => {

src/app/projects/project.service.ts

@@ -15,10 +15,15 @@ export class ProjectService {
 }
 
 const projects = [
+  {
+    title: "Movies",
+    applicationType: "Android Application (Kotlin)",
+    description: "<a href='https://github.com/Stampede10343/Movies_TMDb'>Movies</a> is an Android application for viewing movie and TV show info using the TMDB API. Movies is a Single Activity application, leveraging Model-View-View Model, Dagger 2, RxJava and SimpleStack for navigation. There is a focus on caching and a pleasant user experience even on slower networks by combining both in-memory and disk caching for quick load times, especially after a show details have been viewed."
+  },
   {
     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" +
+    description: "<a href='https://github.com/Stampede10343/SecureNotes'>Secure Notes</a> 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).",
@@ -44,7 +49,7 @@ const projects = [
   {
     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," +
+    description: "<a href='https://github.com/Stampede10343/AndroidHues'>Android Hues</a> 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"
   }

src/app/projects/projects.component.css

@@ -1,28 +1,6 @@
-.project-item {
-  width: 40%;
-  margin: 1em 0 1em;
-}
-
 @media (max-width: 768px) {
-  .project-item {
-    width: 90%;
-    font-size: 14px;
-  }
-
   img {
     max-width: 40%;
     margin: 0 0 1em 0;
   }
 }
-
-@media (min-width: 768px) and (max-width: 1080px) {
-  .project-item {
-    width: 60%;
-  }
-}
-
-@media (min-width: 1920px) {
-  .project-item {
-    width: 30%;
-  }
-}

src/app/projects/projects.component.html

@@ -1,9 +1,10 @@
-<div class="center-column">
+<div class="row">
-  <div class="project-item" *ngFor="let project of projects">
+  <div class="col col-lg-6 col-md-9 text-center mx-auto mt-5">
-    <h4>{{project.title}}</h4>
+    <div class="mb-5" *ngFor="let project of projects">
-    <img src={{project.imgLocation}} width="50%" alt="{{project.title}} icon">
+      <h4>{{project.title}}</h4>
-    <p class="subtitle" style="margin: 0">{{project.applicationType}}</p>
+      <img *ngIf="project.imgLocation" src={{project.imgLocation}} class="w-25" alt="{{project.title}} icon">
-    <p class="thin-subtitle" [innerHTML]="project.description | projectKeyword"></p>
+      <p class="subtitle" style="margin: 0">{{project.applicationType}}</p>
+      <p class="thin-subtitle" [innerHTML]="project.description | projectKeyword"></p>
+    </div>
   </div>
-  <div style="height: 4em"></div>
 </div>