diff --git a/src/lib/assets/themetoggle.svg b/src/lib/assets/themetoggle.svg new file mode 100644 index 0000000..f00f890 --- /dev/null +++ b/src/lib/assets/themetoggle.svg @@ -0,0 +1 @@ + diff --git a/src/lib/assets/tslogo.svg b/src/lib/assets/tslogo.svg index fd638f8..f123ce5 100644 --- a/src/lib/assets/tslogo.svg +++ b/src/lib/assets/tslogo.svg @@ -1 +1 @@ - + diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte index efc581e..199a37c 100644 --- a/src/lib/components/Header.svelte +++ b/src/lib/components/Header.svelte @@ -1,14 +1,21 @@
-
@@ -24,5 +31,7 @@ border-bottom: 1px solid var(--header-border-color); display: grid; grid-template-columns: 1fr auto; + min-height: 36px; + align-items: center; } diff --git a/src/lib/components/SiteSummary.svelte b/src/lib/components/SiteSummary.svelte index 973f821..6a117e4 100644 --- a/src/lib/components/SiteSummary.svelte +++ b/src/lib/components/SiteSummary.svelte @@ -2,27 +2,46 @@ import SiteTools from './SiteTools.svelte' import name from '$lib/data/Name' import urls from '$lib/data/Urls' - + async function load() { + const svelteLogo = await import(`$lib/assets/sveltelogo.svg?raw`); + const typescriptLogo = await import('$lib/assets/tslogo.svg?raw'); + const htmlLogo = await import('$lib/assets/htmllogo.svg?raw'); + const cssLogo = await import('$lib/assets/csslogo.svg?raw'); + const doLogo = await import ('$lib/assets/dologo.svg?raw'); + const storybookLogo = await import('$lib/assets/storybooklogo.svg?raw'); + const tools: { title: string, href: string, purpose: string, svg: string}[] = [ + { title: "Svelte", href: "https://svelte.dev", purpose: "As a front-end component framework", svg: svelteLogo.default }, + { title: "Typescript", href: "https://www.typescriptlang.org", purpose: "To make Javascript more fun to write", svg: typescriptLogo.default}, + { title: "HTML", href: "https://html.spec.whatwg.org", purpose: "For obvious reasons", svg: htmlLogo.default}, + { title: "CSS with CSS Grid", href: "https://www.w3schools.com/css/css_grid.asp", purpose: "Also for obvious reasons", svg: cssLogo.default}, + { title: "Digital Ocean", href: "https://www.digitalocean.com/", purpose: "As a hosting platform", svg: doLogo.default}, + { title: "Storybook", href: "https://storybook.js.org", purpose: "During development as a component library", svg: storybookLogo.default}, + ] + return tools; + } +
-
-

Hi, I'm {name.first}

-
-
-

- I've been a software engineer for almost a decade. - I've written code used by millions of people. - This site in particular is built using: -

- -

- You can check out the source code on GitHub. - PR's are welcome 🤠 -

-

- If you want to read more about me you can grab my resume here. If you want to skip straight to sending over an offer you can get in touch with me here. -

-
+ {#await load() then tools} +
+

Hi, I'm {name.first}

+
+
+

+ I've been a software engineer for almost a decade. + I've written code used by millions of people. + This site in particular is built using: +

+ +

+ You can check out the source code on GitHub. + PR's are welcome 🤠 +

+

+ If you want to read more about me you can grab my resume here. If you want to skip straight to sending over an offer you can get in touch with me here. +

+
+ {/await}
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte index 74f4d2b..49504b1 100644 --- a/src/lib/components/ThemeToggle.svelte +++ b/src/lib/components/ThemeToggle.svelte @@ -1,13 +1,27 @@ -
-
diff --git a/src/lib/components/sitetools.css b/src/lib/components/sitetools.css new file mode 100644 index 0000000..c388dc5 --- /dev/null +++ b/src/lib/components/sitetools.css @@ -0,0 +1,65 @@ +.site-tools { + display: grid; + grid-template-rows: auto 1fr; +} + +.site-tools-heading { + display: grid; + grid-template-columns: 1fr 1fr; + border-top: 1px solid; + text-align: center; + font-weight: 700; +} + +.site-tools-body { + display: grid; + grid-auto-flow: row; +} + +.site-tools-item { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.cell { + padding: 10px; +} + +.left-cell { + border: 1px solid; + border-right: 0; + border-top: 0; +} + +.right-cell { + border: 1px solid; + border-top: 0; +} + +.site-tools-item-link { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + column-gap: 20px; +} + +.site-tools-item-link-svg { + display: grid; + grid-template-rows: 1fr; + align-items: center; + justify-items: center; +} + +.site-tools-item-link-svg svg { + height: 1em; + width: auto; +} + +@media (max-width: 400px) { + .site-tools-item-link { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + align-items: center; + justify-items: center; + } +}