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

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

@ -48,17 +48,10 @@
transform-style: preserve-3d;
will-change: transform;
cursor: pointer;
border-radius: $image-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);
border-radius: $card-corner-radius;
&:hover {
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.1),
0 1px 8px rgba(0, 0, 0, 0.06);
box-shadow: $card-shadow-hover;
}
}
</style>