CV Website
jQuery is a fast, small, and feature-rich JavaScript library.
Needed by many of the animations and resoponsiveness on the website.
List on dependent libraries:
- bpopup
- Circliful
- Waypoints
- lightbox
- Bootstrap
- Parallax
Url: https://jquery.com/
A effect which has become common on webpages. The effect is achieved by a background image scrolling slower than the forground.
Parallax scrolling images were used to separating the different sections of the website.
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.
This is used for the educations section of the webpage. At full size the tabs are horizontal with the years nested inside vertically. When viewed on a mobile device the tabs change to an accordion.
A client side, lightweight JavaScript framework. Used for dynamic elements of a webpage
The tables in the education section of the webpage are generated using AngularJS. The subjects and grades are stored in a separate file in JSON format.
A front end webframework for creating responsive webpages. Bootstrap contains both a CSS and JavaScript components.
Bootstrap was used as much as possible in the design of the site. Uses include:
- div layout
- Contact form
- Buttons
- Modal windows
- Carousel
- Navigation bar
bPopup is a lightweight jQuery modal popup plugin
bpopup is used for the a confirmation prompt when the contact from is sent. The prompt arrears and autocloses after 3 seconds. The message used was got from http://www.cimatti.it/2013/form-success-message-best-practices-examples/
A library which uses JQuery to trigger actions using the scrolling action of the user. The website is full of useful examples and documentation.
Waypoints is used to trigger the animation of the section headings when the user scrolls. It is also used to trigger the animatin of the skill circles.
A CSS, JavaScript and JQuery plugin which enables the creation of statistic rings. These rings are animated when loaded.
The skill section is created using the Circliful library
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
The Font-Awesome toolkit allowed the use of icons throughout the webpage Uses include:
- Icons in the nav bar
- Social media icons
- icons beside the contact details on the contact form
A library of CSS animations.
The section headers are animated using the Animate.css library.
A simple vanilla JS script to animate scrolling to anchor links.
When the links on the nav bar are clicked the scrolling the the part of the webpage is animated instead of jumping to that point of the page abruptly.