Skip to content

AlexFaraino/Yojimbo_2014

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 (<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.


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.


Javascript

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.


Grunt

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.


Responsivity

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.


Scrollable areas

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)


Popups for projects


SVG

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.


Softwares

This project have been done on a Mac. I used SublimeText 2 for code editing. For design purpose, I love to use Sketch


Favicon and Apple icons

Made from my Sketch SVG sources, cropped, optimized and converted.


.htaccess

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


Performance check

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

About

4th version of my personal website

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published