Henry-Hiles/website-old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve almost everything

Browse source
This commit is contained in:
Henry Hiles 2023-05-30 14:10:25 -04:00
parent 51a59fce69
commit 4a0f708c4f
21 changed files with 463 additions and 308 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/components/About.astro
View file

@ -3,77 +3,63 @@ import styles from "../styles/About.module.css"
import Divider from "./Divider.astro"
---
<section class={styles.about} id="about">
<h2>About</h2>
<section class={styles.about}>
<h2>About Me</h2>
<Divider />
<div class={styles.row}>
<article>
<article class={styles.textArticle}>
<p>
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{" "}
<a href="/projects/quadraticbot2.0">QuadraticBot 2.0</a>, a giveaway
bot for discord.
</p>
<p>
For more projects, check out{" "}
<a
href="https://github.com/Henry-Hiles"
target="_blank"
rel="noreferrer"
>
my GitHub profile.
</a>
</p>
</article>
<a href="https://github.com/Henry-Hiles" target="_blank" rel="noreferrer">
<section class={styles.row}>
<img
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg#gh-dark-mode-only`}
alt="My Github Stats"
/>
</article>
<section>
<article class={styles.textArticle}>
<p>
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{" "}
<a href="/projects/quadraticbot2.0">QuadraticBot 2.0</a>, a
giveaway bot for discord.
</p>
<p>
For more projects, check out{" "}
<a
href="https://github.com/Henry-Hiles"
target="_blank"
rel="noreferrer"
>
my GitHub profile.
</a>
</p>
</article>
<section class={styles.images}>
<a
href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
target="_blank"
rel="noreferrer"
>
<img
src="/images/az-900.png"
alt="Azure Fundamentals Badge"
/>
</a>
<a
href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
target="_blank"
rel="noreferrer"
>
<img
src="/images/dp-900.png"
alt="Azure Data Fundamentals Badge"
/>
</a>
<a
href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
target="_blank"
rel="noreferrer"
>
<img
src="/images/ai-900.png"
alt="Azure AI Fundamentals Badge"
/>
</a>
</section>
</section>
<article>
<img
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/languages.svg${
false ? "#gh-light-mode-only" : "#gh-dark-mode-only"
}`}
alt="My Github Stats"
/>
</article>
</div>
</section>
</a>
<section class={`${styles.certifications} ${styles.row}`}>
<a
href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
target="_blank"
rel="noreferrer"
>
<img src="/images/az-900.png" alt="Azure Fundamentals Badge" />
</a>
<a
href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
target="_blank"
rel="noreferrer"
>
<img src="/images/dp-900.png" alt="Azure Data Fundamentals Badge" />
</a>
<a
href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
target="_blank"
rel="noreferrer"
>
<img src="/images/ai-900.png" alt="Azure AI Fundamentals Badge" />
</a>
</section>
</section>

20
src/components/Jumbo.astro
View file

@ -1,18 +1,20 @@
---
import RoundDivider from "./RoundDivider.astro"
import styles from "../styles/Jumbo.module.css"
import Divider from "./Divider.astro"
---
<header>
<section id={styles.jumbo}>
<div>
<h1>Henry Hiles</h1>
<Divider />
<span id={styles.shortAbout}>
Full Stack .NET Developer & Discord Bot Developer
</span>
</div>
<RoundDivider />
<!-- <h1>Henry Hiles</h1> -->
<img
id={styles.logoLong}
src="/images/logoLong.svg"
alt="Henry Hiles"
/>
<Divider />
<span id={styles.shortAbout}>
Full Stack .NET Developer & Discord Bot Developer
</span>
<!-- <RoundDivider /> -->
</section>
</header>

41
src/components/Nav.astro
View file

@ -14,16 +14,6 @@ import styles from "../styles/Nav.module.css"
<li>
<a href="/#about">About Me</a>
</li>
<li>
<div id="themeToggle">
<button aria-hidden="false" title="Switch to light mode"
><Icon name="ph:sun-fill" /></button
>
<button aria-hidden="true" title="Switch to dark mode"
><Icon name="ph:moon-fill" /></button
>
</div>
</li>
<li>
<a
target="_blank"
@ -34,35 +24,4 @@ import styles from "../styles/Nav.module.css"
</a>
</li>
</ul>
<script defer>
let nav = document.querySelector(`nav`)
document.addEventListener("scroll", () => {
if (nav) nav.setAttribute("aria-expanded", window.scrollY == 0)
})
const body = document.querySelector("body")
const themeToggle = document.querySelector("#themeToggle")
const icons = document.querySelectorAll("#themeToggle > button")
let lightMode = localStorage.getItem("lightMode") === "true" || false
const setLightMode = () => {
localStorage.setItem("lightMode", lightMode)
if (lightMode) body.classList.add("light")
else body.classList.remove("light")
icons[0].setAttribute("aria-hidden", !lightMode)
icons[1].setAttribute("aria-hidden", lightMode)
icons.forEach((icon) =>
icon.setAttribute(
"aria-hidden",
icon.getAttribute("aria-hidden") === "false"
)
)
}
setLightMode()
themeToggle.addEventListener("click", () => {
lightMode = !lightMode
setLightMode()
})
</script>
</nav>

4
src/components/Portfolio.astro
View file

@ -4,8 +4,8 @@ import styles from "../styles/Portfolio.module.css"
import Divider from "./Divider.astro"
---
<section id="portfolio">
<h2>My Projects</h2>
<section id="portfolio" class={styles.portfolio}>
<h2>Projects</h2>
<Divider />
<article class={styles.portfolioItems}>
{

2
src/layouts/Layout.astro
View file

@ -1,5 +1,5 @@
---
import "../styles/index.css"
import "../styles/Layout.css"
import Nav from "../components/Nav.astro"
export interface Props {

6
src/pages/index.astro
View file

@ -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"
---
<Layout page={"Home"}>
<div id={styles.container}>
<main>
<Jumbo />
<Portfolio />
<About />
</div>
</main>
</Layout>

96
src/pages/projects/[route].astro
View file

@ -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
---
<Layout page={project.name}>
<div id={styles.container}>
<main>
<section id={styles.jumbo}>
<h1 class={styles.title}>{project.name}</h1>
<Divider />
<p class={styles.overview}>{project.overview}</p>
<RoundDivider />
</section>
<section id={styles.details}>
<div class={styles.row}>
<article class={styles.longDescription}>
<h2>Description</h2>
<Divider />
<section>
<p>
{project.description}
{project.technologies}
</p>
<div class={styles.buttonRow}>
{
project.github && (
<ButtonLink href={project.github} newTab>
Source Code
</ButtonLink>
)
}
{
project.demoLink && (
<ButtonLink href={project.demoLink} newTab>
Go to demo
</ButtonLink>
)
}
{
project.customLink && (
<ButtonLink
href={project.customLink.link}
newTab
>
{project.customLink.name}
</ButtonLink>
)
}
</div>
</section>
</article>
<article class={styles.image}>
<img
src={`/images/${project.mainImage}`}
alt={`Image of ${project.name}`}
class={styles.screenshot}
/>
</article>
</div>
<section id={styles.details} class={styles.row}>
<article class={styles.longDescription}>
<h2>Description</h2>
<Divider />
<section>
<p>
{project.description}
{project.technologies}
</p>
<div class={styles.buttonRow}>
{
project.github && (
<ButtonLink href={project.github} newTab>
Source Code
</ButtonLink>
)
}
{
project.demoLink && (
<ButtonLink href={project.demoLink} newTab>
Go to demo
</ButtonLink>
)
}
{
project.customLink && (
<ButtonLink
href={project.customLink.link}
newTab
>
{project.customLink.name}
</ButtonLink>
)
}
</div>
</section>
</article>
<article class={styles.image}>
<img
src={`/images/${project.mainImage}`}
alt={`Image of ${project.name}`}
class={styles.screenshot}
/>
</article>
</section>
</div>
</main>
</Layout>

4
src/projects.json
View file

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

20
src/styles/About.module.css
View file

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

28
src/styles/Home.css Normal file
View file

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

3
src/styles/Home.module.css
View file

@ -1,3 +0,0 @@
#container {
width: 100%;
}

21
src/styles/Jumbo.module.css
View file

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

35
src/styles/Layout.css Normal file
View file

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

38
src/styles/Nav.module.css
View file

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

25
src/styles/Project.module.css
View file

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

73
src/styles/index.css
View file

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