So it’s been five years I last made a new version of mnjul.net and almost two years after I took the homepage down. Since I have been relatively having more free time, I’ve just launched a brand new personal homepage embodied with my recent front-end knowledges. Of the notable are:
- I’m finally making some responsive-web-design by not serving two different templates — the viewport currently supports width down to 1000px (with default is 1200px) to be tablet friendly, done with media queries. Well, I haven’t decided how smartphone viewport should look though.
- CSS filter effects for monochroming thumbnails and giving back full colors when hover. Comes from CSS Secrets by Lea Verou which by the way is a very nice read.
- A rippling effect on button hover, purely implemented with CSS
- The wavy section junctions are dynamically drawn with canvas, and on top of that, resizes nicely when the viewport resizes.
- I have finally gave in and do the LESS compilation on my local machine as one of my deployment step (automated with Sublime Text packages for that matter). The huge benefit for me is that I can combine the LESS and normalize.css and Font Awesome in one (big) CSS file to reduce network overhead.
For now, I’m still considering the homepage as beta. Forthcoming features include a smartphone-screen friendly viewport plus some layout optimization for desktop/tablet viewport, a PHP-backed contact me feature, and some other minor visual/UI tweaks. But needless to say I’m super satisfied with what I’ve done as somebody with no UX/UI/visual design taste :p. On top of this, let me thank my wife, Angela, for giving me valuable suggestions and inspirations regarding UX/UI/visual designs.
Besides mnjul.net, I have snatched other domains that relate to my name. For the homepage served through those other domains, I have enabled Cloudfront CDN. My ultimate goal is to server mnjul.net on CDN too (but since mnjul.net has some other webpages and I’ll eventually hook up a contact me feature, this still needs some planning). Additionally, I currently always serve 2x (“retina”) version of thumbnails sprites — should be serving 1x version if the browser is not HiDPI or retina.