intial

2026-01-05 13:45:51 +01:00
commit 2d15880b6d
103 changed files with 4390 additions and 0 deletions
--- a/src/components/parallax/speed.tsx
+++ b/src/components/parallax/speed.tsx
@@ -0,0 +1,79 @@
+"use client";
+import { useEffect, useState } from 'react';
+import React from 'react';
+import { Line } from '@/components/profile/svgs';
+import { LinesConfig } from '@/types/waves';
+
+const lines: LinesConfig[] = [
+    { id: 1, width: 100, height: 100, left: '5%', initialTop: 300, scrollFactor: 0.8 },
+    { id: 2, width: 120, height: 120, left: '15%', initialTop: 350, scrollFactor: 0.6 },
+    { id: 3, width: 80, height: 80, left: '25%', initialTop: 400, scrollFactor: 0.4, bottom: true },
+    { id: 4, width: 70, height: 70, left: '35%', initialTop: 450, scrollFactor: 0.7, bottom: true },
+    { id: 5, width: 120, height: 120, left: '45%', initialTop: 500, scrollFactor: 0.5, bottom: true, flipped: true },
+    { id: 6, width: 50, height: 50, left: '55%', initialTop: 550, scrollFactor: 0.2, bottom: true, flipped: true },
+    { id: 7, width: 70, height: 70, left: '65%', initialTop: 600, scrollFactor: 0.4, bottom: true },
+    { id: 8, width: 90, height: 90, left: '75%', initialTop: 650, scrollFactor: 0.6 },
+    { id: 9, width: 100, height: 100, left: '35%', initialTop: 700, scrollFactor: 0.8 },
+    { id: 10, width: 120, height: 120, left: '65%', initialTop: 750, scrollFactor: 0.6 },
+    { id: 11, width: 80, height: 80, left: '10%', initialTop: 800, scrollFactor: 0.4 },
+    { id: 12, width: 130, height: 130, left: '20%', initialTop: 850, scrollFactor: 0.5 },
+    { id: 13, width: 110, height: 110, left: '30%', initialTop: 900, scrollFactor: 0.7, flipped: true },
+    { id: 14, width: 70, height: 70, left: '40%', initialTop: 300, scrollFactor: 0.7 },
+    { id: 15, width: 120, height: 120, left: '50%', initialTop: 350, scrollFactor: 0.5, flipped: true },
+    { id: 16, width: 50, height: 50, left: '60%', initialTop: 400, scrollFactor: 0.2 },
+    { id: 17, width: 70, height: 70, left: '70%', initialTop: 450, scrollFactor: 0.4 },
+    { id: 18, width: 90, height: 90, left: '73%', initialTop: 500, scrollFactor: 0.6 },
+    { id: 19, width: 100, height: 100, left: '68%', initialTop: 550, scrollFactor: 0.8 },
+    { id: 20, width: 120, height: 120, left: '5%', initialTop: 600, scrollFactor: 0.6 },
+    { id: 21, width: 80, height: 80, left: '15%', initialTop: 650, scrollFactor: 0.4 },
+    { id: 22, width: 70, height: 70, left: '25%', initialTop: 700, scrollFactor: 0.7 },
+    { id: 23, width: 120, height: 120, left: '35%', initialTop: 750, scrollFactor: 0.5, flipped: true },
+    { id: 24, width: 50, height: 50, left: '45%', initialTop: 800, scrollFactor: 0.2, flipped: true },
+    { id: 25, width: 70, height: 70, left: '55%', initialTop: 850, scrollFactor: 0.4 },
+    { id: 26, width: 90, height: 90, left: '65%', initialTop: 900, scrollFactor: 0.6 },
+    { id: 27, width: 100, height: 100, left: '70%', initialTop: 300, scrollFactor: 0.8 },
+];
+
+export default function Speed() {
+    const [scrolled, setScrolled] = useState<number>(0);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            setScrolled(window.scrollY);
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+    const calculateRockPosition = (config: typeof lines[number]) => {
+        const basePosition = config.bottom
+            ? `calc(100% - ${config.initialTop}%)`
+            : `${config.initialTop}%`;
+
+        return {
+            position: 'absolute',
+            left: config.left,
+            top: `calc(${basePosition} - ${scrolled * config.scrollFactor}px)`,
+            width: `${config.width}px`,
+            height: `${config.height}px`,
+            transform: config.flipped ? 'scaleX(-1)' : 'none',
+        };
+    };
+
+    return (
+        <section>
+            <div className='h-[20vh] relative flex justify-center items-center'>
+                <div className="relative w-full h-full">
+                    {lines.map((config) => {
+                        return (
+                            <Line key={config.id} className="fill-slate-400" width={config.width} height={config.height} style={calculateRockPosition(config) as React.CSSProperties}/>
+                        );
+                    })}
+                </div>
+            </div>
+        </section>
+    );
+}