theoludwig/.profile
theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2024-12-08 00:44:30 +01:00
Code Issues Releases Activity

fix: add hover effects

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
blog/BlogPosts.tsx
View File

@ -22,7 +22,7 @@ export const BlogPosts = async (): Promise<JSX.Element> => {
locale="en" locale="en"
data-cy={post.slug} 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 <h2
data-cy="blog-post-title" data-cy="blog-post-title"
className="text-xl font-semibold text-primary dark:text-primary-dark" className="text-xl font-semibold text-primary dark:text-primary-dark"

11
components/Header/index.tsx
View File

@ -14,8 +14,11 @@ export const Header = (): JSX.Element => {
return ( 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"> <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>
<h1 className="flex items-center justify-center"> <Link
href="/"
className="flex items-center justify-center transition-all duration-300 ease-in-out hover:scale-105"
>
<Image <Image
quality={100} quality={100}
className="size-16" 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"> <strong className="ml-1 hidden font-headline font-semibold text-primary dark:text-primary-dark sm:block sm:text-xl">
Théo LUDWIG Théo LUDWIG
</strong> </strong>
</h1> </Link>
</Link> </h1>
<div className="flex justify-between"> <div className="flex justify-between">
<div className="flex flex-col items-center justify-center px-6"> <div className="flex flex-col items-center justify-center px-6">
<Link <Link

2
components/OpenSource/Repository.tsx
View File

@ -11,7 +11,7 @@ export const Repository = (props: RepositoryProps): JSX.Element => {
const { name, description, href } = props const { name, description, href } = props
return ( 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"> <a href={href} target="_blank" rel="noopener noreferrer">
<div className="flex"> <div className="flex">
<GitHubIcon className="mr-2 h-6" /> <GitHubIcon className="mr-2 h-6" />

2
components/Profile/SocialMediaList/SocialMediaItem.tsx
View File

@ -13,7 +13,7 @@ export const SocialMediaItem = (props: SocialMediaItemProps): JSX.Element => {
aria-label={ariaLabel} aria-label={ariaLabel}
target="_blank" target="_blank"
rel="noopener noreferrer" 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} {children}
</a> </a>