Merge pull request #6 from zembrodt/develop

Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -53,4 +53,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.3.4"
   }
-}
+}

src/app/app.component.ts

@@ -1,8 +1,10 @@
 import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {SettingsState} from './core/settings/settings.state';
 import {Observable, Subject} from 'rxjs';
-import {Select} from '@ngxs/store';
-import {takeUntil} from 'rxjs/operators';
+import {Select, Store} from '@ngxs/store';
+import {filter, map, takeUntil} from 'rxjs/operators';
+import {MediaObserver} from '@angular/flex-layout';
+import {SetLg, SetMd, SetSm, SetXl, SetXs} from './core/screen/screen.actions';
 
 @Component({
   selector: 'app-root',
@@ -17,7 +19,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
   @Select(SettingsState.theme) theme$: Observable<string>;
 
-  constructor() {}
+  constructor(private store: Store, private mediaObserver: MediaObserver) {}
 
   ngOnInit(): void {
     this.theme$
@@ -32,6 +34,21 @@ export class AppComponent implements OnInit, OnDestroy {
         htmlEl.classList.toggle('scrollbar-light', isLightTheme);
       });
     this.updateScrollbarStyle();
+
+    // Angular flex-layout documentation is not up-to-date to reflect mediaObserver.media$ being deprecated
+    // see https://github.com/angular/flex-layout/issues/1040#issuecomment-475069681 for updated solution
+    this.mediaObserver.asObservable()
+      .pipe(
+        filter((changes) => changes.length > 0),
+        map((changes) => changes[0]),
+        takeUntil(this.ngUnsubscribe)
+      ).subscribe((change) => {
+        this.store.dispatch(new SetXs(change.mqAlias === 'xs'));
+        this.store.dispatch(new SetSm(change.mqAlias === 'sm'));
+        this.store.dispatch(new SetMd(change.mqAlias === 'md'));
+        this.store.dispatch(new SetLg(change.mqAlias === 'lg'));
+        this.store.dispatch(new SetXl(change.mqAlias === 'xl'));
+    });
   }
 
   ngOnDestroy(): void {

src/app/app.module.ts

@@ -40,6 +40,9 @@ import {TimelineEntryContentComponent} from './core/timeline/timeline-entry-cont
 import {TimelineEntryHeaderComponent} from './core/timeline/timeline-entry-header/timeline-entry-header.component';
 import {TimelineNodeComponent} from './core/timeline/timeline-node/timeline-node.component';
 import {TimelineDividerComponent} from './core/timeline/timeline-divider/timeline-divider.component';
+import {ScreenState} from './core/screen/screen.state';
+import {MatMenuModule} from '@angular/material/menu';
+import {TimelineDialogComponent} from './core/timeline/timeline/timeline-dialog.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -54,6 +57,7 @@ import {TimelineDividerComponent} from './core/timeline/timeline-divider/timelin
     ProjectDetailComponent,
     SkillsComponent,
     TimelineComponent,
+    TimelineDialogComponent,
     TimelineDividerComponent,
     TimelineEntryComponent,
     TimelineEntryContentComponent,
@@ -73,12 +77,13 @@ import {TimelineDividerComponent} from './core/timeline/timeline-divider/timelin
     MatCardModule,
     MatDialogModule,
     MatIconModule,
+    MatMenuModule,
     MatRippleModule,
     MatSidenavModule,
     MatTabsModule,
     MatToolbarModule,
     NgxsModule.forRoot(
-      [SettingsState],
+      [SettingsState, ScreenState],
       {developmentMode: !environment.production}
     ),
     NgxsStoragePluginModule.forRoot({

src/app/components/about/about.component.html

@@ -22,12 +22,13 @@
          fxLayout="row"
          fxLayoutAlign="center"
          fxLayoutGap="24px"
-         fxFlex="50">
-      <img id="backpacking" class="about-img" src="assets/images/backpacking.png"/>
-      <div fxLayout="column"
+         fxFlex.gt-xs="50">
+      <img id="backpacking" class="about-img fixed" src="assets/images/backpacking.png"/>
+      <div *ngIf="!(isXs$ | async)"
+           fxLayout="column"
            fxLayoutGap="24px">
-        <img id="golfing" class="about-img hanging-right img-stagger" src="assets/images/golf.png"/>
-        <img id="camping" class="about-img img-stagger" src="assets/images/camp.png"/>
+        <img id="golfing" class="about-img fixed" src="assets/images/golf.png"/>
+        <img id="camping" class="about-img fixed" src="assets/images/camp.png"/>
       </div>
     </div>
   </div>

src/app/components/about/about.component.scss

@@ -0,0 +1,12 @@
+@use '../../../styles/mixins' as app;
+
+.about-img {
+  @include app.elevation(4);
+  border-radius: 4px;
+
+  &.fixed {
+    max-width: 256px;
+    object-fit: cover;
+    opacity: 0;
+  }
+}

src/app/components/about/about.component.ts

@@ -1,23 +1,29 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {Subject} from 'rxjs';
+import {Component, ElementRef, HostListener, OnDestroy, OnInit, Renderer2} from '@angular/core';
+import {Observable, Subject, Subscription} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {VisibleService} from '../../services/visible/visible.service';
-import {SkillsComponent} from '../skills/skills.component';
+import {Select} from '@ngxs/store';
+import {ScreenState} from '../../core/screen/screen.state';
 
 const ABOUT_IMG_DURATION = 1000;
 const ABOUT_IMG_EASING = 'ease-out';
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
-  styleUrls: ['./about.component.css']
+  styleUrls: ['./about.component.scss']
 })
 export class AboutComponent implements OnInit, OnDestroy {
   static PAGE = 'about';
 
   private ngUnsubscribe = new Subject();
+  private hasAnimated = false;
+  private isXs = false;
+  private isXsSub: Subscription;
 
-  constructor(private visibleService: VisibleService) {}
+  @Select(ScreenState.isXs) isXs$: Observable<boolean>;
+
+  constructor(private visibleService: VisibleService, private elementRef: ElementRef, private renderer: Renderer2) {}
 
   ngOnInit(): void {
     this.visibleService.isVisible(AboutComponent.PAGE)
@@ -26,13 +32,19 @@ export class AboutComponent implements OnInit, OnDestroy {
         console.log('ABOUT :: isVisible: ' + isVisible);
         if (isVisible) {
           this.animateImages();
+          this.hasAnimated = true;
           this.unsubscribe();
         }
     });
+
+    this.isXsSub = this.isXs$.subscribe((isXs) => {
+      this.isXs = isXs;
+    });
   }
 
   ngOnDestroy(): void {
     this.unsubscribe();
+    this.isXsSub.unsubscribe();
   }
 
   private animateImages(): void {
@@ -69,6 +81,19 @@ export class AboutComponent implements OnInit, OnDestroy {
     });
   }
 
+  @HostListener('window:resize', ['$event'])
+  onWindowResize(): void {
+    // If we've already animated set image opacity to 1
+    if (this.hasAnimated && !this.isXs) {
+      const images = this.elementRef.nativeElement.querySelectorAll('.about-img');
+      if (images && images.length > 0) {
+        images.forEach(image => {
+          this.renderer.setStyle(image, 'opacity', 1);
+        });
+      }
+    }
+  }
+
   private unsubscribe(): void {
     if (this.ngUnsubscribe) {
       this.ngUnsubscribe.next();

src/app/components/dashboard/dashboard.component.html

@@ -1,45 +1,51 @@
 <div id="dashboard">
   <app-navbar></app-navbar>
   <div class="content-container">
-  <div fxLayout="column"
-       fxLayoutAlign="center"
-       fxLayoutGap="256px"
-       class="content">
-    <div id="intro"
-         fxLayout="row"
-         fxLayout.lt-lg="column"
-         fxLayoutAlign="center center"
-         fxLayoutGap.lt-lg="32px">
-      <div fxLayout="column"
-           fxLayoutAlign="center start"
-           fxLayoutGap="16px"
-           class="intro-blurb">
-        <span id="hello-there">Hello, my name is</span>
-        <span class="mat-display-3 name-display">Ryan Zembrodt.</span>
-        <span class="mat-display-1 job-title-display">I'm a Software Engineer.</span>
-        <div class="blurb">
-          Currently based in Cincinnati, OH and employed at <a href="https://www.flooid.com/">Flooid</a>.
-          I have a strong passion for full-stack development and anything programming.
+    <div fxLayout="column"
+         fxLayoutAlign="center"
+         [fxLayoutGap]="((isLtMd$ | async) ? 128 : 256) + 'px'"
+         class="content">
+      <div id="intro"
+           fxLayout="row"
+           fxLayout.lt-lg="column"
+           fxLayoutAlign="center center"
+           fxLayoutGap.lt-lg="32px"
+           [ngClass.lt-md]="'mobile'">
+        <div fxLayout="column"
+             fxLayoutAlign="center start"
+             fxLayoutGap="16px"
+             class="intro-blurb">
+          <span id="hello-there">Hello, my name is</span>
+          <span class="mat-display-3 name-display">Ryan Zembrodt.</span>
+          <span class="mat-display-1 job-title-display">I'm a Software Engineer.</span>
+          <div class="blurb">
+            Currently based in Cincinnati, OH and employed at <a href="https://www.flooid.com/">Flooid</a>.
+            I have a strong passion for full-stack development and anything programming.
+          </div>
+        </div>
+        <div class="pic-of-me"
+             fxLayout.lt-md="row"
+             fxLayoutAlign.lt-md="center">
+            <img src="assets/images/main_pic.png">
         </div>
       </div>
-      <div class="pic-of-me">
-          <img src="assets/images/main_pic.png">
-      </div>
-    </div>
 
-    <app-visibility [name]="experiencePage">
-      <app-experience></app-experience>
-    </app-visibility>
-    <app-visibility [name]="'projects'">
-      <app-projects></app-projects>
-    </app-visibility>
-    <app-visibility [name]="aboutPage">
-      <app-about></app-about>
-    </app-visibility>
-    <app-visibility [name]="'contact'" [offset]="100">
-      <app-contact></app-contact>
-    </app-visibility>
-  </div>
+      <app-visibility [name]="experiencePage"
+                      [offset]="(isLtMd$ | async) ? 200 : null">
+        <app-experience></app-experience>
+      </app-visibility>
+      <app-visibility [name]="'projects'"
+                      [offset]="(isLtMd$ | async) ? 200 : null">
+        <app-projects></app-projects>
+      </app-visibility>
+      <app-visibility [name]="aboutPage"
+                      [offset]="(isLtMd$ | async) ? 200 : null">
+        <app-about></app-about>
+      </app-visibility>
+      <app-visibility [name]="'contact'" [offset]="100">
+        <app-contact></app-contact>
+      </app-visibility>
+    </div>
   </div>
   <app-footer></app-footer>
 </div>

src/app/components/dashboard/dashboard.component.css → src/app/components/dashboard/dashboard.component.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins' as app;
+
 .content {
   width: 75%;
   max-width: 1000px;
@@ -6,19 +8,23 @@
 
 #intro {
   margin-top: 200px;
+
+  &.mobile {
+    margin-top: 100px;
+  }
 }
 
 .pic-of-me {
   float: right;
   position: relative;
   display: inline-block;
   opacity: 0;
-}
 
-.pic-of-me img {
-  border-radius: 4px;
-  max-width: 80%;
-  box-shadow: 3px 3px 10px black;
+  img {
+    @include app.elevation(4);
+    border-radius: 4px;
+    max-width: 80%;
+  }
 }
 
 #hello-there {

src/app/components/dashboard/dashboard.component.ts

@@ -1,19 +1,24 @@
 import {AfterViewInit, Component} from '@angular/core';
 import {AboutComponent} from '../about/about.component';
 import {ExperienceComponent} from '../experience/experience.component';
+import {ScreenState} from '../../core/screen/screen.state';
+import {Select} from '@ngxs/store';
+import {Observable} from 'rxjs';
 
 const INTRO_DURATION = 1500;
 const INTRO_EASTING = 'ease-out';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.css']
+  styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements AfterViewInit {
   aboutPage = AboutComponent.PAGE;
   experiencePage = ExperienceComponent.PAGE;
 
+  @Select(ScreenState.isLtMd) isLtMd$: Observable<boolean>;
+
   constructor() { }
 
   ngAfterViewInit(): void {

src/app/components/experience-detail/experience-detail.component.css

@@ -1,14 +1,3 @@
-.experience-card {
-}
-
 .experience-detail {
   width: 100%;
 }
-
-.title-line {
-  width: 100%;
-}
-
-.align-right {
-  text-align: right;
-}

src/app/components/experience-detail/experience-detail.component.html

@@ -1,4 +1,4 @@
-<mat-card class="experience-card">
+<mat-card>
   <div class="experience-detail"
        fxLayout="column"
        fxLayoutAlign="center">
@@ -12,13 +12,10 @@
       <li *ngFor="let detail of experience.details">{{detail}}</li>
     </ul>
     <div *ngIf="experience.technologies && experience.technologies.length > 0"
-         fxLayout="row"
-         fxLayoutAlign="center center"
-         fxLayoutGap="8px">
-      <span class="code-text" *ngFor="let technology of experience.technologies; let i = index">
-        {{technology}}
-        <ng-container *ngIf="i + 1 < experience.technologies.length"> &#xB7; </ng-container>
-      </span>
+         fxFlex="row wrap"
+         fxFlexAlign="center center"
+         class="technologies code-text">
+      <span *ngFor="let technology of experience.technologies; let i = index">{{technology}}</span>
     </div>
   </div>
 </mat-card>