Further development or rewrite
This commit is contained in:
parent
ffe3b95319
commit
0abbfe9088
9 changed files with 165 additions and 14 deletions
9
src/components/Divider.astro
Normal file
9
src/components/Divider.astro
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
import styles from "../styles/divider.module.css"
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class={styles.container}>
|
||||||
|
<span class={styles.dividerIcon}>
|
||||||
|
<mdui-icon name="star"></mdui-icon>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
16
src/components/Jumbo.astro
Normal file
16
src/components/Jumbo.astro
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
import styles from "../styles/jumbo.module.css"
|
||||||
|
import Divider from "./Divider.astro"
|
||||||
|
import logoLong from "../images/logoLong.svg"
|
||||||
|
import { Image } from "astro:assets"
|
||||||
|
---
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<section id={styles.jumbo}>
|
||||||
|
<Image id={styles.logoLong} src={logoLong} alt="Henry Hiles" />
|
||||||
|
<Divider />
|
||||||
|
<span id={styles.shortAbout}>
|
||||||
|
Full Stack Web Developer and Discord Bot Developer
|
||||||
|
</span>
|
||||||
|
</section>
|
||||||
|
</header>
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
<label>
|
|
||||||
<h1 class="md-typescale-display-medium">Hello Material!</h1>
|
|
||||||
</label>
|
|
||||||
77
src/images/logoLong.svg
Normal file
77
src/images/logoLong.svg
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
<?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>
|
||||||
|
After Width: | Height: | Size: 6 KiB |
|
|
@ -1,6 +1,5 @@
|
||||||
---
|
---
|
||||||
import "mdui/mdui.css"
|
import "mdui/mdui.css"
|
||||||
import { Image } from "astro:assets"
|
|
||||||
import "../styles/layout.css"
|
import "../styles/layout.css"
|
||||||
import logo from "../images/logo.svg"
|
import logo from "../images/logo.svg"
|
||||||
---
|
---
|
||||||
|
|
@ -16,18 +15,18 @@ import logo from "../images/logo.svg"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>Henry Hiles</title>
|
<title>Henry Hiles - Home</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<mdui-top-app-bar>
|
<mdui-top-app-bar scroll-behavior="elevate">
|
||||||
<mdui-icon src={logo.src}></mdui-icon>
|
<mdui-icon src={logo.src}></mdui-icon>
|
||||||
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
|
<mdui-top-app-bar-title>Henry Hiles</mdui-top-app-bar-title>
|
||||||
<div style="flex-grow: 1"></div>
|
<spacer></spacer>
|
||||||
<mdui-button-icon icon="more_vert"></mdui-button-icon>
|
<mdui-button-icon icon="more_vert"></mdui-button-icon>
|
||||||
</mdui-top-app-bar>
|
</mdui-top-app-bar>
|
||||||
<slot />
|
<slot />
|
||||||
<mdui-navigation-bar value={Astro.url.pathname.split("/").at(-1)}>
|
<mdui-navigation-bar value="home">
|
||||||
<mdui-navigation-bar-item icon="home" value="">
|
<mdui-navigation-bar-item icon="home" value="home">
|
||||||
Home
|
Home
|
||||||
</mdui-navigation-bar-item>
|
</mdui-navigation-bar-item>
|
||||||
<mdui-navigation-bar-item icon="commute" value="item-2">
|
<mdui-navigation-bar-item icon="commute" value="item-2">
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
---
|
---
|
||||||
import Welcome from "../components/Welcome.astro"
|
import Jumbo from "../components/Jumbo.astro"
|
||||||
import Layout from "../layouts/Layout.astro"
|
import Layout from "../layouts/Layout.astro"
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Home">
|
<Layout><Jumbo /></Layout>
|
||||||
<Welcome />
|
|
||||||
</Layout>
|
|
||||||
|
|
|
||||||
33
src/styles/divider.module.css
Normal file
33
src/styles/divider.module.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dividerIcon {
|
||||||
|
margin: 10px 0 15px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
& mdui-icon {
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dividerIcon::before,
|
||||||
|
.dividerIcon::after {
|
||||||
|
border-bottom: 0.5rem solid;
|
||||||
|
border-radius: 5em;
|
||||||
|
content: "";
|
||||||
|
margin: 0 1em;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dividerIcon::before {
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dividerIcon::after {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
14
src/styles/jumbo.module.css
Normal file
14
src/styles/jumbo.module.css
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
#jumbo {
|
||||||
|
font-size: 2em;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
& #logoLong {
|
||||||
|
width: 35rem;
|
||||||
|
height: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
& #shortAbout {
|
||||||
|
display: block;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -10,11 +10,19 @@ mdui-top-app-bar {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
gap: 0.2em;
|
gap: 0.2em;
|
||||||
|
|
||||||
|
& mdui-top-app-bar-title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
& mdui-icon {
|
& mdui-icon {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
spacer {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
:not(:defined) {
|
:not(:defined) {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue