about: color+links, ScheduleButton goundwork

package.json

@@ -13,7 +13,9 @@
     "@astrojs/check": "^0.5.10",
     "@astrojs/solid-js": "^4.0.1",
     "@astrojs/tailwind": "^5.1.0",
+    "@nanostores/solid": "^0.4.2",
     "astro": "^4.5.12",
+    "nanostores": "^0.10.3",
     "solid-js": "^1.8.16",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.3"

pnpm-lock.yaml

@@ -14,9 +14,15 @@ dependencies:
   '@astrojs/tailwind':
     specifier: ^5.1.0
     version: 5.1.0(astro@4.5.12)(tailwindcss@3.4.3)
+  '@nanostores/solid':
+    specifier: ^0.4.2
+    version: 0.4.2(nanostores@0.10.3)(solid-js@1.8.16)
   astro:
     specifier: ^4.5.12
     version: 4.5.12(typescript@5.4.3)
+  nanostores:
+    specifier: ^0.10.3
+    version: 0.10.3
   solid-js:
     specifier: ^1.8.16
     version: 1.8.16
@@ -1094,6 +1100,16 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: false
 
+  /@nanostores/solid@0.4.2(nanostores@0.10.3)(solid-js@1.8.16):
+    resolution: {integrity: sha512-8v32+C9KdRbnvP4x4Oiw/CtL1tZwbRxYfmFsPIY9PXevCgxSFnicG6VnLLtNAR7F0kl8Ec7OROHO34Ffv0KDzg==}
+    peerDependencies:
+      nanostores: '>=0.8.0'
+      solid-js: ^1.6.0
+    dependencies:
+      nanostores: 0.10.3
+      solid-js: 1.8.16
+    dev: false
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -3212,6 +3228,11 @@ packages:
     hasBin: true
     dev: false
 
