greyscale
This commit is contained in:
parent
270e7afecc
commit
322c75eaef
1 changed files with 13 additions and 20 deletions
|
|
@ -1,9 +1,7 @@
|
||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { cn } from '@/utilities/ui'
|
|
||||||
import { InfiniteSlider } from '@/components/ui/infinite-slider'
|
import { InfiniteSlider } from '@/components/ui/infinite-slider'
|
||||||
import { useThemeMode } from '@/hooks/useThemeMode'
|
|
||||||
|
|
||||||
const LOGOS = [
|
const LOGOS = [
|
||||||
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/aftereffects-plain.svg', alt: 'aftereffects' },
|
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/aftereffects-plain.svg', alt: 'aftereffects' },
|
||||||
|
|
@ -67,13 +65,9 @@ type SkillsMarqueeBlockProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SkillsMarqueeBlock({ heading }: SkillsMarqueeBlockProps) {
|
export function SkillsMarqueeBlock({ heading }: SkillsMarqueeBlockProps) {
|
||||||
const { isDark } = useThemeMode()
|
|
||||||
const text = isDark ? 'text-white/40' : 'text-black/40'
|
|
||||||
const border = isDark ? 'border-white/10' : 'border-black/10'
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={cn('relative border-t py-8', border)}>
|
<section className="relative border-t border-foreground/10 py-8">
|
||||||
<p className={cn('mb-6 text-center text-xs tracking-widest uppercase px-6', text)}>
|
<p className="mb-6 text-center text-xs tracking-widest uppercase px-6 text-foreground/40">
|
||||||
{heading || 'Skills'}
|
{heading || 'Skills'}
|
||||||
</p>
|
</p>
|
||||||
<div className="[mask-image:linear-gradient(to_right,transparent,black,transparent)]">
|
<div className="[mask-image:linear-gradient(to_right,transparent,black,transparent)]">
|
||||||
|
|
@ -83,7 +77,6 @@ export function SkillsMarqueeBlock({ heading }: SkillsMarqueeBlockProps) {
|
||||||
key={l.alt}
|
key={l.alt}
|
||||||
src={l.src}
|
src={l.src}
|
||||||
alt={l.alt}
|
alt={l.alt}
|
||||||
style={{ filter: 'grayscale(1) var(--tw-invert)' }}
|
|
||||||
className="h-14 w-auto flex-shrink-0 pointer-events-none select-none grayscale opacity-25 dark:opacity-35"
|
className="h-14 w-auto flex-shrink-0 pointer-events-none select-none grayscale opacity-25 dark:opacity-35"
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue