upload blog, add nojs support, add implications-of-deadline.html, add…

… polaroid-guide.html, adjust landing page
blackshibe · Jun 25, 2024 · 5f6b9fc · 5f6b9fc
1 parent f7d1cd9
commit 5f6b9fc
Show file tree

Hide file tree

Showing 27 changed files with 834 additions and 31 deletions.
diff --git a/css/blog.css b/css/blog.css
@@ -0,0 +1,12 @@
+@font-face {
+	font-family: "Roboto";
+	src: url(font/Roboto-Regular.ttf);
+}
+
+p:not(.custom-heading),
+a:not(.custom-heading) {
+	font-family: "Roboto", serif;
+	font-optical-sizing: auto;
+	font-weight: 400;
+	font-style: normal;
+}
diff --git a/css/custom.css b/css/custom.css
@@ -6,9 +6,11 @@
 .custom-card {
 	display: flex;
 	flex-direction: column;
-	gap: 0.3rem;
+	gap: 0.6rem;
 	padding: 2rem;
 	width: 100%;
+
+	background-color: rgba(0, 0, 0, 0.284);
 }
 
 .custom-card a,
@@ -25,7 +27,7 @@
 .custom-site-content {
 	margin: auto;
 	width: fit-content;
-	max-width: 900px;
+	width: min(100%, 900px);
 }
 
 .custom-fixed-bg {

diff --git a/css/font/Roboto-Regular.ttf b/css/font/Roboto-Regular.ttf
diff --git a/css/font/RobotoMono-VariableFont_wght.ttf b/css/font/RobotoMono-VariableFont_wght.ttf
diff --git a/css/style.css b/css/style.css
@@ -1,12 +1,21 @@
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Poppins:wght@400;600&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+	font-family: "Roboto Mono";
+	src: url(font/RobotoMono-VariableFont_wght.ttf);
+}
+
 body {
 	margin: 0;
+	min-height: 100vh;
+
+	/* nojs support */
+	background-color: var(--bg-color);
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
 	scrollbar-color: #464646 #1c1c1c;
 	--text-color: #ffffff;
@@ -19,12 +28,11 @@ body {
 	image-rendering: crisp-edges;
 }
 
-.font-ibm-mono {
-	font-family: "IBM Plex Mono", monospace;
-}
-
-.font-poppins {
-	font-family: "Poppins", sans-serif;
+.font-custom {
+	font-family: "Roboto Mono", monospace;
+	font-optical-sizing: auto;
+	font-weight: 400;
+	font-style: normal;
 }
 
 * {
@@ -52,6 +60,10 @@ a:hover {
 	color: var(--bg-color) !important;
 }
 
+img {
+	margin-top: 1rem;
+}
+
 hr {
 	width: 100%;
 	border-color: var(--text-color);

diff --git a/index.html b/index.html
@@ -13,9 +13,9 @@
 		<link rel="stylesheet" href="css/style.css" />
 		<link rel="stylesheet" href="css/custom.css" />
 
-		<title>blackshibe</title>
+		<title>welcome - blackshibe</title>
 	</head>
-	<body class="font-ibm-mono leading-6 bg-image-1">
+	<body class="font-custom leading-6 bg-image-1">
 		<div class="custom-bg-opaque">
 			<div class="custom-site-content">
 				<article class="flex flex-col gap-2 justify-center items-start h-screen">
@@ -24,33 +24,30 @@
 						<div class="flex flex-col gap-1 md:p-4 text-xs md:text-base">
 							<p>blackshibe</p>
 							<p class="half-opacity">professional programmer & hobbyist musician</p>
-							
+
 							<hr />
-							
+
 							<p>foxes and text editors</p>
 							<p>the world is a fuck</p>
 							<p>all good things must end</p>
 							<p class="half-opacity">thanks, Jax</p>
-
-							<hr />
-
-							<p>message [email protected] if you'd like to contact me</p>
-
+
 							<hr />
-
+
+							<p>[email protected] by email</p>
 							<p>@blackshibe on discord</p>
 							<p>@blackshibe on github</p>
 							<p>@shibesongs on soundcloud</p>
-							
+
 							<hr />
 
-							<a href="https://twitter.com/Serpent____x">the man behind the art on this page</a>
 							<a href="" id="random-tag">visit a friendly website</a>
 
 							<hr />
 
-							<a href="page/music.html">music archive</a>
-							<a href="page/wallpapers.html">wallpaper archive</a>
+							<a href="page/music.html">my music</a>
+							<a href="page/blog.html">my blog</a>
+							<a href="page/wallpapers.html">my wallpapers</a>
 						</div>
 					</div>
 				</article>

diff --git a/page/blog.html b/page/blog.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta property="og:title" content="blackshibe's portfolio" />
+		<meta property="og:description" content="Programmer, professional survivor of coping" />
+		<meta property="og:image" content="../fox.webp" />
+		<meta name="theme-color" content="#808080" />
+
+		<script src="https://cdn.tailwindcss.com"></script>
+		<link rel="icon" href="/favicon.ico" />
+		<link rel="stylesheet" href="/css/style.css" />
+		<link rel="stylesheet" href="/css/custom.css" />
+
+		<style>
+			footer {
+				margin-top: 1rem;
+			}
+
+			/* did i ever tell you the definition of insanity? */
+			ul {
+				display: flex;
+				flex-direction: column;
+				gap: 0.25rem;
+			}
+
+			/* i am actually insane and dangerous */
+			ul hr {
+				opacity: 0%;
+				min-height: 1rem;
+			}
+		</style>
+
+		<title>blog - blackshibe</title>
+	</head>
+	<!-- i can't be bothered to build this from some macro or express webpage -->
+	<body class="font-custom leading-6 text-lg">
+		<div class="custom-site-content">
+			<article class="flex flex-col gap-2">
+				<div class="custom-card">
+					<p class="custom-heading">my blog</p>
+				</div>
+
+				<div class="custom-card">
+					<p class="custom-heading">2024</p>
+					<hr />
+
+					<div>
+						<a href="blog/implications-of-deadline.html">Implications of Deadline</a>
+						<p class="opacity-75">- Have you ever had a project succeed at the age of 13?</p>
+						<p class="opacity-75">- 24/06/2024</p>
+					</div>
+
+					<div>
+						<a href="blog/polaroid-guide.html">Shooting Decent Photos With Polaroid</a>
+						<p class="opacity-75">
+							- Got too much disposable income and a taste for the 80s? This guide will tell you the
+							basics of shooting modern Polaroid cameras.
+						</p>
+						<p class="opacity-75">- 24/06/2024</p>
+					</div>
+				</div>
+			</article>
+		</div>
+
+		<div class="custom-bg-opaque custom-fixed-bg bg-image-2"></div>
+	</body>
+</html>
diff --git a/page/blog/__TEMPLATE.html b/page/blog/__TEMPLATE.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta property="og:title" content="blackshibe's portfolio" />
+		<meta property="og:description" content="Programmer, professional survivor of coping" />
+		<meta property="og:image" content="../fox.webp" />
+		<meta name="theme-color" content="#808080" />
+
+		<script src="https://cdn.tailwindcss.com"></script>
+		<link rel="icon" href="/favicon.ico" />
+		<link rel="stylesheet" href="/css/style.css" />
+		<link rel="stylesheet" href="/css/custom.css" />
+		<link rel="stylesheet" href="/css/blog.css" />
+
+		<title>__TEMPLATE - blackshibes</title>
+	</head>
+	<!-- i can't be bothered to build this from some macro or express webpage -->
+	<body class="font-custom leading-6 text-lg">
+		<div class="custom-site-content">
+			<div style="height: 10vh"></div>
+			<article class="flex flex-col gap-2 min-h-screen">
+				<div class="custom-card">
+					<p class="custom-heading">__TEMPLATE</p>
+					<hr />
+				</div>
+
+				<div class="custom-card">
+					<p class="custom-heading">Hello world</p>
+					<hr />
+
+					<p>
+						Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, porro itaque labore, facilis,
+						assumenda sunt cum distinctio corporis excepturi iure corrupti aliquam? Quidem provident
+						pariatur repellat nemo culpa possimus quia.
+					</p>
+
+					<img src="img/istockphoto-1197121742-170667a.webp" alt="" />
+				</div>
+			</article>
+			<div style="height: 25vh"></div>
+		</div>
+
+		<div class="custom-bg-opaque custom-fixed-bg bg-image-2"></div>
+	</body>
+</html>
diff --git a/page/blog/img/2024-04-20-16-25-28-740.jpg b/page/blog/img/2024-04-20-16-25-28-740.jpg
diff --git a/page/blog/img/2024-06-25-02-10-46-440.jpg b/page/blog/img/2024-06-25-02-10-46-440.jpg
diff --git a/page/blog/img/2024-06-25-02-16-46-473.jpg b/page/blog/img/2024-06-25-02-16-46-473.jpg
diff --git a/page/blog/img/2024-06-25-02-20-23-169.jpg b/page/blog/img/2024-06-25-02-20-23-169.jpg
diff --git a/page/blog/img/2024-06-25-02-23-46-042.jpg b/page/blog/img/2024-06-25-02-23-46-042.jpg
diff --git a/page/blog/img/2024-06-25-02-25-20-715.jpg b/page/blog/img/2024-06-25-02-25-20-715.jpg
diff --git a/page/blog/img/ApplicationFrameHost_ChjV31sdQS.png b/page/blog/img/ApplicationFrameHost_ChjV31sdQS.png
diff --git a/page/blog/img/Compare_films-1-1024x485.jpg b/page/blog/img/Compare_films-1-1024x485.jpg
diff --git a/page/blog/img/DSCF7868.JPG b/page/blog/img/DSCF7868.JPG
diff --git a/page/blog/img/deadline.webp b/page/blog/img/deadline.webp
diff --git a/page/blog/img/firefox_4S6fJ9PrvI.png b/page/blog/img/firefox_4S6fJ9PrvI.png
diff --git a/page/blog/img/firefox_mijm1SiF3P.png b/page/blog/img/firefox_mijm1SiF3P.png
diff --git a/page/blog/img/istockphoto-1197121742-170667a.webp b/page/blog/img/istockphoto-1197121742-170667a.webp
diff --git a/page/blog/img/result.jpeg b/page/blog/img/result.jpeg
diff --git a/page/blog/img/signal-2024-06-23-154947_024.jpeg b/page/blog/img/signal-2024-06-23-154947_024.jpeg