diff --git a/.gitignore b/.gitignore index 95a3e0d..3031280 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ logs *.log npm-debug.log* .DS_STORE +.tern-port # Runtime data pids diff --git a/index.js b/index.js index 33f623e..d1e39c2 100644 --- a/index.js +++ b/index.js @@ -2,7 +2,7 @@ var Metalsmith = require('metalsmith'); var markdown = require('metalsmith-markdown'); var sass = require('metalsmith-sass'); var layouts = require('metalsmith-layouts'); -var assets = require('metalsmith-assets'); +var collections = require('metalsmith-collections'); var permalinks = require('metalsmith-permalinks'); var serve = require('metalsmith-serve'); var watch = require('metalsmith-watch'); @@ -18,9 +18,11 @@ Metalsmith(__dirname) .destination('./build') .clean(false) .use(markdown()) - .use(assets({ - source: './src/assets', - destination: './src/assets' + .use(collections({ + posts: { + pattern: 'posts/*', + sortBy: 'order' + } })) .use(permalinks()) .use(sass()) diff --git a/layouts/index.html b/layouts/index.html index 97f02a2..c6ece46 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,5 +1,32 @@ {{> header }} -{{{ contents }}} +
+
+ {{{ contents }}} +
+ + +
+ + {{> footer }} diff --git a/layouts/post.html b/layouts/post.html index c24bc80..d1ad372 100644 --- a/layouts/post.html +++ b/layouts/post.html @@ -2,8 +2,7 @@

- <  - {{ title }} + < {{ title }}

