Add hire me page

This commit is contained in:
Henry Hiles 2023-06-13 12:34:53 -04:00
parent 0b79a849e7
commit 79e3ecc72d
12 changed files with 158 additions and 7 deletions

View file

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

View file

@ -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>

24
src/components/Hire.astro Normal file
View file

@ -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>

View file

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

View file

@ -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>

View file

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

25
src/styles/Bot.module.css Normal file
View file

@ -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;
}

View file

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

View file

@ -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;
}

View file

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

View file

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

View file

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