JOSHUA

STYLES

Software Developer, Full Stack Developer, SEO in Ayrshire

I am Joshua Styles, a 29 year old software developer based in Ayrshire, and this is my portfolio. I am a graduate of the University of the West of Scotland, achieving first class honours in BSc(Hons) Computer Games Development. I am currently working as a Full Stack Developer for Rare Trade, a web design company in Stevenston, North Ayrshire.

Continue on to read more about me or see some of the software and web development projects I have been involved in.

SKILLS

Professional Experience

Full Stack Developer:

9 months

Web Developer:

6 months

SEO:

6 months

Education

NC Computing with  Networking & Multimedia:

Pass

HNC Computing with Software Development:

Pass

BSc(Hons) Computer Games Development:

First Class

Technical Skills

  • Java

  • HTML5

  • CSS3

  • Javascript

  • PHP


  • JQuery/JQM

  • Wordpress

  • Angular

  • JSON


  • Object Oriented Programming

  • Software Development

  • Website Development

  • Website optimisation

  • Games Development

Tools

  • Adobe Creative Suite

  • GitHub

  • Slack

  • CPanel

  • WHM

  • Android Studio

  • Firebase

Methodologies & Soft Skills

  • Agile

  • Scrum

  • Teamwork

  • Communication

About Me

From my time spent in further education, I developed a strong background in programming and design, studying NC Computing with Multimedia and Networking at college, followed by HNC Computing with Software Development. At University, I achieved distinction for my BSc followed by First Class Honours for BSc(Hons) Computer Games Development at the University of the West of Scotland.

I have been programming for around 11 years now, starting out learning the basics with HTML4 and Visual Basic 6 before moving on to Object Oriented programming with C# and DarkBASIC. Since that time, my ability has improved considerably and I have been exposed to, and made use of, many different languages and technologies such as HTML5, CSS3, Javascript, Java, XML, JSON, Python, PHP, ActionScript3, SQL and more. The projects I have been a part of have consisted of applications and games for desktop, mobile and web, and websites.

The range of projects I have been involved in have allowed me learn about responsive design, native mobile application development (Android), SEO and networking. My education and work experience have granted me vast exposure to both front end and backend development.

My time at university taught me to learn and appreciate the "other parts" of software development - the soft skills, documentation, teamwork and presentation skills. As much as I enjoy programming and designing, I feel without my course I would never have discovered that I enjoy wearing many of the different hats on offer and the different types of work they entail, particularly project management and the critical importance of time management. The many types of required documentation and methodologies which keep projects in check, testing methods, processes such as gathering user requirements and feedback are all valuable elements I feel I would have missed out on without my educational background.

I worked as a Web Developer in Stevenston, North Ayrshire for the SEO company, Boyd Digital. As part of the tech team, I was responsible for the design and development of websites, creating and maintaining scripts, maintaining servers and providing remote assistance to the company's other offices around Scotland and the UK.

Currently, I work for a North Ayrshire based Web Design company, Rare Trade, as a full stack developer. I design and implement websites and systems for Ayrshire businesses. This requires me to make use of a wide variety of technologies such as Wordpress, Visual Composer, PHP, JQuery, Angular and many more.





Projects

View some of my favourite software development and web design projects below. Click on them to see more information.

Instant Messenger Client
Java - JFoenix

Instant Messenger Server
Java - JSON

Instagram Scraper
PHP - JSON

Drone Zone
Javascript - JSON - Phaser

Jaguar
Javascript - Phaser - PHP - JSON

Tetris Mobile
Javascript - JQuery Mobile - Phaser

Anaesthetic Aesthetic
C# - Unity - Blender

Checkers Online
Java - Android - Firebase - JSON

Rare Trade Website
Wordpress - Visual Composer

Astro Masters
Wordpress - Visual Composer

Contact

If you want to get in touch with me, feel free to use the information below.



Mobile:

07379342062

Email:

styles@outlook.com

LinkedIn:

https://www.linkedin.com/in/joshua-styles-048130a4/

Project: Instant Messenger Client

The Instant Messenger client is a desktop application that allows online text-based communication with other users via a central server. The team consisted of 5 members.

Background

The university assignment required our 5-person team to create an application which made use of networking technology. The choice of languages and type of application was left for us to choose. We decided to create an instant messenger which drew heavily from Skype Messenger, and use it as a basis of collectively improving our ability with Java and backend development.

The user is presented with a desktop application which allows them to have conversations with other users remotely. The expected, vital features of an Instant Messenger were included such as user authentication and online status were included.

The client side of the application was developed using Java, JavaFX and the JFoenix library. The project involved dealing with sockets and sending/receiving messages via JSON, handling them and having the application react in the expected manner, such as displaying a contact as "Online" or having messages appear on the window.

My Roles

As the team consisted of 5 members, we were able to divide ourselves into "backend" and "front end" teams but still helped out on both sides where needed. I was assigned to the front end team and some of the tasks included:

  • Planning and updating deliverables and milestones.
  • Managing the team via Gantt charts, CPM charts, Trello and meetings.
  • Communicating progress and updates with the supervisor.
  • Implementing the planned design of the application with Java.
  • Having the client send and recieve data via JSON and handle that data.
  • Testing the application and presenting it to the supervisor once complete.
  • Documentation.

Created using:

  • Eclipse
  • Java
  • JSON
  • JavaFX
  • JFoenix
  • Adobe Photoshop

Planning & Documentation:

  • Agile
  • Microsoft Project
  • Microsoft Word
  • LaTeX
  • Trello
  • GitHub

Project: Instant Messenger Server

The Instant Messenger server handled all incoming and outgoing traffic between users of the Instant Messenger Client which was being developed in tandem. The team consisted of 5 members.

Background

The university assignment required the 5-person team to create an application which made use of networking technology. The choice of languages and type of application was left for us to choose. We decided to create an instant messenger which drew heavily from Skype Messenger, and use it as a basis of collectively improving our ability with Java and backend development.

The user is presented with a desktop application which allows them to have conversations with other users remotely. The server was developed using Java with the sole purpose of handling traffic from users. This included allowing users to connect by authenticating their requests, opening and closing threads for new socket connections, sending/receiving JSON payloads and handling the payloads depending on the type of requests. The server also made use of a MySQL database containing user details in order to authenticate users attempting to connect.

Data was decided to be sent and received via JSON to keep the server language-independant, should the client-side ever make use of a language other than Java, the server will still work as expected.

My Roles

As the team consisted of 5 members, we were able to divide ourselves into "backend" and "front end" teams. I was assigned to the front end team but still helped out on the server development; some of my tasks included:

  • Planning and updating deliverables and milestones.
  • Managing the team via Gantt charts, CPM charts, Trello and meetings.
  • Communicating progress and updates with the supervisor.
  • Help with development of the server in Java.
  • Having the server send and recieve data via JSON and handle that data.
  • Testing the application and presenting it to the supervisor once complete.
  • Documentation.

Created using:

  • Eclipse
  • MySQL Server
  • Java
  • SQL
  • JSON

Planning & Documentation:

  • Agile
  • Microsoft Project
  • Microsoft Word
  • LaTeX
  • Trello
  • GitHub

Project: Instagram Scraper with Site Constructor

I was tasked with creating a script which, when installed, could quickly create a website and populate it with content found on Instagram.

Background

The application asked the user for basic information such as profile details, desired website niche and theme. Once ran, the application would scrape Instagram for content matching the keywords entered by the user and populate the various elements around the website with what was found. Individual pages would be generated showing the scraped pictures, descriptions, usernames etc.

My Roles

I was given this task to do on my own within a very limited timeframe. This meant I had to carry out all tasks from design through to implementation and testing.

  • Planning and updating deliverables and milestones.
  • Managing my time via Gantt charts, CPM charts and Teamwork.
  • Communicating progress and updates with the project manager.
  • Develop the application using PHP, HTML, CSS and Javascript.
  • Testing the application and presenting it to the project manager at set milestones.
  • Documentation.

Created using:

  • Brackets
  • PHP
  • HTML/CSS
  • Javascript
  • SQL
  • JSON

Planning & Documentation:

  • Agile
  • Microsoft Project
  • Microsoft Word
  • Teamwork
  • GitHub

Project: Drone Zone HTML5 Game

Drone Zone is an infinite scrolling game which acts as a throwback to the old days of addictive internet games, namely "Helicopter". The game was created in under 3 months in a team of two.

Background

Our assignment required us to create a web game using HTML5, CSS3, JavaScript and the Phaser framework. It was also a requirement to incorporate online functionality and artificial intelligence into our game design. After pitching our idea and receiving feedback, we eventually landed on the idea of creating an infinitely scrolling game where gravity and obstacles are the players biggest hazard.

Set in a Dystopian future and trying to flee a city of Police drones which have gone rogue, the player controls a large, constantly moving drone, using it's thrusters to counter the gravity pulling it down to Earth. Along the way, the city buildings become more dense, making it more difficult to navigate without exploding. Small Police drones attempt to fly themselves into the player's drone in an attempt to stop it, requiring the player to avoid them while navigating.

The end product has three difficulty levels which the game automatically selects depending on the distance travelled by the player; the higher the difficulty level, the higher the speed and the more difficult the terrain becomes. Building types are randomly selected from depending on the current difficulty level but recycle the building objects for optimisation purposes at high speeds. Police drones are generated at set intervals and take aim at the player before flying at them, giving the player time to move. Phaser's inbuilt physics engine is used for the gravity, the steam from the engines and the rain in the background. Once the player's turn has ended and score submitted, the rankings details are updated on Firebase using JSON.

Many testing sessions were used for the project, allowing testers to leave quantitative and qualitative feedback to influence the game's development. GitHub and Trello were used extensively, allowing us to collaborate with solid version control and stick to a clear project schedule.

All assets used to create the game were custom made, including sound effects, background music and animated sprites.

My Roles

My role in the team required:

  • Documentation including Game Design Document and Technical Specification.
  • Organising and carrying out test sessions with participants, collecting feedback.
  • Creating and maintaining of project schedule via Trello.
  • Creation and maintenance of a website to host the game.
  • Creation of visual and audio assets.
  • Coding the game using Javascript and Phaser.
  • Simple enemy A.I.

Created using:

  • Webstorm
  • HTML5
  • CSS3
  • Javascript
  • JSON
  • Firebase
  • Phaser
  • Adobe Photoshop
  • Music Creator 6 Touch

Planning & Documentation:

  • Agile
  • Microsoft Project
  • Microsoft Word
  • Trello
  • GitHub

Project: Jaguar HTML5 Game

Jaguar is a top down shooter playable in your browser. It was created for a university assignment as a solo project over the space of 3 months.

Background

I was tasked with creating a browser game using HTML5, Javascript and utilising the Phaser framework. I decided to create a top down shooter and draw on inspiration from classic games such as "Doom" and "Aliens VS Predator" while incorporating features one would expect from more modern videogames as an experiment to see if these elements could be successfully combined into an enjoyable game.

The player controls a nameless hero tasked with finding a datastick and escaping while hordes of hostile aliens try to kill you. To deal with the enemies, the player can fire dual machine pistols which are weak but have an infinite supply of ammunition. Exploration will allow the player to find more powerful weapons with limited ammo, additional ammo, powerups and keycards. Keycards are used for the locked doors found around the level.

Due to my familiarity with creating browser games and using the Phaser framework, I decided I would go beyond the scope of the requirements for the assignment and implement some additional features to bring the game to a higher standard. These additional features were mainly aimed at the user-experience and included a self-sorting, online, top 10 ranking table using PHP and mySQLi, the ability to manually reload and sprint, dialogue for telling the player their current objective and an options menu where the user could change certain things to improve their experience.

All assets used to create the game were custom made, including sound effects, background music and animated sprites.

My Roles

As this was a solo project I had take on many responsibilities which included:

  • Creation and maintenance of a website to host the game and documentation.
  • Creation of assets.
  • Level design, planning and creation.
  • Coding the game using Javascript and Phaser.
  • Simple enemy A.I.
  • Online rankings table using PHP and mySQLi.
  • Documentation throughout.

