theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-05-29 22:37:44 +02:00
Code Issues Releases Activity

fix: usage of correct heading levels and html tags

Browse Source
This commit is contained in:
Théo LUDWIG
2024-05-16 09:56:19 +02:00
parent 66cf6d7438
commit bbb2e56512
11 changed files with 79 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/Portfolio/PortfolioItem.tsx
View File

@ -13,7 +13,7 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
const { title, description, link, image } = props
return (
<ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
<li>
<a
className="group inline-flex justify-center"
target="_blank"
@ -21,23 +21,25 @@ export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
href={link}
aria-label={title}
>
<div className="flex justify-center">
<Image
quality={100}
className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
width={300}
height={300}
src={image}
alt={title}
/>
</div>
<div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
<h3 className="my-6 text-2xl font-semibold text-primary dark:text-primary-dark">
{title}
</h3>
<p className="mx-4 my-6 font-semibold">{description}</p>
</div>
<ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
<div className="flex justify-center">
<Image
quality={100}
className="size-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
width={300}
height={300}
src={image}
alt={title}
/>
</div>
<div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
<h3 className="my-6 text-2xl font-semibold text-primary dark:text-primary-dark">
{title}
</h3>
<p className="mx-4 my-6 font-semibold">{description}</p>
</div>
</ShadowContainer>
</a>
</ShadowContainer>
</li>
)
}

8
components/Portfolio/index.tsx
View File

@ -12,10 +12,10 @@ export const Portfolio = (): JSX.Element => {
}
return (
<div className="flex w-full flex-wrap justify-center px-3">
{items.map((item, index) => {
return <PortfolioItem key={index} {...item} />
<ul className="flex w-full flex-wrap justify-center px-3">
{items.map((item) => {
return <PortfolioItem key={item.title} {...item} />
})}
</div>
</ul>
)
}