feat: replace slider with preline marquee
This commit is contained in:
@@ -5,57 +5,57 @@
|
|||||||
"": {
|
"": {
|
||||||
"name": "site-profile",
|
"name": "site-profile",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/check": "latest",
|
"@astrojs/check": "0.9.9",
|
||||||
"@astrojs/node": "latest",
|
"@astrojs/node": "10.1.1",
|
||||||
"@astrojs/rss": "latest",
|
"@astrojs/rss": "4.0.18",
|
||||||
"@astrojs/sitemap": "latest",
|
"@astrojs/sitemap": "3.7.2",
|
||||||
"@directus/sdk": "latest",
|
"@directus/sdk": "21.3.0",
|
||||||
"@iconify-json/mdi": "latest",
|
"@iconify-json/mdi": "1.2.3",
|
||||||
"@iconify-json/pajamas": "latest",
|
"@iconify-json/pajamas": "1.2.15",
|
||||||
"@iconify-json/simple-icons": "latest",
|
"@iconify-json/simple-icons": "1.2.83",
|
||||||
"@playform/compress": "latest",
|
"@playform/compress": "0.2.3",
|
||||||
"@swup/astro": "latest",
|
"@swup/astro": "1.8.0",
|
||||||
"@tailwindcss/postcss": "latest",
|
"@tailwindcss/postcss": "4.3.0",
|
||||||
"@tailwindcss/vite": "latest",
|
"@tailwindcss/vite": "4.3.0",
|
||||||
"@types/unist": "latest",
|
"@types/unist": "3.0.3",
|
||||||
"astro": "latest",
|
"astro": "6.3.6",
|
||||||
"astro-compress": "latest",
|
"astro-compress": "2.4.1",
|
||||||
"astro-icon": "latest",
|
"astro-icon": "1.1.5",
|
||||||
"dayjs": "latest",
|
"dayjs": "1.11.20",
|
||||||
"markdown-it": "latest",
|
"markdown-it": "14.1.1",
|
||||||
"marked": "latest",
|
"marked": "18.0.4",
|
||||||
"marked-shiki": "latest",
|
"marked-shiki": "1.2.1",
|
||||||
"mdast-util-to-string": "latest",
|
"mdast-util-to-string": "4.0.0",
|
||||||
"photoswipe": "latest",
|
"photoswipe": "5.4.4",
|
||||||
"preline": "latest",
|
"preline": "4.2.0",
|
||||||
"reading-time": "latest",
|
"reading-time": "1.5.0",
|
||||||
"sharp": "latest",
|
"sharp": "0.34.5",
|
||||||
"sharp-ico": "latest",
|
"sharp-ico": "0.1.5",
|
||||||
"shiki": "latest",
|
"shiki": "4.1.0",
|
||||||
"tailwindcss": "latest",
|
"tailwindcss": "4.3.0",
|
||||||
"ultrahtml": "latest",
|
"ultrahtml": "1.6.0",
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@saithodev/semantic-release-gitea": "latest",
|
"@saithodev/semantic-release-gitea": "2.1.0",
|
||||||
"@semantic-release/changelog": "latest",
|
"@semantic-release/changelog": "6.0.3",
|
||||||
"@semantic-release/commit-analyzer": "latest",
|
"@semantic-release/commit-analyzer": "13.0.1",
|
||||||
"@semantic-release/git": "latest",
|
"@semantic-release/git": "10.0.1",
|
||||||
"@semantic-release/npm": "latest",
|
"@semantic-release/npm": "13.1.5",
|
||||||
"@semantic-release/release-notes-generator": "latest",
|
"@semantic-release/release-notes-generator": "14.1.1",
|
||||||
"@tailwindcss/forms": "latest",
|
"@tailwindcss/forms": "0.5.11",
|
||||||
"@tailwindcss/typography": "latest",
|
"@tailwindcss/typography": "0.5.19",
|
||||||
"@types/markdown-it": "latest",
|
"@types/markdown-it": "14.1.2",
|
||||||
"eslint": "latest",
|
"eslint": "10.4.0",
|
||||||
"eslint-config-prettier": "latest",
|
"eslint-config-prettier": "10.1.8",
|
||||||
"eslint-plugin-astro": "latest",
|
"eslint-plugin-astro": "1.7.0",
|
||||||
"eslint-plugin-format": "latest",
|
"eslint-plugin-format": "2.0.1",
|
||||||
"prettier": "latest",
|
"prettier": "3.8.3",
|
||||||
"prettier-plugin-astro": "latest",
|
"prettier-plugin-astro": "0.14.1",
|
||||||
"prettier-plugin-tailwindcss": "latest",
|
"prettier-plugin-tailwindcss": "0.8.0",
|
||||||
"semantic-release": "latest",
|
"semantic-release": "25.0.3",
|
||||||
"semantic-release-export-data": "latest",
|
"semantic-release-export-data": "1.2.0",
|
||||||
"typescript": "latest",
|
"typescript": "6.0.3",
|
||||||
"typescript-eslint": "latest",
|
"typescript-eslint": "8.59.4",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ const experiences = ((await directus.request(
|
|||||||
</time>
|
</time>
|
||||||
</header>
|
</header>
|
||||||
<div class="relative flex flex-col sm:col-span-12 pb-6">
|
<div class="relative flex flex-col sm:col-span-12 pb-6">
|
||||||
<div class="absolute bg-accent -translate-x-[1.71rem] rounded-full h-2 w-2 mt-3"/>
|
<div class="absolute bg-accent translate-x-[-1.71rem] rounded-full h-2 w-2 mt-3"/>
|
||||||
<h3>
|
<h3>
|
||||||
<div
|
<div
|
||||||
class="inline-flex items-center text-2xl leading-tight font-semibold"
|
class="inline-flex items-center text-2xl leading-tight font-semibold"
|
||||||
|
|||||||
@@ -18,150 +18,117 @@ const skills = ((await directus.request(
|
|||||||
<h3 class="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-5">
|
<h3 class="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-5">
|
||||||
Skills
|
Skills
|
||||||
</h3>
|
</h3>
|
||||||
<div>
|
<div class="smooth-reveal relative flex flex-col gap-2 mask-[linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] before:pointer-events-none before:absolute before:inset-y-0 before:inset-s-0 before:z-2 before:w-20 after:pointer-events-none after:absolute after:inset-y-0 after:inset-e-0 after:z-2 after:w-20">
|
||||||
<div class="tech-stack-slider relative overflow-hidden py-4 sm:py-8 mask-[linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
|
<div class="flex">
|
||||||
<!-- Main slider container -->
|
<div class="marquee-track-x animate-[marquee-x_120s_linear_infinite] hover:[animation-play-state:paused] flex w-max gap-4 py-10">
|
||||||
<div class="slider-track animate-slide flex">
|
<div class="flex gap-4">
|
||||||
{[...skills, ...skills, ...skills].map((skill: Skill) => {
|
{[...skills, ...skills, ...skills].map((skill: Skill) => {
|
||||||
return (
|
return (
|
||||||
<div class="skill-card card-base transform hover:-translate-y-2 hover:scale-105 transition-all duration-300 mx-2 min-w-55 sm:mx-4 sm:min-w-70">
|
<figure class="skill-card card-base transform hover:-translate-y-2 hover:scale-105 transition-all duration-300 mx-2 min-w-55 sm:mx-4 sm:min-w-70">
|
||||||
<div class="p-4 sm:p-6">
|
<div class="p-4 sm:p-6">
|
||||||
<div class="flex items-center justify-between mb-4 sm:mb-6">
|
<div class="flex items-center justify-between mb-4 sm:mb-6">
|
||||||
<div class="flex items-center gap-2 sm:gap-4">
|
<div class="flex items-center gap-2 sm:gap-4">
|
||||||
<div class="flex items-center justify-center rounded-lg text-primary">
|
<div class="flex items-center justify-center rounded-lg text-primary">
|
||||||
<Icon name={skill.icon} class="h-8 w-8 sm:h-12 sm:w-12" />
|
<Icon name={skill.icon} class="h-8 w-8 sm:h-12 sm:w-12" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-neutral-900 dark:text-neutral-100 text-base font-semibold sm:text-xl">
|
||||||
|
{skill.title}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-neutral-900 dark:text-neutral-100 text-base font-semibold sm:text-xl">
|
<span class=" bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 font-mono text-xs sm:text-sm rounded-full px-2 sm:px-2.5 py-0.5 sm:py-1">
|
||||||
{skill.title}
|
{skill.level}%
|
||||||
</h3>
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative bg-stone-500/20 dark:bg-stone-500/20 rounded-full h-1.5 sm:h-2 w-full">
|
||||||
|
<div
|
||||||
|
class="progress-bar-animate bg-linear-to-r from-steel via-bermuda to-steel absolute top-0 left-0 h-full rounded-full transition-all duration-1000"
|
||||||
|
style={`width: ${skill.level}%`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between text-secondary font-mono text-[10px] mt-1 sm:mt-2 sm:text-xs">
|
||||||
|
<span>Beginner</span>
|
||||||
|
<span>Advanced</span>
|
||||||
</div>
|
</div>
|
||||||
<span class=" bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 font-mono text-xs sm:text-sm rounded-full px-2 sm:px-2.5 py-0.5 sm:py-1">
|
|
||||||
{skill.level}%
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="relative bg-stone-500/20 dark:bg-stone-500/20 rounded-full h-1.5 sm:h-2 w-full overflow-hidden">
|
</figure>
|
||||||
<div
|
);
|
||||||
class="progress-bar-animate bg-linear-to-r from-steel via-bermuda to-steel absolute top-0 left-0 h-full rounded-full transition-all duration-1000"
|
})}
|
||||||
style={`width: ${skill.level}%`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between text-secondary font-mono text-[10px] mt-1 sm:mt-2 sm:text-xs">
|
|
||||||
<span>Beginner</span>
|
|
||||||
<span>Advanced</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('astro:page-load', () => {
|
function initSkillCards() {
|
||||||
function setupInfiniteScroll() {
|
const cards = document.querySelectorAll<HTMLElement>('.skill-card');
|
||||||
const cards = document.querySelectorAll('.skill-card');
|
if (!cards.length) return;
|
||||||
if (!cards.length) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setupInfiniteScroll();
|
cards.forEach((card) => {
|
||||||
|
// Desktop/Mouse events
|
||||||
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
card.addEventListener('mouseenter', () => {
|
||||||
const cards = document.querySelectorAll('.skill-card');
|
card.style.setProperty('transition', 'transform 0.1s ease, box-shadow 0.1s ease', 'important');
|
||||||
|
|
||||||
if (!isTouchDevice) {
|
|
||||||
cards.forEach((card) => {
|
|
||||||
card.addEventListener('mousemove', (e) => {
|
|
||||||
const rect = card.getBoundingClientRect();
|
|
||||||
const x = e.clientX - rect.left;
|
|
||||||
const y = e.clientY - rect.top;
|
|
||||||
|
|
||||||
const centerX = rect.width / 2;
|
|
||||||
const centerY = rect.height / 2;
|
|
||||||
|
|
||||||
const angleX = (y - centerY) / 15;
|
|
||||||
const angleY = (centerX - x) / 15;
|
|
||||||
|
|
||||||
card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.08) translateZ(20px)`;
|
|
||||||
|
|
||||||
// Dynamic shadow based on tilt
|
|
||||||
const shadowX = (x - centerX) / 25;
|
|
||||||
const shadowY = (y - centerY) / 25;
|
|
||||||
card.style.boxShadow = `
|
|
||||||
${shadowX}px ${shadowY}px 20px rgba(0, 0, 0, 0.1),
|
|
||||||
0 10px 20px rgba(0, 0, 0, 0.05)
|
|
||||||
`;
|
|
||||||
});
|
|
||||||
|
|
||||||
card.addEventListener('mouseleave', () => {
|
|
||||||
card.style.transform = '';
|
|
||||||
card.style.boxShadow = '';
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
// Simpler effects for touch devices
|
|
||||||
cards.forEach((card) => {
|
|
||||||
card.addEventListener('touchstart', () => {
|
|
||||||
card.classList.add('is-touched');
|
|
||||||
});
|
|
||||||
|
|
||||||
card.addEventListener('touchend', () => {
|
card.addEventListener('mousemove', (e: MouseEvent) => {
|
||||||
setTimeout(() => {
|
const rect = card.getBoundingClientRect();
|
||||||
card.classList.remove('is-touched');
|
const x = e.clientX - rect.left;
|
||||||
}, 300);
|
const y = e.clientY - rect.top;
|
||||||
});
|
|
||||||
|
const centerX = rect.width / 2;
|
||||||
|
const centerY = rect.height / 2;
|
||||||
|
|
||||||
|
const angleX = (y - centerY) / 15;
|
||||||
|
const angleY = (centerX - x) / 15;
|
||||||
|
|
||||||
|
card.style.setProperty('transform', `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.08) translateZ(20px)`, 'important');
|
||||||
|
|
||||||
|
const shadowX = (x - centerX) / 25;
|
||||||
|
const shadowY = (y - centerY) / 25;
|
||||||
|
card.style.setProperty('box-shadow', `
|
||||||
|
${shadowX}px ${shadowY}px 20px rgba(0, 0, 0, 0.1),
|
||||||
|
0 10px 20px rgba(0, 0, 0, 0.05)
|
||||||
|
`, 'important');
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
card.addEventListener('mouseleave', () => {
|
||||||
|
card.style.removeProperty('transform');
|
||||||
|
card.style.removeProperty('box-shadow');
|
||||||
|
card.style.removeProperty('transition');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mobile/Touch events
|
||||||
|
card.addEventListener('touchstart', () => {
|
||||||
|
card.classList.add('is-touched');
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
card.addEventListener('touchend', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
card.classList.remove('is-touched');
|
||||||
|
}, 300);
|
||||||
|
}, { passive: true });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Run exactly once on initial load, and again if navigating via Astro View Transitions
|
||||||
|
initSkillCards();
|
||||||
|
document.addEventListener('astro:after-swap', initSkillCards);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Specific css to enable sliding effect */
|
/* Skill card effects */
|
||||||
.slider-track {
|
|
||||||
width: fit-content;
|
|
||||||
animation: scroll 40s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scroll {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(calc(-220px * 6 - 16px * 6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
.slider-track {
|
|
||||||
animation: scroll 80s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scroll {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(calc(-280px * 6 - 32px * 6));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-stack-slider:hover .slider-track {
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-card {
|
.skill-card {
|
||||||
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-card:hover {
|
.skill-card:hover {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reduce animation complexity on mobile */
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.skill-card {
|
.skill-card {
|
||||||
transition:
|
transition:
|
||||||
|
|||||||
+29
-2
@@ -50,7 +50,7 @@
|
|||||||
--color-prose-blog-body: var(--color-neutral-700);
|
--color-prose-blog-body: var(--color-neutral-700);
|
||||||
--color-prose-blog-headings: var(--color-neutral-900);
|
--color-prose-blog-headings: var(--color-neutral-900);
|
||||||
--color-prose-blog-links: var(--color-orange-300);
|
--color-prose-blog-links: var(--color-orange-300);
|
||||||
|
|
||||||
--color-prose-blog-invert-body: var(--color-neutral-400);
|
--color-prose-blog-invert-body: var(--color-neutral-400);
|
||||||
--color-prose-blog-invert-headings: var(--color-neutral-200);
|
--color-prose-blog-invert-headings: var(--color-neutral-200);
|
||||||
|
|
||||||
@@ -74,7 +74,7 @@
|
|||||||
:root {
|
:root {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
--theme-transition: 0.3s ease;
|
--theme-transition: 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -114,6 +114,33 @@
|
|||||||
border-color var(--theme-transition);
|
border-color var(--theme-transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Preline marquee */
|
||||||
|
@keyframes marquee-x {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(calc(-50% - 0.5rem));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes marquee-y {
|
||||||
|
from {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(calc(-50% - 0.5rem));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.marquee-track-x,
|
||||||
|
.marquee-track-y {
|
||||||
|
animation-duration: 1ms;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Typography */
|
/* Typography */
|
||||||
.prose blockquote {
|
.prose blockquote {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|||||||
Reference in New Issue
Block a user