From 708372e190b4484816cece17955b385c0fdc468d Mon Sep 17 00:00:00 2001 From: thomasabishop Date: Tue, 21 Oct 2025 18:26:02 +0100 Subject: [PATCH] interim commit --- src/components/Header.tsx | 184 +++++++++++++++---------------- src/pages/about.tsx | 194 +++++++++++++++++---------------- src/styles/_variables.css | 148 ++++++++++++------------- src/templates/BlogTemplate.tsx | 6 +- 4 files changed, 267 insertions(+), 265 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 0cf0cbc..ed20477 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -6,103 +6,103 @@ import { Link } from "react-router" import headerImage from "../images/radigue_gruvbox.png" import controlPanel from "../images/control-panel.png" import { - NavigationMenu, - NavigationMenuContent, - NavigationMenuItem, - NavigationMenuLink, - NavigationMenuList, - NavigationMenuTrigger, - navigationMenuTriggerStyle, - NavigationMenuViewport, + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, + NavigationMenuViewport, } from "@/components/ui/navigation-menu" import { Toggle } from "@/components/ui/toggle" const Menu = () => { - return ( - - - {/* Desktop menu - hidden on mobile, visible on md+ */} -
- - - Posts - - - - - About - - -
+ return ( + + + {/* Desktop menu - hidden on mobile, visible on md+ */} +
+ + + Posts + + + + + About + + +
- {/* Mobile dropdown - visible only on small screens */} - - - - + {/* Mobile dropdown - visible only on small screens */} + + + + - - - - Posts - - - - - About - - - - - - - - ) + + + + Posts + + + + + About + + + + + + + + ) } const Header = () => { - const { theme, setTheme } = useTheme() - return ( -
-
+ const { theme, setTheme } = useTheme() + return ( +
+
-
+
-
-
- -
-
- {/* +
+
+ +
+
+ {/* { */} - + - {/* + {/*
*/} -
-
-
- ) +
+ +
+ ) } export { Header } diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 838ed80..ac39cc4 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -2,109 +2,113 @@ import MainTemplate from "@/templates/MainTemplate" import portrait from "../images/portrait-compressed.jpg" const AboutPage = () => { - return ( - -
-

- About -

-
+ return ( + +
+

+ About +

+
-
- A portrait of the blog author -
- Pictured with the WITCH computer at the{" "} - - National Museum of Computing - - , Bletchley Park. -
-
-

- I'm a self-taught software engineer based on the south coast of England. - This blog is my technical scrapbook. I document the details of my - technical life so I can have a record of progress when I look back.{" "} -

+
+ A portrait of the blog author +
+ Pictured with the WITCH computer at the{" "} + + National Museum of Computing + + , Bletchley Park. +
+
+

+ I'm a self-taught software engineer based on the south coast of England. + This blog is my technical scrapbook. I document the details of my + technical life so I can have a record of progress when I look back.{" "} +

-

- I completed a degree in Philosophy at the University of Warwick (2009) - and hold a Postgraduate Certificate of Education (2011). -

-

- Currently I work for{" "} - - ITV - {" "} - {""} - as a backend software engineer. Before that, I worked as a full-stack - engineer at the{" "} - - BBC - {" "} - and as a frontend engineer at{" "} - - Arria NLG - {" "} - and in several web developer roles. Before software I was a - teacher.{" "} -

+

+ I completed a degree in Philosophy at the University of Warwick (2009) + and hold a Postgraduate Certificate of Education (2011). +

+

+ Currently I work for{" "} + + ITV + {" "} + {""} + as a backend software engineer. Before that, I worked as a full-stack + engineer at the{" "} + + BBC + {" "} + and as a frontend engineer at{" "} + + Arria NLG + {" "} + and in several web developer roles. Before software I was a + teacher.{" "} +

-

- Some things I like: -

    -
  • 🐶 Staffies and other bull-breeds
    • -
  • 🎼 Classical music (Haydn, Mozart, JSB)
    • -
  • 🛸 Science fiction
    • -
-

+

+ Some things I like: +

    +
  • 🐶 Staffies and other bull-breeds
    • +
  • 🎼 Classical music (Haydn, Mozart, JSB)
    • +
  • 🛸 Science fiction
    • +
+

-

- Some things I'm interested in: -

    -
  • 🧑‍💻 Self-hosting and digital resiliance
    • -
  • 🖳 The history of computing and networks
    • -
  • 🇮🇪 Irish history and culture
    • -
  • ☸️ Buddhism
    • - {/* +

    + Some things I'm interested in: +

      +
    • 🧑‍💻 Self-hosting and digital resiliance
      • +
    • 🖳 The history of computing and networks
      • +
    • 🇮🇪 Irish history and culture
      • +
    • ☸️ Buddhism
      • + {/*
    • 📡 Civil communications infrastructure
      • */} -
    -

    +
+

-

- I self-host my own Git forge at{" "} - - forgejo.systemsobscure.net - {" "} - rather than use Microsoft GitHub. You can view my personal projects - there. -

- - ) +

+ I self-host my own Git forge at{" "} + + forgejo.systemsobscure.net + {" "} + rather than use Microsoft GitHub. You can view my personal projects + there. +

+ +

+ Wot is the image in the header? +

+ + ) } export { AboutPage } diff --git a/src/styles/_variables.css b/src/styles/_variables.css index 16caaeb..81a52f6 100644 --- a/src/styles/_variables.css +++ b/src/styles/_variables.css @@ -1,38 +1,38 @@ :root { - --radius: 0.3rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); - --font-monospaced: "Jetbrains Mono", monospace; - --font-sansserif: "Inter", sans-serif; + --radius: 0.3rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); + --font-monospaced: "Jetbrains Mono", monospace; + --font-sansserif: "Inter", sans-serif; } /* .dark { */ @@ -70,45 +70,45 @@ /* } */ .dark { - --background: oklch(0.2 0 0); - /* Softer dark gray instead of 0.145 */ - --foreground: oklch(0.9 0 0); - /* Softer off-white instead of 0.985 */ - --card: oklch(0.22 0 0); - /* Slightly lighter card */ - --card-foreground: oklch(0.9 0 0); - /* Match foreground */ - --popover: oklch(0.22 0 0); - --popover-foreground: oklch(0.9 0 0); - --primary: oklch(0.85 0 0); - /* Less harsh white */ - --primary-foreground: oklch(0.22 0 0); - --secondary: oklch(0.3 0 0); - /* Lighter secondary */ - --secondary-foreground: oklch(0.9 0 0); - --muted: oklch(0.3 0 0); - --muted-foreground: oklch(0.65 0 0); - /* Slightly softer */ - --accent: #458588; + --background: oklch(0.2 0 0); + /* Softer dark gray instead of 0.145 */ + --foreground: oklch(0.9 0 0); + /* Softer off-white instead of 0.985 */ + --card: oklch(0.22 0 0); + /* Slightly lighter card */ + --card-foreground: oklch(0.9 0 0); + /* Match foreground */ + --popover: oklch(0.22 0 0); + --popover-foreground: oklch(0.9 0 0); + --primary: oklch(0.85 0 0); + /* Less harsh white */ + --primary-foreground: oklch(0.22 0 0); + --secondary: oklch(0.3 0 0); + /* Lighter secondary */ + --secondary-foreground: oklch(0.9 0 0); + --muted: oklch(0.3 0 0); + --muted-foreground: oklch(0.65 0 0); + /* Slightly softer */ + --accent: #a89984; - --accent-foreground: oklch(0.9 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 15%); - /* Slightly more visible borders */ - --input: oklch(1 0 0 / 18%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.22 0 0); - /* Match card */ - --sidebar-foreground: oklch(0.9 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.9 0 0); - --sidebar-accent: oklch(0.3 0 0); - --sidebar-accent-foreground: oklch(0.9 0 0); - --sidebar-border: oklch(1 0 0 / 15%); - --sidebar-ring: oklch(0.556 0 0); + --accent-foreground: oklch(0.9 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 15%); + /* Slightly more visible borders */ + --input: oklch(1 0 0 / 18%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.22 0 0); + /* Match card */ + --sidebar-foreground: oklch(0.9 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.9 0 0); + --sidebar-accent: oklch(0.3 0 0); + --sidebar-accent-foreground: oklch(0.9 0 0); + --sidebar-border: oklch(1 0 0 / 15%); + --sidebar-ring: oklch(0.556 0 0); } diff --git a/src/templates/BlogTemplate.tsx b/src/templates/BlogTemplate.tsx index 1dd67eb..fcd3877 100644 --- a/src/templates/BlogTemplate.tsx +++ b/src/templates/BlogTemplate.tsx @@ -17,9 +17,7 @@ const BlogTemplate = () => { ) : ( <>
-

- {post?.title} -

+

{post?.title}

@@ -60,7 +58,7 @@ const BlogTemplate = () => { [&>li]:leading-[1.6] [&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-muted [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal [&>p]:mt-6 [&>p]:leading-[1.6] - [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-accent/80 [&_a]:text-[#83a598] + [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground [&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto [&>figure>img]:w-full [&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center