Add hire me page

src/components/ButtonLink.astro

@@ -1,5 +1,5 @@
 ---
-import styles from "../styles/ButtonLink.module.css"
+import styles from "../styles/Button.module.css"
 
 export interface Props {
 	href: string

src/components/Contact.astro

@@ -0,0 +1,28 @@
+---
+import buttonStyles from "../styles/Button.module.css"
+
+export interface Props {
+	subject?: string
+}
+
+const { subject = "Contact Me" } = Astro.props
+---
+
+<button id="contact" class={buttonStyles.button} data-subject={subject}
+	>Contact Me</button
+>
+
+<script>
+	const contact = document.querySelector("#contact")
+
+	contact?.addEventListener(
+		"click",
+		() =>
+			window.open(
+				`${"mai"}${"lto:cont"}${"act@henr"}yhile${"s.com?subj"}ect=${
+					(contact as HTMLElement).dataset.subject
+				}`,
+				"_self"
+			) // Use string concatination to hopefully avoid spam
+	)
+</script>

src/components/Hire.astro

@@ -0,0 +1,24 @@
+---
+import styles from "../styles/Hire.module.css"
+import Contact from "./Contact.astro"
+import Divider from "./Divider.astro"
+---
+
+<section id="hire" class={styles.hire}>
+	<h2>Hire Me</h2>
+	<Divider />
+	<p class={styles.jobDescription}>
+		I can create custom experiences for you, from a Discord server to a
+		whole website, at reasonable prices. You can trust my years of
+		JavaScript, HTML, and CSS experience. I am also skilled with Astro,
+		useful for making static sites.
+	</p>
+	<ul class={styles.jobs}>
+		<li>
+			<a href="/discord-bot-developer">Custom Discord Bots - From $30</a>
+		</li>
+		<li>Personalized Discord Server - From $20</li>
+		<li>Bespoke Website - From $50</li>
+	</ul>
+	<Contact />
+</section>

src/components/Nav.astro

@@ -8,9 +8,10 @@ import styles from "../styles/Nav.module.css"
 		<a href="/" id={styles.logo}
 			><img src="/images/logo.svg" alt="Henry Hiles" /></a
 		>
-		<a href="/#">Home</a>
+		<a href="/#" class={styles.home}>Home</a>
 		<a href="/#portfolio">Projects</a>
-		<a href="/#about">About Me</a>
+		<a href="/#about">About</a>
+		<a href="/#hire">Hire</a>
 	</section>
 	<section>
 		<a

src/pages/discord-bot-developer.astro

@@ -0,0 +1,28 @@
+---
+import styles from "../styles/Bot.module.css"
+import Divider from "../components/Divider.astro"
+import Layout from "../layouts/Layout.astro"
+import Contact from "../components/Contact.astro"
+---
+
+<Layout
+	page="Discord Bot Developer"
+	description="Hire me to make you a Discord Bot"
+>
+	<section class={styles.discord}>
+		<h1 class={styles.title}>Discord Bots</h1>
+		<Divider />
+		<p class={styles.description}>
+			I can create a Discord bot for you that fits your needs, starting
+			from the low price of $30. You can count on my years of Node.JS
+			experience. For an example of my quality code, you can check the
+			source code of my bot <a
+				target="_blank"
+				rel="noreferrer"
+				href="https://github.com/QuadraticBot/QuadraticBot2.0"
+				>QuadraticBot2.0</a
+			>.
+		</p>
+		<Contact subject="Contact Me - Discord Bot" />
+	</section>
+</Layout>

src/pages/index.astro

@@ -2,6 +2,7 @@
 import About from "../components/About.astro"
 import Jumbo from "../components/Jumbo.astro"
 import Portfolio from "../components/Portfolio.astro"
+import Hire from "../components/Hire.astro"
 import Layout from "../layouts/Layout.astro"
 import "../styles/Home.css"
 ---
@@ -14,4 +15,5 @@ import "../styles/Home.css"
 	<Jumbo />
 	<Portfolio />
 	<About />
+	<Hire />
 </Layout>

src/styles/Bot.module.css

@@ -0,0 +1,25 @@
+.discord {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: unset;
+	padding: 3rem;
+	max-width: 90%;
+}
+
+.discord button {
+	width: 100%;
+	max-width: 40rem;
+}
+
+.title {
+	font-size: 2.5rem;
+	margin: 0;
+	text-align: center;
+}
+
+.description {
+	font-size: 1.5rem;
+	max-width: 40rem;
+	text-align: justify;
+}

src/styles/Button.module.css

@@ -8,6 +8,7 @@
 	text-decoration: none;
 	white-space: nowrap;
 	height: 100%;
+	font-size: 1.5rem;
 	color: var(--text-primary);
 	justify-content: center;
 }

src/styles/Hire.module.css

@@ -0,0 +1,30 @@
+.hire {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 3rem;
+}
+
+.hireTitle {
+	font-size: 2rem;
+	margin: 0;
+}
+
+.jobs {
+	margin: 0 auto 2rem;
+	font-size: 1.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.hire button {
+	width: 100%;
+	max-width: 40rem;
+}
+
+.jobDescription {
+	font-size: 1.5rem;
+	max-width: 40rem;
+	text-align: justify;
+}

src/styles/Home.css

@@ -8,3 +8,7 @@ main > section > :is(h1, h2) {
 	text-align: center;
 	text-transform: uppercase;
 }
+
+main {
+	padding-bottom: 10rem;
+}

src/styles/Layout.css

@@ -37,8 +37,8 @@ main {
 	display: flex;
 	gap: 3rem;
 	flex-direction: column;
+	padding-bottom: 2rem;
 	align-items: center;
-	padding-bottom: 10em;
 }
 
 main > section {
@@ -61,3 +61,11 @@ main > section:hover {
 		scroll-margin: 6rem;
 	}
 }
+
+a {
+	color: #4f94e5;
+}
+
+a:not(:hover) {
+	text-decoration: none;
+}

src/styles/Nav.module.css

@@ -14,7 +14,7 @@
 .nav section {
 	display: flex;
 	align-items: center;
-	gap: 0.5em;
+	gap: 0.75em;
 }
 
 .nav :is(svg, img) {
@@ -50,8 +50,8 @@
 	}
 }
 
-@media (max-width: 400px) {
-	#logo + a {
+@media (max-width: 430px) {
+	a.home {
 		display: none;
 	}
 }