diff --git a/packages/webapp/src/components/portfolio/ProjectCard.tsx b/packages/webapp/src/components/portfolio/ProjectCard.tsx index 25a0141..2d63ab1 100644 --- a/packages/webapp/src/components/portfolio/ProjectCard.tsx +++ b/packages/webapp/src/components/portfolio/ProjectCard.tsx @@ -28,10 +28,12 @@ export function ProjectCard({ logo, categoryIcon, }: ProjectCardProps) { - return ( -
+ const className = accent + ? `project-card project-card--${accent} project-card--${variant}` + : `project-card project-card--${variant}` + + const content = ( + <>
{index} {categoryIcon}{category} @@ -49,14 +51,26 @@ export function ProjectCard({ {href - ? ( - + ? {linkLabel} - ) + : In development }
-
+ ) + + return href + ? ( + + {content} + + ) + :
{content}
} diff --git a/packages/webapp/src/index.css b/packages/webapp/src/index.css index 42d1993..d283951 100644 --- a/packages/webapp/src/index.css +++ b/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; - border-bottom: 1px solid currentColor; + opacity: 0.72; } .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; } diff --git a/packages/webapp/src/routes/_main.index.tsx b/packages/webapp/src/routes/_main.index.tsx index f9117ff..337b1f7 100644 --- a/packages/webapp/src/routes/_main.index.tsx +++ b/packages/webapp/src/routes/_main.index.tsx @@ -141,10 +141,10 @@ function RouteComponent() { title="Effect View" category="Open source / React" categoryIcon={