Shell

new_debian_setup

Docker Compose Nextcloud boilerplate using php8, PostgreSQL, Redis and nginx

Dockerfile

Nextcloud-Docker-with-Postgresql-Redis

<p align="center">
  <img src="https://repository-images.githubusercontent.com/753109288/4675a3a8-f1a0-499b-b67e-be9f87be1642" width="300px" height="300px"/>
</p>
<h1 align="center">Nextcloud Docker Compose with PostgresSQL & Redis</h1>
<br></br>

<br>
Nextcloud
PostgreSQL for the database
Redis for cache for performance
Nginx as proxy
Out of the box A+ SSL grade
Easy backup
<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>



nix-secrets

Personal configuration files for MacOS & NixOS

Emacs Lisp

nixos-config

<p align="center">
  <img src="https://repository-images.githubusercontent.com/692780762/0ca1031a-ffad-434b-8fab-f6074d020b94" width="300px" height="300px"/>
</p>
<h1 align="center">Nix Configurations for MacOS + NixOS</h1>

This is a group of personal configuration files using Nix that runs on MacOS as well as NixOS. This is 100% Flake driven with no configuration.nix as well as channels.
This is my first time delving into everything that is Nix and while so far has been tested on a MacOS VM and a NixOS VM running on unRaid, this is my daily driver for both. 🤓
Please note this is a work in progress so there are bugs as I am learning to improve and set up for my personal needs.
<br></br>

<table>
    <thead>
        <tr>
            <th></th>
            <th style='text-align:center' >NixOS</th>
            <th style='text-align:center' >MacOS</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Shell</td>
            <td style='text-align:center' colspan=2>zsh</td>
        </tr>
        <tr>
            <td>DE</td>
            <td>none+bspwm</td>
            <td>Aqua</td>
        </tr>
        <tr>
            <td>WM</td>
            <td>bspwm</td>
            <td>Amethyst</td>
        </tr>
        <tr>
            <td>Theme</td>
            <td>WhiteSur-gtk-theme [GTK2/3]</td>
            <td></td>
        </tr>
        <tr>
            <td>Icons</td>
            <td>WhiteSur [GTK2/3]</td>
            <td></td>
        </tr>
        <tr>
            <td>Terminal</td>
            <td style='text-align:center' colspan=2>Alacritty</td>
        </tr>
    </tbody>
</table>
<br>
<h1 align="left">Installing</h1>
<h2 align="left">MacOS</h2>
<p>Change name for Mac and enable Full Disk Access for Terminal in settings</p>
<h3 align="left">Install Dependencies</h3>
<ul>
<li>This is my daily driver on a Macbook Air (M1) running MacOS Sonoma</li>
	<pre class="gitcode">xcode-select --install</pre>
</ul>

<h3 align="left">Install Nix</h3>
<ul>
	<pre class="gitcode">curl --proto '=https' --tlsv1.2 -sSf -L https://install.determinate.systems/nix | sh -s -- install</pre>
</ul>

<h3 align="left">Create Keys</h3>
<ul>
	<pre class="gitcode">nix run github:michaelkeates/nixos-config#createKeys</pre>
</ul>

<h3 align="left">Initialize</h3>
<ul>
	<pre class="gitcode">nix flake init -t github:michaelkeates/nixos-config#default</pre>
</ul>

<h3 align="left">Installation</h3>
<ul>
<li>For the first-time, it is required to move the current /etc/nix/nix.conf out of the way</li>
<pre class="gitcode">sudo mv /etc/nix/nix.conf /etc/nix/nix.conf.before-nix-darwin</pre>
<li>Then finally run the script below. This wraps the Nix commands, builds and deploys a new Nix Generation as well as removes files that will crash the script.</li>
<pre class="gitcode">chmod +x bin/darwin-build && chmod +x bin/build && bin/build</pre>
</ul>
<br></br>
<h2 align="left">NixOS</h2>
<h3 align="left">Create Keys</h3>
<ul>
	<pre class="gitcode">nix run github:michaelkeates/nixos-config#createKeys</pre>
</ul>
<li>This opens an editor to accept, encrypt, and write your secret to disk. Then push the age file to your private github repo</li>
<ul>
    <pre class="gitcode">EDITOR=vim nix run github:ryantm/agenix -- -e secret.age</pre>
