From 4e68f55ab640d357f5b574505b5cf431768b64bd Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Fri, 18 Nov 2022 07:22:43 -0500 Subject: [PATCH 01/11] Update README for 0.8.0 --- README.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7feea1d..45a1814 100644 --- a/README.md +++ b/README.md @@ -15,14 +15,23 @@ semantic, accessable, and snappy. - Finalise Content - Add Pages - Software - - About Me - OneBag - Design Choices (for website) - - Recipes -- A blog with RSS + - Living Room + - Kitchen + - Collectables +- Add RSS to blog ## Release Notes +### v0.8.0 + +- Add about page +- Add burger nav +- Change nav links +- Content changes +- Seperate blog into blog/guides/recipes + ### v0.7.0 - Add bulk blog articles (mainly server guide) From 93ce0c0939a20b6ee0ee6657fa054b75454ab3ba Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Fri, 18 Nov 2022 07:47:13 -0500 Subject: [PATCH 02/11] Add missing p tag from intro --- guides/web-dev-101.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/web-dev-101.html b/guides/web-dev-101.html index afb244c..46c063f 100644 --- a/guides/web-dev-101.html +++ b/guides/web-dev-101.html @@ -31,7 +31,7 @@
- Interested in web development, but don't know where to begin? Don't worry, I've got you covered. +

Interested in web development, but don't know where to begin? Don't worry, I've got you covered.

My guides

For each of my guides I recommend typing out the code snippets individually instead of copy and pasting, as it'll help you remember and learn.

From bf8b50f1fcea651f2d4f61f5dea0f7ca7f69b199 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 21 Nov 2022 04:34:32 -0500 Subject: [PATCH 03/11] Add burger-menu article --- blog/burger-menu.html | 62 +++++++++++++++++++++++++++++++++++++++++++ blog/index.html | 1 + 2 files changed, 63 insertions(+) create mode 100644 blog/burger-menu.html diff --git a/blog/burger-menu.html b/blog/burger-menu.html new file mode 100644 index 0000000..00b7522 --- /dev/null +++ b/blog/burger-menu.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + Hello, Burger menu! + + + +
+

Hello, Burger menu!

+ + +
+ +
+
+ +
+
+

On Friday 18th of November 2022, I released version 0.8.0 of this website. With that a large, and very noticable change occured. The addition of a burger menu.

+ +

What is a burger menu?

+

A burger menu is simply a type of navigational menu. It's typically hidden by default with just a visible icon, but when (the icon is) clicked the navigational content becomes visible, and accessible.

+

Why is it called a burger menu?

+

The name burger/hamburger comes from the appearance of the icon. It consists of 3 horizontal lines, ordered vertically, so at a glance it sort of looks like the top of a bun, a patty, and the bottom of a bun.

+ +

Why add a burger menu?

+

Simple, I wasn't a fan of how the site showed the navigational menu on mobiles. I felt it took up too much of the screen real estate, and the requirement for some users to scroll down to get to the content is terrible design. With the implimentation of the burger menu I believe the site looks much cleaner, with a better user-experience on mobiles. So an overall great success, all without losing any navigational control.

+ +

CSS only

+

Unlike many of the burger menus you'll spot in the wild, the burger menu on my site is written with pure CSS. It makes use of a checkbox input for toggling, so those of you with Javascript disabled can still benefit from the better user experience.

+

The only downside to this is in the case that CSS doesn't load, as there will be a random visible checkbox atop of the navigation.

+ +

What? I don't see it?

+

This could be one of two reasons, your browser isn't small enough (try resizing it), or you've got the old CSS cached. If you've got the old CSS you'll notice the random checkbox I mentioned, try hitting CTRL+F5 to perform a hard-reload.

+ +

Inspiration

+

Like many things, I started by googling similar implementations, and found this snippet by Alvaro. I used this as the starting point, stripping it down, and making my own changes to make it work for my site in a way I liked.

+
+
+ + + + + diff --git a/blog/index.html b/blog/index.html index 0014c88..abd94be 100644 --- a/blog/index.html +++ b/blog/index.html @@ -38,6 +38,7 @@

2022

    +
  • Hello, Burger menu! - 21/11/2022
  • Reducing my Homelab - 26/09/2022
  • Blog Thoughts (Layout/Articles) - 22/08/2022
  • My SteamDeck Arrived! - 22/08/2022
    • From 6e8296567e79674c9a5ccd5d6c666eec509f7c5a Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 21 Nov 2022 05:04:58 -0500 Subject: [PATCH 04/11] Update sitemap.xml Using www.xml-sitemaps.com because I haven't written a tool for it yet --- sitemap.xml | 202 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 173 insertions(+), 29 deletions(-) diff --git a/sitemap.xml b/sitemap.xml index 7a8184f..f989e24 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -4,90 +4,234 @@ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> + + + https://aney.co.uk/ - 2022-05-30T11:48:21+00:00 + 2022-11-18T12:24:40+00:00 1.00 - https://aney.co.uk/equipment - 2022-05-24T14:21:37+00:00 + https://aney.co.uk/about + 2022-11-18T12:24:40+00:00 0.80 https://aney.co.uk/projects - 2022-05-24T14:21:37+00:00 + 2022-11-18T12:24:40+00:00 0.80 https://aney.co.uk/blog/ - 2022-05-30T10:15:28+00:00 + 2022-11-21T09:35:03+00:00 0.80 https://aney.co.uk/sitemap - 2022-05-24T14:21:37+00:00 + 2022-11-18T12:24:40+00:00 0.80 https://aney.co.uk/support - 2022-05-24T14:21:37+00:00 + 2022-11-18T12:24:40+00:00 0.80 - https://aney.co.uk/blog/guide-to-server-hosting - 2022-05-30T09:58:27+00:00 + https://aney.co.uk/equipment + 2022-11-18T12:24:40+00:00 0.80 - https://aney.co.uk/blog/nginx-web-optimisation - 2022-05-30T10:18:11+00:00 - 0.64 + https://aney.co.uk/blog/reducing-homelab + 2022-11-18T12:24:40+00:00 + 0.80 - https://aney.co.uk/blog/certbot-ssl - 2022-05-30T10:15:28+00:00 + https://aney.co.uk/guides/guide-to-server-hosting + 2022-11-18T12:24:40+00:00 + 0.80 + + + https://aney.co.uk/cv + 2022-11-18T12:24:40+00:00 + 0.80 + + + https://aney.co.uk/guides/ + 2022-11-18T12:24:40+00:00 0.64 - https://aney.co.uk/blog/setup-nginx-website - 2022-05-30T09:58:27+00:00 + https://aney.co.uk/guides/web-dev-101 + 2022-11-18T12:48:36+00:00 0.64 - https://aney.co.uk/blog/nginx-install - 2022-05-30T09:58:27+00:00 + https://aney.co.uk/recipes/ + 2022-11-18T12:24:40+00:00 0.64 - https://aney.co.uk/blog/get-a-domain-name - 2022-05-30T09:58:27+00:00 + https://aney.co.uk/blog/burger-menu + 2022-11-21T09:35:03+00:00 0.64 - https://aney.co.uk/blog/add-domain-to-server - 2022-05-25T08:36:42+00:00 + https://aney.co.uk/blog/blog-thoughts-220822 + 2022-11-18T12:24:40+00:00 0.64 - https://aney.co.uk/blog/initial-server-setup - 2022-05-26T09:30:39+00:00 + https://aney.co.uk/blog/my-steamdeck-arrived + 2022-11-18T12:24:40+00:00 0.64 https://aney.co.uk/blog/ive-started-a-blog - 2022-05-24T15:22:25+00:00 + 2022-11-18T12:24:40+00:00 0.64 https://aney.co.uk/websites - 2022-05-24T14:21:37+00:00 + 2022-11-18T12:24:40+00:00 0.64 - https://aney.co.uk/cv - 2022-05-24T14:21:37+00:00 + https://aney.co.uk/guides/server-install-debian + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/initial-server-setup + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/get-a-domain-name + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/add-domain-to-server + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/nginx-install + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/setup-nginx-website + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/certbot-ssl + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/nginx-web-optimisation + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/add-php-to-nginx + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/install-mysql-mariadb + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/sql-cheatsheet + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/adminer-setup + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/backup-mysql-mariadb + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/backup-with-rsync + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/backup-with-rdiff + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/backup-with-cron + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/setup-qemu-kvm + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/setup-kvm-bridge + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/install-kvm-virtual-machine + 2022-11-18T12:24:40+00:00 0.64 - + + https://aney.co.uk/guides/virsh-cheatsheet + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/vm-seperation-of-concerns + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/nginx-proxy + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/password-protect-webpage + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/setup-git-server + 2022-11-18T12:24:40+00:00 + 0.64 + + + https://aney.co.uk/guides/your-first-webpage + 2022-11-18T12:24:40+00:00 + 0.51 + + + https://aney.co.uk/guides/set-static-ip + 2022-11-18T12:24:40+00:00 + 0.51 + + + https://aney.co.uk/recipes/woky-beef-stew + 2022-11-18T12:24:40+00:00 + 0.51 + + + \ No newline at end of file From ff190c45cbb0d7113f4d9af66a312548ba3f8d08 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 21 Nov 2022 05:12:11 -0500 Subject: [PATCH 05/11] Uncomment sitemap from robots.txt --- robots.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/robots.txt b/robots.txt index cd97830..67cbce8 100644 --- a/robots.txt +++ b/robots.txt @@ -4,5 +4,5 @@ Disallow: /files/ User-agent: * Allow: * -#Sitemap: https://www.aney.co.uk/sitemap.xml +Sitemap: https://aney.co.uk/sitemap.xml From 6d03153218919f0641f0de105c91726d7bb691b9 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Mon, 21 Nov 2022 05:27:08 -0500 Subject: [PATCH 06/11] Correct broken links, and internal URL https://www.deadlinkchecker.com/website-dead-link-checker.asp Broken links from here fixed, and also changed instances of http://aney.co.uk to https://aney.co.uk --- blog/blog-thoughts-220822.html | 2 +- blog/burger-menu.html | 2 +- blog/index.html | 2 +- blog/ive-started-a-blog.html | 2 +- blog/my-steamdeck-arrived.html | 2 +- blog/reducing-homelab.html | 2 +- guides/add-domain-to-server.html | 2 +- guides/add-php-to-nginx.html | 2 +- guides/adminer-setup.html | 2 +- guides/backup-mysql-mariadb.html | 2 +- guides/backup-with-cron.html | 2 +- guides/backup-with-rdiff.html | 2 +- guides/backup-with-rsync.html | 2 +- guides/certbot-ssl.html | 2 +- guides/get-a-domain-name.html | 2 +- guides/guide-to-server-hosting.html | 4 ++-- guides/index.html | 2 +- guides/initial-server-setup.html | 2 +- guides/install-kvm-virtual-machine.html | 2 +- guides/install-mysql-mariadb.html | 2 +- guides/nginx-install.html | 2 +- guides/nginx-proxy.html | 2 +- guides/nginx-web-optimisation.html | 2 +- guides/password-protect-webpage.html | 2 +- guides/server-install-debian.html | 4 ++-- guides/set-static-ip.html | 2 +- guides/setup-git-server.html | 2 +- guides/setup-kvm-bridge.html | 2 +- guides/setup-nginx-website.html | 2 +- guides/setup-qemu-kvm.html | 2 +- guides/sql-cheatsheet.html | 2 +- guides/virsh-cheatsheet.html | 2 +- guides/vm-seperation-of-concerns.html | 2 +- guides/web-dev-101.html | 2 +- guides/your-first-webpage.html | 2 +- recipes/index.html | 2 +- recipes/woky-beef-stew.html | 2 +- websites.html | 1 - 38 files changed, 39 insertions(+), 40 deletions(-) diff --git a/blog/blog-thoughts-220822.html b/blog/blog-thoughts-220822.html index bef7cc8..88bbbf4 100644 --- a/blog/blog-thoughts-220822.html +++ b/blog/blog-thoughts-220822.html @@ -58,7 +58,7 @@ diff --git a/blog/burger-menu.html b/blog/burger-menu.html index 00b7522..5459801 100644 --- a/blog/burger-menu.html +++ b/blog/burger-menu.html @@ -55,7 +55,7 @@ diff --git a/blog/index.html b/blog/index.html index abd94be..9a8b762 100644 --- a/blog/index.html +++ b/blog/index.html @@ -54,7 +54,7 @@ diff --git a/blog/ive-started-a-blog.html b/blog/ive-started-a-blog.html index 0a363b3..29c72bf 100644 --- a/blog/ive-started-a-blog.html +++ b/blog/ive-started-a-blog.html @@ -48,7 +48,7 @@ diff --git a/blog/my-steamdeck-arrived.html b/blog/my-steamdeck-arrived.html index 11f5684..3886b20 100644 --- a/blog/my-steamdeck-arrived.html +++ b/blog/my-steamdeck-arrived.html @@ -79,7 +79,7 @@ diff --git a/blog/reducing-homelab.html b/blog/reducing-homelab.html index 8019d55..e984e56 100644 --- a/blog/reducing-homelab.html +++ b/blog/reducing-homelab.html @@ -105,7 +105,7 @@ diff --git a/guides/add-domain-to-server.html b/guides/add-domain-to-server.html index c9171c5..04a9d45 100644 --- a/guides/add-domain-to-server.html +++ b/guides/add-domain-to-server.html @@ -60,7 +60,7 @@ diff --git a/guides/add-php-to-nginx.html b/guides/add-php-to-nginx.html index 2f7402a..dfec5c4 100644 --- a/guides/add-php-to-nginx.html +++ b/guides/add-php-to-nginx.html @@ -70,7 +70,7 @@ diff --git a/guides/adminer-setup.html b/guides/adminer-setup.html index ff99579..b80c5e8 100644 --- a/guides/adminer-setup.html +++ b/guides/adminer-setup.html @@ -80,7 +80,7 @@ auth_basic_user_file /home//.htpasswd ; diff --git a/guides/backup-mysql-mariadb.html b/guides/backup-mysql-mariadb.html index 1716bf0..7515ff8 100644 --- a/guides/backup-mysql-mariadb.html +++ b/guides/backup-mysql-mariadb.html @@ -47,7 +47,7 @@ diff --git a/guides/backup-with-cron.html b/guides/backup-with-cron.html index 7da57f1..fd368f9 100644 --- a/guides/backup-with-cron.html +++ b/guides/backup-with-cron.html @@ -108,7 +108,7 @@ fi diff --git a/guides/backup-with-rdiff.html b/guides/backup-with-rdiff.html index 384b4a9..fe27a96 100644 --- a/guides/backup-with-rdiff.html +++ b/guides/backup-with-rdiff.html @@ -48,7 +48,7 @@ diff --git a/guides/backup-with-rsync.html b/guides/backup-with-rsync.html index e880e9b..6d359e2 100644 --- a/guides/backup-with-rsync.html +++ b/guides/backup-with-rsync.html @@ -79,7 +79,7 @@ diff --git a/guides/certbot-ssl.html b/guides/certbot-ssl.html index abd2ab5..db1da6b 100644 --- a/guides/certbot-ssl.html +++ b/guides/certbot-ssl.html @@ -59,7 +59,7 @@ diff --git a/guides/get-a-domain-name.html b/guides/get-a-domain-name.html index c9f676a..243ac88 100644 --- a/guides/get-a-domain-name.html +++ b/guides/get-a-domain-name.html @@ -50,7 +50,7 @@ diff --git a/guides/guide-to-server-hosting.html b/guides/guide-to-server-hosting.html index 4c3eda2..ba83b0e 100644 --- a/guides/guide-to-server-hosting.html +++ b/guides/guide-to-server-hosting.html @@ -42,7 +42,7 @@
  • Basic Debian Server setup (with some security)
  • TODO:Get a domain name
  • Connect your server and domain name
    • -
  • TODO:Port Forwarding (home server)
    • +
  • TODO:Port Forwarding (home server)

Now you officially own, and have setup a server. Currently all you can do is SSH into it though, so let's get some services on there

@@ -126,7 +126,7 @@ diff --git a/guides/index.html b/guides/index.html index ffbf326..e69c9df 100644 --- a/guides/index.html +++ b/guides/index.html @@ -74,7 +74,7 @@ diff --git a/guides/initial-server-setup.html b/guides/initial-server-setup.html index 7213232..d7baebd 100644 --- a/guides/initial-server-setup.html +++ b/guides/initial-server-setup.html @@ -181,7 +181,7 @@ alias ipe="curl ifconfig.co" diff --git a/guides/install-kvm-virtual-machine.html b/guides/install-kvm-virtual-machine.html index 1580600..9e9f252 100644 --- a/guides/install-kvm-virtual-machine.html +++ b/guides/install-kvm-virtual-machine.html @@ -44,7 +44,7 @@ diff --git a/guides/install-mysql-mariadb.html b/guides/install-mysql-mariadb.html index 9e57e9e..2caedd5 100644 --- a/guides/install-mysql-mariadb.html +++ b/guides/install-mysql-mariadb.html @@ -63,7 +63,7 @@ password= diff --git a/guides/nginx-install.html b/guides/nginx-install.html index 16dde4c..d55ee13 100644 --- a/guides/nginx-install.html +++ b/guides/nginx-install.html @@ -71,7 +71,7 @@ sudo systemctl start nginx diff --git a/guides/nginx-proxy.html b/guides/nginx-proxy.html index 5f312d8..6eeeea8 100644 --- a/guides/nginx-proxy.html +++ b/guides/nginx-proxy.html @@ -40,7 +40,7 @@ diff --git a/guides/nginx-web-optimisation.html b/guides/nginx-web-optimisation.html index b136a02..2f7bd60 100644 --- a/guides/nginx-web-optimisation.html +++ b/guides/nginx-web-optimisation.html @@ -111,7 +111,7 @@ gzip_types diff --git a/guides/password-protect-webpage.html b/guides/password-protect-webpage.html index fe03bc3..af2214b 100644 --- a/guides/password-protect-webpage.html +++ b/guides/password-protect-webpage.html @@ -40,7 +40,7 @@ diff --git a/guides/server-install-debian.html b/guides/server-install-debian.html index 9de1858..984c20c 100644 --- a/guides/server-install-debian.html +++ b/guides/server-install-debian.html @@ -104,14 +104,14 @@

