diff --git a/src/app.config.ts b/src/app.config.ts index 7a509ed47b..aa79d18862 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -40,6 +40,12 @@ export const appConfig = { class: 'font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200', }, + { + type: 'span', + // cursor + class: + 'inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink', + }, ], }, description: `An independent developer coding with love.`, diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 94839c1165..11d7f9a7da 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -88,7 +88,7 @@ const TwoColumnLayout = ({ rightContainerClassName?: string }) => { return ( -
+
{children.slice(0, 2).map((child, i) => { return (
-
{child}
+
{child}
) })} diff --git a/src/styles/theme.css b/src/styles/theme.css index ae3d3df03f..cc96fffc82 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -91,4 +91,20 @@ .group:hover .mask-cover { opacity: 0.5; } + + .animation-blink { + animation: blink 1s ease-in-out infinite alternate; + } + + @keyframes blink { + 0% { + opacity: 0; + } + 30% { + opacity: 1; + } + 100% { + opacity: 1; + } + } }