Chloe provided a list of features she wanted included in the site to give me a checklist for the most important parts.
Before starting to build the site, I set out a basic development timeline using a gantt chart which would not only give the client an idea of what will be finished when but, also give me a time frame to work to and have different parts ready for.
This site allowed me to be a lot more experimental than usual with the design. I began the project by creating a mock up for the home page in Photoshop, using this, I was then able to add and remove elements easily with layers with feedback from the client. Knowing Chloe quite well, I opted to go for the bright yellow and black highly contrast colour scheme as it fits with her surreal and colourful art style. However, the plan was for the primary site colour to be customisable so this would not matter to much in the long run. The site was also designed to be single page, with a long scroll to suit a mobile device so that it would be optimised for traffic originating from Instagram where Chloe had an established following.
To make deployment for the site as well as updating and changing parts of the site, I started the project by creating a new GitHub repository. After setting up Laravel using composer I had a base set of files which I could deploy as an initial commit and serve as the foundations of my project. I also installed the Laravel UI package to quickly set up a front end scaffolding and install Vue.js.
Once all the necessary dependencies for the projects where set up, I could create a main Javascript file to initialize Vue in and deploy the front end application to the 'welcome' view provided by the UI package.
The benefit of using Laravel and Vue together is that I'm able to take advantage of server side rendering, ajax requests and the functionality of JavaScript. In short, the actual rendering of each page is handled by Laravel and initial data can be injected into a Vue, but on these server rendered pages there are Vue components that can take that data and manipulate it. This allows for neatly packaged Javascript without having to wait for ajax requests to process on initial page load.
An issue that arrose when building this site is the large initial load time because of all of the different data that has to be loaded into the browser before the page loads. To remedy this, I would create a REST API with routes for different purposes. These would called by relevant Vue components that can show loading views while waiting for data to be returned. This creates a better user experience and makes for a faster site.
To begin creating the Api, I would first need to build some database models
Using the post model as an example; I first built a database migration. A migration is a sort of blueprint which allows a developer to outline the columns used in a database table and what data type they use. A migration can also add defaults, timestamps, make fields nullable and much more. The advantage of building a database this way rather than manually is that, when working with other people or deploying the project, a database can be built with a simple command and be set up instantly for a projects specification.
The second file created by the command is a model. A model allows for laravel to interface with a data table. The one shown here is extremely simple and indicates the fields that can be filled edited. Models can be used to define relationships between data tables, perform quick data processing and are imported into controllers to manipulate data.
Controllers are the brain of the MVC (model view controller) structure, all data processing and database manipulation is done in theses files before a response is sent.
In this example, there is a simple function called project posts which will return all posts with a given project id. This could also be done using the aforementioned relationship definitions which can be defined in a model.
Each api end point would be assigned a function from a controller and return a set of data to be used in the front end of the site. For example, this particular function is used on an individual project page to display all posts relevant to it.
To actually put the controller functions to use, routes are needed to return the data.Each of these are different end points on the site which can be queried using a javascript library called axios.
Routes are also able to take variables to do more specific data processing, such as adding an id so that the controller know which project needs to be changed or shown.
Once data was pulled into the front end, I rendered out each project as a vue component. As a component, each project card can have it's own data, methods and custom elements. This means that the images can be lazy loaded after initial page load and a loading icon can be displayed while the image is loaded. Normally I would swap between the loader and the image once the image is loaded, however, because this is an illustrator's portfolio, I thought it would be a good idea to have a pencil drawing in the image and I think this turned out quite nicely.
Each project has posts associated with it. Posts can be text, images or video and can have multiple layouts so that if she wanted, Chloe would be able to add naratives or descriptions for each image.
.gif)
Creating post is just a matter of using a simple form, Chloe can first pick a project that she has created from a generated list and then go on to select the title, post type and layout to her liking.
The list of projects is generated using blade's @foreach directive which I can use to list out all of the projects in the database and use their ids as select values. This creates a has many relationship between projects and posts.
When a post layout and type are selected for the post, they are assigned a string which states the post type and a number which correlates with a layout.
As shown here, each of these blocks are laid out in different ways and are swapped out depending on which layout id the post has. The media type is also swapped out within the content-container div so that the layouts can be reused for all content types.
One of Chloe's requests was to be able to change the primary site colour to match the hero image she changes. To do this, I added an additional form on the dashboard of her admin panel to handle general site adjustments. These values would be saved to the database and queried on top level page components to make the colour appear across the site. This page also acts as the place where her bio, bio image and banner can be changed. Having all the page customisation options in one place makes for an easy one place experience for the client.
"Red Squirrel Studio provided me with an open space to present my portfolio and sell my work. Being both a student and a small business owner, I needed a space to organise my work and present it in a way that reflects my style. Using the blog style portfolio feature has been incredibly useful and I was given complete freedom on putting posts together, captioning, and organising the project folders. The website is of high quality, clearly laid out, and in a way that serves to the needs of both my university work, and customers who need to find out about me and what I do. It is easy to navigate, and easy for me to edit and upload to, with the shop feature being accessible and straightforward for purchases."
- Chloe Penn