</ul>
<h3 align="left">Installation</h3>
<ul>
	<pre class="gitcode">nix run --experimental-features 'nix-command flakes' github:michaelkeates/nixos-config#install</pre>
</ul>
<br>
<h1 align="left">Rebuild</h1>
<h3 align="left">MacOS & NixOS</h3>
<ul>
	<pre class="gitcode">nix run github:michaelkeates/nixos-config#rebuild</pre>
</ul>
<h3 align="left">Mentions</h3>
<ul>
<p>dustinlyons for his Nix configuration files that this is heavily based on and what I learnt from so all rights to him.</p><a href="https://github.com/dustinlyons/nixos-config">Repository</a>
</ul>
<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>


A nextJS blog developed for a client with Wordpress as the backend

JavaScript

joanna-blog

<p align="center">
  <img src="https://repository-images.githubusercontent.com/676714602/091106df-1845-4ce8-9011-7807620abd49" width="300px" height="300px"/>
</p>
<h1 align="center">Joanna's Blog</h1>

A simple nextJS blog website developed for a client that is connected to Wordpress as the backend.
<br></br>
<p align="center">
  <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/08/joannablog.jpg" width"140px"/>
</p>
<h2 align="left">Description</h2>
This is a sophisticated web application that combines the power of Next.js's SSR capabilities, WordPress's content management functionalities, and GraphQL's efficiency in handling user comments. This setup provides a seamless and engaging experience for users, offering fast loading times, real-time interactions, and the convenience of content management through WordPress as the client specifically required for the ease of posting new content.

<h2 align="left">Stack</h2>
<ul>
<li><a href="https://nextjs.org/)">Next.js</a> Next.js is a popular React framework that provides server-side rendering. SSR allows the initial page load to happen on the server side, enhancing performance and SEO</li>
<li><a href="https://chakra-ui.com/">Chakra UI</a> A simple, modular and accessible React UI component library</li>
<li><a href="https://www.framer.com/motion/">Framer Motion</a> An animation library for React</li>
<li><a href="https://github.com/apollographql/apollo-tooling/">Apollo</a> GraphQL to fetch posts and add comments to Wordpress</li>
<li><a href="https://wordpress.com/">Wordpress</a> A headless Wordpress instance as the backend</li>
</ul>
<h2 align="left">Images</h2>

<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/08/joannablog.jpg" width="45%" hspace="10"/> <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/08/joannablog2.jpg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/08/joannablog3.jpg" width="45%" hspace="10"/>

<h2 align="left">Variables</h2>
To set up the End point for the Wordpress URL simply create a '.env.local' in the root directory of the project and then add the following line to the file.
<pre class="gitcode">NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT="https://URL/graphql"</pre>


<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>


Automated Win11 Powershell Scripts to debloat Windows

PowerShell

AutoWinScripts

<p align="center">
  <img src="https://repository-images.githubusercontent.com/669297706/38e5a0ec-8178-4f72-8f71-60a4a0cebe5e" width="300px" height="300px"/>
</p>
<h1 align="center">Automated Setup and Debloat Script</h1>

A personal automated group of powershell scripts to download and install packages, disable services and debloat a new Windows 11 installation.
<br></br>
<h2 align="left">Description</h2>

I wanted a small, minimal set of scripts to setup a new Windows 11 installation that is 'hands free'. The purpose is to enable a few features and tweaks, download and install the latest software using Chocolatey as well the capability to update them in as quickly as possible with little to no input from the user. There are two templates to choose from, Minimal & Default. I listed a few authors' work below that I viewed to learn so all rights goes to them. Please note if you are going to use this script, I don't take any responsibility if something breaks and you are prepared to use this at your own risk! It is always good practice to view the source, to better understand what the script does. More notes and descriptions will be added in due time. More details about AutoWinScript can be viewed <a href="https://www.michaelkeates.co.uk/posts/winautoscripts">here</a>.

