A Portfolio Site based on a design mockup PDF.
-
Using
<picture>
tags for all images (of significant size) to utilize native responsive image loading strategy of the browser. I preferred this over the use ofbackground
images, those being more problematic to load responsively. I had to tackle sizing and popup issues in return. -
Featuring cropped images for smaller viewport, resized for larger. See the banner image.
-
Ellipsis feature to symbolize clipped texts
-
Complete Grunt workflow to streamline all relevant tasks, e.g. image optimization, CSS and JS optimization.
-
Python tool to generate portfolio items from a JSON file. Helps to eliminate redundant sources.
-
Equalizer fixes article heights tackling the problem of
onload
events not fired for cached images.
-
Ellipsis doesn't respond to short texts. Neither Clamp.js (Firefox issues) nor the straight CSS choice (missing autodetection for short texts) brought a solution. I have simply stepped up verbosity to tackle that. Not satisfying.
-
Node.js might totally block the sytem eating 100% cpu, at least on my Windows 7 Professional. Switching to Gulp felt out of scope given the focus of this project.
-
Less watcher is painfully slow on my Laptop. 20 seconds from changing .less files until live reload kicks in.
-
W3C Jigsaw validation for the CSS files fails both for Slick.js and Bootstrap in it's native code.
npm install
bower install
grunt server
2017-03-06T22:07:06.099000