Add donation links

_includes/footer.html

@@ -3,6 +3,7 @@
         <h3>Matthew Grove</h3>
         <p>Software engineer & amateur photographer from Surrey, UK.</p>
         <p><a href="https://github.com/mgrove36/demo-code/tree/master{{ page.url | relative_url }}">View this page on GitHub.</a></p>
+        <p><a href="{{ link donate/index.md }}">Can you support me?</a></p>
     </section>
     <section>
         <h4>Other Links</h4>

assets/css/main.css

@@ -2873,4 +2873,19 @@ body.is-menu-visible #menu {
 }
 #cookies p a {
     text-decoration: none;
+}
+
+/* donation */
+.donation-button-container-large {
+	display: flex;
+	flex-direction: row;
+	column-gap: 16px;
+	row-gap: 8px;
+	flex-wrap: wrap;
+	margin-top: 12px;
+}
+
+.donation-button-container-large img {
+	width: 100%;
+	max-width: 210px;
 }

donate/index.md

@@ -0,0 +1,23 @@
+---
+title: Donate
+description: Appreciate my work or want to help out?
+layout: default
+icon: money
+---
+
+Developing projects requires a lot of time, effort, and money! I really appreciate all your support.
+
+<div class="donation-button-container-large">
+	<a class="image" href="https://www.buymeacoffee.com/mgrove36" target="_blank" rel="noreferrer">
+		<img
+			src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png"
+			alt="Buy me a coffee"
+		/>
+	</a>
+	<a class="image" href="https://www.paypal.com/donate/?hosted_button_id=AW7XJ7KFLC7JG" target="_blank" rel="noreferrer">
+		<img
+			src="https://pics.paypal.com/00/s/M2E5OWQyMjItZWU1My00YmEwLTljNmYtYTA2ZTI1OGUzMjA5/file.PNG"
+			alt="Donate with PayPal"
+		/>
+	</a>
+</div>