<h3 align="left">Features</h3>
<ul>
<li>Enable Remote Desktop automatically.</li>
<li>Download, install and update Chocolatey along with packages defined from a config file.</li>
<li>Disable or changes the start type for services defined from a config file.</li>
<li>Enable options such as 'Show File Extensions' among others automatically as well as disabling telemetry from a config file.</li>
<li>Set the Windows Update feature to download updates after a year and security updates after 4 days from release.</li>
<li>Remove bloatware apps including Edge</li>
</ul>
<h2 align="left">Getting Started</h2>
<h3 align="left">Installation</h3>
<ul>
<li>Simply open PowerShell as Administrator and run the following commands</li>
<pre class="gitcode">Set-ExecutionPolicy RemoteSigned</pre>
<pre class="gitcode">$ScriptFromGitHub = Invoke-WebRequest https://raw.githubusercontent.com/michaelkeates/AutoWinScripts/main/run.ps1</pre>
<pre class="gitcode">Invoke-Expression $($ScriptFromGitHub.Content)</pre>
</ul>

<h3 align="left">Mentions</h3>
<ul>
Raphire <a href="https://github.com/Raphire/Win10Debloat/tree/master">Win10Debloat</a>
</ul>
<ul>
Chris Titus Tech <a href="https://github.com/ChrisTitusTech/winutil">Windows Utility</a>
</ul>
<ul>
Alekhoff <a href="https://github.com/Alekhoff/chocolatey-fresh-install">Chocolatey-fresh-install</a>
</ul>
<ul>
AveYo <a href="https://gist.github.com/ishad0w/3b79bf829e9725aa102b2e8446bb5ef8">Edge Removal</a>
</ul>

<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>


Scheme

Hack

HTML

gisthespatialweb

<p align="center">
  <img src="https://repository-images.githubusercontent.com/651645413/3ddf3b68-9acd-48d5-805c-859b486d79c9" width="300px" height="300px"/>
</p>

<h1 align="center">GIS & The Spatial Web</h1>
  
A collection of web mapping APIs developed using PHP.
<br></br>
<br></br>
<p align="center">
  <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.49.49.jpeg" width"140px"/>
</p>
<br></br>
<h2 align="left">Description</h1>

This is a collection of assigments that was set by the University of South Wales for the GIS & Spatial Web module that was taught. This is a website developed using PHP to demonstrate different mapping APIs as a portfolio.

<h3 align="left">Features</h3>
<ul>
<li>Google Maps Mapping API with toggles to enable layers loaded by KML/geoJSON.</li>
<li>Bing Maps Mapping API with toggles to enable layers loaded by KML/geoJSON..</li>
<li>LeafletJS Mapping API with toggles to enable geoJSON, and connected to GeoServer to provide layers via WMS & WFS</li>
<li>Open Layers Mapping API with toggles to enable layers loaded by geoJSON.</li>
<li>Extra features added such as scraping data from the Wikipedia API, tracking the location of the International Space Station (ISS), display markers of crimes commited using a post code among others.</li>
</ul>

<h2 align="left">Images</h1>


<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.46.54.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.47.16.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.48.27.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.48.53.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.49.09.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.49.49.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.50.20.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.51.05.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-09-at-17.52.21.jpeg" width="45%" hspace="10"/>

<br>
<h3 align="left">Demo</h3>
<ul>
<p>Vist here for a <a href="https://gis.michaelkeates.co.uk">Live Demo</a>.</p>
</ul>
<ul>
<p>Login credentials are "admin" for the username and "admin" for the password. Some features have been removed/disabled but can be viewed in the code.</p>
</ul>

<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>

<h3 align="left">Version History</h3>
<ul>
<li>3.0.0 (Final as of submission to University)</li>
</ul>


Tic Tac Toe game developed in Android Studio

Kotlin

tictactoe

<p align="center">
  <img src="https://repository-images.githubusercontent.com/649663574/0acd3410-5806-467c-9fc7-12ce53da5246" width="512px"/>
</p>
<h1 align="center">Tic Tac Toe Game</h1>

Tic Tac Toe Android mobile game developed using Kotlin
<br></br>
<br></br>
<p align="center">
  <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-05-10-at-15.25.42.jpeg" width="45%"/>
</p>
<br></br>
<h2 align="left">Description</h2>
This Android mobile game app of a typical Tic Tac Toe game was developed for an assigment set by the University of South Wales. The app was developed using Kotlin in Android Studio. The goal was further improve the basic noughts and crosses game that was developed during the course. The following enhancements were added to the basic game:

<h3 align="left">Features</h3>
<ul>
<li>Programmaticaly generate grids of 3x3, 4x4 & 5x5.</li>
<li>Added a settings menu to toggle features</li>
<li>Play against a human or a simple AI opponent</li>
<li>A normal game mode or 'Party Mode' where random winning conditions are randomly selected on each round.</li>
<li>Play out of 3 rounds for 3x3, 5 rounds for 4x4 & 7 rounds for 5x5 grids.</li>
</ul>

<h2 align="left">Images</h2>

<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-05-09-at-20.42.33.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-05-09-at-20.43.31.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-05-09-at-20.43.58.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-05-09-at-20.44.13.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-05-09-at-20.45.14.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-05-10-at-15.25.42.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-05-10-at-15.30.51.jpeg" width="45%" hspace="10"/>
<br></br>
<h2 align="left">Video</h2>


<details open="" class="details-reset border rounded-2">
  <summary class="px-3 py-2">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>
    <span aria-label="Video description TicTacToe_Kotlin.mp4" class="m-1">TicTacToe_Kotlin.mp4</span>
    <span class="dropdown-caret"></span>
  </summary>

  <video src="https://user-images.githubusercontent.com/103878560/275199907-d447e224-8e62-43aa-8993-387ac2f2bfd2.mp4" data-canonical-src="https://user-images.githubusercontent.com/103878560/275199907-d447e224-8e62-43aa-8993-387ac2f2bfd2.mp4" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="max-height:640px; min-height: 200px">

  </video>
</details>

<br></br>
<h2 align="left">Getting Started</h1>

<h3 align="left">Notes</h3>
<ul>
<p>Pixel 3 API 29 was selected for the target platform during its development.</p>
</ul>

<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>

<h3 align="left">Version History</h3>
<ul>
<li>0.1.0 (Final as of submission to University)</li>
</ul>


Noughts and Crosses game developed using JavaScript

Noughts-and-Crosses

<p align="center">
  <img src="https://repository-images.githubusercontent.com/648633898/bf067b08-12fd-48b2-80ef-6e977c5f7951" width="512px"/>
</p>
<h1 align="center">Noughts & Crosses JavaScript Game</h1>

A Noughts & Crosses or Tic Tac Toe game developed in JavaScript & HTML/CSS for an assigment set by the University of South Wales. This is an enhancment from a tutorial that was given by the University with a number of features and styling implemented to improve the game.
<br></br>
<br></br>
<p align="center">
  <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-13.21.54.jpeg" width="75%"/>
</p>
<br></br>
<h2 align="left">Description</h1>

<h3 align="left">Features</h3>
<ul>
<li>Grids of 3x3, 4x4 & 5x5 generated programmatically.</li>
<li>Play against a human or simple AI apponents.</li>
<li>'Party Mode' where each round a winning condition is randomly selected.</li>
<li>Set rounds or play for infinity.</li>
<li>Scoring system.</li>
</ul>

<h2 align="left">Images</h1>

<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-13.21.54.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-13.22.15.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-13.22.36.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-13.22.51.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-13.23.16.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-13.23.42.jpeg" width="45%" hspace="10"/>
<br></br>
<h2 align="left">Getting Started</h1>

<h3 align="left">Demo</h3>
<ul>
<p>Vist here for a <a href="https://noughtsncrosses.michaelkeates.co.uk">Live Demo</a>.</p>
</ul>

<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>

<h3 align="left">Version History</h3>
<ul>
<li>0.1.0 (Final as of submission to University)</li>
</ul>


Responsive PHP Gaming Website inspired by Steam

Mist

<p align="center">
  <img src="https://repository-images.githubusercontent.com/648605755/b3fb64b6-5b86-4191-bdfd-1414bd08a6ef" width="512px"/>
</p>
<h1 align="center">Mist Website</h1>

Mist is a responsive 'gaming platform' website inspired by 'Steam' and developed using PHP, HTML, CSS & JavaScript.
<br></br>
<br></br>
<p align="center">
  <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.43.24.jpeg" width="75%"/>
