{children}
setAnimatedFinish(true)}
/>
);
}
================================================
FILE: src/components/animations/StaggerChildren.tsx
================================================
import { HTMLMotionProps, motion, Variants } from 'framer-motion';
import React from 'react';
interface Props extends HTMLMotionProps<'div'> {
duration?: number;
delay?: number;
}
export default function StaggerChildren({ children, duration = 0.5, delay = 0, ...props }: Props) {
const variants: Variants = {
hidden: {
opacity: 0,
},
show: (i: number = 1) => ({
opacity: 1,
transition: {
delay: delay,
staggerChildren: duration,
delayChildren: i * delay,
},
}),
};
return (
{children}
);
}
================================================
FILE: src/components/atoms/ContentText/index.tsx
================================================
import React, { ReactNode } from 'react';
import classNames from 'classnames';
interface Props {
children: ReactNode;
className?: string;
}
export default function ContentText({ children, className }: Props) {
return (
{children}
); } ================================================ FILE: src/components/atoms/ContentTitle/index.tsx ================================================ import React, { ReactNode } from 'react'; import classNames from 'classnames'; interface Props { children: ReactNode; className?: string; } export default function ContentTitle({ children, className }: Props) { return{children}
; } ================================================ FILE: src/components/atoms/FullRoundButton/index.tsx ================================================ import React from 'react'; import classNames from 'classnames'; import { motion } from 'framer-motion'; import FullRoundButtonProps from 'components/atoms/FullRoundButton/types'; import { useState } from 'react'; import { useEffect } from 'react'; export default function FullRoundButton({ children, label, as = 'button', href = '', className, animationComplete, active = false, onClick }: FullRoundButtonProps) { const [animationFinish, setAnimationFinish] = useState(false); const classes = classNames( 'flex items-center justify-center w-12 h-12 rounded-full focus:outline-none focus:ring-2 ring-indigo-500 ring-offset-2', className, { 'shadow-lg': animationComplete, 'scale-75': animationComplete === false, 'transition-all transform duration-500': animationComplete != null && !animationFinish, 'bg-indigo-500 hover:bg-indigo-600 text-white': !active, 'bg-white text-indigo-600': active } ); useEffect(() => { if (animationComplete) { setTimeout(() => { setAnimationFinish(true); }, 500); } }, [animationComplete]); if (as === 'button') { return (
{children}
);
}
return (
{children}
); } ================================================ FILE: src/components/atoms/HighlightedText/index.tsx ================================================ import React from 'react'; import classNames from 'classnames'; import HighlightedTextProps from 'components/atoms/HighlightedText/types'; export default function HighlightedText({ children, as = 'span', href, className, }: HighlightedTextProps) { const classes = classNames('px-3 bg-white rounded-full shadow-md focus:outline-none focus:ring-2 ring-indigo-500', className); if (as === 'span') { return ( {children} ); } return ( {children} ); } ================================================ FILE: src/components/atoms/HighlightedText/types.tsx ================================================ import { ReactNode } from "react"; export default interface HighlightedTextProps { children: ReactNode; as?: 'a' | 'span'; href?: string; className?: string; } ================================================ FILE: src/components/atoms/MenuItem/index.tsx ================================================ import React from 'react'; import { ReactNode } from 'react'; import classNames from 'classnames'; interface Props { children: ReactNode; active: boolean; } export default function MenuItem({ children, active }: Props) { return ( {children} ); } ================================================ FILE: src/components/atoms/Overlay/index.tsx ================================================ import React from 'react'; import classNames from 'classnames'; import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'; import { RefObject } from 'react'; interface Props { contentRef: RefObject{description}
{items.map((item, index) => (
))}
{upperSkills.map((SkillItem, index) => (
))}
{SkillItem}
{lowerSkills.map((SkillItem, index) => (
))}
{SkillItem}