1
1
mirror of https://github.com/theoludwig/theoludwig.git synced 2024-10-05 13:06:10 +02:00

fix: add hover effects

This commit is contained in:
Théo LUDWIG 2024-05-16 09:26:05 +02:00
parent 9f79b88202
commit 2a635bf3ba
Signed by: theoludwig
GPG Key ID: ADFE5A563D718F3B
4 changed files with 10 additions and 7 deletions

View File

@ -22,7 +22,7 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
locale="en"
data-cy={post.slug}
>
<ShadowContainer className="cursor-pointer p-6 transition duration-200 ease-in-out hover:-translate-y-2">
<ShadowContainer className="cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.02]">
<h2
data-cy="blog-post-title"
className="text-xl font-semibold text-primary dark:text-primary-dark"

View File

@ -14,8 +14,11 @@ export const Header = (): JSX.Element => {
return (
<header className="sticky top-0 z-50 flex w-full justify-between border-b-2 border-gray-600 bg-white px-6 py-2 dark:border-gray-400 dark:bg-black">
<Link href="/">
<h1 className="flex items-center justify-center">
<h1>
<Link
href="/"
className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-105"
>
<Image
quality={100}
className="size-16"
@ -26,8 +29,8 @@ export const Header = (): JSX.Element => {
<strong className="ml-1 hidden font-headline font-semibold text-primary dark:text-primary-dark sm:block sm:text-xl">
Théo LUDWIG
</strong>
</h1>
</Link>
</Link>
</h1>
<div className="flex justify-between">
<div className="flex flex-col items-center justify-center px-6">
<Link

View File

@ -11,7 +11,7 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
const { name, description, href } = props
return (
<ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-transform duration-200 ease-in-out hover:-translate-y-2">
<ShadowContainer className="relative !mb-4 max-h-32 cursor-pointer p-6 transition-all duration-300 ease-in-out hover:scale-[1.03]">
<a href={href} target="_blank" rel="noopener noreferrer">
<div className="flex">
<GitHubIcon className="mr-2 h-6" />

View File

@ -13,7 +13,7 @@ export const SocialMediaItem = (props: SocialMediaItemProps): JSX.Element => {
aria-label={ariaLabel}
target="_blank"
rel="noopener noreferrer"
className="relative inline-block bg-transparent"
className="relative inline-block bg-transparent transition-all duration-300 ease-in-out hover:scale-110"
>
{children}
</a>