{{{ contents }}}
diff --git a/package.json b/package.json index 5a2ce7f..e1453fa 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,20 @@ { - "name": "static-site-example", + "name": "joe-wroten-portfolio", "private": true, "scripts": { - "build": "make build" + "build": "npm run vendor && make build", + "vendor": "mkdir -p build && cp ./node_modules/lemonade-grid/css/lemonade.min.css ./build" }, "dependencies": { "handlebars": "^4.0.5", + "lemonade-grid": "^2.1.0", "metalsmith": "^2.1.0", "metalsmith-layouts": "^1.4.1", "metalsmith-markdown": "^0.2.1", "metalsmith-permalinks": "^0.5.0" }, "devDependencies": { - "metalsmith-assets": "^0.1.0", + "metalsmith-collections": "^0.7.0", "metalsmith-sass": "^1.3.0", "metalsmith-serve": "0.0.7", "metalsmith-watch": "^1.0.3" diff --git a/partials/footer.html b/partials/footer.html index 09ae6cd..8a50169 100644 --- a/partials/footer.html +++ b/partials/footer.html @@ -1,4 +1,4 @@ - + diff --git a/partials/header.html b/partials/header.html index 56f9ab7..36e91ee 100644 --- a/partials/header.html +++ b/partials/header.html @@ -3,8 +3,9 @@ {{ title }} + - + @@ -21,4 +22,4 @@ -
+
diff --git a/partials/header/index.html b/partials/header/index.html new file mode 100644 index 0000000..2dba696 --- /dev/null +++ b/partials/header/index.html @@ -0,0 +1,25 @@ + + + + + {{ title }} + + + + + + + +
+
+ [ sharpshark28@joewroten.com ] (master) ~/portfolio +
+ ⟩ npm start wow +
+ Starting up server, serving ./ on port: 8080 ... +
+ Resume accessible @ ./resume.pdf +
+
+ +
diff --git a/src/app.scss b/src/app.scss index c30d111..1ae37e5 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,7 +1,23 @@ $success: #28C665; $primary: #87D2C8; -$secondary: #A01C69; +$secondary: #FF0093; +$secondary-dark: darken($secondary, 10%); +$dark: #282A36; +$light: #6A7380; +$lightest: #B2BDCD; $max-width: 60rem; +$spacing-md: 2rem; + +@keyframes fadeInRight { + from { + opacity: 0; + transform: translateX(-$spacing-md); + } + to { + opacity: 1; + transform: translateX(0); + } +} html { margin: 0; @@ -9,48 +25,66 @@ html { body { margin: 0; - background: #F2F2F2; - > header { - padding: 2rem 0; - background: #282A36; - color: white; - box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, 0.25); - a { - color: $primary; - text-decoration: underline; - &:focus, - &:hover, - &:focus span, - &:hover span { - outline: none; - color: white; - } - } - a .secondary { - color: $secondary; - } - a .normal { - color: white; - } - .dim { - color: #ccc; - } - } + color: $dark; + background: #F2F2F2 url(../../assets/site/bg.png); + font-family: Rokkitt, serif; + font-size: 20px; } .wrapper { - padding: 0 2rem; + padding: 0 $spacing-md; max-width: $max-width; margin: 0 auto; } -a { - color: $secondary; +h1, h2, h3, h4 { + font-family: 'Poiret One', sans-serif; +} + +h1 { + font-size: 3em; + margin: $spacing-md 0; +} + +body > header { + font-size: .75em; + padding: 2rem 0; + background: $dark; + color: white; + box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, .25); + a { + color: $primary; + text-decoration: underline; + &:focus, + &:hover, + &:focus span, + &:hover span { + outline: none; + color: white; + } + } + a .secondary { + color: $secondary; + text-decoration: underline; + } + a .normal { + color: white; + text-decoration: underline; + } + .dim { + color: #ccc; + } +} + +body > main a { + color: $secondary-dark; text-decoration: none; + border-radius: 3px; + &:focus, &:hover { outline: none; - color: lighten($secondary, 10%); + color: $secondary; } &:active { background: black; @@ -74,9 +108,12 @@ video { } #content { + animation: fadeInRight 500ms ease-out; + p { width: 50%; clear: both; + margin-bottom: 1em; &:nth-of-type(odd) { float: left; @@ -89,7 +126,113 @@ video { img, video { - margin: 0 auto; + margin: 1em auto; display: block; } } + +#home > * { + padding-top: 0; +} + +.posts { + list-style-type: none; + padding: 0; + + figure { + border-radius: 3px; + overflow: hidden; + background: white; + float: left; + cursor: pointer; + transition: box-shadow 100ms, transform 100ms; + box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, .075); + + &:hover, + &:focus { + transform: translateY(-.25rem) scale(1.05); + box-shadow: 0 .25rem 1.5rem .25rem rgba(0, 0, 0, .075); + } + + &:active { + transform: translateY(.25rem) scale(.95); + box-shadow: 0 .25rem .5rem .25rem rgba(0, 0, 0, .1); + } + + img { + object-fit: cover; + border-radius: 0; + opacity: .2; + display: block; + } + + .preview { + position: relative; + display: inline-block; + + h3 { + color: white; + position: absolute; + bottom: 0; + left: 0; + margin: .5em; + } + + &::before { + content: ' '; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: $dark; + } + } + + figcaption { + font-size: .9em; + color: $light; + display: inline-block; + + footer { + margin-top: 1em; + color: $lightest; + } + + .secondary { + float: right; + color: $secondary-dark; + } + } + } +} + +[data-type=bundle] { + width: 100%; + + figure { + width: 100%; + + .preview { + float: left; + } + + .preview img { + height: 2.5em; + } + } + + figcaption { + float: right; + padding-right: .5em; + } +} + +[data-type=article] .preview img { + width: 100%; + height: 9rem; +} + +[data-type=article] figcaption { + padding: .5em; +} diff --git a/src/assets/media/navigating_employee_benefits/preview.jpg b/src/assets/media/navigating_employee_benefits/preview.jpg new file mode 100644 index 0000000..7e2f44f Binary files /dev/null and b/src/assets/media/navigating_employee_benefits/preview.jpg differ diff --git a/src/assets/media/patient_education/preview.gif b/src/assets/media/patient_education/preview.gif new file mode 100644 index 0000000..1faaccc Binary files /dev/null and b/src/assets/media/patient_education/preview.gif differ diff --git a/src/assets/media/photography/preview.jpg b/src/assets/media/photography/preview.jpg new file mode 100644 index 0000000..4864dfb Binary files /dev/null and b/src/assets/media/photography/preview.jpg differ diff --git a/src/assets/site/bg.png b/src/assets/site/bg.png new file mode 100644 index 0000000..c3a53ac Binary files /dev/null and b/src/assets/site/bg.png differ diff --git a/src/assets/site/face.png b/src/assets/site/face.png new file mode 100644 index 0000000..e163ec1 Binary files /dev/null and b/src/assets/site/face.png differ diff --git a/src/index.md b/src/index.md index 75e4985..83d47e6 100644 --- a/src/index.md +++ b/src/index.md @@ -1,10 +1,7 @@ --- layout: index.html --- -

- Heyya,
- I'm Joe L. Wroten, -

-

... an edge riding web tech architect aimed at realizing the best tools to communicate valuable informationt o the people who need it.

-Patient Education +# Heyya,
I'm Joe L. Wroten, + +... an edge riding web tech architect aimed at realizing the best tools to communicate valuable informationt o the people who need it. diff --git a/src/posts/animated-awards.md b/src/posts/animated-awards.md new file mode 100644 index 0000000..5f7c502 --- /dev/null +++ b/src/posts/animated-awards.md @@ -0,0 +1,15 @@ +--- +title: Animated Awards +type: article +order: 302 +preview: navigating_employee_benefits/preview.jpg +description: Putting some pep into company values through animation. +client: Laureate University +layout: post.html +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan varius dui. Vestibulum ut porttitor nulla. + +Quisque at mi eros. Curabitur tempor massa mi, at luctus neque sagittis nec. Nullam suscipit malesuada eros at accumsan. + +Sed in justo sed ante aliquam mattis. Donec scelerisque neque sed augue sodales vestibulum. Curabitur sagittis ligula eget ex vestibulum imperdiet. Nunc orci nisi, dictum et congue sit amet, pulvinar et elit. Maecenas pellentesque non dui non lacinia. Quisque pretium nisi in velit placerat maximus. Ut rutrum feugiat interdum. diff --git a/src/posts/navigating-employee-benefits.md b/src/posts/navigating-employee-benefits.md new file mode 100644 index 0000000..80560da --- /dev/null +++ b/src/posts/navigating-employee-benefits.md @@ -0,0 +1,15 @@ +--- +title: Navigating Employee Benefits +type: article +order: 303 +preview: navigating_employee_benefits/preview.jpg +description: Understanding your benefits package doesn't need to be hard. +client: Johns Hopkins +layout: post.html +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan varius dui. Vestibulum ut porttitor nulla. + +Quisque at mi eros. Curabitur tempor massa mi, at luctus neque sagittis nec. Nullam suscipit malesuada eros at accumsan. + +Sed in justo sed ante aliquam mattis. Donec scelerisque neque sed augue sodales vestibulum. Curabitur sagittis ligula eget ex vestibulum imperdiet. Nunc orci nisi, dictum et congue sit amet, pulvinar et elit. Maecenas pellentesque non dui non lacinia. Quisque pretium nisi in velit placerat maximus. Ut rutrum feugiat interdum. diff --git a/src/posts/patient-education.md b/src/posts/patient-education.md index a14c554..e5d89d8 100644 --- a/src/posts/patient-education.md +++ b/src/posts/patient-education.md @@ -1,5 +1,10 @@ --- title: Patient Education +type: article +order: 301 +preview: patient_education/preview.gif +description: Creating a "Street View" for anatomy and "Youtube" for doctors. +client: Rendia layout: post.html --- diff --git a/src/posts/photography.md b/src/posts/photography.md new file mode 100644 index 0000000..c3388ec --- /dev/null +++ b/src/posts/photography.md @@ -0,0 +1,9 @@ +--- +title: Photography +type: bundle +order: 400 +preview: photography/preview.jpg +layout: post.html +--- + +Photos here n such