Improve project cards

packages/webapp/src/components/portfolio/ProjectCard.tsx

@@ -28,10 +28,12 @@ export function ProjectCard({
     logo,
     categoryIcon,
 }: ProjectCardProps) {
-    return (
+    const className = accent
-        <article className={accent
+        ? `project-card project-card--${accent} project-card--${variant}`
-            ? `project-card project-card--${accent} project-card--${variant}`
+        : `project-card project-card--${variant}`
-            : `project-card project-card--${variant}`}>
+
+    const content = (
+        <>
             <div className="project-card__topline">
                 <span>{index}</span>
                 <span className="project-card__category">{categoryIcon}{category}</span>
@@ -49,14 +51,26 @@ export function ProjectCard({
                 </ul>
 
                 {href
-                    ? (
+                    ? <span className="project-card__link">
-                        <a className="project-card__link" href={href} target="_blank" rel="noreferrer">
                             {linkLabel}
                             <ArrowUpRight aria-hidden="true" />
-                        </a>
+                        </span>
-                    )
                     : <span className="project-card__status">In development <span aria-hidden="true">●</span></span>}
             </div>
-        </article>
+        </>
     )
+
+    return href
+        ? (
+            <a
+                className={className}
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                aria-label={`${title} — ${linkLabel}`}
+            >
+                {content}
+            </a>
+        )
+        : <article className={className}>{content}</article>
 }

packages/webapp/src/index.css

@@ -557,11 +557,25 @@ button:hover {
   transition: transform 120ms ease, box-shadow 120ms ease;
 }
 
+.project-card[href] {
+  cursor: pointer;
+}
+
 .project-card:hover {
   box-shadow: 2px 2px 0 var(--ink);
   transform: translate(2px, 2px);
 }
 
+.project-card[href]:hover .project-card__logo,
+.project-card[href]:focus-visible .project-card__logo {
+  transform: translateY(-3px) rotate(-1deg);
+}
+
+.project-card[href]:hover .project-card__link svg,
+.project-card[href]:focus-visible .project-card__link svg {
+  transform: translate(2px, -2px);
+}
+
 .project-card--dark {
   background: var(--ink);
   box-shadow: 4px 4px 0 #777;
@@ -631,6 +645,7 @@ button:hover {
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
+  transition: transform 140ms ease;
 }
 
 .project-card__logo img {
@@ -715,12 +730,12 @@ button:hover {
 }
 
 .project-card__link {
-  padding-bottom: 2px;
+  opacity: 0.72;
-  border-bottom: 1px solid currentColor;
 }
 
 .project-card__link svg {
   width: 12px;
+  transition: transform 140ms ease;
 }
 
 .upcoming-section {
@@ -1041,6 +1056,8 @@ button:hover {
 
   .brutal-button,
   .project-card,
+  .project-card__link svg,
+  .project-card__logo,
   .repo-links > a {
     transition: none;
   }

packages/webapp/src/routes/_main.index.tsx

@@ -141,10 +141,10 @@ function RouteComponent() {
                                 title="Effect View"
                                 category="Open source / React"
                                 categoryIcon={<PanelsTopLeft aria-hidden="true" />}
-                                description="A small bridge for writing React function components as composable Effect programs."
+                                description="A comprehensive framework for building React applications with Effect—bringing component programs, typed dependencies, reactive state, and managed lifecycles into one composable architecture."
                                 tags={["Effect", "React", "DX"]}
-                                href="https://www.npmjs.com/package/effect-view"
+                                href="https://thila.dev/effect-view"
-                                linkLabel="View on npm"
+                                linkLabel="Explore project"
                                 accent="teal"
                                 logo={<img src="/logos/effect-view.svg" alt="Effect View" />}
                             />