Yojimbo.fr - Update Jan. 2014
Hi there ! Welcome here, take a seat. You're on the repository where my website sources are stored. I just finished my portfolio redesign, and I wanted to speak about it, and spend a bit of time to explain what choices I made, and why.
HTML 5 / Jade
The markup language is obviously HTML 5. I used some semantic elements to better define the structure (
On the content side, I had a list of project to display. Instead of having a server and a database running, I choose to put everything in a JSON file, and generate the HTML with the help of Jade.
SASS / CSS 3
All the CSS is compiled from
.scss files. I used a recent version of Sass in order to enable sourcemaps, and be able to debug directly the sass inside the Chrome DevTools.
Compilation is made with Grunt.
<aside> on small screens, managing scrollable areas (more details below).
I could have get rid of jQuery, it will probably be the next evolution of the website.
I tried to follow good practices, like caching my jQuery selectors, avoid anonymous function …
My gruntfile is in coffeescript, in order to avoid the huge number of curly brackets. I'm using a list of common plugins, like JSHint, Watch, open, autoprefixer … And some less common plugins, like Staticinline and SVGmin.
The website has only one breakpoint, at 855 pixels. Switching from a "desktop" view with both side panels shown, to a "small screen" view, where the side panels are pushed aside.
I tried using some modern units like VH to size some areas, but a bug in webkit prevent the dimensions of the areas to refresh when resizing the browser. Next time !
I used a trick to bind/unbind the click event used to show/hide the 2
<aside> are scollable (especially on small-screen). And I didn't want to have a scroll bar right in the middle
of the website (the one from the left
<aside>). So I decided to hide them.
To get the width, I have 2 small
<div> at the bottom of the HTML, with some CSS (Fixed width wrapper containing a percent width element).
Popups for projects
I wanted to have my avatar as SVG in the center area of the site, to simplify the handling of display on high-density screens. I also found some good social icons, that were made with Sketch, I modified them to fit the theme of the site.
Favicon and Apple icons
Made from my Sketch SVG sources, cropped, optimized and converted.
I've set up an .htaccess file, because the site is currently on my good ol' french hosting provider (ovh.com). I'm on a shared plan, so very few options can be customized. Here's a list of my htaccess settings :
Compression (Deflate) of comon mime-type files
Expires headers tweaking (That I will probably extend when I'll switch on versioned filenames)
Rewrite engine avtivation
Force UTF-8 encoding
File access blocking (For sensible data, sources...)
I tried to prevent the server to send cookies, but this is not a configurable option, so it doesn't work
With Google Pagespeed : Wohoo 100/100 \o/
Next steps to do
- Spell Check
- Use versioned filenames for static assets, in order to maximize cache expiry
Echapto close popups
- Set up CloudFront