diff --git a/package-lock.json b/package-lock.json index fb2a447..325efec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1536,6 +1536,7 @@ "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, + "optional": true, "requires": { "delegates": "^1.0.0", "readable-stream": "^2.0.6" @@ -2744,7 +2745,8 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "constants-browserify": { "version": "1.0.0", @@ -3140,7 +3142,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", - "dev": true + "dev": true, + "optional": true }, "depd": { "version": "1.1.2", @@ -4196,7 +4199,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -4217,12 +4221,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4237,17 +4243,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4364,7 +4373,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4376,6 +4386,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4390,6 +4401,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4397,12 +4409,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4421,6 +4435,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4501,7 +4516,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4513,6 +4529,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4598,7 +4615,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4634,6 +4652,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4653,6 +4672,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4696,12 +4716,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -4710,6 +4732,7 @@ "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz", "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=", "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -4722,6 +4745,7 @@ "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, + "optional": true, "requires": { "aproba": "^1.0.3", "console-control-strings": "^1.0.0", @@ -4759,7 +4783,8 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=", - "dev": true + "dev": true, + "optional": true }, "get-stream": { "version": "3.0.0", @@ -5006,7 +5031,8 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", - "dev": true + "dev": true, + "optional": true }, "has-value": { "version": "1.0.0", @@ -5753,7 +5779,8 @@ "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", - "dev": true + "dev": true, + "optional": true }, "is-windows": { "version": "1.0.2", @@ -6363,6 +6390,7 @@ "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "parse-json": "^2.2.0", @@ -6375,7 +6403,8 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true + "dev": true, + "optional": true } } }, @@ -6671,7 +6700,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", - "dev": true + "dev": true, + "optional": true }, "map-visit": { "version": "1.0.0", @@ -7299,6 +7329,7 @@ "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, + "optional": true, "requires": { "are-we-there-yet": "~1.1.2", "console-control-strings": "~1.1.0", @@ -8465,6 +8496,7 @@ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", "dev": true, + "optional": true, "requires": { "load-json-file": "^1.0.0", "normalize-package-data": "^2.3.2", @@ -8476,6 +8508,7 @@ "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz", "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "pify": "^2.0.0", @@ -8486,7 +8519,8 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true + "dev": true, + "optional": true } } }, @@ -8495,6 +8529,7 @@ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz", "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", "dev": true, + "optional": true, "requires": { "find-up": "^1.0.0", "read-pkg": "^1.0.0" @@ -8505,6 +8540,7 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", "dev": true, + "optional": true, "requires": { "path-exists": "^2.0.0", "pinkie-promise": "^2.0.0" @@ -8515,6 +8551,7 @@ "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", "dev": true, + "optional": true, "requires": { "pinkie-promise": "^2.0.0" } @@ -9789,6 +9826,7 @@ "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", "dev": true, + "optional": true, "requires": { "is-utf8": "^0.2.0" } @@ -11145,6 +11183,7 @@ "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, + "optional": true, "requires": { "string-width": "^1.0.2 || 2" } diff --git a/src/app/app.component.html b/src/app/app.component.html index 33bf6b9..07561ec 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,6 @@
-
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index bd83c7e..d02ba53 100644 --- a/src/app/app.component.ts +++ b/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; } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c8ca02a..01e0e47 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/contact/contact.component.css b/src/app/contact/contact.component.css index b02cee5..f0ca285 100644 --- a/src/app/contact/contact.component.css +++ b/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; + } +} diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html index f9934c2..432de3a 100644 --- a/src/app/contact/contact.component.html +++ b/src/app/contact/contact.component.html @@ -5,17 +5,17 @@
- + LinkedIn LinkedIn
- + Github GitHub
- + GMail Email
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index bc70c5c..5d217fc 100644 --- a/src/app/home/home.component.css +++ b/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; + } +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index c49c8da..2c42c7e 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,10 +1,10 @@
- + background
- + headshot photo

Cameron Cordes

diff --git a/src/app/projects/projects.component.css b/src/app/projects/projects.component.css index 67432e9..1a5fed9 100644 --- a/src/app/projects/projects.component.css +++ b/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; } } diff --git a/src/app/projects/projects.component.html b/src/app/projects/projects.component.html index be4431b..43b3e5e 100644 --- a/src/app/projects/projects.component.html +++ b/src/app/projects/projects.component.html @@ -1,7 +1,7 @@

{{project.title}}

- + {{project.title}} icon

{{project.applicationType}}

diff --git a/src/app/toolbar/toolbar.component.css b/src/app/toolbar/toolbar.component.css index 07190f4..6a3e45f 100644 --- a/src/app/toolbar/toolbar.component.css +++ b/src/app/toolbar/toolbar.component.css @@ -12,3 +12,9 @@ span:hover { color: #1DAEDD; cursor: pointer; } + +@media (max-width: 425px) { + span { + font-size: 14px; + } +} diff --git a/src/styles.css b/src/styles.css index 94f5eac..fcdb21c 100644 --- a/src/styles.css +++ b/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; }