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