diff --git a/src/app/globals.css b/src/app/globals.css index ad2da33..7658767 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -90,17 +90,19 @@ video::-webkit-media-controls-start-playback-button { @keyframes scrolling-left1 { 0% { - transform: translateX(200%); + transform: translateX(180vw); } 100% { - transform: translateX(-200%); + transform: translateX(-180vw); } -} +} @keyframes scrolling-left2 { 0% { - transform: translateX(100%); + transform: translateX(120vw); + opacity: 100%; } 100% { - transform: translateX(-300%); + transform: translateX(-240vw); + opacity: 100%; } } diff --git a/src/common/StarContainer/StarContainer.tsx b/src/common/StarContainer/StarContainer.tsx index 9d18d20..cd24e4b 100644 --- a/src/common/StarContainer/StarContainer.tsx +++ b/src/common/StarContainer/StarContainer.tsx @@ -112,7 +112,7 @@ const StarContainer: React.FC> = ({ }, []); const updateStarsByProximity = useCallback( - ({ x, y }: Position) => { + ({ x, y, pageY }: PointerEvent) => { pointerPositionRef.current = { x, y }; if (!starsRef.current) { @@ -120,7 +120,7 @@ const StarContainer: React.FC> = ({ } starsRef.current.forEach((star) => { - const distance = Math.sqrt(Math.pow(star.x - x, 2) + Math.pow(star.y - y, 2)); + const distance = Math.sqrt(Math.pow(star.x - x, 2) + Math.pow(star.y - y - pageY / 9, 2)); const scale = scaleMapperRef.current!(Math.min(distance, vminRef.current! * proximityRatio)); const alpha = alphaMapperRef.current!(Math.min(distance, vminRef.current! * proximityRatio)); diff --git a/src/features/Projects/ProjectCard.tsx b/src/features/Projects/ProjectCard.tsx index b275678..d8ae09b 100644 --- a/src/features/Projects/ProjectCard.tsx +++ b/src/features/Projects/ProjectCard.tsx @@ -1,5 +1,5 @@ import Image from 'next/image'; -import React from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import projectsContent from '@/content/projects.json'; import { cn } from '@/utils/classNames'; @@ -48,14 +48,19 @@ const ProjectCard: React.FC = ({ name, image, background, xHan    {name}

   {name}

diff --git a/src/features/Projects/ProjectSwiper.tsx b/src/features/Projects/ProjectSwiper.tsx index 30cd06d..ee49ac1 100644 --- a/src/features/Projects/ProjectSwiper.tsx +++ b/src/features/Projects/ProjectSwiper.tsx @@ -36,23 +36,25 @@ const ProjectSwiper = () => { effect='fade' rewind > - {projectsContent.PROJECTS.map(({ NAME, IMAGE, BACKGROUND, XHANDLE, YEAR, CLIENT, TAGS, XURL }) => ( - - - - ))} + {projectsContent.PROJECTS.map(({ NAME, IMAGE, BACKGROUND, XHANDLE, YEAR, CLIENT, TAGS, XURL }) => { + return ( + + + + ); + })} );