I have created two websites for Velorim. The first version of the website I created was a simplistic on page website and contact form made when I was volunteering at the Cycle-R charity in Cannock where the idea of Velorim originally began. For this website there was simply a page of information that had to be on a simple website, to get the point across to early visitors in the industry and provide them with a point of contact. For the first version of the website I have used Skeleton CSS framework along with PHP mailer. This website features:
The Old Site
The second version of the website is a lot more complex. For this I will break down into specific areas.
The original design for the Velorim website was provided by one of the Velorim directors and the goal was to make a website that matched the design aspects of their physical leaflets, due to the limitations of the web the original design had to be changed slightly but most of it is following the original plan. The main desktop layout is divided into 3 sections from left to right. I have named these the following: the side panel, the well(for images) and the text area(1 and 2). in order to make proper use of the screen while still staying true to the main design, I have made the text area split into two sections stacked on top of each other. This allows me to make use of the CSS grid to put the well in the middle of the content area if there is a limited amount of horizontal space such as on mobile phones.
The website uses Laravel as its base. Laravel is great for this project as it allows for more manageable development using page templates and the thoughtfully tested security features. It also allows for the website to be built faster using its built in features such as Eloquent and the database migrations. I am also using SASS for the CSS primarily for its variables that are compiled into universally supported numbers instead, but features like nesting also speed up development.
The Velorim website also includes the feature of find my nearest centre. In order to achieve this we have a list of registered centres in a database. When a new centre is added a call is made to the google maps API in order to save its position on the earths surface in the form of long and lat into the database. As the earth has a curve, the distance between 0.002 longitude is different in the south of England that it is in the north of Scotland. As a result we use an number in between the two. So instead we use the distance that you may find in the Lake District to make an quick estimate. When you enter the address on the website every centre in about 5, 10 or 20 miles is shown then one of two things happen. If there is at-least one centre near you then the results page is displayed along with its estimated distance and time (by car) form your address. Then a button is pressed so you can see it on google maps and see directions on google maps. If there are no centres near you then the search expands until a centre is found, this way a visitor will always see their nearest centre even if there is not one currently nearby.
This second version of the website features: