Merge branch 'release/0.5.0'

README.md

@@ -13,13 +13,26 @@ semantic, accessable, and snappy.
 ## To Do
 
 - Finalise Content
-- Misc page
+- Add Pages
- - This will contain links to other pages not in the header
+ - Software
-- Support page
+ - About Me
+ - OneBag
+ - Design Choices (for website)
 - A blog with RSS
 
 ## Release Notes
 
+### v0.5.0
+
+- Update styling
+ - Colour schemes
+ - Line heights
+- Update content for home, equipment, and project pages
+- Add sitemap (misc in menu) page
+- Add support page, with link to Ko-fi
+- Remove CV from navigation
+- Add misc and support into navigation
+
 ### v0.4.0
 
 - Add 'tags' to easily show skills

cv.html

@@ -6,8 +6,8 @@
 		<meta name="description" content="The course of life, employment history, and skillset of Aney.">
 		<meta name="keywords" content="Web Design, Development, Education, Job History, Hobbies">
 		<meta name="author" content="Nathan (Aney) Steel">
-		<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+		<meta name="theme-color" content="white">
-		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
+		<meta name="theme-color" content="green">
 		<link rel="stylesheet" type="text/css" href="main.css">
 		<link rel="icon" type="image/png" href="images/favicon.svg">
 		<title>Aney's curriculum vitae (CV)</title>
@@ -21,7 +21,8 @@
 				<a href="index.html">home</a>
 				<a href="equipment.html">equipment</a>
 				<a href="projects.html">projects</a>
-				<a href="cv.html">cv</a>
+				<a href="sitemap.html">misc</a>
+				<a href="support.html">support</a>
 			</nav>
 			<hr/>
 		</header>

equipment.html

@@ -7,8 +7,8 @@
 		<meta name="description" content="A collection of the hardware, and other tools used by Aney, to work, and create">
 		<meta name="keywords" content="Equipment, Technology, Hardware, Computing">
 		<meta name="author" content="Nathan (Aney) Steel">
-		<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+		<meta name="theme-color" content="white">
-		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
+		<meta name="theme-color" content="black">
 		<link rel="stylesheet" type="text/css" href="main.css">
 		<link rel="icon" type="image/png" href="images/favicon.svg">
 		<title>Hardware</title>
@@ -22,55 +22,84 @@
 				<a href="index.html">home</a>
 				<a href="equipment.html">equipment</a>
 				<a href="projects.html">projects</a>
-				<a href="cv.html">cv</a>
+				<a href="sitemap.html">misc</a>
+				<a href="support.html">support</a>
 			</nav>
 			<hr/>
 		</header>
 
 		<main>
 			<section>
-				<h2>My tech, and gear</h2>
+				<h2>My everyday tech</h2>
-				<p>This is the hardware I use to make, and manage my home, work, and life.</p>
+				<p>This is what I use basically every day. It's either at my desk, in my bag, or within arms reach.</p>
-			</section>
 
-			<section id="equipment">
+				<section id="pc">
-				<section id="computers">
+					<h3>Laptop - Thinkpad x220</h3>
-					<h2>Computers</h2>
+					<p>My everyday driver is a Thinkpad x220, specced with an i5 2540m, 6GB RAM, and a 500GB EVO 860 mSata SSD. It typically runs Debian with dwm, but since I've been having problems with my arm, it's been running Pop!_OS like a champ.</p>
-					<section id="laptop">
+					<p>I use this laptop for practically everything, and it performs well for my use-cases whether docked at my desk, or standalone for travels.</p>
-						<p><strong>Laptop:</strong> Thinkpad x220
+					<h4>X220 Docking Station</h4>
-						<br/>i5 2540m, iGPU, 6GB RAM, 500GB mSata SSD, 500GB SSD</p>
+					<p>When I'm at home, I typically stay docked to this station as it has all my ports pre-plugged, and an additional 500GB HDD (which I don't use). This makes it easy to switch between working at the desk, and lounging on the seatee/bed.</p>
-					</section>
-					<section id="gaming-pc">
-						<p><strong>Gaming PC</strong>
-						<br/>R5 2600X, 16GB RAM, 500GB m.2. SSD, Vega 64</p>
-					</section>
 				</section>
 
 				<section id="peripherals">
-					<h2>Peripherals</h2>
+					<h3>Peripherals</h3>
-					<p><strong>Keyboard:</strong> Razer Blackwidow Lite</p>
+					<p>Monitor: Philips E-Line 227E4LHAB 21.5" LCD</p>
-					<p><strong>Mouse:</strong> Logitech MX Master</p>
+					<p>Keyboard: Razer Blackwidow Lite</p>
-					<p><strong>Microphone:</strong> Blue Yeti</p>
+					<p>Mouse: Logitech MX Master</p>
-					<p><strong>Speakers:</strong> Logitech Z200</p>
+					<p>Microphone: Blue Yeti</p>
-					<p><strong>Monitor:</strong> Samsung 2443BW</p>
+					<p>Speakers: Logitech Z200</p>
+					<p>Backup USB: 64GB Sandisk</p>
 				</section>
 
-				<section id="servers">
+				<section id="misc">
-					<h2>Servers</h2>
+					<h3>Misc.</h3>
-					<section id="rpi3">
+					<p id="mobile">Mobile: Google Pixel 4a</p>
-						<p><strong>rpi3.local:</strong> Raspberry Pi 3B
+					<p id="powerbank">Power Bank: 10,000mAh PowerAdd Pilot 2GS</p>
-						<br/>Currently the only server I'm keeping up. It's hosting this site!</p>
+					<p>Wireless Earphones: Besdio something</p>
-					</section>
 				</section>
 
-				<section id="misc">
+			</section>
-					<h2>Misc.</h2>
+
-					<p id="mobile"><strong>Mobile:</strong> Google Pixel 4a</p>
+			<section id="gaming-pc">
-					<p id="powerbank"><strong>Power Bank:</strong> 10,000mAh PowerAdd Pilot 2GS</p>
+				<h2>Gaming PC</h2>
-					<p id="backup-usb"><strong>Backup USB:</strong> 64GB Sandisk</p>
+				<p>Red, a custom built machine sporting an R5 2600X, 16GB RAM, a 500GB EVO 970 NVME, and a Vega 64. This is my only device running Windows.</p>
-					<p><strong>Wireless Earphones:</strong> Besdio something</p>
+				<p>I don't use this anywhere near as much as I used to, but when I want to play a game I've got this PC that I know will perform, regardless of the title.</p>
+				<p>I am heavily considering selling it when the <a href="https://store.steampowered.com/steamdeck" target="_blank" rel="noopener noreferrer">Steamdeck</a> releases, however.</p>
+			</section>
+
+			<section id="media">
+				<h2>Media Consumption</h2>
+				<section id="tv">
+					<h3>TV</h3>
+					<p>A basic non-smart TV from years back. I got it for my 16th Birthday, 10 years ago.</p>
+					<h4>Fire TV Stick 4K</h4>
+					<p>Since my TV is useless alone, and I don't watch traditional television, this is plugged in to give me access to Netflix, Amazon Video, Crunchyroll, and Jellyfin.</p>
+				</section>
+
+				<section id="music">
+					<h3>Amazon Echo 3</h3>
+					<p>I don't use this for anything other than playing music. It stays next to the TV waiting for me to say "Alexa, play <a href="https://youtu.be/6Zbi0XmGtMw?t=27" target="_blank" rel="noopener noreferrer">We like to party, by the Vengaboys</a>."
 				</section>
 			</section>
+
+			<section id="servers">
+				<h2>Servers</h2>
+				<section>
+					<h3>lilman</h3>
+					<p>An HP 290 G1 MT, with an i5-7500, and 8GB RAM. This is my primary server, although I've still yet to get around to migrating services from rpi3.</p>
+				</section>
+				<section>
+					<h3>rpi3</h3>
+					<p>A Raspberry Pi 3B+ that's running my webserver, and gitserver, alongside a few docker containers. It's a pretty swell device, and I may very well start a cluster with it when I get the chance.</p>
+				</section>
+			</section>
+
+
+			<section>
+				<h2>Unused/Spares</h2>
+				<p>I go through hoarding phases unfortunately, so besides what I've listed, I also have; 5 other PCs of various specs, a 1U server, 4 more laptops (3 of which are Thinkpads), and a RPI 3B. Out of these, I intend to keep two PCs, the 3 thinkpads, and the RPI3.</p>
+			</section>
+
 		</main>
 
 		<footer>

index.html

@@ -7,8 +7,8 @@
 		<meta name="description" content="The homepage for anyone finding Aney's small, self-hosted network/homelab">
 		<meta name="keywords" content="Self-hosted, Homepage, HTML, CSS">
 		<meta name="author" content="Nathan (Aney) Steel">
-		<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+		<meta name="theme-color" content="white">
-		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
+		<meta name="theme-color" content="black">
 		<link rel="stylesheet" type="text/css" href="main.css">
 		<link rel="icon" type="image/png" href="images/favicon.svg">
 		<title>Aney's Network</title>
@@ -22,28 +22,30 @@
 				<a href="index.html">home</a>
 				<a href="equipment.html">equipment</a>
 				<a href="projects.html">projects</a>
-				<a href="cv.html">cv</a>
+				<a href="sitemap.html">misc</a>
+				<a href="support.html">support</a>
 			</nav>
 			<hr/>
 		</header>
 
 		<main>
 			<section>
-				<h2>I am the domain master</h2>
+				<h2>I'm Aney</h2>
-				<p>The goal of this site is to be minimal, quick, small, and self-hosted.</p>
+				<p>Somehow you've landed on my website, welcome!</p>
-				<p>I recommend everybody claims their own space on the internet, it's an easy first step to avoid having your freedom taken away.</p>
+				<h3>What this, then?</h3>
+				<p>It's my little place on the world wide web. It serves the purpose of being a one-stop location I can refer people to when they ask things, like:</p>
+				<ul>
+					<li>Who are you?</a></li>
+					<li><a href="equipment.html">What hardware do you use?</a></li>
+					<li>How about software?</a></li>
+					<li>What's in your onebag?</a></li>
+					<li>Why does your website look like that?</li>
+					<li>Anime recommendations?</li>
+				</ul>
+				<h3>Where are the pictures?</h3>
+				<p>I've written this website with the intention to keep it minimal, quick, small, and easily self-hosted. I decided that there was little reason to bloat the pages with images, that add little value, as all they will do is prevent people with poor internet from visiting.</p>
 			</section>
 
-			<section>
-				<h2>What's here?</h2>
-				<p>Not a whole lot, honestly. This is more of a landing page for things I want to share, and my self-hosted services.</p>
-				<p>Try the links in the footer.</p>
-			</section>
-
-			<section>
-				<h2>"I could make a better site!"</h2>
-				<p>Maybe.</p>
-			</section>
 		</main>
 
 		<footer>

main.css

@@ -1,47 +1,26 @@
-html{
+html, body {height: 100%;}
-	font-size: 14px;
+html{font-size: 14px;}
-}
 body{
 	margin:0.2rem auto;
 	max-width:48rem;
 	padding:0 .62rem;
 	font:1.2rem/1.62 sans-serif;
 }
