Background Full Screen Video

Also using parrallax scrolling via parallax.js & fitvids.js to make the embedded video responsive for all devices and all modern browsers.

Built on Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Features

Bootstrap is compatible with the latest versions of the Google Chrome, Firefox, Internet Explorer, Opera, and Safari browsers, although some of these browsers are not supported on all platforms.

Since version 2.0 it also supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).

Starting with version 3.0, Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default.

Bootstrap is open source and available on GitHub. Developers are encouraged to participate in the project and make their own contributions to the platform.

 

Using fitvids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design. FitVids.js was built by Chris Coyier and Paravel

 

 

Also utilising parallax.js

Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin.

What parallax.js will do is create a fixed-position element for each parallax image at the start of the document’s body. This mirror element will sit behind the other elements and match the position and dimensions of its target object.

Due to the nature of this implementation, you must ensure that these parallax objects and any layers below them are transparent so that you can see the parallax effect underneath. Also, if there is no other content in this element, you will need to ensure that it has some fixed dimensions otherwise you won’t see anything.

Parallax Scrolling?

Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1930s.

 

With jquery.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Features

jQuery includes the following features:

  • DOM element selections using the multi-browser open source selector engine Sizzle, a spin-off of the jQuery project
  • DOM manipulation based on CSS selectors that uses elements' names and attributes, such as id and class, as criteria to select nodes in the DOM
  • Events
  • Effects and animations
  • AJAX
  • Deferred and Promise objects to control asynchronous processing
  • JSON parsing
  • Extensibility through plug-ins
  • Utilities, such as feature detection
  • Compatibility methods that are natively available in modern browsers but need fall backs for older ones, such as inArray() and each()
  • Multi-browser (not to be confused with cross-browser) support

Browser support

Both versions 1.x and 2.x of jQuery support "current-1 versions" (meaning the current stable version of the browser and the version that preceded it) of Firefox, Google Chrome, Safari, and Opera. Version 1.x also supports Internet Explorer 6 or higher. However, jQuery version 2.x dropped Internet Explorer 6–8 support (which represents less than 28% of all browsers in use) and supports only IE 9 and later versions.

 

Finally, using a Smooth Scrolling effect

From the online tutorial "Improved Animated Scrolling Script for Same-Page Links" by Karl Swedberg

The following script is the simplest application of a smooth scrolling effect that I was able to find on the web, simply copy and paste the javascript code into your website.

<script>
    $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

 

Social Media

We all have personal brands and most of us have already left a digital footprint, whether we like it or not. Proper social media use highlights your strengths that may not shine through in an interview or application and gives the world a broader view of who you are. Use it wisely.
- Amy Jo Martin