From 098490819280153f00fb2b4688f61a921dc4beed Mon Sep 17 00:00:00 2001
From: Ben C <ben@bwc9876.dev>
Date: Fri, 8 May 2026 12:32:38 -0400
Subject: [PATCH] style: less motion

---
 {public => src/assets}/pfp-lines.svg      |  0
 src/components/projects/ProjectCard.astro | 24 +++++++---------
 src/content/posts/use_typst.mdx           | 21 +++++++-------
 src/layouts/Layout.astro                  | 35 +----------------------
 src/pages/index.astro                     | 27 ++++-------------
 5 files changed, 27 insertions(+), 80 deletions(-)
 rename {public => src/assets}/pfp-lines.svg (100%)

diff --git a/public/pfp-lines.svg b/src/assets/pfp-lines.svg
similarity index 100%
rename from public/pfp-lines.svg
rename to src/assets/pfp-lines.svg
diff --git a/src/components/projects/ProjectCard.astro b/src/components/projects/ProjectCard.astro
index 73dd0b6..233373c 100644
--- a/src/components/projects/ProjectCard.astro
+++ b/src/components/projects/ProjectCard.astro
@@ -42,7 +42,7 @@ const bgImage = await getImage({
 </a>
 
 <style>
-  :not(.project-name) {
+  :not(h3) {
     text-decoration: none !important;
   }
 
@@ -56,6 +56,16 @@ const bgImage = await getImage({
     margin: var(--1) var(--1) 0 var(--1);
   }
 
+  a:hover {
+    h3 {
+      text-decoration: underline;
+    }
+
+    article {
+      background-color: color(from var(--secondary) srgb r calc(g + 0.05) b);
+    }
+  }
+
   p {
     margin: var(--1);
   }
@@ -69,18 +79,6 @@ const bgImage = await getImage({
     border-radius: 5px;
   }
 
-  a {
-    transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.4s;
-  }
-
-  a:hover {
-    transform: translateY(calc(5px * -1));
-  }
-
-  a:hover img {
-    transform: scale(1.02);
-  }
-
   span {
     flex-grow: 1;
     text-align: center;
diff --git a/src/content/posts/use_typst.mdx b/src/content/posts/use_typst.mdx
index d88305f..262b8ed 100644
--- a/src/content/posts/use_typst.mdx
+++ b/src/content/posts/use_typst.mdx
@@ -9,15 +9,15 @@ I don't really like any of the options to create documents right now. Of course
 
 ## Why Not GDocs/Word?
 
-Go ask someone to make a heading in Word. I almost guarantee you they will just make a regular paragraph, increase the font size, maybe bold it, and then call it a day. This is objectively not a heading! 
+Go ask someone to make a heading in Word. I almost guarantee you they will just make a regular paragraph, increase the font size, maybe bold it, and then call it a day. This is objectively not a heading!
 
-Unsurprisingly, documents have structure. The elements of page have semantics associated with them separate from visual style. If you don't mark headings correctly, screen readers won't be able to build a hierarchy, PDF readers can't make a table of contents to easily jump to sections. 
+Unsurprisingly, documents have structure. The elements of page have semantics associated with them separate from visual style. If you don't mark headings correctly, screen readers won't be able to build a hierarchy, PDF readers can't make a table of contents to easily jump to sections.
 
-This is one of the issues I have with graphical word processors, they hide the document structure and only focus on visuals. Of course, if people all knew how to use these programs properly, it wouldn't be an issue. 
+This is one of the issues I have with graphical word processors, they hide the document structure and only focus on visuals. Of course, if people all knew how to use these programs properly, it wouldn't be an issue.
 
 You can actually make a proper structure. First use the element selector to set the text to a heading, style it how you want, then go back into the element selector and apply the style for it. Boom! Custom styles headings that actually are headings.
 
-The issue is, people don't know this. We're taught surface level knowledge about these applications and these gaps in understanding make it very hard for everyone else. 
+The issue is, people don't know this. We're taught surface level knowledge about these applications and these gaps in understanding make it very hard for everyone else.
 
 Hiding details also makes it hard to make large edits to a page. Ever try moving a picture? Ever want to move a paragraph easily but selecting elements with different styles is always weird? This is a major shortcoming of these editors, as soon as you have any complex structure or layout to your page, edits become very annoying.
 
@@ -46,7 +46,7 @@ Hello world
 You can do basic inline styling with a similar syntax to markdown.
 
 ```typ
-*Bold* 
+*Bold*
 _Italics_
 
 = Heading 1
@@ -137,7 +137,7 @@ The [official Typst tutorial](https://typst.app/docs/tutorial/) goes into much m
 
 ## How I've Used Typst
 
-Some samples of documents I have created with Typst. 
+Some samples of documents I have created with Typst.
 
 ### A Zine
 
@@ -162,7 +162,7 @@ Notably I structure my data in a list and use ✨programming✨ to iterate throu
 
 ### An Academic Poster
 
-Using [peace-of-posters](https://typst.app/universe/package/peace-of-posters/) for layout. 
+Using [peace-of-posters](https://typst.app/universe/package/peace-of-posters/) for layout.
 
 I also used the amazing [lilaq](https://lilaq.org/) library to render graphs _directly from our CSV data_! We had to use [Komet](https://typst.app/universe/package/komet) to get a histogram.
 
@@ -172,7 +172,7 @@ For the diagram I used [Fletcher](https://typst.app/universe/package/fletcher/).
 
 ## ... And It Was Easy
 
-Like actually, it was so nice using a program that just _works_. 
+Like actually, it was so nice using a program that just _works_.
 
 - When you set the right page size, everything is sharp and clear
 
@@ -180,11 +180,10 @@ Like actually, it was so nice using a program that just _works_.
 
 - You can get very far just using the official docs and searching for packages when needed
 
-- You get a nicely structured PDF by default, and it has very nice accessibility checking  
+- You get a nicely structured PDF by default, and it has very nice accessibility checking
 
-- You can use Typst locally and check-in source files into version control. 
+- You can use Typst locally and check-in source files into version control.
 
 - There is (experimental) support for HTML output.
 
 So... I'm asking you to please just try it, please 🥺.
-
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1a3f7b8..3012420 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -120,10 +120,7 @@ const canonical = Astro.url.toString();
     background-image: url("@assets/bg-tile.webp");
     background-repeat: round;
     background-blend-mode: multiply;
-    animation:
-      rainbow 5s linear infinite,
-      bg-scroll 120s linear infinite;
-
+    animation: rainbow 5s linear infinite;
     margin: 0;
     padding: 0;
     display: flex;
@@ -142,18 +139,6 @@ const canonical = Astro.url.toString();
     border-bottom: var(--section-border);
   }
 
-  @keyframes bg-scroll {
-    0% {
-      background-position: 0 0;
-    }
-    50% {
-      background-position: 50% 50%;
-    }
-    100% {
-      background-position: 100% 100%;
-    }
-  }
-
   @keyframes rainbow {
     0% {
       backdrop-filter: hue-rotate(0deg);
@@ -226,24 +211,6 @@ const canonical = Astro.url.toString();
     width: var(--4);
     height: var(--4);
     border-radius: 100%;
-    transition: transform 800ms
-      linear(
-        0,
-        0.36 6.7%,
-        0.635 13.9%,
-        0.832 21.8%,
-        0.904 26.1%,
-        0.958 30.6%,
-        1.015 38.6%,
-        1.036 48.1%,
-        1.034 56.4%,
-        1.005 81.2%,
-        1
-      );
-
-    @starting-style {
-      transform: translateX(calc(-1 * 50vw - var(--5))) rotate(-300deg);
-    }
   }
 
   main {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 700754e..9b2f462 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -63,17 +63,9 @@ import { Image } from "astro:assets";
       }
     }
 
-    @keyframes glow {
-      0% {
-        filter: drop-shadow(0 0 0 var(--primary));
-      }
-      100% {
-        filter: drop-shadow(0 0 450px var(--primary));
-      }
-    }
-
     .hero-image {
-      --anim-props: 900ms 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
+      box-shadow: 0 0 450px var(--primary);
+      /* filter: drop-shadow(0 0 450px var(--primary)); */
       align-items: center;
       align-self: center;
       position: relative;
@@ -91,20 +83,11 @@ import { Image } from "astro:assets";
       clip-path: circle();
     }
 
-    @keyframes pop {
-      from {
-        transform: scale(0);
-      }
-      to {
-        transform: scale(1.8);
-      }
-    }
-
     .hero-image:after {
-      animation: pop var(--anim-props);
+      transform: scale(1.8);
       content: "";
-      mask: url("/pfp-lines.svg") no-repeat 50% 50%;
-      -webkit-mask: url("/pfp-lines.svg") no-repeat 50% 50%;
+      mask: url("@assets/pfp-lines.svg") no-repeat 50% 50%;
+      -webkit-mask: url("@assets/pfp-lines.svg") no-repeat 50% 50%;
       -webkit-mask-size: cover;
       mask-size: cover;
       display: inline-block;
-- 
2.51.2