wesley.heungs.com
A handwritten portfolio website

Go to GitHub HTML CSS JavaScript jQuery Jekyll Bootstrap

Design Goals

To build a website that would supercede the previous one, I decided that I would have to go beyond the limited power of a free website builder. Therefore, I explored many (free) options available to web designers. They are listed below. This website was also a good way to practice using several web development tools, covered in the tools section. This website was a learning experience as I built it.

Engaging

This site uses beautiful Bootstrap styles and Parallax animations from Skrollr to engage the audience. User interface components are familiar Bootstrap fonts, colours, and designs, but all background pictures are originally created for this website. Check out my photography for more pictures.

Reactive

A beautiful website is useless if no one can see it! With so many different devices accessing the internet, it is important to ensure that the website is usable by everyone. Using Twitter Bootstrap's built-in styles and careful CSS formatting, the website is designed to be easy to navigate on any device, regardless of screen size and input method.

For example, to facilitate touch users, there are no dropdown menus or tooltips that only appear when the cursor is hovering over them. I promise. After all, it's not easy to hover with a touchscreen! All hover actions are strictly cosmetic, like hyperlinks being underlined on hover.

To accomodate many different screen sizes, Bootstrap's reactive column layout is utilized. See the projects page render in many different viewports! This ensures eliminates the horribly wide blank margins often found in websites today.

Maintainable

In order to minimize the effort required to keep the site running, pages are designed to be easily added, edited, and removed. Headers and other elements conserved across multiple pages are stored as seperate files that are loaded into each page by JQuery's load(...) function, as below. This ensures that the menu bars and navigation features are identical from page to page and allows me to make a single change that affects all the pages.

/* On document load */
$(function () {
    /* Load the header HTML */
    $("header").load("/header.html", function () {
        $("#" + $("header").attr("active")).attr("class", "active"); // Set the active item on the navbar to to the one specified
    });
    /* Fix anchors */
    var shiftWindow = function () { scrollBy(0, -50); };
    window.onhashchange = shiftWindow; // Internal page anchor
    if (window.location.hash) shiftWindow(); // Reference from external link
});

The majority of styling is done with Cascading Style Sheets (CSS). This streamlines the creation of pages and ensures that similar content is styled consistently across the website. The Liquid templating engine also allows me to keep pages consistent across large sections of the site.

Libraries

Name Usage Website
JQuery DOM Manipulation https://jquery.com/
Bootstrap Reactive CSS and visual components http://getbootstrap.com/
Google Code Prettify Embedded source code https://github.com/google/code-prettify/
Skrollr Parallax backgrounds http://prinzhorn.github.io/skrollr/
Galleria Photo galleries http://galleria.io/
Fontello Glyphicons fontello.com
JQuery is an essential library when using Javascript. It allows easy selection of DOM elements with CSS-like selectors, adds callbacks on important events, and generally makes working with HTML much easier. It is also a dependency for many other libraries because of its aforementioned utility. Bootstrap (aka Twitter Bootstrap) is a HTML, CSS, and Javascript framework that is primarily used for decorating mobile responsive websites. It comes with many built-in styles and graphical features, which makes it a perfect foundation to build the site's visuals on. Google Code Prettify is a small Javascript library used to enhance the display of source code in the website. It is primarily used for its syntax highlighting feature. For example, it is used here to highlight the following Scheme) fragment:
(define ^
        (lambda (bs exp)
            (^-help bs exp 1)
        )
    )
    (define ^-help
        (lambda (bs exp power)
            (cond
                ((> exp 0) (^-help bs (- exp 1) (* power bs))) 
                ((= exp 0) power)
                ((< exp 0) (^-help bs (+ exp 1) (/ power bs)))
            )
        )
    )

A sample of Google Code Prettify on a small Scheme fragment.

Skrollr is one of the most popular parallax scrolling libraries in use today. It handles the backgrounds other parallax animations throughout the site. Galleria is a 100% responsive free photo and video gallery library written in JavaScript. Basic usage requires no JavaScript knowledge, but of course custom themes can be applied to the interface. The theme used in the Art pages was designed to fulfill the unique needs of this website. Using Fontello, I built myself a custom webfont with icons from Browser Logo Icons, Fontelico, Font Awesome, Iconic, Elusive, and Entypo
HTML:
<i class="icon-resize-full"></i>
<i class="icon-tumblr-squared"></i>
<i class="icon-help-circled"></i>W
<i class="icon-attention"></i>
<i class="icon-android"></i>
<i class="icon-firefox"></i>
Output:

A sample of some Font Awesome icons.

Tools

Name Usage Website
Sublime Text 3 Code formatting with HTMLPrettify plugin http://www.sublimetext.com/3
Microsoft WebMatrix 3 Local webserver hosting https://www.microsoft.com/web/webmatrix/
GitHub Version control and web hosting https://github.com/
heungs.com Front end url http://heungs.com/

The project began as a simple HTML page manually created in a folder on my desktop. However, it began to grow beyond my capabilities to organize as the number of pages increased. To manage the HTML and CSS files, I began using Sublime Text 3. The syntax highlighting offered by the base program was useful, but the real power came with the HTMLPrettify plugin that could auto-format the long files.

Soon after, I realized that I would need a webserver of some sort to host the pages. This would allow me additional power over what was served in a few crucial places: default pages (index.html) and error pages (404.html) for this reason, I used Microsoft's WebMatrix 3.

Pretty soon, the site was large enough that I had to worry about breaking it with accidental changes. At this point, it was important to use a version control system (VCS). Of course, GitHub would be a logical choice, since much of my source code was contained in the cloud there. I created the repository at github.com/Shadowen/shadowen.github.io. But GitHub also had an unexpected benefit of hosting static pages as well. Therefore, the website was also hosted at shadowen.github.io with the help of GitHub Pages.

Finally, the front end url was chosen to be a subdomain of my family domain. With a simple CNAME entry, the website was available at wesley.heungs.com.

Obstacles

Any project has obstacles to its success. Here are some that I encountered and how I overcame them.

Mobile Parallax

Skrollr is easy enough to create parallax backgrounds with. To obtain the effect I wanted, I simply tagged the div element that the background is contained in with data-top="background-position: 0% 0%;" and data-bottom="background-position:0% 100%;" attributes.

However, making the website work for mobile is much more difficult. As mentioned by the Skrollr README, many mobile browsers tend to delay or disable JavaScript while scrolling. So to my surprise when the page was first loaded on a mobile device, it was simply impossible to scroll down the page since Skrollr itself was disabled!

Fortunately, an easy solution is also documented. Skrollr is designed to make use of an element with the id skrollr-body to fake scrolling on mobile devices. Simply adding an extra div solved the problem.

Image compression

As I added images to the website, the repository size started to grow unbelievably quickly. It turns out that pushing megabytes of photos takes a long time. Instead, using GIMP, I simply scaled the pictures down to a reasonable resolution and decreased quality as necessary. As a result, the website loads much quicker, and my repository is much smaller.

Jekyll/GitHub Pages