From 4c98640a08132077a2032b9ad4763dbd4de47c12 Mon Sep 17 00:00:00 2001 From: Thomas Date: Sun, 17 Mar 2024 09:33:22 +0000 Subject: [PATCH] redesign --- src/lib/blog/BlogController.ts | 17 +- src/lib/components/Navbar.svelte | 36 +++- src/routes/+layout.svelte | 32 ++- src/routes/+page.server.ts | 16 ++ src/routes/+page.svelte | 256 +----------------------- src/routes/+page.ts | 1 - src/routes/api/blog.json/+server.ts | 2 - src/routes/blog/+page.svelte | 4 - src/routes/blog/BlogPostListItem.svelte | 13 +- src/routes/home/HomepageHeader.svelte | 86 ++++++++ src/stores/colourSchemeStore.ts | 35 ++++ src/styles/thomaswilson.css | 19 +- 12 files changed, 232 insertions(+), 285 deletions(-) create mode 100644 src/routes/+page.server.ts delete mode 100644 src/routes/+page.ts create mode 100644 src/routes/home/HomepageHeader.svelte create mode 100644 src/stores/colourSchemeStore.ts diff --git a/src/lib/blog/BlogController.ts b/src/lib/blog/BlogController.ts index 9c8ecfc..e7d3875 100644 --- a/src/lib/blog/BlogController.ts +++ b/src/lib/blog/BlogController.ts @@ -60,7 +60,11 @@ export class BlogController { return createdBlogPost; } - async getAllBlogPosts(): Promise> { + async getAllBlogPosts( + pageSize?: number + ): Promise> { + console.log('getAllBlogPosts') + console.log({ pageSize }); const blogPosts = await this._markdownRepository.blogPosts; const bookReviews = await this._markdownRepository.bookReviews; @@ -79,9 +83,16 @@ export class BlogController { (post) => this.snoutStreetStudiosPostToSnoutStreetStudiosPostListItem(post) ); - return [...blogPostListItems, ...bookReviewListItems, ...snoutStreetStudiosPostListItems].sort((a, b) => + const allBlogPosts = [...blogPostListItems, ...bookReviewListItems, ...snoutStreetStudiosPostListItems].sort((a, b) => a.date > b.date ? -1 : 1 - ); + ) + + if (pageSize === undefined) { + console.log('returning all blog posts') + return allBlogPosts; + } + + return allBlogPosts.slice(0, pageSize); } private bookReviewToBookReviewListItem(bookReview: BookReview): BookReviewListItem { diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index f010219..e593d16 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -1,10 +1,23 @@ + @@ -15,6 +28,7 @@ max-width: 100vw; overflow: hidden; min-height: var(--navbar-height); + font-family: var(--font-family-mono); } .left { @@ -22,10 +36,12 @@ flex-grow: 0; text-align: left; padding: var(--spacing-base); + } .home { color: var(--brand-orange); + font-family: inherit; text-decoration: none; font-weight: 300; display: flex; @@ -42,17 +58,25 @@ display: flex; flex: 1; text-align: right; + gap: 1rem; align-items: center; justify-content: flex-end; padding: var(--spacing-base); } - .blog { - font-size: 1.4rem; - padding: 0; - color: var(--gray-1000); + .colour-theme-toggle { + display: flex; + align-items: center; + justify-content: center; } + + .blog { + font-size: 1.1rem; + padding: 0; + margin: 0; + } + .blog:visited { - color: var(--gray-1000); + color: var(--colour-scheme-text); } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6cfdfc9..431ad44 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,10 +1,36 @@ - Thomas Wilson + Thomas Wilson - diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts new file mode 100644 index 0000000..3f48939 --- /dev/null +++ b/src/routes/+page.server.ts @@ -0,0 +1,16 @@ +import { BlogController } from '../lib/blog/BlogController.js'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = async () => { + try { + const controller = await BlogController.singleton(); + const latestBlogPosts = await controller.getAllBlogPosts(3); + return { latestBlogPosts } + } catch (error) { + console.error({ + message: `Caught error in GET /api/blog.json`, + error: JSON.stringify(error), + }); + return { latestBlogPosts: [] } + } +}; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 4f93c18..191009a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,9 +1,9 @@ @@ -12,250 +12,6 @@ -
-
-

Thomas Wilson

-

- I am a software engineer who loves the craft of building quality software, - the messy-ness of working with people, - and the balance between minimal and complete products. - I build good things with good people for good companies. -

-
- -
-

My work

- {#if isWorkExpanded} -
    -
  • Right now I am a Senior Software Engineer at Laka. We're building web tools to unfuck insurance
    • -
  • - I spent three years building and leading the Software Engienering team atOxwash, where we built tools for the sustainable and scalable future of laundry. -
    • -
  • - I build full-stack software for the web, especially with TypeScript, - Node, Svelte, and React. -
    • - -
  • - I like domain driven design, and agile (with a little 'a') - opinions about delivery and collaboration. -
    • - -
  • - I've previously built software with data privacy, ed-tech, and - sustainability companies. -
    • - -
  • - I have a Ph.D. in education technology, where I looked at how we can use tech in the teaching lab to - promote and evidence understanding. -
    • - -
  • - I have only ever worked with companies actively solving environment - and societal problems. -
    • - -
  • - -
    • -
- {:else} -

- I build software that makes complicated things more human-friendly, and - lead teams to do the same. -

- - {/if} -
- -
-

Me

- {#if isPersonalExpanded} -
    -
  • - I try to write at least once a month on my blog. -
    • -
  • I'm learning to sew my own clothes
    • -
  • I love fruity coffees and botanical gins
    • -
  • I used to dance and produce with a contemporary dance company
    • -
  • - -
    • -
- {:else} -

- I like to write on my blog and ride bikes. I'm learning - to sew my own clothes, and my French is terrible. -

- - {/if} -
- -
-

Links

-
    -
  • I write here, on my blog
    • -
  • - And on GitHub -
    • -
  • I stopped checking Twitter when... you know.
    • -
-
-
- - +
+ +
\ No newline at end of file diff --git a/src/routes/+page.ts b/src/routes/+page.ts deleted file mode 100644 index d43d0cd..0000000 --- a/src/routes/+page.ts +++ /dev/null @@ -1 +0,0 @@ -export const prerender = false; diff --git a/src/routes/api/blog.json/+server.ts b/src/routes/api/blog.json/+server.ts index a4a7e7f..313068a 100644 --- a/src/routes/api/blog.json/+server.ts +++ b/src/routes/api/blog.json/+server.ts @@ -3,9 +3,7 @@ import { BlogController } from '../../../lib/blog/BlogController.js'; export const GET = async () => { try { - console.log(`GET /api/blog.json`); const controller = await BlogController.singleton(); - console.log(`Controller instantiated.`); const blogPosts = await controller.getAllBlogPosts(); return json({ posts: blogPosts }); } catch (error) { diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index fb91b17..02897d8 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -97,10 +97,6 @@ grid-template-columns: 100%; gap: var(--spacing-base); max-width: 100%; - - @media screen and (min-width: 768px) { - grid-template-columns: repeat(2, 1fr); - } } .days-since { diff --git a/src/routes/blog/BlogPostListItem.svelte b/src/routes/blog/BlogPostListItem.svelte index 5af04ba..59ca97b 100644 --- a/src/routes/blog/BlogPostListItem.svelte +++ b/src/routes/blog/BlogPostListItem.svelte @@ -1,19 +1,18 @@ @@ -58,10 +57,10 @@ .post:hover { color: var(--brand-orange); - background-color: white; + background-color: var(--colour-scheme-background-accent); border: 1px solid var(--brand-orange); scale: 1.02; - box-shadow: 10px 10px 10px 10px var(--gray-200); + box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5); } .post a { diff --git a/src/routes/home/HomepageHeader.svelte b/src/routes/home/HomepageHeader.svelte new file mode 100644 index 0000000..2091ca8 --- /dev/null +++ b/src/routes/home/HomepageHeader.svelte @@ -0,0 +1,86 @@ + + +
+

(Thomas) Wilson

+

+ I love the craft of well-built things: mostly software (~8 years), but also + clothes (~2 years). +

+

+ I work against systems which rely on exploitation, excessive waste, and + dishonesty. I'm trying to build a kinder and fairer world, and I find that + hard sometimes. +

+

+ I try to think and be curious, that's why I keep a weblog. And (equally embarrassing to say) probably what got me through a + Ph.D. in Education Technology. +

+

Here are some things I've written recently:

+ +
    + {#each latestBlogPosts as post} +
  1. + {post.title} ({formatDate( + new Date(post.date), + "yyyy-MM-dd" + )}) +
    2. + {/each} +
+ +

+ Right now I am a Senior Software engineer at Laka, building tools actually fairer insurance. Before that, I was Head of + Software Engineering at + Oxwash, building tools for actually sustainable laundry. +

+
+ + diff --git a/src/stores/colourSchemeStore.ts b/src/stores/colourSchemeStore.ts new file mode 100644 index 0000000..29ca0a7 --- /dev/null +++ b/src/stores/colourSchemeStore.ts @@ -0,0 +1,35 @@ +import { writable } from "svelte/store"; + +type ColourSchemeName = 'light' | 'dark'; + +interface ColourScheme { + name: ColourSchemeName; + background: string; + backgroundAccent: string; + text: string; + textAccent: string; +} + +export const lightColourScheme: ColourScheme = { + name: 'light', + background: 'white', + backgroundAccent: '#f8f9fa', + text: '#212529', + textAccent: '#495057' +}; + +export const darkColourScheme: ColourScheme = { + name: 'dark', + background: '#212529', + backgroundAccent: '#343a40', + text: '#f8f9fa', + textAccent: '#ced4da' +}; + +export const colourSchemes: Record = { + light: lightColourScheme, + dark: darkColourScheme +}; + +export const colourSchemeStore = writable(darkColourScheme); + diff --git a/src/styles/thomaswilson.css b/src/styles/thomaswilson.css index 9601752..11344aa 100644 --- a/src/styles/thomaswilson.css +++ b/src/styles/thomaswilson.css @@ -21,6 +21,7 @@ --gray-900: #212529; --gray-950: #1a1e23; --gray-1000: #0a0c0e; + --font-family-mono: monospace; --font-family-title: 'FivoSansModern-Regular', sans-serif; --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @@ -53,9 +54,12 @@ body { font-family: var(--font-family-sans); - color: var(--gray-900); line-height: var(--line-height-md); min-height: 100vh; + background-color: var(--colour-scheme-background); + color: var(--colour-scheme-text); + transition: 0.3s ease; + transition-property: background-color, color; } .thomaswilson-container { @@ -65,7 +69,6 @@ body { align-items: center; justify-content: center; min-height: calc(100vh - var(--navbar-height) - calc(2 * var(--container-padding))); - background-color: var(--gray-100); padding: var(--container-padding); } @@ -76,7 +79,6 @@ body { font-size: 1.19rem; line-height: var(--line-height-md); padding-bottom: var(--spacing-base); - color: var(--gray-700); padding-bottom: 2rem; } @@ -85,14 +87,13 @@ body { font-size: var(--font-size-base); font-weight: 700; margin: 0; - color: var(--gray-800); } .thomaswilson-strapline p { - font-size: 1.6rem; + font-size: 1.4rem; line-height: var(--line-height-md); letter-spacing: -0.25px; - font-weight: 250; + font-weight: 200; } h1, @@ -105,7 +106,7 @@ h6 { padding-bottom: 0.25rem; font-weight: 700; margin: 0; - color: var(--gray-800); + color: var(--colour-scheme-text); padding-top: 8px; padding-bottom: 6px; line-height: var(--line-height); @@ -116,9 +117,9 @@ li, a { font-size: var(--font-size); line-height: var(--line-height-lg); - font-family: var(--font-family-sans); + font-family: var(--font-family-mono); margin: 0; - color: var(--gray-800); + color: var(--colour-scheme-text); padding: 8px 0; }