mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

fix(carousel): restore center start, fix drag events, remove favicon from manifest, optimize framer-motion

Browse Source
This commit is contained in:
Marc Mintel
2026-06-23 15:20:56 +02:00
parent 3d48359768
commit 1d07e47e5d
3 changed files with 3651 additions and 3506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/manifest.ts
View File

@@ -10,11 +10,7 @@ export default function manifest(): MetadataRoute.Manifest {
background_color: '#001a4d', background_color: '#001a4d',
theme_color: '#001a4d', theme_color: '#001a4d',
icons: [ icons: [
{
src: '/favicon.ico',
sizes: 'any',
type: 'image/x-icon',
},
{ {
src: '/logo.png', src: '/logo.png',
sizes: '512x512', sizes: '512x512',

106
components/blocks/ReferencesSlider.tsx
View File

@@ -107,27 +107,27 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
</div> </div>
</div> </div>
<div className="container relative z-10"> <div className="relative z-10">
<div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" /> <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
{/* Carousel: stays inside container for left alignment, breaks right to viewport edge */} {/* Carousel: breaks viewport edge on both sides but initial padding aligns with container */}
<div <LazyMotion features={domAnimation}>
ref={containerRef} <div
onMouseDown={onMouseDown} ref={containerRef}
onMouseLeave={onMouseLeave} onMouseDown={onMouseDown}
onMouseUp={onMouseUp} onMouseLeave={onMouseLeave}
onMouseMove={onMouseMove} onMouseUp={onMouseUp}
style={{ marginRight: 'calc(-50vw + 50%)' }} onMouseMove={onMouseMove}
className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`} className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-6 md:px-[max(2rem,calc((100vw-1280px)/2))] lg:px-[max(2.5rem,calc((100vw-1280px)/2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
> >
{references.map((ref, i) => { {references.map((ref, i) => {
const imgSrc = ref.image const imgSrc = ref.image
? (typeof ref.image === 'string' ? ref.image : ref.image.url) ? (typeof ref.image === 'string' ? ref.image : ref.image.url)
: fallbacks[i % fallbacks.length]; : fallbacks[i % fallbacks.length];
return ( return (
<LazyMotion key={ref.id} features={domAnimation}>
<m.div <m.div
key={ref.id}
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-50px" }} viewport={{ once: true, margin: "-50px" }}
@@ -135,44 +135,44 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto" className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
> >
<Link <Link
href={`/${locale}/referenzen#${ref.slug}`} href={`/${locale}/referenzen#${ref.slug}`}
onClick={(e) => { onClick={(e) => {
if (dragDistanceRef.current > 5) { if (dragDistanceRef.current > 5) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
}} }}
onDragStart={(e) => e.preventDefault()} onDragStart={(e) => e.preventDefault()}
draggable={false}
data-testid="reference-tile"
className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl cursor-pointer"
>
<Image
draggable={false} draggable={false}
src={imgSrc} data-testid="reference-tile"
alt={ref.title} className="block relative select-none aspect-[16/10] bg-neutral-800 rounded-2xl overflow-hidden mb-5 border border-white/5 shadow-2xl cursor-pointer"
fill >
sizes="(max-width: 768px) 320px, 480px" <Image
className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none" draggable={false}
/> src={imgSrc}
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" /> alt={ref.title}
fill
<HoverShineOverlay /> sizes="(max-width: 768px) 320px, 480px"
className="object-cover saturate-50 opacity-70 group-hover:scale-105 group-hover:opacity-100 group-hover:saturate-100 transition-all duration-700 ease-in-out pointer-events-none"
<div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10"> />
<span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30"> <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
{ref.category}
</span> <HoverShineOverlay />
<h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
</div> <div className="absolute bottom-6 left-6 right-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none bg-black/60 backdrop-blur-sm p-4 rounded-xl border border-white/10">
</Link> <span className="inline-block py-1 px-3 rounded-full bg-primary/20 text-white text-[10px] font-bold uppercase tracking-widest mb-2 border border-primary/30">
{ref.category}
</span>
<h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
</div>
</Link>
</m.div> </m.div>
</LazyMotion> );
); })}
})} {/* Right padding spacer so last card doesn't clip at viewport edge */}
{/* Right padding spacer so last card doesn't clip at viewport edge */} <div className="flex-shrink-0 w-6" aria-hidden="true" />
<div className="flex-shrink-0 w-6" aria-hidden="true" /> </div>
</div> </LazyMotion>
</div> </div>
<div className="container relative z-10 mt-4 flex justify-center"> <div className="container relative z-10 mt-4 flex justify-center">

7045
reports/lighthouse.txt
View File

File diff suppressed because one or more lines are too long