Improve almost everything
This commit is contained in:
parent
51a59fce69
commit
4a0f708c4f
21 changed files with 463 additions and 308 deletions
BIN
public/images/Background.png
Normal file
BIN
public/images/Background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
BIN
public/images/background.jpg
Normal file
BIN
public/images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
68
public/images/logoLong.svg
Normal file
68
public/images/logoLong.svg
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="1920"
|
||||||
|
height="300"
|
||||||
|
viewBox="0 0 508 79.375042"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="logoLong.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#0b0c29"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.45254834"
|
||||||
|
inkscape:cx="822.01163"
|
||||||
|
inkscape:cy="395.53786"
|
||||||
|
inkscape:window-width="1904"
|
||||||
|
inkscape:window-height="975"
|
||||||
|
inkscape:window-x="35"
|
||||||
|
inkscape:window-y="32"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showguides="true" />
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g475"
|
||||||
|
transform="matrix(0.83973195,0,0,0.83973195,40.708092,6.360666)">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96.3615px;line-height:1;font-family:'RobotoMono Nerd Font';-inkscape-font-specification:'RobotoMono Nerd Font, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;white-space:pre;inline-size:1848.28;display:inline;fill:#ffffff;stroke-width:0"
|
||||||
|
x="379.51074"
|
||||||
|
y="77.970657"
|
||||||
|
id="text186"
|
||||||
|
transform="matrix(0.62044854,0,0,0.62044854,41.923751,7.3522921)"><tspan
|
||||||
|
x="379.51074"
|
||||||
|
y="77.970657"
|
||||||
|
id="tspan486">Henry Hiles
|
||||||
|
</tspan></text>
|
||||||
|
<g
|
||||||
|
aria-label="❯"
|
||||||
|
id="text404"
|
||||||
|
style="font-size:53.9513px;line-height:0;font-family:PowerlineSymbols;-inkscape-font-specification:'PowerlineSymbols, Normal';text-align:center;text-anchor:middle;fill:#e44040;stroke-width:0"
|
||||||
|
transform="matrix(0.85162547,0,0,0.85162547,37.687129,5.8886092)">
|
||||||
|
<path
|
||||||
|
d="M -1.353398e-5,59.822301 17.702757,32.84665 -1.353398e-5,5.870999 H 11.907207 l 17.38665,26.975651 -17.38665,26.975651 z"
|
||||||
|
id="path1347" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
74
public/images/mentalMathThumb.svg
Normal file
74
public/images/mentalMathThumb.svg
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 67.733334 67.733335"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="mentalMathThumb.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="1.3576599"
|
||||||
|
inkscape:cx="-134.79075"
|
||||||
|
inkscape:cy="153.20479"
|
||||||
|
inkscape:window-width="1904"
|
||||||
|
inkscape:window-height="1003"
|
||||||
|
inkscape:window-x="35"
|
||||||
|
inkscape:window-y="32"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<circle
|
||||||
|
style="fill:#354b5f;fill-opacity:1;stroke-width:0"
|
||||||
|
id="path234"
|
||||||
|
cx="33.866665"
|
||||||
|
cy="33.866665"
|
||||||
|
r="33.866665" />
|
||||||
|
<g
|
||||||
|
aria-label="+"
|
||||||
|
id="text1156"
|
||||||
|
style="font-size:66.831px;line-height:0;font-family:'RobotoMono Nerd Font';-inkscape-font-specification:'RobotoMono Nerd Font, Normal';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0" />
|
||||||
|
<g
|
||||||
|
id="g398"
|
||||||
|
transform="matrix(0.7424475,0,0,0.7424475,8.7224447,8.7224449)">
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;stroke-width:0"
|
||||||
|
id="rect392"
|
||||||
|
width="9.7137604"
|
||||||
|
height="45.660221"
|
||||||
|
x="29.009787"
|
||||||
|
y="11.036557"
|
||||||
|
ry="3.6787262" />
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;stroke-width:0"
|
||||||
|
id="rect394"
|
||||||
|
width="9.7137604"
|
||||||
|
height="45.660221"
|
||||||
|
x="29.009789"
|
||||||
|
y="-56.696777"
|
||||||
|
ry="3.6787262"
|
||||||
|
transform="rotate(90)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
103
public/images/messagingThumb.svg
Normal file
103
public/images/messagingThumb.svg
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="256"
|
||||||
|
height="256"
|
||||||
|
viewBox="0 0 67.733332 67.733333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="messagingThumb.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="1.3576599"
|
||||||
|
inkscape:cx="110.11594"
|
||||||
|
inkscape:cy="207.71034"
|
||||||
|
inkscape:window-width="948"
|
||||||
|
inkscape:window-height="999"
|
||||||
|
inkscape:window-x="35"
|
||||||
|
inkscape:window-y="32"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<circle
|
||||||
|
style="fill:#354b5f;stroke-width:0;fill-opacity:1"
|
||||||
|
id="path234"
|
||||||
|
cx="33.866665"
|
||||||
|
cy="33.866665"
|
||||||
|
r="33.866665" />
|
||||||
|
<g
|
||||||
|
id="g298"
|
||||||
|
transform="translate(0,-3.6555814)">
|
||||||
|
<rect
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke-width:0"
|
||||||
|
id="rect946"
|
||||||
|
width="39.40649"
|
||||||
|
height="26.285879"
|
||||||
|
x="14.16342"
|
||||||
|
y="20.723726"
|
||||||
|
ry="3.083425" />
|
||||||
|
<path
|
||||||
|
sodipodi:type="star"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke-width:0"
|
||||||
|
id="path1112"
|
||||||
|
inkscape:flatsided="false"
|
||||||
|
sodipodi:sides="3"
|
||||||
|
sodipodi:cx="2.8271194"
|
||||||
|
sodipodi:cy="52.121578"
|
||||||
|
sodipodi:r1="6.00664"
|
||||||
|
sodipodi:r2="3.0033202"
|
||||||
|
sodipodi:arg1="1.0471976"
|
||||||
|
sodipodi:arg2="2.0943951"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
d="m 5.8304391,57.323481 -4.5049799,-2.600951 -4.5049798,-2.600952 4.5049798,-2.600951 4.5049804,-2.600951 0,5.201902 z"
|
||||||
|
inkscape:transform-center-x="-1.6363423"
|
||||||
|
transform="matrix(0.54484477,1.2171798,-0.94369882,0.70273913,71.588034,6.9406204)"
|
||||||
|
inkscape:transform-center-y="7.3093655e-06" />
|
||||||
|
<rect
|
||||||
|
style="fill:#354b5f;fill-opacity:1;stroke-width:0"
|
||||||
|
id="rect1554"
|
||||||
|
width="33.257812"
|
||||||
|
height="3.0259981"
|
||||||
|
x="17.237759"
|
||||||
|
y="26.29459"
|
||||||
|
ry="1.5129991" />
|
||||||
|
<rect
|
||||||
|
style="fill:#354b5f;fill-opacity:1;stroke-width:0"
|
||||||
|
id="rect1560"
|
||||||
|
width="33.257812"
|
||||||
|
height="3.0259981"
|
||||||
|
x="17.237759"
|
||||||
|
y="32.240017"
|
||||||
|
ry="1.5129991" />
|
||||||
|
<rect
|
||||||
|
style="fill:#354b5f;fill-opacity:1;stroke-width:0"
|
||||||
|
id="rect1564"
|
||||||
|
width="17.41164"
|
||||||
|
height="3.0259981"
|
||||||
|
x="17.237759"
|
||||||
|
y="38.185444"
|
||||||
|
ry="1.5129991" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
|
|
@ -3,77 +3,63 @@ import styles from "../styles/About.module.css"
|
||||||
import Divider from "./Divider.astro"
|
import Divider from "./Divider.astro"
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class={styles.about} id="about">
|
<section class={styles.about}>
|
||||||
<h2>About</h2>
|
<h2>About Me</h2>
|
||||||
<Divider />
|
<Divider />
|
||||||
<div class={styles.row}>
|
<article class={styles.textArticle}>
|
||||||
<article>
|
<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
|
<img
|
||||||
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg#gh-dark-mode-only`}
|
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg#gh-dark-mode-only`}
|
||||||
alt="My Github Stats"
|
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
|
<img
|
||||||
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/languages.svg${
|
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/languages.svg${
|
||||||
false ? "#gh-light-mode-only" : "#gh-dark-mode-only"
|
false ? "#gh-light-mode-only" : "#gh-dark-mode-only"
|
||||||
}`}
|
}`}
|
||||||
alt="My Github Stats"
|
alt="My Github Stats"
|
||||||
/>
|
/>
|
||||||
</article>
|
</section>
|
||||||
</div>
|
</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>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,20 @@
|
||||||
---
|
---
|
||||||
import RoundDivider from "./RoundDivider.astro"
|
|
||||||
import styles from "../styles/Jumbo.module.css"
|
import styles from "../styles/Jumbo.module.css"
|
||||||
import Divider from "./Divider.astro"
|
import Divider from "./Divider.astro"
|
||||||
---
|
---
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<section id={styles.jumbo}>
|
<section id={styles.jumbo}>
|
||||||
<div>
|
<!-- <h1>Henry Hiles</h1> -->
|
||||||
<h1>Henry Hiles</h1>
|
<img
|
||||||
<Divider />
|
id={styles.logoLong}
|
||||||
<span id={styles.shortAbout}>
|
src="/images/logoLong.svg"
|
||||||
Full Stack .NET Developer & Discord Bot Developer
|
alt="Henry Hiles"
|
||||||
</span>
|
/>
|
||||||
</div>
|
<Divider />
|
||||||
<RoundDivider />
|
<span id={styles.shortAbout}>
|
||||||
|
Full Stack .NET Developer & Discord Bot Developer
|
||||||
|
</span>
|
||||||
|
<!-- <RoundDivider /> -->
|
||||||
</section>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -14,16 +14,6 @@ import styles from "../styles/Nav.module.css"
|
||||||
<li>
|
<li>
|
||||||
<a href="/#about">About Me</a>
|
<a href="/#about">About Me</a>
|
||||||
</li>
|
</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>
|
<li>
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|
@ -34,35 +24,4 @@ import styles from "../styles/Nav.module.css"
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@ import styles from "../styles/Portfolio.module.css"
|
||||||
import Divider from "./Divider.astro"
|
import Divider from "./Divider.astro"
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="portfolio">
|
<section id="portfolio" class={styles.portfolio}>
|
||||||
<h2>My Projects</h2>
|
<h2>Projects</h2>
|
||||||
<Divider />
|
<Divider />
|
||||||
<article class={styles.portfolioItems}>
|
<article class={styles.portfolioItems}>
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import "../styles/index.css"
|
import "../styles/Layout.css"
|
||||||
import Nav from "../components/Nav.astro"
|
import Nav from "../components/Nav.astro"
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
|
|
||||||
|
|
@ -3,13 +3,13 @@ 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 Layout from "../layouts/Layout.astro"
|
import Layout from "../layouts/Layout.astro"
|
||||||
import styles from "../styles/Home.module.css"
|
import "../styles/Home.css"
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout page={"Home"}>
|
<Layout page={"Home"}>
|
||||||
<div id={styles.container}>
|
<main>
|
||||||
<Jumbo />
|
<Jumbo />
|
||||||
<Portfolio />
|
<Portfolio />
|
||||||
<About />
|
<About />
|
||||||
</div>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
---
|
---
|
||||||
import ButtonLink from "../../components/ButtonLink.astro"
|
import ButtonLink from "../../components/ButtonLink.astro"
|
||||||
import Divider from "../../components/Divider.astro"
|
import Divider from "../../components/Divider.astro"
|
||||||
import RoundDivider from "../../components/RoundDivider.astro"
|
|
||||||
import styles from "../../styles/Project.module.css"
|
import styles from "../../styles/Project.module.css"
|
||||||
import Layout from "../../layouts/Layout.astro"
|
import Layout from "../../layouts/Layout.astro"
|
||||||
import projects from "../../projects.json"
|
import projects from "../../projects.json"
|
||||||
|
|
@ -16,59 +15,56 @@ if (project == null) return
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout page={project.name}>
|
<Layout page={project.name}>
|
||||||
<div id={styles.container}>
|
<main>
|
||||||
<section id={styles.jumbo}>
|
<section id={styles.jumbo}>
|
||||||
<h1 class={styles.title}>{project.name}</h1>
|
<h1 class={styles.title}>{project.name}</h1>
|
||||||
<Divider />
|
<Divider />
|
||||||
<p class={styles.overview}>{project.overview}</p>
|
<p class={styles.overview}>{project.overview}</p>
|
||||||
<RoundDivider />
|
|
||||||
</section>
|
</section>
|
||||||
<section id={styles.details}>
|
<section id={styles.details} class={styles.row}>
|
||||||
<div class={styles.row}>
|
<article class={styles.longDescription}>
|
||||||
<article class={styles.longDescription}>
|
<h2>Description</h2>
|
||||||
<h2>Description</h2>
|
<Divider />
|
||||||
<Divider />
|
<section>
|
||||||
<section>
|
<p>
|
||||||
<p>
|
{project.description}
|
||||||
{project.description}
|
{project.technologies}
|
||||||
{project.technologies}
|
</p>
|
||||||
</p>
|
<div class={styles.buttonRow}>
|
||||||
<div class={styles.buttonRow}>
|
{
|
||||||
{
|
project.github && (
|
||||||
project.github && (
|
<ButtonLink href={project.github} newTab>
|
||||||
<ButtonLink href={project.github} newTab>
|
Source Code
|
||||||
Source Code
|
</ButtonLink>
|
||||||
</ButtonLink>
|
)
|
||||||
)
|
}
|
||||||
}
|
{
|
||||||
{
|
project.demoLink && (
|
||||||
project.demoLink && (
|
<ButtonLink href={project.demoLink} newTab>
|
||||||
<ButtonLink href={project.demoLink} newTab>
|
Go to demo
|
||||||
Go to demo
|
</ButtonLink>
|
||||||
</ButtonLink>
|
)
|
||||||
)
|
}
|
||||||
}
|
{
|
||||||
{
|
project.customLink && (
|
||||||
project.customLink && (
|
<ButtonLink
|
||||||
<ButtonLink
|
href={project.customLink.link}
|
||||||
href={project.customLink.link}
|
newTab
|
||||||
newTab
|
>
|
||||||
>
|
{project.customLink.name}
|
||||||
{project.customLink.name}
|
</ButtonLink>
|
||||||
</ButtonLink>
|
)
|
||||||
)
|
}
|
||||||
}
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
</article>
|
||||||
</article>
|
<article class={styles.image}>
|
||||||
<article class={styles.image}>
|
<img
|
||||||
<img
|
src={`/images/${project.mainImage}`}
|
||||||
src={`/images/${project.mainImage}`}
|
alt={`Image of ${project.name}`}
|
||||||
alt={`Image of ${project.name}`}
|
class={styles.screenshot}
|
||||||
class={styles.screenshot}
|
/>
|
||||||
/>
|
</article>
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
"description": "A simple, open-source, online chat room where you can join online chat rooms, or create your own.",
|
"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.",
|
"technologies": "This project was built using handcrafted Javascript, as well as Node.js, Socket.io, and Express.",
|
||||||
"mainImage": "messagingComputer.png",
|
"mainImage": "messagingComputer.png",
|
||||||
"thumbImage": "messagingThumb.png",
|
"thumbImage": "messagingThumb.svg",
|
||||||
"demoLink": "https://chat.henryhiles.com"
|
"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.",
|
"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.",
|
"technologies": "This project was built using React and CSS Modules.",
|
||||||
"mainImage": "mentalMathComputer.png",
|
"mainImage": "mentalMathComputer.png",
|
||||||
"thumbImage": "mentalMathThumb.webp"
|
"thumbImage": "mentalMathThumb.svg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Movie React App",
|
"name": "Movie React App",
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,30 @@
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px;
|
|
||||||
gap: 5rem;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
gap: 2em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about {
|
.about {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.textArticle p {
|
.textArticle p {
|
||||||
margin: 14px 0 40px;
|
margin: auto;
|
||||||
max-width: 40rem;
|
max-width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.images a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.images img {
|
.certifications img {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1500px) {
|
|
||||||
.row {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
28
src/styles/Home.css
Normal file
28
src/styles/Home.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
#container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,27 +1,22 @@
|
||||||
#jumbo {
|
#jumbo {
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
padding: 3rem 0 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
padding: 0;
|
||||||
|
padding: 3rem 0 0;
|
||||||
/* #jumbo > div {
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
} */
|
}
|
||||||
|
|
||||||
#jumbo i {
|
#jumbo i {
|
||||||
margin: 20px 0 30px;
|
margin: 20px 0 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#jumbo #logoLong {
|
||||||
|
width: 60rem;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
#jumbo #shortAbout {
|
#jumbo #shortAbout {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 20px 10px;
|
padding: 20px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo {
|
|
||||||
width: 25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo {
|
|
||||||
color: aqua;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
35
src/styles/Layout.css
Normal file
35
src/styles/Layout.css
Normal 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%;
|
||||||
|
}
|
||||||
|
|
@ -1,39 +1,11 @@
|
||||||
.nav {
|
.nav {
|
||||||
background: var(--secondary);
|
padding: 0.5rem;
|
||||||
color: var(--primary-text);
|
|
||||||
padding-top: 1.5rem;
|
|
||||||
overflow: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
|
overflow-y: auto;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
transition: padding 0.5s, font-size 0.5s;
|
background: hsl(0 0% 0% / 0.4);
|
||||||
width: 100%;
|
font-size: 1.5em;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.links svg {
|
.links svg {
|
||||||
|
|
@ -41,7 +13,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav button {
|
.nav button {
|
||||||
background-color: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,10 @@
|
||||||
#container {
|
main {
|
||||||
|
padding: 2em;
|
||||||
|
gap: 2em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview {
|
.overview {
|
||||||
|
|
@ -25,7 +30,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.image img {
|
.image img {
|
||||||
max-height: 500px;
|
max-height: 450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.longDescription h2 {
|
.longDescription h2 {
|
||||||
|
|
@ -34,18 +39,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
font-size: 2.6em;
|
||||||
|
margin: 0.2em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
flex-direction: row;
|
||||||
gap: 4rem;
|
gap: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#details {
|
main > section {
|
||||||
|
flex-direction: column;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: rgba(0 0 0 / 0.3);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
width: 90%;
|
||||||
|
transition: scale 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > section:hover {
|
||||||
|
scale: 1.03;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1300px) {
|
@media (max-width: 1300px) {
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue