If you're looking for a visual tool, Kaleidoscope is pretty good.

If you're chasing something to put in your pipe, BBC's Wraith is great.

Nice write up, Ashley. We've recently tried to tackle our variable issue, which is one you've raised but didn't really talk about.

$white: #FFF; $white-dark: #AAA; $white-dark-2: #CCC;

We all understand why that is wrong, but what's the alternative in your eyes?

We're going down the path of using the actual color name, so:

$color-white: #FFF; $color-silver-chalice: #AAA; $color-silver: #CCC;

And then at the top of each individual file, we assign the color variable to a more descriptive variable, like $color-headings-hover: $color-silver.

Variables are important to us - the manipulation we apply to rgba is highly beneficial. Also, we have one scss file per component, so sharing the color palette across all of our components with a central place to update is handy.

It all depends what he wants to achieve. If it's a showcase past work and technical experience, then make sure the design suits a more technically orientated audience (especially with software development).

If it's a portfolio hoping to result in employment, then he should choose the most prominent projects (or the ones he's most proud of) and display them simply and effectively. Avoid a massive amount of technical jargon.

I treat mine as a resume more than anything else. I've thought about extending it from time to time, but it serves its purpose for now:

http://jamescoleman.com.au/

Using audio/video tags in an SVG is outlined in the spec: http://www.w3.org/TR/SVGTiny12/multimedia.html#Smil2Media

JSConf / CSSConf, Web Directions (South / Code) are also good ones!