</p>
<br></br>
<h2 align="left">Description</h1>
This website was developed for an assigment set by the University of South Wales during Year 2 of HND where it was required to implement a client/server based (dynamic) website using any suitable web technologies which was further developed from a previous assigment. A suitable backend database was implemented in MySQL using PhPMyAdmin. The following features were added:

<h3 align="left">Features</h3>
<ul>
<li>Retrieve information from a database</li>
<li>Incorporated a secure login for admins where an admin can add, update and delete data from the database</li>
<li>Incorporated a secure login and registration for users.</li>
<li>Contact form page.</li>
<li>A Ecommerce page with items added into a basket and payment page using paypal.</li>
<li>Implemented dark/light mode.</li>
</ul>

<h2 align="left">Images</h1>

<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.42.46.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.42.54.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.43.04.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.43.24.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.43.34.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.43.43.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.43.51.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.43.59.jpeg" width="45%" hspace="10"/>
 <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.44.32.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.44.50.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-06-02-at-12.45.14.jpeg" width="45%" hspace="10"/>
<br></br>
<h2 align="left">Getting Started</h1>

<h3 align="left">Notes</h3>
<ul>
<p>This uses assets from Steam such as stickers, images etc. and this website was developed for educational reasons and does not own any assets used in the development and are own by the rightful owners. This is free to be used by anyone.</p>
</ul>

<h3 align="left">Demo</h3>
<ul>
<p>Vist here for a <a href="https://mist.michaelkeates.co.uk">Live Demo</a>.</p>
</ul>
<ul>
<p>Login credentials are "admin" for the username and "admin" for the password. Some features have been removed/disabled but can be viewed in the code.</p>
</ul>

<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>

<h3 align="left">Version History</h3>
<ul>
<li>0.2.0 (Final as of submission to University)</li>
</ul>


Personal Portfolio website developed using Next.JS

keates-website

<p align="center">
  <img src="https://repository-images.githubusercontent.com/581668804/d17131c6-3c77-40cc-bbe4-09a55643dad4" width="512px"/>
</p>
<h1 align="center">Portfolio Website</h1>

</p>
Keates Portfolio is my personal website that I have been developing over the summer break starting in 2022. I wanted to learn to develop using Next.JS for serverside rendering of content.
<br></br>
<br></br>
<p align="center">
  <img src="https://github.com/michaelkeates/keates-website/assets/103878560/49b8270c-78a4-45b7-8366-0088b522a9be" width="75%"/>
</p>
<br></br>
<h2 align="left">Description</h1>
This portfolio website uses the following frameworks to achieve what you see currently. Next.js is a React framework with hybrid static & server rendering, and route pre-fetching, etc. Chakra.UI.js is a simple, modular and accessible component library for React. Three.js is 3D library component for JavaScript that allows models to be rendered within a browser along with animations. Framer Motion is an animation library for React that allows transitions to between loading pages. Finally Appollo is a GraphQL server to fetch data from outside sources such as WordPress posts and Github repositores. In addition Pupeteer has been implemented to allow easy generation of a CV that scrapes the About page of the website.

<h2>Features</h2>

<ul>
  <li><a href="https://nextjs.org/">Next.js</a> - A React framework with hybrid static & server rendering, and route pre-fetching, etc.</li>
  <li><a href="https://chakra-ui.com/">Chakra UI</a> - A simple, modular and accessible component library for React</li>
  <li><a href="https://threejs.org/">Three.js</a> - 3D library for JavaScript to display 3d model with animations and shadows</li>
  <li><a href="https://www.framer.com/motion/">Framer Motion</a> - An animation library for React</li>
  <li><a href="https://github.com/apollographql/apollo-tooling/">Apollo</a> - GraphQL Server to fetch repositories and blog posts from GitHub & WordPress</li>
  <li><a href="https://pptr.dev/">Puppeteer</a> - Puppeteer to control a headless Chrome/Chromium to generate CV</li>
</ul>

<h2>Project structure</h2>

<pre>
$PROJECT_ROOT
│   # Page files
├── pages
│   # React component files
├── components
│   # Non-react modules
├── lib
│   # Static files for images and 3d model file
└── public
</pre>



A NextJS app Educational platform developed using Typescript

TypeScript

