RM most things
|
@ -10,7 +10,6 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"astro": "^5.1.8",
|
"astro": "^5.1.8",
|
||||||
"mdui": "^2.1.3",
|
|
||||||
"sharp": "^0.33.5"
|
"sharp": "^0.33.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,33 +0,0 @@
|
||||||
---
|
|
||||||
import type Page from "../types/page.ts"
|
|
||||||
|
|
||||||
const sections: Array<Page> = [
|
|
||||||
{ title: "Home", id: "home", icon: "home" },
|
|
||||||
{ title: "Projects", id: "projects", icon: "build" },
|
|
||||||
{ title: "Hire", id: "hire", icon: "person" },
|
|
||||||
]
|
|
||||||
---
|
|
||||||
|
|
||||||
<mdui-navigation-bar value="home" label-visibility="labeled">
|
|
||||||
{
|
|
||||||
sections.map((section) => (
|
|
||||||
<mdui-navigation-bar-item
|
|
||||||
icon={section.icon}
|
|
||||||
value={section.id}
|
|
||||||
href={`#${section.id}`}
|
|
||||||
>
|
|
||||||
{section.title}
|
|
||||||
</mdui-navigation-bar-item>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</mdui-navigation-bar>
|
|
||||||
|
|
||||||
<script is:inline define:vars={{ sections }}>
|
|
||||||
document.addEventListener("scroll", () =>
|
|
||||||
sections.forEach(({ id }) => {
|
|
||||||
const rect = document.getElementById(id).getBoundingClientRect()
|
|
||||||
if (rect.bottom < window.innerHeight || rect.top < 200)
|
|
||||||
document.querySelector("mdui-navigation-bar").value = id
|
|
||||||
})
|
|
||||||
)
|
|
||||||
</script>
|
|
|
@ -1,13 +0,0 @@
|
||||||
---
|
|
||||||
import "../styles/button.css"
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
href: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const { href } = Astro.props
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href={href} class="button-link">
|
|
||||||
<slot />
|
|
||||||
</a>
|
|
|
@ -1,25 +0,0 @@
|
||||||
---
|
|
||||||
import "../styles/topBar.css"
|
|
||||||
import logo from "../images/logo.svg"
|
|
||||||
---
|
|
||||||
|
|
||||||
<mdui-top-app-bar scroll-behavior="elevate">
|
|
||||||
<mdui-icon src={logo.src}></mdui-icon>
|
|
||||||
<mdui-top-app-bar-title><h1>Henry Hiles</h1></mdui-top-app-bar-title>
|
|
||||||
<spacer></spacer>
|
|
||||||
<mdui-button-icon
|
|
||||||
href="https://github.com/Henry-Hiles"
|
|
||||||
referrerpolicy="no-referrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M16.24 22a1 1 0 0 1-1-1v-2.6a2.15 2.15 0 0 0-.54-1.66 1 1 0 0 1 .61-1.67C17.75 14.78 20 14 20 9.77a4 4 0 0 0-.67-2.22 2.75 2.75 0 0 1-.41-2.06 3.71 3.71 0 0 0 0-1.41 7.65 7.65 0 0 0-2.09 1.09 1 1 0 0 1-.84.15 10.15 10.15 0 0 0-5.52 0 1 1 0 0 1-.84-.15 7.4 7.4 0 0 0-2.11-1.09 3.52 3.52 0 0 0 0 1.41 2.84 2.84 0 0 1-.43 2.08 4.07 4.07 0 0 0-.67 2.23c0 3.89 1.88 4.93 4.7 5.29a1 1 0 0 1 .82.66 1 1 0 0 1-.21 1 2.06 2.06 0 0 0-.55 1.56V21a1 1 0 0 1-2 0v-.57a6 6 0 0 1-5.27-2.09 3.9 3.9 0 0 0-1.16-.88 1 1 0 1 1 .5-1.94 4.93 4.93 0 0 1 2 1.36c1 1 2 1.88 3.9 1.52a3.89 3.89 0 0 1 .23-1.58c-2.06-.52-5-2-5-7a6 6 0 0 1 1-3.33.85.85 0 0 0 .13-.62 5.69 5.69 0 0 1 .33-3.21 1 1 0 0 1 .63-.57c.34-.1 1.56-.3 3.87 1.2a12.16 12.16 0 0 1 5.69 0c2.31-1.5 3.53-1.31 3.86-1.2a1 1 0 0 1 .63.57 5.71 5.71 0 0 1 .33 3.22.75.75 0 0 0 .11.57 6 6 0 0 1 1 3.34c0 5.07-2.92 6.54-5 7a4.28 4.28 0 0 1 .22 1.67V21a1 1 0 0 1-.94 1z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</mdui-button-icon>
|
|
||||||
</mdui-top-app-bar>
|
|
Before Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 423 KiB |
Before Width: | Height: | Size: 27 KiB |
|
@ -1,75 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="1024"
|
|
||||||
height="1024"
|
|
||||||
viewBox="0 0 270.93333 270.93333"
|
|
||||||
version="1.1"
|
|
||||||
id="svg5"
|
|
||||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
|
||||||
sodipodi:docname="logo.svg"
|
|
||||||
xml:space="preserve"
|
|
||||||
inkscape:export-filename="logo.png"
|
|
||||||
inkscape:export-xdpi="96"
|
|
||||||
inkscape:export-ydpi="96"
|
|
||||||
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="false"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pagecheckerboard="false"
|
|
||||||
inkscape:deskcolor="#d1d1d1"
|
|
||||||
inkscape:document-units="mm"
|
|
||||||
showgrid="false"
|
|
||||||
showborder="false"
|
|
||||||
borderlayer="false"
|
|
||||||
shape-rendering="auto"
|
|
||||||
showguides="true"
|
|
||||||
inkscape:zoom="0.25"
|
|
||||||
inkscape:cx="438"
|
|
||||||
inkscape:cy="896"
|
|
||||||
inkscape:window-width="948"
|
|
||||||
inkscape:window-height="975"
|
|
||||||
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"><text
|
|
||||||
xml:space="preserve"
|
|
||||||
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:96.3615px;line-height:0;font-family:'Noto Serif';-inkscape-font-specification:'Noto Serif, Heavy';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
x="-305.64749"
|
|
||||||
y="194.14493"
|
|
||||||
id="text2819"><tspan
|
|
||||||
sodipodi:role="line"
|
|
||||||
id="tspan2817"
|
|
||||||
style="stroke-width:0" /></text><circle
|
|
||||||
style="fill:#354b5f;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="path342"
|
|
||||||
cx="135.46666"
|
|
||||||
cy="135.46666"
|
|
||||||
r="135.46666" /><text
|
|
||||||
xml:space="preserve"
|
|
||||||
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:96.3615px;line-height:0;font-family:'Noto Serif';-inkscape-font-specification:'Noto Serif, Heavy';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
x="-305.64749"
|
|
||||||
y="194.14493"
|
|
||||||
id="text2819-3"><tspan
|
|
||||||
sodipodi:role="line"
|
|
||||||
id="tspan2817-5"
|
|
||||||
style="stroke-width:0"
|
|
||||||
x="-305.64749"
|
|
||||||
y="194.14493" /></text><g
|
|
||||||
aria-label="❯"
|
|
||||||
id="text2827-6"
|
|
||||||
style="font-size:132.452px;line-height:0;font-family:PowerlineSymbols;-inkscape-font-specification:'PowerlineSymbols, Normal';text-align:end;text-anchor:end;fill:#4e94e4;stroke-width:0;fill-opacity:1"><path
|
|
||||||
d="M 95.096912,209.8167 143.88912,135.46666 95.096912,61.116629 h 32.818568 l 47.92093,74.350031 -47.92093,74.35004 z"
|
|
||||||
id="path2883-2"
|
|
||||||
style="stroke-width:0;fill:#4e94e4;fill-opacity:1" /></g></g></svg>
|
|
Before Width: | Height: | Size: 3.4 KiB |
|
@ -1,77 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="1300"
|
|
||||||
height="300"
|
|
||||||
viewBox="0 0 343.95833 79.375042"
|
|
||||||
version="1.1"
|
|
||||||
id="svg5"
|
|
||||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
|
||||||
sodipodi:docname="logoLong.svg"
|
|
||||||
xml:space="preserve"
|
|
||||||
inkscape:export-filename="logoLong.png"
|
|
||||||
inkscape:export-xdpi="96"
|
|
||||||
inkscape:export-ydpi="96"
|
|
||||||
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="612.08931"
|
|
||||||
inkscape:cy="265.16504"
|
|
||||||
inkscape:window-width="1904"
|
|
||||||
inkscape:window-height="971"
|
|
||||||
inkscape:window-x="35"
|
|
||||||
inkscape:window-y="32"
|
|
||||||
inkscape:window-maximized="0"
|
|
||||||
inkscape:current-layer="text404"
|
|
||||||
showguides="true" /><defs
|
|
||||||
id="defs2" /><g
|
|
||||||
inkscape:label="Layer 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer1"><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:#4e94e4;fill-opacity:1;stroke-width:0"
|
|
||||||
transform="matrix(0.71513712,0,0,0.71513712,29.930782,11.21462)"><g
|
|
||||||
id="g178"
|
|
||||||
transform="translate(4.2569487)"><g
|
|
||||||
aria-label="Henry Hiles
|
|
||||||
"
|
|
||||||
transform="matrix(0.72854624,0,0,0.72854624,-56.283152,1.7186941)"
|
|
||||||
id="text186"
|
|
||||||
style="font-size:96.3615px;line-height:1;font-family:'RobotoMono Nerd Font';-inkscape-font-specification:'RobotoMono Nerd Font, Normal';white-space:pre;inline-size:1848.28;display:inline;fill:#ffffff"><path
|
|
||||||
d="m 141.20869,77.970657 h 7.99801 V 46.845892 h 35.75011 v 31.124765 h 7.99801 V 11.095774 h -7.99801 V 39.907863 H 149.2067 V 11.095774 h -7.99801 z"
|
|
||||||
id="path11" /><path
|
|
||||||
d="m 230.72859,78.934272 c 5.29989,0 11.08158,-1.252699 15.22512,-3.469014 l -1.73451,-5.588967 c -3.56537,1.734507 -8.09436,2.794484 -12.14155,2.794484 -10.88885,0 -17.34507,-7.227113 -17.34507,-19.272301 0,-10.503404 4.72172,-16.285094 13.20153,-16.285094 7.90164,0 12.52699,5.10716 12.52699,13.972418 h -27.07758 v 5.78169 h 33.91925 c 0.19272,-1.445422 0.38545,-4.818075 0.38545,-6.648944 0,-11.659742 -7.70892,-19.657746 -19.17594,-19.657746 -12.91244,0 -21.68134,10.117957 -21.68134,24.37946 0,14.839672 9.15434,23.994014 23.89765,23.994014 z"
|
|
||||||
id="path13" /><path
|
|
||||||
d="m 292.39994,77.970657 h 7.70892 V 47.520422 c 0,-10.310681 -6.84167,-16.959624 -17.24871,-16.959624 -6.7453,0 -13.39425,2.890845 -18.30868,7.998004 l 1.83087,4.914437 c 3.85446,-3.950822 8.96162,-6.167136 14.35786,-6.167136 7.5162,0 11.65974,4.239906 11.65974,11.756103 z m -31.70293,0 h 7.70892 v -41.05 l -2.31268,-5.396244 h -5.39624 z"
|
|
||||||
id="path15" /><path
|
|
||||||
d="m 315.33393,77.970657 h 7.70892 V 42.316901 l -1.34906,-10.792488 h -6.35986 z m 5.97441,-30.16115 c 2.69813,-5.878052 8.28709,-9.443428 14.64695,-9.443428 1.83087,0 3.56538,0.289085 5.10716,0.867254 l 1.92723,-7.130751 c -2.02359,-0.674531 -4.04718,-1.059977 -6.16713,-1.059977 -6.2635,0 -12.04519,3.372653 -15.51421,8.96162 z"
|
|
||||||
id="path17" /><path
|
|
||||||
d="m 354.74585,98.881104 h 8.19073 l 7.70892,-20.910447 18.11596,-46.446244 h -7.70892 l -15.03239,41.820892 h 2.02359 L 353.39679,31.524413 h -8.57617 l 18.30868,46.446244 z"
|
|
||||||
id="path19" /><path
|
|
||||||
d="m 419.9825,77.970657 h 7.998 V 46.845892 h 35.75012 v 31.124765 h 7.998 V 11.095774 h -7.998 V 39.907863 H 427.9805 V 11.095774 h -7.998 z"
|
|
||||||
id="path21" /><path
|
|
||||||
d="m 488.59193,77.970657 h 7.70892 V 31.524413 h -7.70892 z m 3.95082,-57.335094 c 3.46901,0 5.4926,-2.023592 5.4926,-5.492606 0,-3.469014 -2.02359,-5.4926057 -5.4926,-5.4926057 -3.46902,0 -5.49261,2.0235917 -5.49261,5.4926057 0,3.469014 2.02359,5.492606 5.49261,5.492606 z"
|
|
||||||
id="path23" /><path
|
|
||||||
d="m 522.80029,78.548826 c 2.5054,0 5.4926,-0.578169 7.32347,-1.541784 l -1.73451,-5.396244 c -1.15633,0.481808 -2.21631,0.770892 -3.37265,0.770892 -3.27629,0 -5.0108,-2.216314 -5.0108,-5.78169 V 6.7595062 h -7.70892 V 67.563615 c 0,6.648944 4.14355,10.985211 10.50341,10.985211 z"
|
|
||||||
id="path25" /><path
|
|
||||||
d="m 559.99584,78.934272 c 5.29989,0 11.08158,-1.252699 15.22512,-3.469014 l -1.73451,-5.588967 c -3.56537,1.734507 -8.09436,2.794484 -12.14155,2.794484 -10.88885,0 -17.34507,-7.227113 -17.34507,-19.272301 0,-10.503404 4.72172,-16.285094 13.20153,-16.285094 7.90164,0 12.52699,5.10716 12.52699,13.972418 h -27.07758 v 5.78169 h 33.91925 c 0.19272,-1.445422 0.38545,-4.818075 0.38545,-6.648944 0,-11.659742 -7.70892,-19.657746 -19.17594,-19.657746 -12.91244,0 -21.68134,10.117957 -21.68134,24.37946 0,14.839672 9.15434,23.994014 23.89765,23.994014 z"
|
|
||||||
id="path27" /><path
|
|
||||||
d="m 604.03302,78.934272 c 11.46702,0 18.50141,-5.396244 18.50141,-13.972418 0,-17.055986 -27.75211,-10.696127 -27.75211,-21.19953 0,-4.047184 4.33626,-6.648944 11.27429,-6.648944 3.95082,0 8.57618,0.867253 12.527,2.216314 l 1.83087,-6.263497 c -3.95082,-1.638146 -8.67254,-2.505399 -13.58698,-2.505399 -12.04518,0 -19.7541,5.299882 -19.7541,14.068779 0,16.67054 27.65575,9.732512 27.65575,21.103169 0,4.239907 -3.7581,6.648944 -10.11796,6.648944 -4.91444,0 -11.46702,-1.349061 -16.38146,-3.469014 l -1.83086,6.263498 c 5.29988,2.409037 11.7561,3.758098 17.63415,3.758098 z"
|
|
||||||
id="path29" /></g><path
|
|
||||||
d="M -8.51391,59.822301 9.1888605,32.84665 -8.51391,5.870999 H 3.3933105 L 20.779961,32.84665 3.3933105,59.822301 Z"
|
|
||||||
id="path1347"
|
|
||||||
style="fill:#4e94e4;fill-opacity:1" /></g></g></g></svg>
|
|
Before Width: | Height: | Size: 6 KiB |
Before Width: | Height: | Size: 356 KiB |
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 240 KiB |
|
@ -1,41 +0,0 @@
|
||||||
---
|
|
||||||
import "mdui/mdui.css"
|
|
||||||
import TopBar from "../components/TopBar.astro"
|
|
||||||
import "../styles/global.css"
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
title: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const { title } = Astro.props
|
|
||||||
---
|
|
||||||
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en" class="mdui-theme-dark" data-scroll="0">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Henry Hiles - {title}</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<TopBar />
|
|
||||||
<main><slot /></main>
|
|
||||||
<slot name="navbar" />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { setColorScheme } from "mdui"
|
|
||||||
setColorScheme("#4e94e4")
|
|
||||||
|
|
||||||
const setScroll = () =>
|
|
||||||
(document.documentElement.dataset.scroll = window.scrollY.toString())
|
|
||||||
document.addEventListener("scroll", setScroll)
|
|
||||||
document.addEventListener("DOMContentLoaded", setScroll)
|
|
||||||
</script>
|
|
|
@ -1,18 +0,0 @@
|
||||||
---
|
|
||||||
import Layout from "../layouts/Layout.astro"
|
|
||||||
import "../styles/404.css"
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="Not Found">
|
|
||||||
<mdui-card variant="outlined">
|
|
||||||
<section>
|
|
||||||
<h2>404 - Not Found</h2>
|
|
||||||
<mdui-divider></mdui-divider>
|
|
||||||
<p>
|
|
||||||
We couldn't find that page. Please return to our <a href="/"
|
|
||||||
>home page</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</mdui-card>
|
|
||||||
</Layout>
|
|
|
@ -1,224 +0,0 @@
|
||||||
---
|
|
||||||
import "../styles/index.css"
|
|
||||||
import { Image } from "astro:assets"
|
|
||||||
import Layout from "../layouts/Layout.astro"
|
|
||||||
import logoLong from "../images/logoLong.svg"
|
|
||||||
import ai900 from "../images/certificates/ai900.png"
|
|
||||||
import az900 from "../images/certificates/az900.png"
|
|
||||||
import dp900 from "../images/certificates/dp900.png"
|
|
||||||
import quantarcSite from "../images/projects/quantarcSite.png"
|
|
||||||
import jobProcessor from "../images/projects/jobProcessor.jpg"
|
|
||||||
import helpdesk from "../images/projects/helpdesk.jpg"
|
|
||||||
import googleCS from "../images/certificates/googleCS.png"
|
|
||||||
import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
|
|
||||||
import ButtonLink from "../components/ButtonLink.astro"
|
|
||||||
import BottomBar from "../components/BottomBar.astro"
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="Home">
|
|
||||||
<header id="home">
|
|
||||||
<Image src={logoLong} alt="Henry Hiles" />
|
|
||||||
<span>Multiplatform Flutter Developer & Front-End Web Developer</span>
|
|
||||||
</header>
|
|
||||||
<mdui-card variant="outlined">
|
|
||||||
<section id="about">
|
|
||||||
<h2>About Me</h2>
|
|
||||||
<mdui-divider></mdui-divider>
|
|
||||||
<article>
|
|
||||||
<p>
|
|
||||||
Hello, I'm Henry Hiles, a developer specialising in Flutter
|
|
||||||
and Web development. I'm proficient with Dart, Astro,
|
|
||||||
Node.JS, and TypeScript.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
I build high-performance, intuitive applications with clean,
|
|
||||||
efficient code and modern design principles.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Always eager to learn, I’ve earned certifications from
|
|
||||||
Microsoft, Google, and Meta in cloud computing, AI, and
|
|
||||||
cybersecurity.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Whether I'm optimising mobile apps or designing websites,
|
|
||||||
I’m passionate about delivering innovative digital
|
|
||||||
solutions.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://github.com/Henry-Hiles"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
id="stats"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src={`https://raw.githubusercontent.com/Henry-Hiles/github-stats/master/generated/overview.svg#gh-dark-mode-only`}
|
|
||||||
alt="My Github Stats"
|
|
||||||
/>
|
|
||||||
<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"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</section>
|
|
||||||
</mdui-card>
|
|
||||||
<mdui-card variant="outlined">
|
|
||||||
<section id="projects">
|
|
||||||
<h2>My Projects</h2>
|
|
||||||
<mdui-divider></mdui-divider>
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
[
|
|
||||||
<section>
|
|
||||||
<article>
|
|
||||||
<h3>The new Quantarc website</h3>
|
|
||||||
<p>
|
|
||||||
I developed the new website for Quantarc, a
|
|
||||||
UK firm that specialises in providing
|
|
||||||
management solutions to both private and
|
|
||||||
public entities.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
<aside>
|
|
||||||
<Image
|
|
||||||
src={quantarcSite}
|
|
||||||
alt="The new quantarc.co.uk website"
|
|
||||||
/>
|
|
||||||
</aside>
|
|
||||||
</section>,
|
|
||||||
<section>
|
|
||||||
<article>
|
|
||||||
<h3>Quantarc Mobile Apps</h3>
|
|
||||||
<p>
|
|
||||||
I designed, and developed, and distributed
|
|
||||||
two mobile apps for Quantarc, QHelpdesk and
|
|
||||||
QJobProcessor. QHelpdesk streamlines
|
|
||||||
customer support by enabling users to
|
|
||||||
submit, track, and manage requests
|
|
||||||
efficiently, while QJobProcessor allows
|
|
||||||
contractors to see, complete, and update
|
|
||||||
jobs. My responsibilities included UI/UX
|
|
||||||
design, multiplatform support, and app
|
|
||||||
development.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
<aside class="double">
|
|
||||||
<Image
|
|
||||||
src={jobProcessor}
|
|
||||||
alt="The QJobProcessor mobile app"
|
|
||||||
/>
|
|
||||||
<Image
|
|
||||||
src={helpdesk}
|
|
||||||
alt="The QHelpdesk mobile app"
|
|
||||||
/>
|
|
||||||
</aside>
|
|
||||||
</section>,
|
|
||||||
].map((elem) => (
|
|
||||||
<mdui-card variant="outlined">{elem}</mdui-card>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</mdui-card>
|
|
||||||
<mdui-card variant="outlined">
|
|
||||||
<section id="certificates">
|
|
||||||
<h2>Certifications</h2>
|
|
||||||
<mdui-divider></mdui-divider>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<p>
|
|
||||||
I have obtained certifications from renowned organisations
|
|
||||||
such as Google, Meta, and Microsoft, spanning various
|
|
||||||
fields, including cybersecurity, artificial intelligence,
|
|
||||||
Microsoft Azure cloud services, and front-end development:
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<mdui-card variant="outlined">
|
|
||||||
<a
|
|
||||||
href="https://www.credly.com/badges/bd5a8213-4e3d-4b93-9b7d-4cbce07ef960/public_url"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<Image src={az900} alt="Azure Fundamentals Badge" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.credly.com/badges/1fd0fc1c-052a-4311-9938-6d38057305ce/public_url"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<Image src={dp900} alt="Azure Data Fundamentals Badge" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.credly.com/badges/37008ee1-69e0-44aa-82cb-33e4bdf153a8/public_url"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<Image src={ai900} alt="Azure AI Fundamentals Badge" />
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.credly.com/badges/acbec46c-7304-4bb5-8784-53fdcdc5544d/public_url"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src={metaFrontEnd}
|
|
||||||
alt="Meta Front-End Developer Badge"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.credly.com/badges/f85e1445-5fad-4954-90ce-78632749e1a7/public_url"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<Image src={googleCS} alt="Google Cybersecurity Badge" />
|
|
||||||
</a>
|
|
||||||
</mdui-card>
|
|
||||||
</section>
|
|
||||||
</mdui-card>
|
|
||||||
<mdui-card variant="outlined">
|
|
||||||
<section id="hire">
|
|
||||||
<h2>Hire Me</h2>
|
|
||||||
<mdui-divider></mdui-divider>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<p>
|
|
||||||
Hire me to design and develop high-performance static
|
|
||||||
websites and versatile multiplatform applications. With a
|
|
||||||
focus on clean, efficient code and intuitive user
|
|
||||||
experiences, I create solutions that are not only visually
|
|
||||||
appealing but also optimized for speed, accessibility, and
|
|
||||||
seamless functionality across all devices.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<ButtonLink
|
|
||||||
href={"mai" + "lto:" + "contact@henr" + "yhiles." + "com"}
|
|
||||||
>
|
|
||||||
<mdui-icon>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="m9.474 16l9.181 3.284a1.1 1.1 0 0 0 1.462-.887L21.99 4.239c.114-.862-.779-1.505-1.567-1.13L2.624 11.605c-.88.42-.814 1.69.106 2.017l2.44.868l1.33.467M13 17.26l-1.99 3.326c-.65.808-1.959.351-1.959-.683V17.24a2 2 0 0 1 .53-1.356l3.871-4.2"
|
|
||||||
></path></svg
|
|
||||||
></mdui-icon
|
|
||||||
>
|
|
||||||
Contact me for a quote
|
|
||||||
</ButtonLink>
|
|
||||||
</section>
|
|
||||||
</mdui-card>
|
|
||||||
<BottomBar slot="navbar" />
|
|
||||||
</Layout>
|
|
|
@ -1,5 +0,0 @@
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
|
@ -1,27 +0,0 @@
|
||||||
button,
|
|
||||||
.button-link {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.6em;
|
|
||||||
border: 2px solid rgb(var(--primary));
|
|
||||||
color: white;
|
|
||||||
border-radius: 50px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
& mdui-icon {
|
|
||||||
height: 1em;
|
|
||||||
width: 1em;
|
|
||||||
color: rgb(var(--primary));
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
filter: brightness(70%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,107 +0,0 @@
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--primary: 78, 148, 228;
|
|
||||||
background-image: url(/background.svg);
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[variant="outlined"] {
|
|
||||||
border: 3px solid rgb(var(--primary));
|
|
||||||
background-color: #1b1f26;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
--circle-color: rgba(var(--primary), 0.8);
|
|
||||||
--bg-color: rgb(var(--mdui-color-background));
|
|
||||||
|
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
||||||
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
|
||||||
sans-serif;
|
|
||||||
min-height: 100vh;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
background: radial-gradient(
|
|
||||||
circle 80vw at -25vw -20vh,
|
|
||||||
var(--circle-color),
|
|
||||||
transparent
|
|
||||||
),
|
|
||||||
radial-gradient(
|
|
||||||
circle 80vw at 150vw 130vh,
|
|
||||||
var(--circle-color),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
mdui-navigation-bar {
|
|
||||||
background: rgba(0, 0, 0, 60%);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
flex-direction: column;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2em;
|
|
||||||
|
|
||||||
padding: 1em;
|
|
||||||
|
|
||||||
& > * > section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
scroll-margin-top: 1em;
|
|
||||||
|
|
||||||
& div,
|
|
||||||
mdui-card {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
gap: 0.5em;
|
|
||||||
padding: 1em 2em;
|
|
||||||
|
|
||||||
& h2 {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
& p {
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mdui-divider {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
mdui-icon {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
spacer {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
mdui-icon {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(:defined) {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: rgb(var(--primary));
|
|
||||||
}
|
|
|
@ -1,102 +0,0 @@
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-size: 2em;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
& img {
|
|
||||||
max-width: 35rem;
|
|
||||||
height: min-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
& span {
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mdui-card {
|
|
||||||
max-width: 1000px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
main > * > section {
|
|
||||||
&#certificates mdui-card {
|
|
||||||
padding: 1em;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
& a {
|
|
||||||
min-width: 150px;
|
|
||||||
width: 15%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&#projects div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1em;
|
|
||||||
& mdui-card {
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
& section {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& section {
|
|
||||||
margin: 1em;
|
|
||||||
padding: 1em;
|
|
||||||
display: flex;
|
|
||||||
gap: 2rem;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
& article {
|
|
||||||
& h3 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
}
|
|
||||||
& p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
width: 420px;
|
|
||||||
}
|
|
||||||
& aside {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
width: 380px;
|
|
||||||
gap: 1em;
|
|
||||||
& img {
|
|
||||||
border-radius: var(--mdui-shape-corner-medium);
|
|
||||||
border: 2px solid rgb(var(--primary));
|
|
||||||
|
|
||||||
.double > & {
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:nth-child(2) > & {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&#about #stats div {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
& img {
|
|
||||||
max-width: 350px;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1500px) {
|
|
||||||
scroll-margin-top: 5em;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,27 +0,0 @@
|
||||||
mdui-top-app-bar {
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 1em;
|
|
||||||
gap: 0.2em;
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
@media (max-width: 1500px) {
|
|
||||||
background: rgba(0, 0, 0, 60%);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
& mdui-icon {
|
|
||||||
border: 2px solid rgb(var(--primary));
|
|
||||||
width: 1.5em;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
& mdui-button-icon {
|
|
||||||
width: 1.3em;
|
|
||||||
color: rgb(var(--primary)) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
& h1 {
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,5 +0,0 @@
|
||||||
export default interface Page {
|
|
||||||
title: string
|
|
||||||
id: string
|
|
||||||
icon: string
|
|
||||||
}
|
|