+  /nanostores@0.10.3:
+    resolution: {integrity: sha512-Nii8O1XqmawqSCf9o2aWqVxhKRN01+iue9/VEd1TiJCr9VT5XxgPFbF1Edl1XN6pwJcZRsl8Ki+z01yb/T/C2g==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    dev: false
+
   /napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
     requiresBuild: true

public/favicon.svg

@@ -23,9 +23,9 @@
        rx="150"
        ry="150" />
     <path
-       style="font-weight:bold;font-size:933.333px;font-family:'Old Standard';-inkscape-font-specification:'Old Standard Bold';fill:#27272a"
-       d="m 203.99999,872.26654 h 313.59989 v -29.86666 h -65.33331 c -16.79999,0 -22.39999,-5.59999 -22.39999,-22.39999 v -279.9999 h 220.26659 v 279.9999 c 0,16.8 -5.6,22.39999 -22.39999,22.39999 h -65.33331 v 29.86666 h 313.59989 v -29.86666 h -65.33331 c -16.8,0 -22.39999,-5.59999 -22.39999,-22.39999 v -559.9998 c 0,-16.8 5.59999,-22.39999 22.39999,-22.39999 h 65.33331 V 207.73344 H 560.5332 v 29.86666 h 67.19998 c 16.79999,0 22.39999,5.59999 22.39999,22.39999 V 506.4 H 429.86658 V 260.00009 c 0,-16.8 5.6,-22.39999 22.39999,-22.39999 h 65.33331 V 207.73344 H 203.99999 v 29.86666 h 65.33331 c 16.8,0 22.4,5.59999 22.4,22.39999 v 559.9998 c 0,16.8 -5.6,22.39999 -22.4,22.39999 h -65.33331 z"
+       style="font-weight:bold;font-size:666.667px;font-family:'Old Standard';-inkscape-font-specification:'Old Standard Bold';letter-spacing:-50px;fill:#27272a"
+       d="M 65.666628,777.33344 H 289.66674 v -21.33335 h -46.66669 c -12.00001,0 -16.00001,-4 -16.00001,-16.00001 V 539.99999 h 157.33341 v 200.00009 c 0,12.00001 -4,16.00001 -16.00001,16.00001 h -46.66669 v 21.33335 h 224.00011 v -21.33335 h -46.66669 c -12,0 -16,-4 -16,-16.00001 V 339.99989 c 0,-12.00001 4,-16.00001 16,-16.00001 h 46.66669 V 302.66654 H 320.33342 v 21.33334 h 48.00002 c 12.00001,0 16.00001,4 16.00001,16.00001 V 515.99997 H 227.00004 V 339.99989 c 0,-12.00001 4,-16.00001 16.00001,-16.00001 h 46.66669 V 302.66654 H 65.666628 v 21.33334 h 46.666692 c 12,0 16.00001,4 16.00001,16.00001 v 400.00019 c 0,12.00001 -4.00001,16.00001 -16.00001,16.00001 H 65.666628 Z m 499.333192,0 h 248.00012 c 110.66672,0 201.33346,-102.66672 201.33346,-241.33346 0,-138.66673 -90.66674,-233.33344 -201.33346,-233.33344 H 564.99982 v 21.33334 h 46.66669 c 12,0 16.00001,4 16.00001,16.00001 v 400.00019 c 0,12.00001 -4.00001,16.00001 -16.00001,16.00001 H 564.99982 Z M 726.33323,740.00008 V 339.99989 c 0,-12.00001 4,-16.00001 16.00001,-16.00001 h 59.33336 c 53.33336,0 99.33338,36.00002 99.33338,116.00006 v 200.00009 c 0,80.00004 -46.00002,116.00006 -99.33338,116.00006 h -59.33336 c -12.00001,0 -16.00001,-4 -16.00001,-16.00001 z"
        id="text3"
-       aria-label="H" />
+       aria-label="HD" />
   </g>
 </svg>

src/components/Em.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<span class="text-accent font-bold"><slot /></span>

src/components/Header.astro

@@ -3,7 +3,9 @@ import Nav from "@/components/Nav.tsx";
 ---
 
 <header class="my-10 w-fit mx-auto">
-  <h1 class="text-4xl md:text-6xl font-bold font-display text-center">
+  <h1
+    class="text-4xl md:text-6xl tracking-tight font-bold font-display text-center"
+  >
     J. Hunter DeLoche
   </h1>
   <div transition:persist>

src/components/Heading.astro

@@ -1,7 +0,0 @@
----
-
----
-
-<h2 class="font-display text-2xl font-bold text-center">
-  <slot />
-</h2>

src/components/Nav.tsx

@@ -1,4 +1,6 @@
-import { For, createSignal, onMount } from "solid-js";
+import { For, onMount } from "solid-js";
+import { useStore } from "@nanostores/solid";
+import { $currentPage } from "@/scripts/currentPage"
 
 interface Page {
   path: string,
@@ -16,13 +18,12 @@ const activeClasses = "font-bold !text-foreground";
 
 
 const Nav = () => {
-  const [currentPage, setCurrentPage] = createSignal<string>();
+  const currentPage = useStore($currentPage);
 
   onMount(() => {
-    setCurrentPage(window.location.pathname);
+    $currentPage.set(window.location.pathname);
   });
 
-
   return (
     <nav class="pt-4 w-full flex flex-row justify-around">
       <For each={pages}>{
@@ -34,7 +35,7 @@ const Nav = () => {
           }
             href={page.path}
             onClick={() => {
-              setCurrentPage(page.path);
+              $currentPage.set(page.path);
             }}
           >
             {page.name}

src/components/PageLink.tsx

@@ -0,0 +1,19 @@
+import { $currentPage } from "@/scripts/currentPage"
+import type { ParentComponent } from "solid-js";
+import { splitProps } from "solid-js";
+
+interface Props {
+  href: string,
+  class?: string,
+}
+
+const PageLink: ParentComponent<Props> = (props) => {
+  const [local, others] = splitProps(props, ["children"]);
+  return (
+    <a {...others} onClick={() => $currentPage.set(others.href)}>
+      {local.children}
+    </a>
+  );
+};
+
+export default PageLink;

src/components/ScheduleButton.astro

@@ -0,0 +1,49 @@
+---
+const { event_path } = Astro.props;
+---
+
+<button
+  class="px-5 py-3 rounded-md text-background bg-foreground font-bold drop-shadow-md hover:drop-shadow-accent hover:bg-accent transition-all duration-300 m-3"
+  data-cal-link={`jhdeloche/${event_path}`}
+  data-cal-namespace=""
+  data-cal-config='{"layout":"month_view"}'
+>
+  <slot />
+</button>
+
+<script is:inline>
+  (function (C, A, L) {
+    let p = function (a, ar) {
+      a.q.push(ar);
+    };
+    let d = C.document;
+    C.Cal =
+      C.Cal ||
+      function () {
+        let cal = C.Cal;
+        let ar = arguments;
+        if (!cal.loaded) {
+          cal.ns = {};
+          cal.q = cal.q || [];
+          d.head.appendChild(d.createElement("script")).src = A;
+          cal.loaded = true;
+        }
+        if (ar[0] === L) {
+          const api = () => p(api, arguments);
+          const namespace = ar[1];
+          api.q = api.q || [];
+          typeof namespace === "string"
+            ? (cal.ns[namespace] = api) && p(api, ar)
+            : p(cal, ar);
+          return;
+        }
+        p(cal, ar);
+      };
+  })(window, "https://cal.jhunterdeloche.com/embed/embed.js", "init");
+  Cal("init", { origin: "https://cal.jhunterdeloche.com" });
+
+  Cal("ui", {
+    hideEventTypeDetails: false,
+    layout: "month_view",
+  });
+</script>

src/components/SectionTitle.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<h2 class="font-display text-2xl font-bold text-center tracking-tighter">
+  <slot />
+</h2>

src/pages/index.astro

@@ -1,7 +1,9 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import Paragraph from "@/components/Paragraph.astro";
-import Heading from "@/components/Heading.astro";
+import SectionTitle from "@/components/SectionTitle.astro";
+import PageLink from "@/components/PageLink";
+import Em from "@/components/Em.astro";
 import { Image } from "astro:assets";
 
 import portrait from "@/assets/headshot_lg.jpg";
@@ -14,18 +16,18 @@ import portrait from "@/assets/headshot_lg.jpg";
   <div class="flex flex-col gap-10 md:flex-row items-center justify-around">
     <div class="">
       <Image
-        class="rounded-md w-full"
+        class="rounded-md w-full border-accent border-[1px] drop-shadow-accent"
         src={portrait}
         alt="Portrait of Hunter."
       />
     </div>
     <div class="basis-1/2">
-      <Heading>About Me</Heading>
+      <SectionTitle>About Me</SectionTitle>
       <Paragraph>
-        Hunter DeLoche is a biological sciences and music student at the
+        <Em>Hunter DeLoche</Em> is a biological sciences and music student at the
         University of Chicago. Additionally, he is a cadet in the College’s Army
-        ROTC program, intending to commission as a second lieutenant in the
-        Medical Service Corps upon graduation.
+        ROTC program, intending to commission as a second lieutenant in the Medical
+        Service Corps upon graduation.
       </Paragraph>
       <Paragraph>
         Hunter has a passion for the mind and its biological, psychological, and
@@ -39,12 +41,30 @@ import portrait from "@/assets/headshot_lg.jpg";
         formed his progressive rock band, Amnesium, as an outlet for his
         compositions. Amnesium’s debut album, <i>Event Horizon,</i> is a concept
         album that envisions psychosis meshed with science fiction. To learn more
-        about his music, visit the "music" page above.
+        about his music, visit the
+        <Em>
+          <PageLink
+            client:load
+            href="/music"
+            class="underline underline-offset-2 hover:underline-offset-4 transition-all duration-100"
+          >
+            music page</PageLink
+          >.
+        </Em>
       </Paragraph>
       <Paragraph>
         Hunter also volunteers as a writing tutor for those working on their
         college application process. For free writing advising and revision
-        services, visit the “writing” page above.
+        services, visit the
+        <Em>
+          <PageLink
+            client:load
+            href="/writing"
+            class="underline underline-offset-2 hover:underline-offset-4 transition-all duration-100"
+          >
+            writing page</PageLink
+          >.
+        </Em>
       </Paragraph>
     </div>
   </div>

src/pages/music.astro

@@ -1,7 +1,8 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import ScheduleButton from "@/components/ScheduleButton.astro";
 ---
 
 <Layout title="J. Hunter DeLoche | Music" description="music">
-  <div class="">this is the music page</div>
+  <div class="">This is the music page</div>
 </Layout>

src/pages/writing.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import ScheduleButton from "@/components/ScheduleButton.astro";
 ---
 
 <Layout title="J. Hunter DeLoche | Writing" description="writing">

src/scripts/currentPage.ts

@@ -0,0 +1,3 @@
+import { atom } from "nanostores";
+
+export const $currentPage = atom("");

tailwind.config.mjs

@@ -18,6 +18,12 @@ export default {
       screens: {
         md: "850px",
       },
+      dropShadow: {
+        accent: [
+          '0 10px 8px rgba(6, 78, 59, 0.1)',
+          '0 4px 3px rgba(6, 78, 59, 0.2)'
+        ],
+      },
     },
   },
   future: {