Created using:

  • Webstorm
  • HTML5
  • CSS3
  • Javascript
  • PHP/mySQLi
  • Phaser
  • Adobe Photoshop
  • Music Creator 6 Touch
  • Tiled

Planning & Documentation:

  • Agile
  • Microsoft Project
  • Microsoft Word

Project: Tetris Mobile Game

Tetris is a web game based on the classic game of the same name. Created by a team of two using JQuery Mobile and Phaser, the game runs in the browser across all devices.

Background

Tetris requires the player to control falling tetrominos until they land and position them in such a way that they form a solid line, at which point the line disappears, points are given to the player and the difficulty increases. As the difficulty increases, the speed the tetrominos fall is increased. Once the blocks reach the top of the screen, the game is over and the player enters their name if their score is high enough for the leaderboard.

JQuery Mobile was used to contain the game in a responsive framework which will adapt to the device screen is being displayed on, and allow the use of mobile-friendly User Interface elements for menus and controls. The application allows easy navigation between pages for "About", "Rules" and "Rankings" without requiring much in the way of device resources until the actual game is played, at which point the Phaser framework is utilised.

My Roles

I was responsible for the development of the game while the other team member took care of documentation. My tasks included:

  • Helping plan and design the application interface.
  • Using HTML5, CSS3, Javascript and JQuery Mobile to create the application.
  • Creating the game itself using Javascript and the Phaser framework.
  • Creating all graphical assets using Adobe Photoshop.
  • Help test the game and documenting results.

Created using:

  • Webstorm
  • HTML5
  • CSS3
  • Javascript
  • JQuery Mobile
  • Phaser
  • Adobe Photoshop

Planning & Documentation:

  • Agile
  • Microsoft Project
  • Microsoft Word

Project: Anaesthetic Aesthetic Game

Anaesthetic Aesthetic is a 3D Stealth game made by a team of 3 people over the course of 3 months as a university project.

Background

We decided we wanted to make a game for a young target audience but also utilise a genre not typically associated with that age range - a stealth game. Our team also agreed on making the game 3D in order to gain more experience in 3D engines as well as to further familiarise ourselves with 3D level design and pathing. A story was created around this structure, depicting the plight of a young, socially awkward princess trying to infiltrate her own castle, which had been taken over by an evil witch, avoiding the bewitched guards as she does so.

Using Unity 5, our team was able to create two levels for the game in the given timeframe. All the 3D models such as the characters, the buildings and interior elements were created from scratch in Blender 3D and given textures made in Adobe Photoshop. Characters were rigged and given animations for actions used within the game. All assets were assembled in Unity 5 and C# scripts created to handle player input and game logic. Unity 5's built-in pathing system was use of to create patrol routes for the guards before custom scripts took over to make the guards chase the player if spotted.

My Roles

Due to the small team size and variance in ability, we all took on multiple roles to ensure the completion of the project and provide support for each other. My responsibilities were:

  • Planning and updating deliverables and milestones.
  • Creation of 3D Assets, including design, modelling, rigging and animations.
  • Creating UV maps and textures for all models in Adobe Photoshop.
  • Level design, planning and creation.
  • Assembly of assets within Unity.
  • C# Scripting for player interaction and gameplay mechanics.
  • Documentation.

Created using:

  • Unity 5.3
  • C#
  • Blender 3D
  • Adobe Photoshop

Planning & Documentation:

  • Microsoft Project
  • Microsoft Office
  • Gantt charts
  • CPM chart
  • RAG Reports
  • Accurate meeting minutes
  • Design Document
  • Technical Specification
  • Test Plans and Reports

Project: Draughts Online Game

Draughts Online is a game created for Android mobile. The project was created for the "Advanced Programming for Mobile Devices" module at university in a team of two.

Background

The assignment required us to make use of a web service and any technologies that allowed the application to be used on a mobile device. Given my enthusiasm for Android development, we elected to develop our game for mobile devices running Android, making use of Android Studio and Firebase as a web service. The application idea itself was chosen to be Draughts (or Checkers as it is also known) which can be played against a human opponent on another Android mobile device.

The players select their usernames and search for a game, from there, they are automatically matched with another waiting opponent and placed into a game. Each player takes turns to move their pieces around the gameboard and capture opponent pieces. The game is won when a player successfully captures all of their opponents pieces.

Android Studio was used to create the application, making use of XML for each Activity Layout design in the menus, and Java for the game logic and asset placements from then on. All data sent and retrieved from the mobile devices was sent via JSON to and from a NoSQL Firebase datastore.

All visual assets used were made from scratch for the project.

My Roles

In the team of two, I was soley responsible for all the development while my partner took care of documentation and test cases. Some of the tasks included:

  • Collaboratively creating a design and plan for the application.
  • Creating the application layouts using the Android Studio editor and XML.
  • Creating the game logic with Java.
  • Creating and maintaining the Firebase datastore.
  • Creating the graphical assets in Adobe Photoshop.
  • Carrying out testing with Android Studio's emulators and with physical devices.

Created using:

  • Android Studio
  • Java
  • XML
  • JSON
  • Adobe Photoshop
  • Firebase

Planning & Documentation:

  • Agile
  • Microsoft Project
  • Microsoft Office

Project: Rare Trade Website

Rare Trade is a web design and Search Engine Optimisation(SEO) agency based in Stevenston, North Ayrshire. I was responsible for the design and creation of their website.

Background

I was tasked with creating a new website for the agency. After discussing the specifications of the site, I created mock ups in Wireframe CC and Adobe Photoshop to show and agree upon before building.

The site was created from scratch using the Visual Composer plugin for Wordpress 5.0. From the outset, the website was created to be responsive and mobile friendly. This included making use of custom PHP, HTML and CSS on top of the building blocks that Visual Composer provides.

Woocommerce was used in conjunction with Visual Composer to provide products to customers.

As it was important to have a strong web presence for Rare Trade, I was also tasked with making the site SEO friendly to make the site rank well for the desired keywords. This included heavy keyword research and keyword analysis before optimising the written content on the site. As Google looks favourably on websites which load fast, I was responsible for technical optimisations to improve load speeds and render times.

As a result of the optimisations, the website has continued to climb in rankings and reach the top 5 for certain targeted keywords, overtaking some long established agencies.

My Roles

I was solely responsible for the creation of the website. Some of the tasks included:

  • Liasing to come up with a specification, design and plan.
  • Creating the website in Wordpress using Visual Composer.
  • Sourcing and creating graphical elements in Photoshop CS6.
  • Search Engine Optimisation including keyword research, content writing and technical improvements.
  • Providing progress reports.

Created using:

  • Wireframe CC
  • Photoshop CS6
  • Wordpress 5.0
  • Visual Composer
  • Woocommerce
  • HTML, CSS, Javascript and PHP

Planning & Documentation:

  • Agile
  • TeamWork
  • Microsoft Office
  • GTMetrix
  • Pagespeed Insights

Project: Astromasters Website

We were tasked with creating a website for a client who offers artificial grass installation in Ayrshire and Central Scotland. The goals were to allow him to present his services in a professional manner, and provide SEO and a social media campaign to help him gain rankings on Google.

Background

Astromasters was built using Wordpress 5.0 along with the Visual Composer plugin. After doing research and agreeing on a style, the website was created and optimised for speed and SEO in two weeks.

My Roles

I was solely responsible for the creation of the website. Some of the tasks included:

  • Liasing to come up with a specification, design and plan.
  • Creating the website in Wordpress using Visual Composer.
  • Sourcing and creating graphical elements in Photoshop CS6.
  • Search Engine Optimisation including keyword research, content writing and technical improvements.
  • Providing progress reports.

Created using:

  • Wireframe CC
  • Photoshop CS6
  • Wordpress 5.0
  • Visual Composer
  • Woocommerce
  • HTML, CSS, Javascript and PHP

Planning & Documentation:

  • Agile
  • TeamWork
  • Microsoft Office
  • GTMetrix
  • Pagespeed Insights