This commit is contained in:
Mackie 2026-06-01 17:21:17 +08:00
parent 89dcf251b5
commit b57f9481d1

View file

@ -4,60 +4,201 @@ import React from 'react'
import { InfiniteSlider } from '@/components/ui/infinite-slider' import { InfiniteSlider } from '@/components/ui/infinite-slider'
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/almalinux-original.svg', alt: 'almalinux' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/aftereffects-plain.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/amazonwebservices-original-wordmark.svg', alt: 'amazonwebservices' }, alt: 'aftereffects',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/android-plain-wordmark.svg', alt: 'android' }, },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/angularjs-plain-wordmark.svg', alt: 'angularjs' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/apache-line-wordmark.svg', alt: 'apache' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/almalinux-original.svg',
alt: 'almalinux',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/amazonwebservices-original-wordmark.svg',
alt: 'amazonwebservices',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/android-plain-wordmark.svg',
alt: 'android',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/angularjs-plain-wordmark.svg',
alt: 'angularjs',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/apache-line-wordmark.svg',
alt: 'apache',
},
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/apple-original.svg', alt: 'apple' }, { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/apple-original.svg', alt: 'apple' },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/azure-original-wordmark.svg', alt: 'azure' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/blender-original.svg', alt: 'blender' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/azure-original-wordmark.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/bootstrap-plain-wordmark.svg', alt: 'bootstrap' }, alt: 'azure',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/cloudflare-original-wordmark.svg', alt: 'cloudflare' }, },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/cpanel-original-wordmark.svg', alt: 'cpanel' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/docker-plain-wordmark.svg', alt: 'docker' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/blender-original.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/drupal-plain-wordmark.svg', alt: 'drupal' }, alt: 'blender',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/eslint-plain-wordmark.svg', alt: 'eslint' }, },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/expo-original-wordmark.svg', alt: 'expo' }, {
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/bootstrap-plain-wordmark.svg',
alt: 'bootstrap',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/cloudflare-original-wordmark.svg',
alt: 'cloudflare',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/cpanel-original-wordmark.svg',
alt: 'cpanel',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/docker-plain-wordmark.svg',
alt: 'docker',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/drupal-plain-wordmark.svg',
alt: 'drupal',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/eslint-plain-wordmark.svg',
alt: 'eslint',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/expo-original-wordmark.svg',
alt: 'expo',
},
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/figma-original.svg', alt: 'figma' }, { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/figma-original.svg', alt: 'figma' },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/flutter-original.svg', alt: 'flutter' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/forgejo-original.svg', alt: 'forgejo' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/flutter-original.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/fusion-original.svg', alt: 'fusion' }, alt: 'flutter',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/forgejo-original.svg',
alt: 'forgejo',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/fusion-original.svg',
alt: 'fusion',
},
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/gimp-original.svg', alt: 'gimp' }, { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/gimp-original.svg', alt: 'gimp' },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/github-original-wordmark.svg', alt: 'github' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/gitlab-plain-wordmark.svg', alt: 'gitlab' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/github-original-wordmark.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/googlecloud-original-wordmark.svg', alt: 'googlecloud' }, alt: 'github',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/html5-original-wordmark.svg', alt: 'html5' }, },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/illustrator-original.svg', alt: 'illustrator' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/inkscape-plain-wordmark.svg', alt: 'inkscape' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/gitlab-plain-wordmark.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/javascript-original.svg', alt: 'javascript' }, alt: 'gitlab',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/jira-original-wordmark.svg', alt: 'jira' }, },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/jquery-plain-wordmark.svg', alt: 'jquery' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/kalilinux-original-wordmark.svg', alt: 'kalilinux' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/googlecloud-original-wordmark.svg',
alt: 'googlecloud',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/html5-original-wordmark.svg',
alt: 'html5',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/illustrator-original.svg',
alt: 'illustrator',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/inkscape-plain-wordmark.svg',
alt: 'inkscape',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/javascript-original.svg',
alt: 'javascript',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/jira-original-wordmark.svg',
alt: 'jira',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/jquery-plain-wordmark.svg',
alt: 'jquery',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/kalilinux-original-wordmark.svg',
alt: 'kalilinux',
},
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/linux-original.svg', alt: 'linux' }, { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/linux-original.svg', alt: 'linux' },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/magento-plain-wordmark.svg', alt: 'magento' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/mongodb-original-wordmark.svg', alt: 'mongodb' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/magento-plain-wordmark.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/nextjs-original-wordmark.svg', alt: 'nextjs' }, alt: 'magento',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/mongodb-original-wordmark.svg',
alt: 'mongodb',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/nextjs-original-wordmark.svg',
alt: 'nextjs',
},
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/nginx-original.svg', alt: 'nginx' }, { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/nginx-original.svg', alt: 'nginx' },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/nodejs-original-wordmark.svg', alt: 'nodejs' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/opencl-original.svg', alt: 'opencl' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/nodejs-original-wordmark.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/photoshop-original.svg', alt: 'photoshop' }, alt: 'nodejs',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/opencl-original.svg',
alt: 'opencl',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/photoshop-original.svg',
alt: 'photoshop',
},
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/php-original.svg', alt: 'php' }, { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/php-original.svg', alt: 'php' },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/premierepro-original.svg', alt: 'premierepro' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/prometheus-plain-wordmark.svg', alt: 'prometheus' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/premierepro-original.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/proxmox-original-wordmark.svg', alt: 'proxmox' }, alt: 'premierepro',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/python-original-wordmark.svg', alt: 'python' }, },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/rails-plain-wordmark.svg', alt: 'rails' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/reactnative-original-wordmark.svg', alt: 'reactnative' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/prometheus-plain-wordmark.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/reactnavigation-original.svg', alt: 'reactnavigation' }, alt: 'prometheus',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/slack-original-wordmark.svg', alt: 'slack' }, },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/swift-original-wordmark.svg', alt: 'swift' }, {
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/typescript-original.svg', alt: 'typescript' }, src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/proxmox-original-wordmark.svg',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/web3js-original.svg', alt: 'web3js' }, alt: 'proxmox',
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/wordpress-original.svg', alt: 'wordpress' }, },
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/python-original-wordmark.svg',
alt: 'python',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/rails-plain-wordmark.svg',
alt: 'rails',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/reactnative-original-wordmark.svg',
alt: 'reactnative',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/reactnavigation-original.svg',
alt: 'reactnavigation',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/slack-original-wordmark.svg',
alt: 'slack',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/swift-original-wordmark.svg',
alt: 'swift',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/typescript-original.svg',
alt: 'typescript',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/web3js-original.svg',
alt: 'web3js',
},
{
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/wordpress-original.svg',
alt: 'wordpress',
},
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/xcode-original.svg', alt: 'xcode' }, { src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/xcode-original.svg', alt: 'xcode' },
{ src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/zend-original-wordmark.svg', alt: 'zend' }, {
src: 'https://portfolio-media.s3web.bymackie.com/Skill_logo/zend-original-wordmark.svg',
alt: 'zend',
},
] ]
type SkillsMarqueeBlockProps = { type SkillsMarqueeBlockProps = {
@ -77,11 +218,11 @@ export function SkillsMarqueeBlock({ heading }: SkillsMarqueeBlockProps) {
key={l.alt} key={l.alt}
src={l.src} src={l.src}
alt={l.alt} alt={l.alt}
className="h-14 w-auto flex-shrink-0 pointer-events-none select-none grayscale opacity-40 dark:opacity-80 dark:brightness-200" className="max-h-8 max-w-full w-auto object-contain pointer-events-none select-none grayscale opacity-40 dark:opacity-60"
/> />
))} ))}
</InfiniteSlider> </InfiniteSlider>
</div> </div>
</section> </section>
) )
} }