projectedulab

<p align="center">
  <img src="https://repository-images.githubusercontent.com/581304081/befe352d-ad60-46cd-acfc-d7b6e639e097" width="300px" height="300px"/>
</p>
<h1 align="center">Project eduLab</h1>

A nextJS app developed in Typescript and nhost as the backend.
<br></br>
<br></br>
<p align="center">
  <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-16-at-10.26.56.jpeg" width"140px"/>
</p>
<br></br>
<h2 align="left">Description</h1>

Project eduLab is a project that aims to produce an alternative 'proof of concept' online educational web learning platform for the fulfilment of the requirements of the Individual Project course IS3D660 for the University of South Wales. It allows the user to interact with a Operating System through a browser from any devices including mobile.

<h3 align="left">Aims</h3>
<ul>
<li>Accessing a operating system through a web browser. Users can copy/paste text between the host and the OS.</li>
<li>Taking part in quizzes where questions are added and shared by users.</li>
<li>A simple IDE Editor.</li>
<li>Secure Login/Registration.</li>
<li>Have the front end accessible so users can access on mobile devices.
<li>Host & develop the front end using nextJS.</li>
</ul>

<h3 align="left">Stack</h3>
<ul>
<li>nextJS.</li>
<li>nhost self hosted.</li>
</ul>

<h3 align="left">Dependencies</h3>
<ul>
<li>Codemirror.</li>
<li>nhost.</li>
<li>Apolloo.</li>
<li>GraphQL.</li>
<li>Typescript.</li>
<li>ChakraUI & Mantine.</li>
<li>react-vnc.</li>
</ul>

<h2 align="left">Images</h2>

<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-04-at-11.48.30-scaled.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-04-at-11.48.41-scaled.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-04-at-11.48.51-scaled.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-04-at-12.03.13-scaled.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-16-at-10.26.56.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-04-at-11.48.19-scaled.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-04-at-11.44.52-scaled.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-04-at-11.45.30-scaled.jpeg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-04-at-11.46.08-scaled.jpeg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/06/Screenshot-2023-04-04-at-11.46.25-scaled.jpeg" width="45%" hspace="10"/>

<h2 align=left">Videos</h2>


<details open="" class="details-reset border rounded-2">
  <summary class="px-3 py-2">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>
    <span aria-label="Video description projectedulab_mobile.MP4" class="m-1">projectedulab_mobile.MP4</span>
    <span class="dropdown-caret"></span>
  </summary>

  <video src="https://user-images.githubusercontent.com/103878560/275209912-9f56b8a5-e30d-4afc-a0aa-d0dc1abbcade.MP4" data-canonical-src="https://user-images.githubusercontent.com/103878560/275209912-9f56b8a5-e30d-4afc-a0aa-d0dc1abbcade.MP4" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="max-height:640px; min-height: 200px">

  </video>
</details>


<br>
<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>

<h3 align="left">Version History</h3>
<ul>
<li>1.0.0 (Final as of submission to University)</li>
</ul>


CrimeApp

<p align="center">
  <img src="https://repository-images.githubusercontent.com/580135325/89a2213a-42f8-40a7-ace0-f389f4a5ee16" width="512px"/>
</p>
<h1 align="center">CrimeApp</h1>

For my Individual Product I decided to create a mobile app for both iOS and Android using Xamarin and built with C#. The reason was I never created an mobile app before and I have a strong interest in displaying large amount of data on a screen which in this case displaying crime coordinates on a map. While the main app is built using C#, I had to learn how to code using XAML which is for the visual appearence of the app.
<br></br>
<br></br>
<p align="center">
  <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2022/07/crimealertapp_iphone.jpg" width="512px"/>
</p>
<br></br>
<h2 align="left">Description</h2>

<h3 align="left">Features</h3>
<ul>
<li>Displaying crimes on a map with which data such as coordinates which are fetched on boot from the Police UK website using Javascript Object Notation (JSON).</li>
<li>Implement a 'bottom draw' which will allow the user to toggle on/off different types of crimes to be displayed on the map.</li>
<li>Have the app available for both iOS and Android.</li>
<li>Allow the user to search for post codes as well as use the device to get the users' current location using Geolocation.</li>
</ul>

This project was quite an undertaking due to the fact that I would be developing a solution on two different platforms and that in the beginning I had no experience with using Xamarin to develop mobile apps.However, I yearn and welcome a challenge in producing a solution that I hope shows my determination and attention to detail within my final solution. Xamarin is indeed a natural choice as it allows to create a cross-platform app that when developed with the same code can be simulated or run on Android and iOS, however as I found during the development process it isn’t as straight forward as I initially thought with which it involved at times implementing different ways to get a single feature working, while one implementation worked on one platform, there were times when it didn’t work on the other. It took 5 months to build the app from the beginning to the present final state prior to my presentation.

<br></br>
<h2 align="left">Images</h2>

<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/crimealertapp_iphone.jpg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/crimealertapp_samsung.jpg" width="45%" hspace="10"/>

<h2 align="left">Video</h2>

<details open="" class="details-reset border rounded-2">
  <summary class="px-3 py-2">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>
    <span aria-label="Video description RPReplay_Final1657310048.mp4" class="m-1">RPReplay_Final1657310048.mp4</span>
    <span class="dropdown-caret"></span>
  </summary>

  <video src="https://user-images.githubusercontent.com/103878560/275204060-4e359b69-22b1-42dd-bf1f-f2ee08919047.mp4" data-canonical-src="https://user-images.githubusercontent.com/103878560/275204060-4e359b69-22b1-42dd-bf1f-f2ee08919047.mp4" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="max-height:640px; min-height: 200px">

  </video>
</details>

<br></br>

<h2 align="left">Getting Started</h1>

<h3 align="left">Dependencies</h3>
<ul>
<li>MacOS with Visual Studio for Mac installed with XCode & Android Studio</li>
</ul>

<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>

<h3 align="left">Version History</h3>
<ul>
<li>1.0.0 (Final as of submission to University)</li>
</ul>


OutlawHess

<p align="center">
  <img src="https://repository-images.githubusercontent.com/580088261/e4aef5c5-4235-4db2-9194-3d076b29a6f5" width="512px"/>
</p>
<h1 align="center">OutlawHess</h1>

I was for this assigment set by the University of South Wales tasked with developing a WinForm program using C# as a front end for a mySQL database that was provided. The application is to be used by managers of the bank, so should present functions useful for an Accounts Manager working at the bank. Marks will be awarded based of the technical complexity of tasks undertaken, the quality of your C# coding, and the design and ease of use of the interface developed.
<br></br>
<br></br>
<p align="center">
  <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2022/08/Screenshot-2022-08-02-at-14.15.28.png" width="512px"/>
</p>
<br></br>
<h2 align="left">Description</h2>

<h3 align="left">Features</h3>
<ul>
<li>Allow the manager to select any open issue ISA product and change its status to closed.</li>
<li>Allow the manager to list all customers in order of their remaining tax year deposit allowance.</li>
<li>Allow the manager to alter the interest rate paid on a selected ISA product.</li>
<li>Allow the manager to run the overnight calculation for accrued interest for all accounts. The formula is: Accrued Interest = Accrued Interest + (Balance * Account Annual Interest Rate / 365.0)</li>
<li>Allow the manager to run the end of tax year updates to the database. All account balances should be updated with accrued interest; the accrued interest should then be reset to zero and the customer’s deposit allowances reset.</li>
<li>Implemented a simple encryption to the database for security as well as a login form for admins.</li>
<li>Implemented a notification circle on the main form to allow the manager to know how many products are still open.</li>
<br></br>
<h2 align="left">Images</h2>

<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.13.11.jpg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.13.27.jpg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.14.20.jpg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.14.28.jpg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.14.37.jpg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.14.51.jpg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.14.59.jpg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.15.14.jpg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.15.28.jpg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.15.55.jpg" width="45%" hspace="10"/>

<h2 align="left">Video</h2>

<details open="" class="details-reset border rounded-2">
  <summary class="px-3 py-2">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>
    <span aria-label="Video description outlawhess.mp4" class="m-1">outlawhess.mp4</span>
    <span class="dropdown-caret"></span>
  </summary>

  <video src="https://user-images.githubusercontent.com/103878560/275212609-3804d2f8-27d8-41e9-a4cd-3ab95fb40f23.mp4" data-canonical-src="https://user-images.githubusercontent.com/103878560/275212609-3804d2f8-27d8-41e9-a4cd-3ab95fb40f23.mp4" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="max-height:640px; min-height: 200px">

  </video>