-h1,h2,h3 {
+h1,h2,h3,h4,h5,h6 {
-	line-height: 1.2;
+	line-height: 1;
 }
 header h1{
-	margin: 0.4rem 0;
 	margin-top: 1.4rem;
+	margin-bottom: 1.2rem;
 }
-
 a{
 	text-decoration: none;
 }
-nav{
+a:link, a:visited {color:#087ca7;}
-	list-style-type: none;
+a:hover, a:visited:hover {color:#09b2dc;}
-	padding: 0;
-}
-nav>a{
-    padding: 0.2rem;
-}
-nav hr{
-	margin: 0;
-}
-
-html, body {
-	height: 100%;
-}
-
 ul{
 	padding-left: 0;
 	list-style-position: inside;
-	display: inline-block;
-	margin: 0;
-}
-ul p{
-	display: inline-block;
-	margin: 0.5rem 0;
 }
 footer p{
 	margin: 0;
@@ -52,7 +31,7 @@ footer p{
 	font-size: 0.8rem;
 	padding: 0.2rem;
 	border-radius: 0.33rem;
-	background-color: black;
+	background-color: #191919;
 	color: white;
 	vertical-align: middle;
 }
@@ -72,10 +51,9 @@ main{
 }
 
 @media (prefers-color-scheme: dark){
-	body {color:#fff;background:#000;}
+	body {color:#fff;background:#191919;}
-	a:link {color:#9cf;}
+	a:link, a:visited {color:#9cf;}
-	a:hover, a:visited:hover {color:#cef;}
+	a:hover, a:visited:hover {color:#DA4167;}
-	a:visited {color:#9ce;}
 	.tag{background-color:white; color:black;}
 }
 
@@ -87,11 +65,7 @@ main{
 
 /* For Media over the mobile view */
 @media screen and (min-width: 601px){
-	nav{
-		list-style-type: none;
-	}
 	nav>a{
-		padding: 1rem 0;
 		margin-left: 2rem;
 	}
 	nav>a:first-child{
@@ -103,14 +77,12 @@ main{
 
 /* For Media under the mobile view */
 @media screen and (max-width: 600px){
-	h1, h2, h3, p, nav{
-		text-align: center;
-	}
-
 	body{
 		margin: 0.2rem;
+		text-align: center;
 	}
 	nav>a{
+		padding: 0.2rem 0;
 		display: block;
 		border-top: 1px dotted black;
 	}

projects.html

@@ -7,8 +7,8 @@
 		<meta name="description" content="A collection of current, previous, and future (mostly software) projects.">
 		<meta name="keywords" content="Projects, Portfolio">
 		<meta name="author" content="Nathan (Aney) Steel">
-		<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+		<meta name="theme-color" content="white">
-		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
+		<meta name="theme-color" content="black">
 		<link rel="stylesheet" type="text/css" href="main.css">
 		<link rel="icon" type="image/png" href="images/favicon.svg">
 		<title>Projects</title>
@@ -22,23 +22,19 @@
 				<a href="index.html">home</a>
 				<a href="equipment.html">equipment</a>
 				<a href="projects.html">projects</a>
-				<a href="cv.html">cv</a>
+				<a href="sitemap.html">misc</a>
+				<a href="support.html">support</a>
 			</nav>
 			<hr/>
 		</header>
 
 		<main>
-			<section>
-				<h1>Current, and Previous Projects</h1>
-				<p>Projects that I am currently working on, or have "completed".</p>
-			</section>
-
 			<section id="projects">
 				<h2>Current Projects</h2>
 				<section id="aney-website">
 					<h3><a href="http://aney.co.uk" target="_blank" rel="noopener noreferrer">Personal Website</a></h3>
 					<p>A basic website to let me have my own little place on the internet.
-					<br/>You may recognise it, because you're using it right now.</p>
+					<br/>You may recognise it, because you're using it right now!</p>
 					<p>Skills: <span class="tag">HTML</span> <span class="tag">CSS</span></p>
 				</section>
 			</section>

sitemap.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="title" content="Aney's Sitemap">
+		<meta name="description" content="The sitemap for aney.co.uk, now you can finally find that page you're after">
+		<meta name="keywords" content="Sitemap, aney.co.uk">
+		<meta name="author" content="Nathan (Aney) Steel">
+		<meta name="theme-color" content="white">
+		<meta name="theme-color" content="black">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<link rel="icon" type="image/png" href="images/favicon.svg">
+		<title>Aney's Sitemap</title>
+	</head>
+
+	<body>
+		<header>
+			<h1>Aney's Sitemap</h1>
+			<hr/>
+			<nav>
+				<a href="index.html">home</a>
+				<a href="equipment.html">equipment</a>
+				<a href="projects.html">projects</a>
+				<a href="sitemap.html">misc</a>
+				<a href="support.html">support</a>
+			</nav>
+			<hr/>
+		</header>
+
+		<main>
+			<section>
+				<ul>
+					<li><a href="index.html">home</a></li>
+					<li><a href="equipment.html">equipment</a></li>
+					<li><a href="projects.html">projects</a></li>
+					<li><a href="sitemap.html">sitemap/misc</a></li>
+					<li><a href="support.html">donate/support me</a></li>
+				</ul>
+
+				<ul>
+					<li><a href="websites.html">websites I like</a></li>
+					<li><a href="cv.html">cv</a></li>
+				</ul>
+			</section>
+		</main>
+
+		<footer>
+			<hr/>
+			<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
+		</footer>
+	</body>
+</html>
+

support.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="title" content="Aney's favourite websites, or something like that">
+		<meta name="description" content="A collection of the websites Aney uses regularary, finds inspiration from, or just finds attractive">
+		<meta name="keywords" content="Websites, collection">
+		<meta name="author" content="Nathan (Aney) Steel">
+		<meta name="theme-color" content="white">
+		<meta name="theme-color" content="black">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<link rel="icon" type="image/png" href="images/favicon.svg">
+		<title>Aney's Favourite Sites</title>
+	</head>
+
+	<body>
+		<header>
+			<h1>Support Me</h1>
+			<hr/>
+			<nav>
+				<a href="index.html">home</a>
+				<a href="equipment.html">equipment</a>
+				<a href="projects.html">projects</a>
+				<a href="sitemap.html">misc</a>
+				<a href="support.html">support</a>
+			</nav>
+			<hr/>
+		</header>
+
+		<main>
+			<section>
+				<p>If you'd like to support me, the site, or any projects I'm working on, thank you.</p>
+			</section>
+
+			<section>
+				<h2>Ko-fi</h2>
+				<p><a href="https://ko-fi.com/siraney" target="_blank" rel="noopener noreferrer">Donate me a hot choccy</a></a>
+
+				<h2>BAT (Brave)</h2>
+				<p>If you use the Brave browser, this site is setup to accept BAT.</p>
+
+				<h2><del>Liberapay</del></h2>
+				<p>I've yet to set this up, but when I do I'll likely push this.</p>
+			</section>
+		</main>
+
+		<footer>
+			<hr/>
+			<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
+		</footer>
+	</body>
+</html>
+

websites.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="title" content="Aney's favourite websites, or something like that">
+		<meta name="description" content="A collection of the websites Aney uses regularary, finds inspiration from, or just finds attractive">
+		<meta name="keywords" content="Websites, collection">
+		<meta name="author" content="Nathan (Aney) Steel">
+		<meta name="theme-color" content="white">
+		<meta name="theme-color" content="black">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<link rel="icon" type="image/png" href="images/favicon.svg">
+		<title>Aney's Favourite Sites</title>
+	</head>
+
+	<body>
+		<header>
+			<h1>Aney's Favourite Sites</h1>
+			<hr/>
+			<nav>
+				<a href="index.html">home</a>
+				<a href="equipment.html">equipment</a>
+				<a href="projects.html">projects</a>
+				<a href="sitemap.html">misc</a>
+				<a href="support.html">support</a>
+			</nav>
+			<hr/>
+		</header>
+
+		<main>
+			<section>
+				<h2>Websites I frequent</h2>
+				<p>I use these, but maybe I should stop.</p>
+				<ul>
+					<li><a href="https://www.youtube.co.uk" target="_blank" rel="noopener noreferrer ">Youtube</a></li>
+				</ul>
+			</section>
+
+			<section>
+				<h2>Useful Websites</h2>
+				<p>These websites make things easier for me.</p>
+				<ul>
+					<li><a href="https://coolors.co/generate" target="_blank" rel="noopener noreferrer ">coolors.co/generate</a></li>
+					<li><a href="https://webpagetest.org/" target="_blank" rel="noopener noreferrer ">webpagetest.org</a></li>
+					<li><a href="https://tools.pingdom.com/" target="_blank" rel="noopener noreferrer ">tools.pingdom.com</a></li>
+				</ul>
+			</section>
+
+			<section>
+				<h2>Websites that Inspire me</h2>
+				<p>Either their site, or their content. Ideally both.</p>
+				<ul>
+					<li><a href="https://lukesmith.xyz" target="_blank" rel="noopener noreferrer ">luksmith.xyz</a></li>
+					<li><a href="https://drewdevault.com" target="_blank" rel="noopener noreferrer ">drewdevault.com</a></li>
+					<li><a href="https://danluu.com/" target="_blank" rel="noopener noreferrer ">danluu.com</a></li>
+					<li><a href="https://uglyduck.ca/" target="_blank" rel="noopener noreferrer ">uglyduck.ca</a></li>
+					<li><a href="https://1mb.club/" target="_blank" rel="noopener noreferrer ">1mb.club</a></li>
+					<li><a href="https://seirdy.one/" target="_blank" rel="noopener noreferrer ">seirdy.one</a></li>
+					<li><a href="https://jeremymaluf.com/" target="_blank" rel="noopener noreferrer ">jeremymaluf.com</a></li>
+					<li><a href="https://m-chrzan.xyz/" target="_blank" rel="noopener noreferrer ">m-chrzan.xyz</a></li>
+				</ul>
+			</section>
+
+			<section>
+				<h2>My websites</h2>
+				<ul>
+					<li><a href="https://www.aney.co.uk" target="_blank" rel="noopener noreferrer ">www.aney.co.uk</a></li>
+				</ul>
+			</section>
+		</main>
+
+		<footer>
+			<hr/>
+			<p>Written by <a href="http://www.aney.co.uk" target="_blank" rel="noopener noreferrer">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener noreferrer">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener noreferrer">Source Code</a></p>
+		</footer>
+	</body>
+</html>
+