-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5c43873
commit 835fbbf
Showing
10 changed files
with
436 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| const img = 'https://media.licdn.com/dms/image/D5603AQEjwJTzxoowUg/profile-displayphoto-shrink_800_800/0/1683264970160?e=2147483647&v=beta&t=80g7pjhga2ytWSd020WK9sjNTvZKNeUh3nDkfZGC0YY' | ||
|
|
||
| export default function About() { | ||
| return ( | ||
| <section className="w-full min-h-screen max-w-5xl mx-auto px-4 font-fira"> | ||
| <div className="flex flex-col"> | ||
| <div className="p-1 rounded-full animate-text bg-gradient-to-r from-teal-300 via-purple-500 to-orange-500 self-center"> | ||
| <img src={img} className="w-64 h-64 object-cover rounded-full" /> | ||
| </div> | ||
| <div className="text-3xl md:text-4xl text-center pt-12"> | ||
| Full Stack Web Developer | ||
| </div> | ||
| <div className="text-xl md:text-2xl text-center pt-4"> | ||
| Hello! I am a freelancer from Johor Bahru and in the process of making robust web and mobile apps. | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { motion } from "framer-motion"; | ||
| import { slideIn } from "../../../utils/motion"; | ||
| import { TypeAnimation } from 'react-type-animation'; | ||
|
|
||
| export default function Hero() { | ||
| return ( | ||
| <section | ||
| className="w-screen max-w-5xl min-h-screen mx-auto px-4 flex flex-col justify-center items-center flex-wrap"> | ||
| <h1 className="font-normal text-3xl md:text-4xl inline-block font-fira">I am <span className="animate-text font-bold bg-clip-text text-transparent bg-gradient-to-r from-teal-300 via-purple-500 to-orange-500"> | ||
| <TypeAnimation | ||
| sequence={[ | ||
| 'Sadman Yasar Sayem', | ||
| 1000, // Waits 1s | ||
| 'a Full Stack Developer', | ||
| 2000, // Waits 2s | ||
| 'building scalable systems 🚀', | ||
| 2000, | ||
| () => { | ||
| console.log('Sequence completed'); | ||
| }, | ||
| ]} | ||
| wrapper="span" | ||
| cursor={true} | ||
| repeat={Infinity} | ||
| /> | ||
| </span></h1> | ||
| </section> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { useEffect, useRef, useState } from "react"; | ||
| import { motion, useScroll, wrap, useSpring, useVelocity, useTransform } from "framer-motion"; | ||
| import { gsap } from "gsap"; | ||
| import { ScrollSmoother } from "gsap/ScrollSmoother"; | ||
|
|
||
| gsap.registerPlugin(ScrollSmoother); | ||
|
|
||
| const techIcons = ['🚀', '🚗', '⚛', '🏀', '🥎', '🚀', '🚗', '⚛', '🏀', '🥎']; | ||
|
|
||
| function ParallaxText({ children, baseVelocity = 100 }) { | ||
| const [numOfChildren, setNumOfChildren] = useState(4); // Default number of children | ||
| const scrollerRef = useRef(null); | ||
|
|
||
| useEffect(() => { | ||
| // Calculate the number of times to repeat the child text dynamically | ||
| const scrollerWidth = scrollerRef.current.offsetWidth; | ||
| const textWidth = scrollerWidth / techIcons.length; | ||
| const newNumOfChildren = Math.ceil(textWidth / children.length); | ||
| setNumOfChildren(newNumOfChildren); | ||
|
|
||
| // Initialize ScrollSmoother with the provided options | ||
| const smoother = ScrollSmoother.create({ | ||
| content: scrollerRef.current, | ||
| wrapper: scrollerRef.current.parentNode, | ||
| smooth: 1, | ||
| effects: true, | ||
| normalizeScroll: true, | ||
| ignoreMobileResize: true, | ||
| }); | ||
|
|
||
| return () => { | ||
| smoother.kill(); // Cleanup ScrollSmoother when the component unmounts | ||
| }; | ||
| }, [children.length]); | ||
|
|
||
| const baseX = useMotionValue(0); | ||
| const { scrollY } = useScroll(); | ||
| const scrollVelocity = useVelocity(scrollY); | ||
| const smoothVelocity = useSpring(scrollVelocity, { | ||
| damping: 50, | ||
| stiffness: 400, | ||
| }); | ||
| const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], { | ||
| clamp: false, | ||
| }); | ||
|
|
||
| const totalWidth = (-100 / techIcons.length) * numOfChildren; | ||
|
|
||
| const x = useTransform(baseX, (v) => `${wrap(0, totalWidth, v)}%`); | ||
|
|
||
| const directionFactor = useRef(1); | ||
| useAnimationFrame((t, delta) => { | ||
| let moveBy = directionFactor.current * baseVelocity * (delta / 1000); | ||
|
|
||
| if (velocityFactor.get() < 0) { | ||
| directionFactor.current = -1; | ||
| } else if (velocityFactor.get() > 0) { | ||
| directionFactor.current = 1; | ||
| } | ||
|
|
||
| moveBy += directionFactor.current * moveBy * velocityFactor.get(); | ||
|
|
||
| baseX.set(baseX.get() + moveBy); | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="parallax"> | ||
| <motion.div className="scroller" ref={scrollerRef} style={{ x }}> | ||
| {Array.from({ length: numOfChildren }).map((_, index) => ( | ||
| <span key={index}>{children}</span> | ||
| ))} | ||
| </motion.div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function TechStacks() { | ||
| return ( | ||
| <section className="w-screen min-h-screen font-fira"> | ||
| <ParallaxText baseVelocity={20}>R</ParallaxText> | ||
| </section> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.