</details>



<br></br>
<h2 align="left">Getting Started</h2>

<h3 align="left">Dependencies</h3>
<ul>
<li>Windows 10 (Likely can run prior versions but not tested)</li>
</ul>

<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>

<h3 align="left">Version History</h3>
<ul>
<li>1.0.0 (Final as of submission to University)</li>
</ul>


ScruffyGame

<p align="center">
  <img src="https://repository-images.githubusercontent.com/580064866/6fb67768-1bb7-4ff5-9882-6c96cc3bef70" width="512px"/>
</p>
<h1 align="center">ScruffyGame</h1>

I was tasked by the University of South Wales for the Software Development Module in Year 1 of studying HND to produce an animated computer game of choice. The task was to implement basic animation and keyboard controls, collision detection, features and functions in separated methods, scoring system along with loading and saving high scores among others.
<br></br>
<br></br>
<p align="center">
  <img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2022/08/Screenshot-2022-08-02-at-14.17.06.png" width="512px"/>
</p>
<br></br>
<h2 align="left">Description</h2>

<h3 align="left">Game Rules</h3>
<ul>
<li>Get “Scruff” from point A to point B within the time limit otherwise the player loses the game. 🗺️</li>
<li>The player will lose the game if “Scruff” loses all its health.</li>
<li>Scruff can lose health by going into fire, water, asteroid or eagle lander.</li>
<li>The more sausages that “Scruff” eats (collects) the more points the player will have. 🌭</li>
<li>Each sausage will give “Scruff” some more health.</li>
<li>Each sausage is worth 2 points towards the final score.</li>
<li>Each sausage also will make “Scruff” ‘heavier’ which in turn will make “Scruff” slower in manoeuvrability.</li>
<li>“Scruff” will randomly ‘poo’ which will make her ‘lighter’ and will move faster again. 💩</li>
</ul>

I created a side scrolling game along with creating the graphical user interface from scratch using Adobe Photoshop. I implemented a way for PNG images to have transparency within the program such as the Health bar in the top right of the game screen. This however had a hit on performance and Windows Form was never designed to produce a program such like this. In the future I would like to recreate this using the Unreal Game Engine and have a mobile version.
<br></br>
<h2 align="left">Images</h2>

<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.16.18.jpg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.16.24.jpg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.16.54.jpg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.17.06.jpg" width="45%" hspace="10"/>
<img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.17.26.jpg" width="45%" hspace="10"/><img src="https://blog.michaelkeates.co.uk/wp-content/uploads/2023/01/Screenshot-2022-08-02-at-14.18.17.jpg" width="45%" hspace="10"/>

<h2 align="left">Video</h2>


<details open="" class="details-reset border rounded-2">
  <summary class="px-3 py-2">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>
    <span aria-label="Video description scruffy.mp4" class="m-1">scruffy.mp4</span>
    <span class="dropdown-caret"></span>
  </summary>

  <video src="https://user-images.githubusercontent.com/103878560/275195816-9713a700-df5e-4525-bed2-5bd04fd33ee7.mp4" data-canonical-src="https://user-images.githubusercontent.com/103878560/275195816-9713a700-df5e-4525-bed2-5bd04fd33ee7.mp4" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="max-height:640px; min-height: 200px">

  </video>
</details>


<h2 align="left">Getting Started</h2>

<h3 align="left">Dependencies</h3>
<ul>
<li>Windows 10 (Likely can run prior versions but not tested)</li>
</ul>

<h3 align="left">Executing Program</h3>
<ul>
<li>Right click on ScruffyGame.exe and “Run As Administrator” or it will give an error that .dat files cannot be accessed. This is due to Admin privileges</li>
</ul>

<h3 align="left">Author</h3>
<ul>
Michael Keates <a href="https://www.michaelkeates.co.uk">Website</a>
</ul>

<h3 align="left">Version History</h3>
<ul>
<li>0.5.1 (Final as of submission to University)</li>
</ul>
