For my Stream 1 Project I built a website which I can use to advertise my services as a web developer/designer. To do so I used HTML, CSS, Javascript and JQuery. The design I was hoping to achieve is a professional looking site which clearly identifies the services we offer and allows the user to get in touch with us easily. I received inspiration for the layout style from http://themexlab.com/htmldemo/mordant/, www.avalanchedesigns.ie, www.thinkwebsites.ie and nuadesign.ie I liked the color scheme from www.kissmetrics.com so I incorporated a similar color scheme. the main layout of the site is built using Bootstraps grid layout.
The Website is currently being hosted live by Github Pages at url: http://primovisto.github.io/Velabri-Ltd/index.
HTML
CSS
Javascript/jQuery
Bootstrap
I decided to include a preloader for the website. This was the first task I undertook for the website.I went with 3 bouncing balls to mimic the loading process. I used HTML, CSS and Javascript to complete the preloader.
CSS was a vital part of the preloader build and style. I used css keyframe animations to get the loading balls to bounce. I needed to incorporate Javascript to tell the preloader when to stop operating. The preloader will stop operating after 3 seconds and will redirect to the homepage/required page after that timeframe. I wanted to incorporate a fixed header menu that would stay at the top of the page as the user scrolls down. I liked the header at https://blackrockdigital.github.io/startbootstrap-creative/ and used that for inspiration on the look of the dropdown.Bootstrap was used for the menu navigation and for mobile devices a dropdown menu feature was incorporated to improve the look and feel on mobile.
Javascript was incorporated to tell the 'window' to fix the menu to the top of the page once the user scrolls down the page more than 70 pixels. The javascript added a class "navbar-fixed-top" when the user scrolled down more than 70px this class fixed the menu to the top of the page and styled the menu accordingly.I wanted to include our 'Services section' towards the top of the page so that it would be quite prominent. Originally I used icons from 'font-awesome' to display the services visually but changed to images from another free icon service website. I added css transforms to the icons to improve user experience and made them link to the 'services page'. I also added a button at the bottom to direct the user to the services page.
The 'Why Choose Us' section is basically 3 columns, 1 right, 1 left and center image. The center image is designed to disappear on smaller devices such as tablet and phone.
Almost like a banner with call to action wording and button leading to our 'Get a Quote Page'
Images of previous projects in grayscale with change to full color on hover.
4 columns in each row changes to 2 columns for smaller devices.
Images of Front-End Skills that are scaled and get larger on hover. Inspiration for this scale feature was gained from www.flowwebdesign.ie.
Wanted a simple footer that maintained the color scheme and provided information and links to different features of the site.
I generally used 'Open Sans' for normal sized paragraphs and small headers and 'Roboto:900' for larger headers. The link to both were downloaded from 'google fonts'
The color scheme at www.kissmetrics.com was used for inspiration. Black(#000), White(#fff) and Light Blue(#32c4e9) made up the color palette.
Images for the website were attained from free image download sites such as pixabay.com and pexels.com. The images were converted to urls via tinypic.comWith all pages on the site I wanted to maintain the same overall look and feel.
Manual tests were carried out on the fixed header dropdown on scroll. It was tested on numerous devices and browsers and worked on all.Manual tests were carried out on the Page Preloader timeout. It was tested on numerous devices and browsers and worked on all.
jQuery Dropdown Paragraph on click in Services page.
jQuery icon color change on mouseenter in 'Why Choose Us' section.
2 contact forms were used. 1 on the 'contact us page' and 1 on the 'get a quote page'
Added Favicon to head tag in html of all pages
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent