Added image minification pipeline & some screens; tweaked markup & st…

…yling

index.html

@@ -18,7 +18,7 @@
 	<header>
 		<h1><span class="dec" role="presentation">.:.</span> <span class="sitename">njmcode</span> <span class="dec" role="presentation">.:.</span></h1>
 		<div class="overview">
-			<p><strong>Neil McCallion</strong> - web developer, technical lead and platform evangelist.</p>
+			<p><strong>Neil McCallion</strong> - web developer, tech lead, evangelist and cake eater.</p>
 			<p>Currently Head of Frontend Development at the mighty <a href="https://rehabstudio.com/" target="_blank">+rehabstudio</a>.</p>
 		</div>
 	</header>
@@ -45,10 +45,9 @@ <h2>Contact</h2>
 		<section id="work">
 			<a name="work"></a>
 			<h2>Selected work</h2>
-			<p>Much of my output over the last six years has been white-labelled or developed under NDA. Some selected public work is listed below.</p>
 			<h3>As developer</h3>
 			<a class="img-link" href="https://codepen.io/collection/nbGQxZ/" target="_blank" title="Demoscene collection on CodePen">
-				<img src="assets/img/screens/cp-demoscene-640.png" width="320" alt="Screenshot of Demoscene collection on CodePen">
+				<img src="dist/assets/img/cp-demoscene-640.png" width="320" alt="Screenshot of Demoscene collection on CodePen">
 			</a>
 			<ul>
 				<li><a href="https://codepen.io/njmcode/" target="_blank">Codepen</a> - regular experiments and tinkering</li>
@@ -60,11 +59,15 @@ <h3>As developer</h3>
 				<li><a href="https://github.com/njmcode" target="_blank">GitHub</a> personal repos</li>
 			</ul>
 			<h3>As technical lead / producer</h3>
+			<a class="img-link" href="http://againstviolentextremism.org" target="_blank" title="Against Violent Extremism website">
+				<img src="dist/assets/img/ave-640.png" width="320" alt="Screenshot of Against Violent Extremism websiten">
+			</a>
 			<ul>
 				<li><a href="https://rehabstudio.com/" target="_blank">rehabstudio.com</a></li>
 				<li><a href="http://againstviolentextremism.org" target="_blank">Against Violent Extremism</a> for ISD</li>
 				<li><a href="https://github.com/rehabstudio/fe-skeleton"  target="_blank">+rehabstudio FE Skeleton</a></li>
 			</ul>
+			<p>Much of my output over the past 6 years has been super-secret stuff for clients, so it can't be shown here. <a href="#contact">Hit me up</a> if you wish to discuss the nature of my work in more detail.</p>
 		</section>
 		<section id="skills">
 			<a name="skills"></a>
@@ -110,7 +113,7 @@ <h3>Mentorship &amp; evangelism</h3>
 			<a name="info"></a>
 			<h2>Other info</h2>
 			<p>Educated to degree level (BA Hons).  Able and willing to travel.</p>
-			<p>I &hearts; game playing &amp; development, making music, beer, (occasionally) working out, pro wrestling, cinema, and a bit of indoor bouldering.</p>
+			<p>I &hearts; cake, game playing &amp; development, making music, beer, (occasionally) working out, pro wrestling, cinema, and a bit of indoor bouldering.</p>
 			<p>Full references available on request.</p>
 		</section>
 		<aside id="to-top">

package.json

@@ -5,8 +5,9 @@
   "main": "src/js/index.js",
   "scripts": {
     "autoprefixer": "postcss -u autoprefixer -b 'last 2 versions' -r dist/css/*",
+    "imagemin": "imagemin --plugin=pngquant assets/img/* --out-dir=dist/assets/img/",
     "styles": "node-sass src/scss --output=dist/css/ --output-style=compressed && npm run autoprefixer",
-    "build": "npm run styles",
+    "build": "npm run styles && npm run imagemin",
     "watch": "nodemon -e scss --watch src/scss -x \"npm run styles\""
   },
   "repository": {
@@ -21,6 +22,8 @@
   "homepage": "https://github.com/njmcode/njmcode-folio#readme",
   "devDependencies": {
     "autoprefixer": "^6.3.7",
+    "imagemin-cli": "^3.0.0",
+    "imagemin-pngquant": "^5.0.0",
     "node-sass": "^3.8.0",
     "nodemon": "^1.9.2",
     "postcss-cli": "^2.5.2"

src/scss/_fonts.scss

@@ -1,4 +1,4 @@
-$font-path:'../../assets/fonts/';
+$font-path:'../fonts/';
 
 @font-face {
     font-family: '4Mini';

src/scss/main.scss

@@ -14,7 +14,6 @@ body {
 	color: $c-text;
 	font-family: monospace;
 	font-size: 1.1em;
-	line-height: 1.4;
 }
 
 a {
@@ -38,6 +37,10 @@ small {
 	color: $c-base;
 }
 
+p, ul li {
+	line-height: 1.4;
+}
+
 h1, h2 {
 	@include pixel-font;
 	color: $c-title;
@@ -54,6 +57,7 @@ h1 span.dec {
 h3 {
 	@include pixel-font-caps;
 	color: $c-heading;
+	margin-bottom:0.1em;
 }
 
 h2 {
@@ -66,6 +70,7 @@ ul {
 	color: $c-base;
 	list-style-type: square;
 	padding-left: 1.5em;
+	margin-bottom: 2em;
 }
 
 li {
@@ -109,7 +114,8 @@ nav {
 				text-align: center;
 				background-color: transparent;
 				text-shadow: 2px 2px 0 $c-text;
-				padding: 0.3em;
+				padding: 0.4em 0.3em 0.3em;
+    			line-height: 1;
 
 				&:hover {
 					background-color: $c-nav-hover;
@@ -134,6 +140,12 @@ section {
 	a[name] {
 		display: none;
 	}
+
+	&#work {
+		h3 {
+			margin-bottom: 0.6em;
+		}
+	}
 }
 
 footer {