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.
The markup language is obviously HTML 5. I used some semantic elements to better define the structure (<section>, <article>, <aside> ...).
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.
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.
I didn't want to put a lot of Javascript. Majority of the animations are made with CSS3 (more details below). I just needed a bit of UI interactions : expanding <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 Javascript file is very small. In a way that it's more interesting to inline it inside the main HTML file, rather than force an extra request.
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>, that consists of getting the responsive state in javascript, with the help of a div, and media-queries CSS.
My both <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 do that, I had to know the scrollbar with, and with a bit of Javascript, resize a wrapper around the scrollable content
(set to overflow:hidden).
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).
Once the page loaded, th Javascript calculates the pixel-width of the percent-width element, and then removes the cluster)
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.
This project have been done on a Mac. I used SublimeText 2 for code editing. For design purpose, I love to use Sketch
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
-
https://github.com/h5bp/html5-boilerplate/blob/master/.htaccess
With Google Pagespeed : Wohoo 100/100 \o/
- Spell Check
- Use versioned filenames for static assets, in order to maximize cache expiry
Echapto close popups- Set up CloudFront