Add more features

.github/workflows/deploy.yml

@@ -0,0 +1,56 @@
+name: "Deployment to GitHub Pages on push"
+on:
+  push:
+    branches: ['3.0.0']
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+
+      - name: Install pnpm
+        run: npm install --global pnpm
+
+      - name: "Install pnpm"
+        run: pnpm install
+
+      - name: Cache .pnpm-store
+        uses: actions/cache@v2
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+            
+      - name: "Build project"
+        run: pnpm build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

src/App.svelte

@@ -9,23 +9,28 @@
   import Nav from "$lib/components/Nav.svelte";
 
   import { ModeWatcher } from "mode-watcher";
-  import { Button, Pagination } from "bits-ui";
+  import { Button } from "bits-ui";
 
-  let projectsPath: string = '/data/projects.tsv';
+  let projectsPath: string = "/files/projects.tsv";
   let projects: [] = [];
+  let numProjects: number;
+
+  function imagePath(fileName: string): string {
+    return `/projects/${fileName}`;
+  }
 
-  
   onMount(async () => {
     try {
       d3.tsv(projectsPath, (d: ProjectImport) => {
         return {
-          fileName: d['File Name'],
-          title: d['Title'],
-          desc: d['Description'],
-          url: d['URL'],
+          fileName: d["File Name"],
+          title: d["Title"],
+          desc: d["Description"],
+          url: d["URL"],
         };
       }).then((data: any) => {
         projects = data;
+        numProjects = Object.entries(projects).length;
       });
     } catch (error) {
       console.error("Error loading TSV file:", error);
@@ -47,7 +52,7 @@
       </div>
     </div>
 
-    <div class="indefinities-home-section">
+    <div class="indefinities-home-section mx-5">
       <h2>A little about me</h2>
       <h3 class="my-5">
         I'm a user <em>design-veloper</em> who advocates for
@@ -70,34 +75,41 @@
         >
       </p>
 
-      <p>Within my current position,</p>
+      <p class="my-5">
+        Outside of my work, I am a daughter, sister, friend, and enjoyer of the
+        creative and food scene. When I have the opportunity to do so (on a
+        meeting-free dat), I enjoy trying different roasts at different cafés
+        while enjoying the city of Boston to fuel my remote work. Otherwise,
+        you'll find me sketching something in my Moleskine or iPad or trying
+        different web technologies within my personal projects.
+      </p>
 
-      <Button.Root class="my-5">👀 peek my resume</Button.Root>
+      <Button.Root
+        type="button"
+        id="resumeBtn"
+        name="resume"
+        class="my-10 px-5 py-2 border border-white rounded-md text-lg"
+        href="/files/Hsu Natalie Resume.pdf"
+        target="_blank"
+      >
+        👀 peek my resume
+      </Button.Root>
     </div>
 
-    <div class="indefinities-home-section">
+    <div class="indefinities-home-section mx-5">
       <h2>Some of my work</h2>
       <!-- https://docs.google.com/spreadsheets/d/1s8DRDlWgLMvd4DbvoLtwvrqgdtc_dB0uyx8ZeQFMG3A/edit?gid=0#gid=0 -->
-      <div>
+      <div class="flex flex-row flex-wrap justify-around">
         {#each projects as proj}
-        <div class="grid justify-items-center">
-          <div class="max-w-full w-[60%] p-5">
-              <img src={'/projects/cclf.png'}/>
-              <h3>{ proj.title }</h3>
-              <p>{ proj.desc }</p>
+          <div class="max-w-full w-[40%] p-5">
+            <a href={proj.url} target="_blank">
+              <img class="rounded-md" src={imagePath(proj.fileName)} />
+            </a>
+            <h3>{proj.title}</h3>
+            <p>{proj.desc}</p>
           </div>
-        </div>
-      {/each}
-      </div>
-
-      <Pagination.Root count={5} let:pages>
-        <Pagination.PrevButton />
-        {#each pages as page (page.key)}
-          <Pagination.Page {page} />
         {/each}
-        <Pagination.NextButton />
-      </Pagination.Root>
-
+      </div>
     </div>
 
     <div class="w-full h-screen grid content-center">
@@ -117,4 +129,4 @@
 </main>
 
 <style>
-</style>
+</style>

src/app.pcss

@@ -96,9 +96,8 @@
   }
 }
 
-
 .indefinities-home-section {
-  min-width: theme(minWidth.20);
+  min-width: theme(minWidth.min);
   max-width: theme(maxWidth.4xl);
   min-height: theme(minHeight.screen);
 }

src/lib/components/Footer.svelte

@@ -11,11 +11,11 @@
   ]
 </script>
 
-<footer class="w-full px-24 py-16">
+<footer class="w-full px-24 py-16 grid">
   <div>
     <h3>© indefinites 2025</h3>
   </div>
-  <div>
+  <div class="col-start-4 col-span-2 flex flex-row justify-around">
     {#each links as l} 
       <a href={l.url} target="_blank">{l.name}</a>
     {/each}

src/lib/components/Nav.svelte

@@ -1,25 +1,35 @@
 <script lang="ts">
-  import { Label, Progress, Switch } from "bits-ui";
-  import { onMount } from "svelte";
+  import { Switch, Progress } from "bits-ui";
   import { toggleMode, mode } from "mode-watcher";
   import MdiWhiteBalanceSunny from "virtual:icons/mdi/white-balance-sunny";
   import MdiMoonAndStars from "virtual:icons/mdi/moon-and-stars";
+  import { onMount } from "svelte";
+
   let y: number, pageHeight: number;
 
   onMount(() => {
-    pageHeight = document.documentElement.clientHeight;
+    const app: any = document.getElementById("app");
+    if (typeof app.scrollHeight === "number") pageHeight = app.scrollHeight;
   });
 </script>
 
-<nav class="fixed w-full h-full">
-  <div class="w-fit flex items-center">
+<nav class="fixed w-full h-full pointer-events-none">
+  <div class="w-fit flex items-center absolute right-[15px] top-[15px]">
     <Switch.Root
       id="light-dark-mode"
       onCheckedChange={toggleMode}
-      class="peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer items-center rounded-full px-[3px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 data-[state=unchecked]:shadow-mini-inset dark:data-[state=checked]:bg-foreground"
+      class="pointer-events-auto mr-5 peer inline-flex h-[36px] min-h-[36px] w-[60px] shrink-0 cursor-pointer 
+      items-center rounded-full px-[3px] transition-colors focus-visible:outline-none
+      focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 
+      focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 
+      data-[state=checked]:bg-foreground data-[state=unchecked]:bg-dark-10 
+      data-[state=unchecked]:shadow-mini-inset dark:data-[state=checked]:bg-foreground"
     >
       <Switch.Thumb
-        class="pointer-events-none block size-[30px] shrink-0 rounded-full bg-background transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini dark:border dark:border-background/30 dark:bg-foreground dark:shadow-popover dark:data-[state=unchecked]:border"
+        class="pointer-events-none block size-[30px] shrink-0 rounded-full bg-background 
+        transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 
+        data-[state=unchecked]:shadow-mini dark:border dark:border-background/30 dark:bg-foreground 
+        dark:shadow-popover dark:data-[state=unchecked]:border"
       />
     </Switch.Root>
     <div>
@@ -34,7 +44,7 @@
   <Progress.Root
     value={y}
     max={pageHeight}
-    class="z-40 w-full absolute right-0 bottom-0 h-[15px] rounded-full bg-dark-10 shadow-mini-inset"
+    class="w-full absolute right-0 bottom-0 h-[15px] rounded-full bg-dark-10 shadow-mini-inset"
   >
     <div
       class="h-full w-full flex-1 rounded-full bg-foreground shadow-mini-inset transition-all"
@@ -44,3 +54,4 @@
 </nav>
 
 <svelte:window bind:scrollY={y} />
+

src/lib/components/Slider.svelte

@@ -0,0 +1,22 @@
+<div class="my-5 mx-auto max-w-full w-[60%]">
+    <Slider.Root
+      value={currProj}
+      let:thumbs
+      min={0}
+      max={numProjects}
+      onValueChange={(value) => (currProj = value)}
+      class="relative flex touch-none select-none items-center max-w-full"
+    >
+      <span
+        class="relative h-2 w-full grow overflow-hidden rounded-full bg-dark-10"
+      >
+        <Slider.Range class="absolute h-full bg-foreground" />
+      </span>
+      {#each thumbs as thumb}
+        <Slider.Thumb
+          {thumb}
+          class="block size-[25px] cursor-pointer rounded-full border border-border-input bg-background shadow  transition-colors hover:border-dark-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 active:scale-98 disabled:pointer-events-none disabled:opacity-50 dark:bg-foreground dark:shadow-card"
+        />
+      {/each}
+    </Slider.Root>
+  </div>

tailwind.config.ts

@@ -14,6 +14,9 @@ const config: Config = {
 			}
 		},
 		extend: {
+			boxShadow: {
+				mini: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', // Example shadow
+			},
 			colors: {
 				border: "hsl(var(--border) / <alpha-value>)",
 				input: "hsl(var(--input) / <alpha-value>)",