diff --git a/src/app/contact/contact.component.css b/src/app/contact/contact.component.css index b02cee5..670a386 100644 --- a/src/app/contact/contact.component.css +++ b/src/app/contact/contact.component.css @@ -21,6 +21,6 @@ } .icon-layout:hover { - color: #0FA0CE; + color: var(--nord12); cursor: pointer; } diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html index 7704238..0c1b7b0 100644 --- a/src/app/contact/contact.component.html +++ b/src/app/contact/contact.component.html @@ -3,19 +3,19 @@

Social Media

-
- LinkedIn - LinkedIn +
+ LinkedIn + LinkedIn
-
- Github - GitHub +
+ Github + GitHub
-
- GMail - Email +
+ GMail + Email

Contact me to connect, collaborate or just to chat.

diff --git a/src/app/contact/contact.component.spec.ts b/src/app/contact/contact.component.spec.ts index 427633e..c0d59ab 100644 --- a/src/app/contact/contact.component.spec.ts +++ b/src/app/contact/contact.component.spec.ts @@ -1,14 +1,23 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import {RouterTestingModule} from '@angular/router/testing'; import { ContactComponent } from './contact.component'; +import { Angulartics2 } from 'angulartics2'; describe('ContactComponent', () => { let component: ContactComponent; let fixture: ComponentFixture; beforeEach(async(() => { + const analytics = jasmine.createSpyObj('piwik', ['startTracking']); TestBed.configureTestingModule({ - declarations: [ ContactComponent ] + imports: [ + RouterTestingModule, + ], + declarations: [ ContactComponent ], + providers: [ + { provide: Angulartics2, useValue: analytics }, + ], }) .compileComponents(); })); diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts index a0c6425..bb77f4a 100644 --- a/src/app/contact/contact.component.ts +++ b/src/app/contact/contact.component.ts @@ -1,4 +1,5 @@ import {AfterContentInit, Component, OnInit} from '@angular/core'; +import { Angulartics2 } from 'angulartics2'; @Component({ selector: 'app-contact', @@ -7,21 +8,34 @@ import {AfterContentInit, Component, OnInit} from '@angular/core'; }) export class ContactComponent implements AfterContentInit { - constructor() { + constructor(private analytics: Angulartics2) { } ngAfterContentInit(): void { } linkedInClicked() { + this.analytics.eventTrack.next(this.linkClickEvent('LinkedIn')); window.open('https://www.linkedin.com/in/cameron-cordes-3b166583/'); } githubClicked() { + this.analytics.eventTrack.next(this.linkClickEvent('GitHub')); window.open('https://github.com/Stampede10343'); } emailClicked() { + this.analytics.eventTrack.next(this.linkClickEvent('Email')); window.open('mailto:cameronc.dev@gmail.com'); } + + private linkClickEvent(label: String): object { + return { + action: 'LinkClick', + properties: { + category: 'Contact', + label: label + } + }; + } } diff --git a/src/app/toolbar/toolbar.component.css b/src/app/toolbar/toolbar.component.css index 32417df..54dbd9b 100644 --- a/src/app/toolbar/toolbar.component.css +++ b/src/app/toolbar/toolbar.component.css @@ -1,4 +1,4 @@ -span { +a { margin-left: 1em; margin-right: 1em; -webkit-transition: color 300ms; @@ -8,13 +8,20 @@ span { transition: color 300ms; } -span:hover { - color: var(--nord7); - cursor: pointer; +a:hover { + color: var(--nord13); } @media (max-width: 425px) { - span { - font-size: 14px; + a { + font-size: 15px; + margin-left: .8em; + margin-right: .8em; } } + +a { + color: var(--nord4); + text-decoration: none; +} + diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html index 1ceea7c..cc5f0c3 100644 --- a/src/app/toolbar/toolbar.component.html +++ b/src/app/toolbar/toolbar.component.html @@ -1,8 +1,8 @@ - - - Home - Resume - Projects - Contact - - + + + Home + Resume + Projects + Contact + + diff --git a/src/app/toolbar/toolbar.component.spec.ts b/src/app/toolbar/toolbar.component.spec.ts index ebbf1a1..0483b9b 100644 --- a/src/app/toolbar/toolbar.component.spec.ts +++ b/src/app/toolbar/toolbar.component.spec.ts @@ -36,12 +36,12 @@ describe('ToolbarComponent', () => { }); it('should contain a material toolbar', () => { - expect(fixture.debugElement.children[0].nativeElement.className).toBe('mat-drawer-container mat-sidenav-container'); + expect(fixture.debugElement.children[0].nativeElement.className).toBe('mat-toolbar mat-toolbar-multiple-rows'); }); it('should contain 4 links, Home, Resume, Projects, Contact', () => { const debugElements = fixture.debugElement.queryAll((element) => { - return element.nativeElement.className.indexOf('mat-toolbar') !== -1; + return element.nativeElement.className.indexOf('mat-toolbar-row') !== -1; }); expect(debugElements[0].children.length).toBe(4); diff --git a/src/index.html b/src/index.html index 2e104ff..225e825 100644 --- a/src/index.html +++ b/src/index.html @@ -26,6 +26,12 @@ g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); + diff --git a/src/styles.css b/src/styles.css index c72c62b..7a33d0f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,7 +1,7 @@ /* You can add global styles to this file, and also import other style files */ @import "~@angular/material/prebuilt-themes/pink-bluegrey.css"; -h1, h2, h3, p, span { +h1, h2, h3, p, span, a { font-family: Roboto, "Helvetica Neue", sans-serif; font-weight: 300; } @@ -114,5 +114,5 @@ html, body { } .active { - color: var(--nord7); + color: var(--nord7) !important; }