jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add link and tilt to bio on homepage

Browse source
This commit is contained in:
Justin Edmund 2025-06-10 01:52:34 -07:00
parent 42a84f8ad7
commit 54068f8cdb
2 changed files with 26 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/lib/components/ProjectList.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import ProjectItem from '$components/ProjectItem.svelte' import ProjectItem from '$components/ProjectItem.svelte'
import TiltCard from '$components/TiltCard.svelte'
import type { Project } from '$lib/types/project' import type { Project } from '$lib/types/project'
interface Props { interface Props {
@ -12,16 +13,20 @@
<section class="projects"> <section class="projects">
<ul> <ul>
<li> <li>
<div class="intro-card"> <a href="/about" class="intro-link">
<p class="intro-text"> <TiltCard>
<span class="highlighted">@jedmund</span> is a software designer and strategist based out of <div class="intro-card">
San Francisco. <p class="intro-text">
</p> <span class="highlighted">@jedmund</span> is a software designer and strategist based out of
<p class="intro-text"> San Francisco.
In his 15 year career, he's focused his design practice on building tools that help people </p>
connect with technology—and their own creativity. <p class="intro-text">
</p> In his 15 year career, he's focused his design practice on building tools that help people
</div> connect with technology—and their own creativity.
</p>
</div>
</TiltCard>
</a>
</li> </li>
{#if projects.length === 0} {#if projects.length === 0}
<li> <li>
@ -67,6 +72,15 @@
} }
} }
.intro-link {
text-decoration: none;
display: block;
&:hover {
text-decoration: none;
}
}
.intro-card { .intro-card {
padding: $unit-3x; padding: $unit-3x;
background: $grey-100; background: $grey-100;

11
src/lib/components/TiltCard.svelte
View file

@ -48,17 +48,10 @@
transform-style: preserve-3d; transform-style: preserve-3d;
will-change: transform; will-change: transform;
cursor: pointer; cursor: pointer;
border-radius: $image-corner-radius; border-radius: $card-corner-radius;
overflow: hidden;
// Use mask as a fallback for better clipping
-webkit-mask-image: -webkit-radial-gradient(white, black);
mask-image: radial-gradient(white, black);
&:hover { &:hover {
box-shadow: box-shadow: $card-shadow-hover;
0 6px 20px rgba(0, 0, 0, 0.1),
0 1px 8px rgba(0, 0, 0, 0.06);
} }
} }
</style> </style>