From 82cf30447bbdf24fd677d8f9fb89e1a8e651a589 Mon Sep 17 00:00:00 2001
From: "Wyatt J. Miller" <wyatt@wyattjmiller.com>
Date: Thu, 31 Jul 2025 22:45:23 -0400
Subject: [PATCH] added color accents to cards, underlines to subheaders

---
 frontend/components/PostBody.tsx     |  2 +-
 frontend/components/PostCard.tsx     | 15 ++++++++++++---
 frontend/components/PostCarousel.tsx |  8 ++++++--
 frontend/islands/ProjectCard.tsx     | 13 +++++++++++--
 frontend/routes/posts/index.tsx      | 13 +++++++------
 frontend/routes/projects/index.tsx   |  2 +-
 6 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/frontend/components/PostBody.tsx b/frontend/components/PostBody.tsx
index 81bf1a8..4d0c0ab 100644
--- a/frontend/components/PostBody.tsx
+++ b/frontend/components/PostBody.tsx
@@ -4,7 +4,7 @@ export const PostBody = function PostBody({ post }: PostBodyOpts) {
   return (
     <div class="mx-auto max-w-4xl p-4 bg-[#313244]">
       <div
-        class="p-6 bg-[#45475a] shadow-md rounded-lg text-[#f5e0dc] post-content overflow-hidden break-words hyphens-auto max-w-full
+        class="p-6 bg-[#484659] shadow-md rounded-lg text-[#f5e0dc] post-content overflow-hidden break-words hyphens-auto max-w-full
               [&>*]:max-w-5xl [&>*]:overflow-wrap-anywhere"
         dangerouslySetInnerHTML={{ __html: post.body }}
       ></div>
diff --git a/frontend/components/PostCard.tsx b/frontend/components/PostCard.tsx
index b541804..834e003 100644
--- a/frontend/components/PostCard.tsx
+++ b/frontend/components/PostCard.tsx
@@ -2,15 +2,24 @@ import { convertUtc } from "../lib/convertUtc.ts";
 import { truncateString } from "../lib/truncate.ts";
 import { Post } from "../types/index.ts";
 
-export const PostCard = function PostCard({ post }: { post: Post }) {
+export const PostCard = function PostCard({
+  post,
+  colorValue,
+}: {
+  post: Post;
+  colorValue: string;
+}) {
   return (
-    <div class="p-6 bg-[#484659] rounded-lg shadow-xl transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
+    <div
+      class={`p-6 bg-[#484659] rounded-lg shadow-xl transition-all duration-300 ease-in-out border-b-4 hover:shadow-xl hover:scale-105`}
+      style={{ borderBottomColor: colorValue }}
+    >
       <a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}>
         <h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
         <p class="text-white">
           Written by{" "}
           <a
-            class="text-white transition-all duration-300 ease-in-out hover:text-[#74c7ec] hover:drop-shadow-[0_0_10px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
+            class="text-white transition-all duration-300 ease-in-out hover:text-[#cba6f7] hover:drop-shadow-[0_0_10px_rgba(96,165,250,0.7)] hover:scale-110 cursor-pointer"
             href={`${Deno.env.get("BASE_URI_WEB")}/authors/${post.author_id}`}
           >
             {post.first_name} {post.last_name}
diff --git a/frontend/components/PostCarousel.tsx b/frontend/components/PostCarousel.tsx
index 7421147..fef07b7 100644
--- a/frontend/components/PostCarousel.tsx
+++ b/frontend/components/PostCarousel.tsx
@@ -3,15 +3,19 @@ import { Post } from "../types/index.ts";
 
 interface PostOpts {
   posts: Post[];
+  colorValue: string;
 }
 
-export const PostCarousel = function PostCarousel({ posts }: PostOpts) {
+export const PostCarousel = function PostCarousel({
+  posts,
+  colorValue,
+}: PostOpts) {
   return (
     <div className="flex w-full justify-start items-start bg-[#313244] p-8">
       <div className="max-w-7xl mx-auto">
         <div className="flex flex-wrap justify-center gap-3">
           {posts.map((post: Post) => (
-            <PostCard key={post.post_id} post={post} />
+            <PostCard key={post.post_id} post={post} colorValue={colorValue} />
           ))}
         </div>
       </div>
diff --git a/frontend/islands/ProjectCard.tsx b/frontend/islands/ProjectCard.tsx
index 1212d1f..73bc65e 100644
--- a/frontend/islands/ProjectCard.tsx
+++ b/frontend/islands/ProjectCard.tsx
@@ -2,8 +2,17 @@ export const ProjectCard = function ProjectCard(props: ProjectProps) {
   return (
     <div
       class={`md:m-8 group space-y-1 rounded-md ${
-        props.wip ? "border-2 border-dashed" : "cursor-pointer"
-      } bg-[#44485b] px-3 py-2 m-4 shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105`}
+        props.wip ? "border-2" : "cursor-pointer"
+      } bg-[#44485b] px-3 py-2 m-4 shadow-md transition-all duration-300 ease-in-out border-b-4 border-b-[#94e2d5] hover:shadow-xl hover:scale-105`}
+      style={
+        props.wip
+          ? {
+              borderTopStyle: "dashed",
+              borderRightStyle: "dashed",
+              borderLeftStyle: "dashed",
+            }
+          : {}
+      }
       onClick={() => props.repo && open(props.repo, "_blank")}
     >
       <div class="flex items-center justify-between">
diff --git a/frontend/routes/posts/index.tsx b/frontend/routes/posts/index.tsx
index 1c9de51..409672c 100644
--- a/frontend/routes/posts/index.tsx
+++ b/frontend/routes/posts/index.tsx
@@ -52,10 +52,11 @@ export default function PostPage({ data }: PageProps<PageData>) {
             Featured Posts
           </h2>
         </div>
-        <div className="text-lg font-thin italic text-white mb-4 text-center flex">
+
+        <div className="text-lg font-thin italic text-white mb-4 text-center flex underline decoration-[#89b4fa] decoration-2">
           Ignite the impossible
         </div>
-        <PostCarousel posts={featuredPosts} />
+        <PostCarousel posts={featuredPosts} colorValue="#89b4fa" />
       </section>
       <section>
         <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
@@ -64,10 +65,10 @@ export default function PostPage({ data }: PageProps<PageData>) {
             Recent Posts
           </h2>
         </div>
-        <div className="text-lg font-thin italic mb-4 text-white text-center flex">
+        <div className="text-lg font-thin italic mb-4 text-white text-center flex underline decoration-[#89dceb] decoration-2">
           Now with 100% fresh perspective
         </div>
-        <PostCarousel posts={recentPosts} />
+        <PostCarousel posts={recentPosts} colorValue="#89dceb" />
       </section>
       <section>
         <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
@@ -76,10 +77,10 @@ export default function PostPage({ data }: PageProps<PageData>) {
             Popular Posts
           </h2>
         </div>
-        <div className="text-lg font-thin italic mb-4 text-white text-center flex">
+        <div className="text-lg font-thin italic mb-4 text-white text-center flex underline decoration-[#b4befe] decoration-2">
           Content may cause uncontrollable reading
         </div>
-        <PostCarousel posts={popularPosts} />
+        <PostCarousel posts={popularPosts} colorValue="#b4befe" />
       </section>
     </div>
   );
diff --git a/frontend/routes/projects/index.tsx b/frontend/routes/projects/index.tsx
index 507effb..40b50e8 100644
--- a/frontend/routes/projects/index.tsx
+++ b/frontend/routes/projects/index.tsx
@@ -40,7 +40,7 @@ export default function Projects({ data }: PageProps<ProjectData>) {
           Here's a collection of software and electronics projects I've been
           tinkering with during my free time - some are ongoing adventures,
           others are finished experiments, but they've all been exciting
-          challenges that keep me busy when I'm not doing the "real work" stuff!
+          challenges that keep me busy when I'm not doing "real work" stuff!
         </p>
         <div class="grid grid-cols-1 sm:grid-cols-2">
           {projects.map((project: any) => {