Change round landing page a bit

DeclanChidlow · Oct 23, 2024 · 2c39c40 · 2c39c40
1 parent c89b13b
commit 2c39c40
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 62 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -56,32 +56,57 @@
 
 <main id="main">
 <div id="puddle-container"></div>
-<div class="hero">
-    <h1>Vale</h1>
-    Developer<br />
-    Designer<br />
-    Dabbler
-</div>
+
+<section class="hero">
+	<h1>Vale</h1>
+	<div class="hero-titles">
+		<p>Developer</p>
+		<p>Designer</p>
+		<p>Dabbler</p>
+	</div>
+</section>
+
 <div class="content">
-<h2>Ahoy!</h2>
-<p>I’m Declan Chidlow, a passionate front-end developer. I like to believe I’ve got an eye for aesthetics, and I’ve most definitely got a love for learning. My ultimate aspiration is to create digital experiences that are both functional and visually appealing.</p>
-<p>When I’m not bodging together some script or reinventing the wheel, you might find me cruising around on my unicycle. Alternatively, you may find me writing up some form of article for this very website, doing some gaming, inadvertently converting an otherwise functional piece of tech into a paperweight, or browsing the crevices of cyberspace.</p>
-<p>Apart from being a home for <a href="/posts">my thoughts and musings</a>, this website acts as a gateway to all sorts of horrific abominations I concoct. Some of them won’t even cause internal haemorrhaging.</p>
-<h2>Let’s Connect</h2>
-<p>Impressed by my work? Have a project in mind? I’d love to hear about it! Don’t hesitate to reach out. Visit my <a href="/contact">contact page</a> and let’s start a conversation.</p>
+	<section class="about">
+		<h2>Ahoy!</h2>
+		<p>
+			I'm Declan Chidlow, a passionate front-end developer. I like to believe I've got an eye for aesthetics, and I've most definitely got a love for learning. My ultimate aspiration is to create
+			digital experiences that are both functional and visually appealing.
+		</p>
+		<p>
+			When I'm not bodging together some script or reinventing the wheel, you might find me cruising around on my unicycle. Alternatively, you may find me writing up some form of article for this very
+			website, doing some gaming, inadvertently converting an otherwise functional piece of tech into a paperweight, or browsing the crevices of cyberspace.
+		</p>
+		<p>
+			Apart from being a home for <a href="/posts">my thoughts and musings</a>, this website acts as a gateway to all sorts of horrific abominations I concoct. Some of them won't even cause internal
+			haemorrhaging.
+		</p>
+	</section>
+
+	<a href="/posts" class="cta-link">
+		<h2>Read my writings<span aria-hidden="true"> →</span></h2>
+	</a>
+
+	<a href="/portfolio" class="cta-link">
+		<h2>Peruse my portfolio<span aria-hidden="true"> →</span></h2>
+	</a>
+
+	<a href="/contact" class="cta-link">
+		<h2>Get in contact<span aria-hidden="true"> →</span></h2>
+	</a>
 </div>
+
 <script>
-if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-    const script = document.createElement('script');
-    script.src = "/scripts/puddle.js";
-    script.onload = function() {
-        const puddle = new Puddle("#puddle-container");
-        puddle.setNodeStyle("ascii");
-    };
-    document.body.appendChild(script);
-}
+	if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+		const script = document.createElement("script");
+		script.src = "/scripts/puddle.js";
+		script.onload = function () {
+			const puddle = new Puddle("#puddle-container");
+			puddle.setNodeStyle("ascii");
+		};
+		document.body.appendChild(script);
+	}
 </script>
-
 		</main>
 
 		<footer>

diff --git a/docs/styles/pages/index.css b/docs/styles/pages/index.css
@@ -4,7 +4,7 @@ main {
 
 #puddle-container {
 	position: absolute;
-	inset: 0 0 0 0;
+	inset: 0;
 	color: var(--bright_grey);
 	user-select: none;
 
@@ -35,4 +35,25 @@ main {
 
 .content {
 	position: relative;
+	max-width: 80ch;
+
+	.about {
+		margin-bottom: 4rem;
+	}
+
+	.cta-link {
+		display: block;
+		border-top: 4px solid var(--grey);
+		border-bottom: 4px solid var(--grey);
+		padding: 1rem;
+		text-decoration: none;
+	}
+
+	p + h2 {
+		margin-top: 2rem;
+	}
+
+	* + * {
+		margin-top: 1rem;
+	}
 }
diff --git a/input/global/styles/pages/index.css b/input/global/styles/pages/index.css
@@ -4,7 +4,7 @@ main {
 
 #puddle-container {
 	position: absolute;
-	inset: 0 0 0 0;
+	inset: 0;
 	color: var(--bright_grey);
 	user-select: none;
 
@@ -35,4 +35,25 @@ main {
 
 .content {
 	position: relative;
+	max-width: 80ch;
+
+	.about {
+		margin-bottom: 4rem;
+	}
+
+	.cta-link {
+		display: block;
+		border-top: 4px solid var(--grey);
+		border-bottom: 4px solid var(--grey);
+		padding: 1rem;
+		text-decoration: none;
+	}
+
+	p + h2 {
+		margin-top: 2rem;
+	}
+
+	* + * {
+		margin-top: 1rem;
+	}
 }
diff --git a/input/pages/index/conf.toml b/input/pages/index/conf.toml
@@ -13,8 +13,8 @@ format = "html"
 content_file = "input/global/elements/navbar.html"
 
 [[main.block]]
-format = "md"
-content_file = "input/pages/index/index.md"
+format = "html"
+content_file = "input/pages/index/index.html"
 
 [[main.block]]
 format = "html"

diff --git a/input/pages/index/index.html b/input/pages/index/index.html
@@ -0,0 +1,52 @@
+<div id="puddle-container"></div>
+
+<section class="hero">
+	<h1>Vale</h1>
+	<div class="hero-titles">
+		<p>Developer</p>
+		<p>Designer</p>
+		<p>Dabbler</p>
+	</div>
+</section>
+
+<div class="content">
+	<section class="about">
+		<h2>Ahoy!</h2>
+		<p>
+			I'm Declan Chidlow, a passionate front-end developer. I like to believe I've got an eye for aesthetics, and I've most definitely got a love for learning. My ultimate aspiration is to create
+			digital experiences that are both functional and visually appealing.
+		</p>
+		<p>
+			When I'm not bodging together some script or reinventing the wheel, you might find me cruising around on my unicycle. Alternatively, you may find me writing up some form of article for this very
+			website, doing some gaming, inadvertently converting an otherwise functional piece of tech into a paperweight, or browsing the crevices of cyberspace.
+		</p>
+		<p>
+			Apart from being a home for <a href="/posts">my thoughts and musings</a>, this website acts as a gateway to all sorts of horrific abominations I concoct. Some of them won't even cause internal
+			haemorrhaging.
+		</p>
+	</section>
+
+	<a href="/posts" class="cta-link">
+		<h2>Read my writings<span aria-hidden="true"> →</span></h2>
+	</a>
+
+	<a href="/portfolio" class="cta-link">
+		<h2>Peruse my portfolio<span aria-hidden="true"> →</span></h2>
+	</a>
+
+	<a href="/contact" class="cta-link">
+		<h2>Get in contact<span aria-hidden="true"> →</span></h2>
+	</a>
+</div>
+
+<script>
+	if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+		const script = document.createElement("script");
+		script.src = "/scripts/puddle.js";
+		script.onload = function () {
+			const puddle = new Puddle("#puddle-container");
+			puddle.setNodeStyle("ascii");
+		};
+		document.body.appendChild(script);
+	}
+</script>
diff --git a/input/pages/index/index.md b/input/pages/index/index.md