Setup Swap

Next steps

-

Now that you've got a basic Debian install, you'll need to configure, and install a few things. I've written a little something, somthing like that, so check how to setup a new server install

+

Now that you've got a basic Debian install, you'll need to configure, and install a few things. I've written a little something, somthing like that, so check how to setup a new server install

diff --git a/guides/set-static-ip.html b/guides/set-static-ip.html index 10ebe1c..865be9b 100644 --- a/guides/set-static-ip.html +++ b/guides/set-static-ip.html @@ -86,7 +86,7 @@ iface enp2s0 inet static diff --git a/guides/setup-git-server.html b/guides/setup-git-server.html index e257d17..50fb7a2 100644 --- a/guides/setup-git-server.html +++ b/guides/setup-git-server.html @@ -76,7 +76,7 @@ diff --git a/guides/setup-kvm-bridge.html b/guides/setup-kvm-bridge.html index db7541e..ef128f2 100644 --- a/guides/setup-kvm-bridge.html +++ b/guides/setup-kvm-bridge.html @@ -110,7 +110,7 @@ iface br0 inet static diff --git a/guides/setup-nginx-website.html b/guides/setup-nginx-website.html index 6bfd902..e158887 100644 --- a/guides/setup-nginx-website.html +++ b/guides/setup-nginx-website.html @@ -78,7 +78,7 @@ diff --git a/guides/setup-qemu-kvm.html b/guides/setup-qemu-kvm.html index a852622..40af569 100644 --- a/guides/setup-qemu-kvm.html +++ b/guides/setup-qemu-kvm.html @@ -39,7 +39,7 @@ diff --git a/guides/sql-cheatsheet.html b/guides/sql-cheatsheet.html index ab886b8..6d89637 100644 --- a/guides/sql-cheatsheet.html +++ b/guides/sql-cheatsheet.html @@ -70,7 +70,7 @@ diff --git a/guides/virsh-cheatsheet.html b/guides/virsh-cheatsheet.html index 7bc2c02..4bfdafb 100644 --- a/guides/virsh-cheatsheet.html +++ b/guides/virsh-cheatsheet.html @@ -102,7 +102,7 @@ diff --git a/guides/vm-seperation-of-concerns.html b/guides/vm-seperation-of-concerns.html index 4dfa1e6..750251d 100644 --- a/guides/vm-seperation-of-concerns.html +++ b/guides/vm-seperation-of-concerns.html @@ -82,7 +82,7 @@ diff --git a/guides/web-dev-101.html b/guides/web-dev-101.html index 46c063f..2bc20ce 100644 --- a/guides/web-dev-101.html +++ b/guides/web-dev-101.html @@ -59,7 +59,7 @@ diff --git a/guides/your-first-webpage.html b/guides/your-first-webpage.html index 2e87844..54f2607 100644 --- a/guides/your-first-webpage.html +++ b/guides/your-first-webpage.html @@ -157,7 +157,7 @@ img:hover{ diff --git a/recipes/index.html b/recipes/index.html index ad9cc2f..99c7055 100644 --- a/recipes/index.html +++ b/recipes/index.html @@ -42,7 +42,7 @@ diff --git a/recipes/woky-beef-stew.html b/recipes/woky-beef-stew.html index f45a5fb..5e19caa 100644 --- a/recipes/woky-beef-stew.html +++ b/recipes/woky-beef-stew.html @@ -141,7 +141,7 @@ diff --git a/websites.html b/websites.html index 107b7b9..5a8d8e1 100644 --- a/websites.html +++ b/websites.html @@ -60,7 +60,6 @@
  • luksmith.xyz
  • drewdevault.com
  • danluu.com
    • -
  • uglyduck.ca
  • 1mb.club
  • seirdy.one
  • jeremymaluf.com
    • From a6a68a852a69506adddf0ab58e65a21bff7e6b89 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Tue, 22 Nov 2022 04:46:18 -0500 Subject: [PATCH 07/11] Make some snippet changes fro your-first-webpage Wanted the site to look a tiny bit nicer, and add some additional functionality (in form on layout-wrapper div) --- guides/your-first-webpage.html | 39 +++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/guides/your-first-webpage.html b/guides/your-first-webpage.html index 54f2607..0b4d0a9 100644 --- a/guides/your-first-webpage.html +++ b/guides/your-first-webpage.html @@ -65,19 +65,21 @@

    So now we'll add some visible content, to make a real webpage, and not just a blank page.

    Between the body tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.

    -
    <h1>Hi, I'm <em>Aney</em></h1>
-<p>Welcome to my site, it's pretty cool!</p>
-<h2>Skills</h2>
-<p>I have an assortment of <em>skills</em>, including:</p>
-<ul>
-	<li>Being swag</li>
-	<li>Getting the bag</li>
-</ul>
-<h2>Portfolio</h2>
-
-<img src="https://via.placeholder.com/200x200/">
-<img src="https://via.placeholder.com/200x200/">
-<img src="https://via.placeholder.com/200x200/">
    +
    <div class="layout-wrapper">
+	<h1>Hi, I'm <em>Aney</em></h1>
+	<p>Welcome to my site, it's pretty cool!</p>
+	<h2>Skills</h2>
+	<p>I have an assortment of <em>skills</em>, including:</p>
+	<ul>
+		<li>Being swag</li>
+		<li>Getting the bag</li>
+	</ul>
+	<h2>Portfolio</h2>
+	
+	<img src="https://via.placeholder.com/200x200/">
+	<img src="https://via.placeholder.com/200x200/">
+	<img src="https://via.placeholder.com/200x200/">
+</div>

    Now if you refresh the webpage, tada! We have content.

    @@ -94,15 +96,18 @@ height: 100%; font-size: 12px; background: #67aacc; - background: linear-gradient(0, #020024 0%, #10106b 10%, #67aacc 35%, #8cecf5 60%, #fff 100%); + background: linear-gradient(0, #67aacc 0%, #8cecf5 35%, #8cecf5 55%, #fff 100%); } body{ - margin: 0 auto; - max-width: 980px; - padding: 4px 12px; + margin: 0; text-align: center; font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; } +.layout-wrapper{ + margin: 0 auto; + padding: 4px 12px; + max-width: 980px; +} h1{ font-size: 22px; background-color: #10106b; From a1d4776bf7b3a1872515bcc281b84a2d208e514d Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Tue, 22 Nov 2022 05:51:24 -0500 Subject: [PATCH 08/11] Add main tag to your-first-website guide Writing the webpage-to-webpage guide, and think a semantic page would be best for a beginner. --- guides/your-first-webpage.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/guides/your-first-webpage.html b/guides/your-first-webpage.html index 0b4d0a9..8f05880 100644 --- a/guides/your-first-webpage.html +++ b/guides/your-first-webpage.html @@ -65,7 +65,7 @@

    So now we'll add some visible content, to make a real webpage, and not just a blank page.

    Between the body tags, we'll add a very simple introduction about ourselves. Change the content between the tags to whatever you want. I'll explain them in a later guide, but for now just play around.

    -
    <div class="layout-wrapper">
+
    <main><div class="layout-wrapper">
 	<h1>Hi, I'm <em>Aney</em></h1>
 	<p>Welcome to my site, it's pretty cool!</p>
 	<h2>Skills</h2>
@@ -79,7 +79,7 @@
 	<img src="https://via.placeholder.com/200x200/">
 	<img src="https://via.placeholder.com/200x200/">
 	<img src="https://via.placeholder.com/200x200/">
-</div>
    
+</div></main>

    Now if you refresh the webpage, tada! We have content.

    @@ -92,8 +92,10 @@

    The CSS

    For the actual styling, add the following snippet between the style tags.

    -
    html{
+
    html,body{
 	height: 100%;
+}
+html{
 	font-size: 12px;
 	background: #67aacc;
 	background: linear-gradient(0, #67aacc 0%, #8cecf5 35%, #8cecf5 55%, #fff 100%);

From 7bd93b333f01cfda9387ba1b566a6adcf9c7c714 Mon Sep 17 00:00:00 2001
From: Nathan Steel 
Date: Tue, 22 Nov 2022 10:20:19 -0500
Subject: [PATCH 09/11] More tweaks to your-first-webpage styling...

I didn't like the blue, and if it's going to be a tutorial, I
want it to look like I care a little...
---
 guides/your-first-webpage.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/guides/your-first-webpage.html b/guides/your-first-webpage.html
index 8f05880..e90cad8 100644
--- a/guides/your-first-webpage.html
+++ b/guides/your-first-webpage.html
@@ -97,8 +97,8 @@
 }
 html{
 	font-size: 12px;
-	background: #67aacc;
-	background: linear-gradient(0, #67aacc 0%, #8cecf5 35%, #8cecf5 55%, #fff 100%);
+	background: #EEE;
+	background: linear-gradient(0, #DDD 0%, #EEE 35%, #FFF 55%, #EEE 100%);
 }
 body{
 	margin: 0;
@@ -133,11 +133,11 @@ ul{
 	list-style-type: square;
 }
 img{
-	border: 2px solid #67aacc;
+	border: 2px solid #10106b;
 	border-style: dashed;
 }
 img:hover{
-	border-color: lightskyblue;
+	border-color: ##6f6fa5;
 }
    
 
 				
    Note how we specify the name of the HTML tags in the CSS. They're a direct one-to-one, so adding styling to ul in the CSS, changes the appearance of ul in the HTML.
    
@@ -145,7 +145,7 @@ img:hover{
 				
    Customise your site
    
 				
    I've intentionally made the styling "cool" and experimental for those unfamiliar with CSS. That means that there should be some wiggle room for you to figure out, and mess around with it, to find something you like.
    
 
-				
    If you're unsure about the #67aacc, etc. they're colours, take a quick look here.
    
+				
    If you're unsure about the #10106b, etc. they're colours, take a quick look here.
    
 
 				
    Page title
    
 

From 210c71941d685a6aa82d94b3f8b7d61a81184941 Mon Sep 17 00:00:00 2001
From: Nathan Steel 
Date: Tue, 22 Nov 2022 10:29:49 -0500
Subject: [PATCH 10/11] Add webpage-to-website guide

The follow up of your-first-website
---
 guides/index.html              |   1 +
 guides/web-dev-101.html        |  13 +++-
 guides/webpage-to-website.html | 130 +++++++++++++++++++++++++++++++++
 3 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 guides/webpage-to-website.html

diff --git a/guides/index.html b/guides/index.html
index e69c9df..5276c81 100644
--- a/guides/index.html
+++ b/guides/index.html
@@ -39,6 +39,7 @@
 				
 				
    2022
    
 				
      
+					
    • Webpage to website - 22/11/2022
      • 
 					
    • Your first webpage - 18/11/2022
      • 
 					
    • Web Development 101 - (WIP)18/11/2022
      • 
 					
    • Password protect webpages - (WIP)14/09/2022
      • 
diff --git a/guides/web-dev-101.html b/guides/web-dev-101.html
index 2bc20ce..0a46a01 100644
--- a/guides/web-dev-101.html
+++ b/guides/web-dev-101.html
@@ -38,14 +38,25 @@
 			
 
 			
      
-				
      HTML
      
+				
      Getting started
      
 				
+			
      
+
+			
      
+				
      HTML
      
+				
        
+					
      • What is a tag/element?
        • 
 				
      
 			
      
 
 			
      
 				
      CSS
      
+				
        
+					
      • What is a selector?
        • 
+				
      
 			
      
 
 			
      
diff --git a/guides/webpage-to-website.html b/guides/webpage-to-website.html
new file mode 100644
index 0000000..395b0b6
--- /dev/null
+++ b/guides/webpage-to-website.html
@@ -0,0 +1,130 @@
+
+
+	
+		
+		
+		
+		
+		
+		
+		
+		
+		Webpage to website
+	
+
+	
+		
      
+			
      Webpage to website
      
+			
+			
+			
      
+			
+			
      
+		
      
+
+		
      
+			
      
+				
      With a basic webpage now created, the next hurdle is to add multiple pages, and get them all linked together into a website of some sort.
      
+
+				
      Create a new page
      
+				
      First off we need a second page, with its own unique name. Let's call it about.html.
      
+				
      To quickly get this up, copy and paste the index.html file from the previous guide, and simply rename it.
      
+
+				
      Link the pages
      
+				
      Next up, creating our links. We're going the traditional route, with a navbar. So at the top of the body tag, above the other content, add the following.
      
+
      <nav>
+	<a href="index.html">Home</a>
+	<a href="about.html">About</a>
+</nav>
      
+
+				
      The key part of the snippet is the anchor/a tag, as this tells the browser to create the link to the files in the hrefs.
      
+
+				
      Style the navigation
      
+				
      In the style tag, add the following (I recommend at the bottom of what's already there). Then give the page a reload.
      
+
      nav{
+	background-color: white;
+	border-bottom: 1px solid gainsboro;
+	padding: 12px;
+}
+nav a{
+	padding: 12px;
+	text-decoration: none;
+	font-weight: bold;
+}
+nav a:hover{
+	background-color: black;
+	color: white;
+}
      
+
+				
      Give each link a click to check everything's alright. Doing this you may spot the nav styling is only on one page, oops, simple mistake. To fix this you'll have to open up the other HTML file, and add the styling in there too.
      
+
+				
      Make the styling global
      
+				
      With multiple pages up, imagine for a second if you had 10-15 more pages. How much of a pain would changing some styling be? Even just a simple colour change would be mega annoying, and time consuming. Open file, change style, save, and repeat...
      
+
+				
      Thankfully there's a simple solution to this problem, and it's actually best-practice to do this for every website!
      
+
+				
      External CSS
      
+				
      Our current internal stylesheet is now a hindrence as we've got multiple pages. So what we're going to do is take its content, and pop it into its own file.
      
+
+				
      How
      
+				
      First off, create a new file (same place as the .html files) called main.css, this will be our external stylesheet.
      
+				
      Next, open up one of the .html pages, and copy everything between the style tags, paste it into the CSS file, and save each file.
      
+
+				
      Now we've got the styling, we can get rid of the internal CSS entirely. Delete the style tags, and everything between from the .html pages, and replace them with the following snippet.
      
+				
      <link rel="stylesheet" type="text/css" href="main.css">
      
+				
      Reload, and voila! The site looks exactly the same. It's just easier to manage now.
      
+
+				
      Footer
      
+
+				
      To finish things off, why not add a quick footer proclaiming our copyright of the site?
      
+
+				
      Add the following snippet just before the closing </body> tag.
      
+
+
      <footer>
+	<p>© Aney 2022 | Made with ♥</p>
+</footer>
      
+
+				
      And a little styling to the CSS file.
      
+
      body{
+	display: flex;
+	flex-direction: column;
+}
+main{
+	flex: 1 0 auto;
+}
+footer{
+	background-color: black;
+	color: white;
+}
      
+
+				
      You may notice that body has already been used in the CSS, and that's OK thanks to the cascading nature of CSS. This can become a problem if you have the same selectors scattered around though, as it can begin to override styling. To avoid this problem I recommend having just the one location for each selector. So take the new body styling, and add it to the pre-existing body styling near the top of your CSS file.
      
+
+				
      We got a website
      
+				
      A little bit of content here, and there. A couple of styling tweaks, and a few more pages then you've got your very first website.
      
+
+				
      From here there are a few different directions. You could:
      
+				
        
+					
      1. Follow along to the rest of my web-dev 101
        2. 
+					
      2. Venture to the internet and learn everything you can about web development
        3. 
+					
      3. Setup a server, pop what you've got on the worldwide web, and call it a day
        4. 
+				
      
+
+				
      Whatever you choose to do, I offer you the best of luck.
      
+
+			
      
+		
      
+
+		
+	
+
+

From 31d51c2e00224fe3411029bf7403d9f240225528 Mon Sep 17 00:00:00 2001
From: Nathan Steel 
Date: Wed, 30 Nov 2022 06:41:30 -0500
Subject: [PATCH 11/11] Tweak CV content

And add end date to TJS as quitting in Jan of the new year
---
 cv.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/cv.html b/cv.html
index 6093e48..bfa079c 100644
--- a/cv.html
+++ b/cv.html
@@ -32,14 +32,14 @@
 		
      
 			
      
 				
      About Me
      
-				
      I'm a helpful and well-mannered person that can work both alone, and as part of a team. I have a willingness to learn, and an inate proficiency with optimisation, and problem-solving skills. A goal of mine is to always help people to the best of my ability, and to improve myself wherever possible.
      
+				
      I'm a helpful and well-mannered person that can work both alone, and as part of a team. I have a willingness to learn, and a proficiency with post-optimisation, and problem-solving. A goal of mine is to always help people to the best of my ability, and to improve myself wherever possible.
      
 			
      
 
 			
      
 				
      Experience/Employment History
      
 				
      
 					
      TJS
      
-					
      April 2021 - Current
      
+					
      April 2021 - January 2023
      
 					
      Position: Developer
      
 					
      My time at TJS online is spent developing, and maintaining both the front, and back-end of the dozens of client websites, primarily using a Symfony based stack.
      
 					
      Skills: PHP Symfony SCSS Git Linux NGINX SEO
      
@@ -48,26 +48,26 @@
 					
      Advantage Finance Ltd
      
 					
      Time: October 2018 - March 2021
      
 					
      Position: System Developer and Technician
      
-					
      I worked as part of the DevOps team at the car financing company, Advantage Finance. Whilst there I worked full-stack on the numerous bespoke systems; adding features, working on bug fixes and rewriting legacy code for both desktop and web applications. I also assumed the position of IT support, aiding with general AD and PC issues, along with assisting in the training of new starters.
      
+					
      I worked as part of the DevOps team at the car financing company, Advantage Finance. Whilst there I worked full-stack on the numerous bespoke systems; adding features, working on bug fixes, and rewriting legacy code for both desktop and web applications. I also assumed the position of IT support, aiding with general AD and PC issues, along with assisting in the training of new starters.
      
 					
      Skills: VB6 VB.net ASP Classic SVN SQL Active Directory
      
 				
      
 				
      
 					
      Oxfam
      
 					
      Time: January 2014 - September 2018
      
 					
      Position: Volunteer
      
-					
      While at the renowned charity organisation’s store I handled a multitude of tasks; ranging from working the till, cash handling, tidying and stocking the shop. I was also entrusted with additional tasks such as making bank deposits, opening the store and supervising Saturday’s staff tasks. I also enjoyed holding conversations with many of the customers, helping them feel welcome in the store.
      
+					
      While at the renowned charity organisation’s shop I handled a multitude of tasks; ranging from working the till, cash handling, tidying and stocking the shop. I was also entrusted with additional tasks such as making bank deposits, opening the shop, and supervising Saturday’s staff. I enjoyed holding conversations with the customers, learning the familiar faces, and helping everyone feel welcom in the shop.
      
 				
      
 				
      
 					
      Tesco
      
 					
      Time: March 2014 - April 2014
      
 					
      Position: Personal Picker
      
-					
      Whilst on the Prince's Trust I did a month’s work experience at a large Tesco store. This involved making 'picks' that were all completed without any errors or customer complaints. I also assisted a number of customers find their desired products and way around the shop.
      
+					
      Whilst on the Prince's Trust I did a month’s work experience at a large Tesco shop. This involved making 'picks' that were all completed without any errors or customer complaints. I also assisted a number of customers find their desired products and way around the shop.
      
 				
      
 				
      
 					
      Lake Marketing and Events
      
 					
      Time: January 2013 - December 2013
      
 					
      Position: (Apprentice) Graphic Designer
      
-					
      During my apprenticeship I designed a multitude of various prints such as posters, business cards, flyers, etc. for a wide array of local and regional businesses ranging from small start-ups to larger brands such as Subway. I also designed, and wireframed a number of websites, and aided in the development of a few; including the company's own website, and the Lincolnshire Food Festival’s using Wordpress.
      
+					
      During my apprenticeship I designed a multitude of various prints such as posters, business cards, flyers, etc. for a wide array of local and regional businesses ranging from small start-ups to larger brands such as Subway. I also designed, and wireframed a number of websites, and aided in the development of a few; including the company's own website, and the Lincolnshire Food Festival’s using Wordpress.
      
 					
      Skills: Photoshop Illustrator Wordpress