Merge pull request 'feature/project-page-ui-update' (#8) from feature/project-page-ui-update into master

Reviewed-on: #8

package.json

@@ -12,45 +12,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.1.9",
+    "@angular/animations": "^9.1.12",
     "@angular/cdk": "^9.2.4",
-    "@angular/cli": "^9.1.7",
+    "@angular/cli": "^9.1.12",
-    "@angular/common": "^9.1.9",
+    "@angular/common": "^9.1.12",
-    "@angular/compiler": "^9.1.9",
+    "@angular/compiler": "^9.1.12",
-    "@angular/compiler-cli": "^9.1.9",
+    "@angular/compiler-cli": "^9.1.12",
-    "@angular/core": "^9.1.9",
+    "@angular/core": "^9.1.12",
-    "@angular/forms": "^9.1.9",
+    "@angular/forms": "^9.1.12",
     "@angular/material": "^9.2.4",
-    "@angular/platform-browser": "^9.1.9",
+    "@angular/platform-browser": "^9.1.12",
-    "@angular/platform-browser-dynamic": "^9.1.9",
+    "@angular/platform-browser-dynamic": "^9.1.12",
-    "@angular/router": "^9.1.9",
+    "@angular/router": "^9.1.12",
     "angulartics2": "^8.3.0",
     "codelyzer": "^5.2.2",
     "core-js": "^2.6.11",
     "json-schema-traverse": "^0.4.1",
-    "rxjs": "^6.5.5",
+    "rxjs": "^6.6.2",
     "tslib": "^1.13.0",
     "web-animations-js": "^2.3.2",
     "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.7",
+    "@angular-devkit/build-angular": "^0.901.12",
-    "@angular/language-service": "^9.1.9",
+    "@angular/language-service": "^9.1.12",
-    "@types/jasmine": "^2.8.16",
+    "@types/jasmine": "^2.8.17",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.12.42",
+    "@types/node": "^12.12.54",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^5.0.9",
+    "karma": "^5.1.1",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^2.0.6",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-junit-reporter": "^2.0.1",
     "protractor": "^7.0.0",
-    "puppeteer": "^3.1.0",
+    "puppeteer": "^3.3.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
-    "typescript": "^3.8.3"
+    "typescript": "^3.8.0"
   }
 }

src/app/projects/project.service.ts

@@ -9,6 +9,20 @@ const projects = [
     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.',
     imgLocation: ''
   },
+  {
+    title: 'G Music Migrator',
+    applicationType: 'Python script',
+    // tslint:disable-next-line:max-line-length
+    description: '<a href="https://github.com/Stampede10343/GMusicMigrator">G Music Migrator</a> is a Python script to export your playlists from Google Play Music and then import them to Spotify. Using the Spotify and Play Music APIs the script would semi-automatically search for each song and prompt the user to select which option to chose if the choice was ambiguous.',
+    imgLocation: ''
+  },
+  {
+    title: 'Rack',
+    applicationType: 'Rust application',
+    // tslint:disable-next-line:max-line-length
+    description: '<a href="https://git.crkc.xyz/Apps/Rack">Rack</a> is a bare bones cli search tool, like grep or ack. Rack was a simple project to learn about Rust and its borrow checker. Rust proved to be fun to work in, with great language features while still being low level and insanely quick!',
+    imgLocation: ''
+  },
   {
     title: 'Secure Notes',
     applicationType: 'Android Application (Kotlin)',
@@ -16,7 +30,7 @@ const projects = [
     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).',
+    ' an Android app.',
     imgLocation: '../../assets/note-icon.png'
   },
   {

src/app/projects/projects.component.css

@@ -1,6 +1,28 @@
-@media (max-width: 768px) {
+.grid {
-  img {
+  display: grid;
-    max-width: 40%;
+  grid-gap: 1em;
-    margin: 0 0 1em 0;
+  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr) );
+  align-content: start;
+  margin: 1rem;
+}
+
+:host /deep/ a {
+  color: var(--nord13);
+}
+
+:host /deep/ a:hover {
+  color: var(--nord11);
+  -webkit-transition: color 300ms;
+  -moz-transition: color 300ms;
+  -ms-transition: color 300ms;
+  -o-transition: color 300ms;
+  transition: color 300ms;
+  text-decoration: none;
+}
+
+@media(max-width: 576px) {
+  .grid {
+    grid-template-columns: 1fr;
+    margin: 0.5rem;
   }
 }

src/app/projects/projects.component.html

@@ -1,9 +1,11 @@
-<div class="row">
+<div class="row dark-bg h-100">
-  <div class="col col-lg-6 col-md-9 text-center mx-auto mt-5">
+  <div class="grid">
-    <div class="mb-5" *ngFor="let project of projects">
+    <div *ngFor="let project of projects"
+      class="text-center shadow d-flex flex-column justify-content-around p-3 h-100"
+      style="background-color: var(--nord1)">
+      <img *ngIf="project.imgLocation" src={{project.imgLocation}} class="mx-auto mb-3 w-25" alt="{{project.title}} icon">
       <h4>{{project.title}}</h4>
-      <img *ngIf="project.imgLocation" src={{project.imgLocation}} class="w-25" alt="{{project.title}} icon">
+      <span class="subtitle">{{project.applicationType}}</span>
-      <p class="subtitle" style="margin: 0">{{project.applicationType}}</p>
       <p class="thin-subtitle" [innerHTML]="project.description | projectKeyword"></p>
     </div>
   </div>

src/styles.css

@@ -21,7 +21,7 @@ html, body {
   background-color: var(--nord0);
 }
 
-.dark-bg span, .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg p {
+.dark-bg span, .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg p {
   color: var(--nord4);
 }
 

tslint.json

@@ -118,12 +118,8 @@
       "check-type"
     ],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true