diff --git a/public/images/Background.png b/public/images/Background.png new file mode 100644 index 0000000..8a5d836 Binary files /dev/null and b/public/images/Background.png differ diff --git a/public/images/background.jpg b/public/images/background.jpg new file mode 100644 index 0000000..d8800a0 Binary files /dev/null and b/public/images/background.jpg differ diff --git a/public/images/logoLong.svg b/public/images/logoLong.svg new file mode 100644 index 0000000..b4019f1 --- /dev/null +++ b/public/images/logoLong.svg @@ -0,0 +1,68 @@ + + + + + + + + + Henry Hiles + + + + + + + diff --git a/public/images/mentalMathThumb.svg b/public/images/mentalMathThumb.svg new file mode 100644 index 0000000..e05a279 --- /dev/null +++ b/public/images/mentalMathThumb.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + diff --git a/public/images/messagingThumb.svg b/public/images/messagingThumb.svg new file mode 100644 index 0000000..d431f60 --- /dev/null +++ b/public/images/messagingThumb.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + diff --git a/src/components/About.astro b/src/components/About.astro index 2e04afb..d4012e2 100644 --- a/src/components/About.astro +++ b/src/components/About.astro @@ -3,77 +3,63 @@ import styles from "../styles/About.module.css" import Divider from "./Divider.astro" --- -
-

About

+
+

About Me

-
-
+
+

+ Hello, my name is Henry Hiles, Full Stack Developer. I have + extensive experience with React, SolidJS, Node.js, and ASP.NET Razor + Pages. I have used my Node.js knowledge to create{" "} + QuadraticBot 2.0, a giveaway + bot for discord. +

+

+ For more projects, check out{" "} + + my GitHub profile. + +

+
+ +
My Github Stats -
-
- -
- - Azure Fundamentals Badge - - - Azure Data Fundamentals Badge - - - Azure AI Fundamentals Badge - -
-
-
My Github Stats -
-
+
+ +
+ + Azure Fundamentals Badge + + + Azure Data Fundamentals Badge + + + Azure AI Fundamentals Badge + +
diff --git a/src/components/Jumbo.astro b/src/components/Jumbo.astro index a75428e..608098e 100644 --- a/src/components/Jumbo.astro +++ b/src/components/Jumbo.astro @@ -1,18 +1,20 @@ --- -import RoundDivider from "./RoundDivider.astro" import styles from "../styles/Jumbo.module.css" import Divider from "./Divider.astro" ---
-
-

Henry Hiles

- - - Full Stack .NET Developer & Discord Bot Developer - -
- + + Henry Hiles + + + Full Stack .NET Developer & Discord Bot Developer + +
diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 2b823bf..986da03 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -14,16 +14,6 @@ import styles from "../styles/Nav.module.css"
  • About Me
    • -
  • -
    - - -
    -
    • - - diff --git a/src/components/Portfolio.astro b/src/components/Portfolio.astro index 518f0fc..2018d69 100644 --- a/src/components/Portfolio.astro +++ b/src/components/Portfolio.astro @@ -4,8 +4,8 @@ import styles from "../styles/Portfolio.module.css" import Divider from "./Divider.astro" --- -
    -

    My Projects

    +
    +

    Projects

    { diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 29470d8..2598186 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,5 +1,5 @@ --- -import "../styles/index.css" +import "../styles/Layout.css" import Nav from "../components/Nav.astro" export interface Props { diff --git a/src/pages/index.astro b/src/pages/index.astro index f48a7e1..e7a68f3 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,13 +3,13 @@ import About from "../components/About.astro" import Jumbo from "../components/Jumbo.astro" import Portfolio from "../components/Portfolio.astro" import Layout from "../layouts/Layout.astro" -import styles from "../styles/Home.module.css" +import "../styles/Home.css" --- -
    +
    -
    +     diff --git a/src/pages/projects/[route].astro b/src/pages/projects/[route].astro index 6b5c54b..fd9ff1d 100644 --- a/src/pages/projects/[route].astro +++ b/src/pages/projects/[route].astro @@ -1,7 +1,6 @@ --- import ButtonLink from "../../components/ButtonLink.astro" import Divider from "../../components/Divider.astro" -import RoundDivider from "../../components/RoundDivider.astro" import styles from "../../styles/Project.module.css" import Layout from "../../layouts/Layout.astro" import projects from "../../projects.json" @@ -16,59 +15,56 @@ if (project == null) return --- -
    +

    {project.name}

    {project.overview}

    -
    -
    -
    -
    -

    Description

    - -
    -

    - {project.description} - {project.technologies} -

    -
    - { - project.github && ( - - Source Code - - ) - } - { - project.demoLink && ( - - Go to demo - - ) - } - { - project.customLink && ( - - {project.customLink.name} - - ) - } -
    -
    -
    -
    - {`Image -
    -
    +
    +
    +

    Description

    + +
    +

    + {project.description} + {project.technologies} +

    +
    + { + project.github && ( + + Source Code + + ) + } + { + project.demoLink && ( + + Go to demo + + ) + } + { + project.customLink && ( + + {project.customLink.name} + + ) + } +
    +
    +
    +
    + {`Image +
    -
    +     diff --git a/src/projects.json b/src/projects.json index 60c2121..eb3d85b 100644 --- a/src/projects.json +++ b/src/projects.json @@ -31,7 +31,7 @@ "description": "A simple, open-source, online chat room where you can join online chat rooms, or create your own.", "technologies": "This project was built using handcrafted Javascript, as well as Node.js, Socket.io, and Express.", "mainImage": "messagingComputer.png", - "thumbImage": "messagingThumb.png", + "thumbImage": "messagingThumb.svg", "demoLink": "https://chat.henryhiles.com" }, { @@ -53,7 +53,7 @@ "description": "A simple project to help with learning addition and subtraction. You can change the amount of numbers, and switch between addition and subtraction modes.", "technologies": "This project was built using React and CSS Modules.", "mainImage": "mentalMathComputer.png", - "thumbImage": "mentalMathThumb.webp" + "thumbImage": "mentalMathThumb.svg" }, { "name": "Movie React App", diff --git a/src/styles/About.module.css b/src/styles/About.module.css index 347f6f8..692a687 100644 --- a/src/styles/About.module.css +++ b/src/styles/About.module.css @@ -1,36 +1,30 @@ .row { display: flex; align-items: center; - padding: 20px; - gap: 5rem; justify-content: center; + gap: 2em; width: 100%; + flex-wrap: wrap; } .about { text-align: center; font-size: 1.5em; display: flex; + gap: 1em; flex-direction: column; align-items: center; - padding: 40px; } .textArticle p { - margin: 14px 0 40px; - max-width: 40rem; + margin: auto; + max-width: 80%; } -.images a { +a { text-decoration: none; } -.images img { +.certifications img { width: 200px; } - -@media (max-width: 1500px) { - .row { - flex-direction: column; - } -} diff --git a/src/styles/Home.css b/src/styles/Home.css new file mode 100644 index 0000000..705db59 --- /dev/null +++ b/src/styles/Home.css @@ -0,0 +1,28 @@ +section > :is(h1, h2) { + font-size: 2.5em; + margin: 0; + text-align: center; + text-transform: uppercase; +} + +main { + display: flex; + gap: 3rem; + flex-direction: column; + align-items: center; + padding-bottom: 2em; +} + +main > section { + display: flex; + flex-direction: column; + border-radius: 1rem; + background: rgba(0 0 0 / 0.3); + padding: 2rem; + width: 90%; + transition: scale 0.2s; +} + +main > section:hover { + scale: 1.03; +} diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css deleted file mode 100644 index cde0bfa..0000000 --- a/src/styles/Home.module.css +++ /dev/null @@ -1,3 +0,0 @@ -#container { - width: 100%; -} diff --git a/src/styles/Jumbo.module.css b/src/styles/Jumbo.module.css index df9559c..c60bdbd 100644 --- a/src/styles/Jumbo.module.css +++ b/src/styles/Jumbo.module.css @@ -1,27 +1,22 @@ #jumbo { color: var(--text-primary); font-size: 2em; - padding: 3rem 0 0; text-align: center; -} - -/* #jumbo > div { + padding: 0; + padding: 3rem 0 0; height: 100vh; -} */ +} #jumbo i { margin: 20px 0 30px; } +#jumbo #logoLong { + width: 60rem; + max-width: 90%; +} + #jumbo #shortAbout { display: block; padding: 20px 10px; } - -#logo { - width: 25rem; -} - -#logo { - color: aqua; -} diff --git a/src/styles/Layout.css b/src/styles/Layout.css new file mode 100644 index 0000000..f930c1d --- /dev/null +++ b/src/styles/Layout.css @@ -0,0 +1,35 @@ +:root { + color-scheme: dark light; + scroll-behavior: smooth; + + --primary: hsl(211 26% 39%); + --secondary: hsl(209 28% 29%); + --secondary-hover: hsl(209 28% 19%); + --text-primary: hsl(0 0% 100%); + --secondary-text: hsl(211 26% 39%); +} + +body { + font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial, + "Noto Sans", sans-serif; + margin: 0; + background-attachment: fixed; + background-image: url("/images/background.jpg"); + backdrop-filter: blur(10px); + color: var(--text-primary); +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +svg { + vertical-align: middle; + font-size: 0.75rem; +} + +img { + max-width: 100%; +} diff --git a/src/styles/Nav.module.css b/src/styles/Nav.module.css index 86326a3..556a6b5 100644 --- a/src/styles/Nav.module.css +++ b/src/styles/Nav.module.css @@ -1,39 +1,11 @@ .nav { - background: var(--secondary); - color: var(--primary-text); - padding-top: 1.5rem; - overflow: auto; + padding: 0.5rem; display: flex; font-size: 1.3em; + overflow-y: auto; font-weight: bold; - transition: padding 0.5s, font-size 0.5s; - width: 100%; - z-index: 1; - top: 0; - gap: 20px; -} - -.nav [aria-hidden="true"] { - display: none; -} - -@media (min-width: 600px) { - .nav[aria-expanded="false"] { - padding: 1rem; - width: unset; - top: 10px; - border-radius: 100px; - border: 3px solid var(--primary); - padding: 0; - } - - .nav[aria-expanded="true"] { - font-size: 1.5em; - } - - .nav { - position: sticky; - } + background: hsl(0 0% 0% / 0.4); + font-size: 1.5em; } .links svg { @@ -41,7 +13,7 @@ } .nav button { - background-color: transparent; + background: transparent; border: none; cursor: pointer; color: inherit; diff --git a/src/styles/Project.module.css b/src/styles/Project.module.css index f558925..ce71af3 100644 --- a/src/styles/Project.module.css +++ b/src/styles/Project.module.css @@ -1,5 +1,10 @@ -#container { +main { + padding: 2em; + gap: 2em; width: 100%; + display: flex; + flex-direction: column; + align-items: center; } .overview { @@ -25,7 +30,7 @@ } .image img { - max-height: 500px; + max-height: 450px; } .longDescription h2 { @@ -34,18 +39,32 @@ } .title { + font-size: 2.6em; + margin: 0.2em; text-align: center; } .row { display: flex; + flex-wrap: wrap; align-items: center; justify-content: space-evenly; + flex-direction: row; gap: 4rem; } -#details { +main > section { + flex-direction: column; + display: flex; + border-radius: 1rem; + background: rgba(0 0 0 / 0.3); padding: 2rem; + width: 90%; + transition: scale 0.2s; +} + +main > section:hover { + scale: 1.03; } @media (max-width: 1300px) { diff --git a/src/styles/index.css b/src/styles/index.css deleted file mode 100644 index d8defbb..0000000 --- a/src/styles/index.css +++ /dev/null @@ -1,73 +0,0 @@ -:root { - color-scheme: dark light; - scroll-behavior: smooth; - - --primary: hsl(211, 26%, 39%); - --secondary: hsl(209, 28%, 29%); - --secondary-hover: hsl(209, 28%, 19%); - --text-primary: hsl(0, 0%, 100%); - --secondary-text: hsl(211, 26%, 39%); -} - -body { - font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial, - "Noto Sans", sans-serif; - margin: 0; - display: flex; - flex-direction: column; - align-items: center; - min-height: 100vh; - background: var(--secondary); - color: var(--text-primary); -} - -body.light { - --primary: hsl(220, 27%, 98%); - --secondary: hsl(0, 0%, 100%); - --secondary-hover: hsl(0, 0%, 80%); - --text-primary: hsl(220, 17%, 32%); - --secondary-text: hsl(211, 26%, 39%); -} - -*, -*::before, -*::after { - box-sizing: border-box; -} - -svg { - vertical-align: middle; - font-size: 0.75em; -} - -section:not(section section) { - background: var(--secondary); - padding: 3rem 0; -} - -section:nth-child(2n):not(section section) { - background: var(--primary); -} - -section > svg { - color: var(--primary); -} - -section:nth-child(2n) > svg { - color: var(--secondary); -} - -section > :is(h1, h2) { - font-size: 2.5em; - margin: 0; - text-align: center; - text-transform: uppercase; -} - -h1 { - margin: 0; -} - -img { - max-width: 100%; -}