diff --git a/src/components/ButtonLink.astro b/src/components/ButtonLink.astro index 67b595d..7579e46 100644 --- a/src/components/ButtonLink.astro +++ b/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 diff --git a/src/components/Contact.astro b/src/components/Contact.astro new file mode 100644 index 0000000..0133fb1 --- /dev/null +++ b/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 +--- + + + + diff --git a/src/components/Hire.astro b/src/components/Hire.astro new file mode 100644 index 0000000..525243e --- /dev/null +++ b/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" +--- + +
+

Hire Me

+ +

+ 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. +

+ + +
diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 513fa64..f9d0c2c 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -8,9 +8,10 @@ import styles from "../styles/Nav.module.css" Henry Hiles - Home + Home Projects - About Me + About + Hire
+
+

Discord Bots

+ +

+ 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 QuadraticBot2.0. +

+ +
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index 930828a..facec17 100644 --- a/src/pages/index.astro +++ b/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" + diff --git a/src/styles/Bot.module.css b/src/styles/Bot.module.css new file mode 100644 index 0000000..13b6e8d --- /dev/null +++ b/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; +} diff --git a/src/styles/ButtonLink.module.css b/src/styles/Button.module.css similarity index 94% rename from src/styles/ButtonLink.module.css rename to src/styles/Button.module.css index 62f1671..1ee990c 100644 --- a/src/styles/ButtonLink.module.css +++ b/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; } diff --git a/src/styles/Hire.module.css b/src/styles/Hire.module.css new file mode 100644 index 0000000..dfa7337 --- /dev/null +++ b/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; +} diff --git a/src/styles/Home.css b/src/styles/Home.css index ac0d25c..a094c39 100644 --- a/src/styles/Home.css +++ b/src/styles/Home.css @@ -8,3 +8,7 @@ main > section > :is(h1, h2) { text-align: center; text-transform: uppercase; } + +main { + padding-bottom: 10rem; +} diff --git a/src/styles/Layout.css b/src/styles/Layout.css index 88eb041..19424e0 100644 --- a/src/styles/Layout.css +++ b/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; +} diff --git a/src/styles/Nav.module.css b/src/styles/Nav.module.css index 9dab91d..ab732db 100644 --- a/src/styles/Nav.module.css +++ b/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; } }