// usePrefersReducedMotion.ts
export function usePrefersReducedMotion() {
const reduced = ref(false)
onMounted(() => {
const media = window.matchMedia('(prefers-reduced-motion: reduce)')
reduced.value = media.matches
media.addEventListener('change', (event) => {
reduced.value = event.matches
})
})
return readonly(reduced)
}About me
about-me
My name is Ardit Fazliji. During my Software Engineering studies I chose to further develop my passion for programming, and through my education and various projects I have gained extensive experience in full-stack web development. What I enjoy most is solving complex problems: I take great satisfaction in finding efficient and sustainable solutions. Today I work as a software engineer at bond for web solutions in Rotterdam, and I am looking for a role where I can apply my technical expertise and help build scalable, user-friendly products.
- ardit-nl@outlook.com
- Rotterdam, NL
My name is Ardit Fazliji. During my Software Engineering studies I chose to further develop my passion for programming, and through my education and various projects I have gained extensive experience in full-stack web development. What I enjoy most is solving complex problems: I take great satisfaction in finding efficient and sustainable solutions. Today I work as a software engineer at bond for web solutions in Rotterdam, and I am looking for a role where I can apply my technical expertise and help build scalable, user-friendly products.
Code snippet showcase:
// fluid.ts
/** A CSS clamp() that scales between two viewport widths. */
export function fluid(min: number, max: number, from = 375, to = 1440): string {
const slope = (max - min) / (to - from)
const base = min - slope * from
const rem = (px: number) => `${(px / 16).toFixed(4)}rem`
return `clamp(${rem(min)}, ${rem(base)} + ${(slope * 100).toFixed(4)}vw, ${rem(max)})`
}