From 8cfe5e99e5acb2324c5aabbfafbb13cf92307795 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro de Barros Date: Fri, 10 Feb 2023 16:24:37 -0300 Subject: [PATCH 1/5] fix: change wrong class name --- personal-portfolio/src/components/Banner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/personal-portfolio/src/components/Banner.js b/personal-portfolio/src/components/Banner.js index a813a6b3d..d73ef46d0 100644 --- a/personal-portfolio/src/components/Banner.js +++ b/personal-portfolio/src/components/Banner.js @@ -50,7 +50,7 @@ export const Banner = () => { return (
- + {({ isVisible }) => From a3801d48baf177c177b48c7c6846cfe4b51a7aa8 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro de Barros Date: Fri, 10 Feb 2023 16:27:44 -0300 Subject: [PATCH 2/5] fix: change wrong href name --- personal-portfolio/src/components/NavBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/personal-portfolio/src/components/NavBar.js b/personal-portfolio/src/components/NavBar.js index cce00e7d5..8092feb32 100644 --- a/personal-portfolio/src/components/NavBar.js +++ b/personal-portfolio/src/components/NavBar.js @@ -46,7 +46,7 @@ export const NavBar = () => {
From 0511e49bd18b6aeff8607ea9d17e64e482824133 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro de Barros Date: Fri, 10 Feb 2023 16:30:47 -0300 Subject: [PATCH 3/5] fix: change wrong contact property name --- personal-portfolio/src/components/Contact.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/personal-portfolio/src/components/Contact.js b/personal-portfolio/src/components/Contact.js index 2991ee338..8b93d4cc4 100644 --- a/personal-portfolio/src/components/Contact.js +++ b/personal-portfolio/src/components/Contact.js @@ -65,7 +65,7 @@ export const Contact = () => { onFormUpdate('firstName', e.target.value)} /> - onFormUpdate('lastName', e.target.value)}/> + onFormUpdate('lastName', e.target.value)}/> onFormUpdate('email', e.target.value)} /> From ee27d652038cf6827c15d5819db65c6a8e373d0f Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro de Barros Date: Fri, 10 Feb 2023 16:33:23 -0300 Subject: [PATCH 4/5] fix: refactor the banner component with a memoized value --- personal-portfolio/src/components/Banner.js | 59 ++++++++++----------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/personal-portfolio/src/components/Banner.js b/personal-portfolio/src/components/Banner.js index d73ef46d0..fc48cba87 100644 --- a/personal-portfolio/src/components/Banner.js +++ b/personal-portfolio/src/components/Banner.js @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; import { Container, Row, Col } from "react-bootstrap"; import headerImg from "../assets/img/header-img.svg"; import { ArrowRightCircle } from 'react-bootstrap-icons'; @@ -11,41 +11,40 @@ export const Banner = () => { const [text, setText] = useState(''); const [delta, setDelta] = useState(300 - Math.random() * 100); const [index, setIndex] = useState(1); - const toRotate = [ "Web Developer", "Web Designer", "UI/UX Designer" ]; + const memoizedValue = useMemo(() => { return [ "Web Developer", "Web Designer", "UI/UX Designer" ] }, []); const period = 2000; - + useEffect(() => { let ticker = setInterval(() => { + const tick = () => { + let i = loopNum % memoizedValue.length; + let fullText = memoizedValue[i]; + let updatedText = isDeleting ? fullText.substring(0, text.length - 1) : fullText.substring(0, text.length + 1); + + setText(updatedText); + + if (isDeleting) { + setDelta(prevDelta => prevDelta / 2); + } + + if (!isDeleting && updatedText === fullText) { + setIsDeleting(true); + setIndex(prevIndex => prevIndex - 1); + setDelta(period); + } else if (isDeleting && updatedText === '') { + setIsDeleting(false); + setLoopNum(loopNum + 1); + setIndex(1); + setDelta(500); + } else { + setIndex(prevIndex => prevIndex + 1); + } + } tick(); }, delta); - return () => { clearInterval(ticker) }; - }, [text]) - - const tick = () => { - let i = loopNum % toRotate.length; - let fullText = toRotate[i]; - let updatedText = isDeleting ? fullText.substring(0, text.length - 1) : fullText.substring(0, text.length + 1); - - setText(updatedText); - - if (isDeleting) { - setDelta(prevDelta => prevDelta / 2); - } - - if (!isDeleting && updatedText === fullText) { - setIsDeleting(true); - setIndex(prevIndex => prevIndex - 1); - setDelta(period); - } else if (isDeleting && updatedText === '') { - setIsDeleting(false); - setLoopNum(loopNum + 1); - setIndex(1); - setDelta(500); - } else { - setIndex(prevIndex => prevIndex + 1); - } - } + }, [delta, isDeleting, loopNum, text, memoizedValue]) + return (
From ebff166f086a1323b918f35abcf1e1515bd4447d Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro de Barros Date: Fri, 10 Feb 2023 16:56:17 -0300 Subject: [PATCH 5/5] fix: change wrong prop name --- personal-portfolio/src/components/Banner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/personal-portfolio/src/components/Banner.js b/personal-portfolio/src/components/Banner.js index fc48cba87..d7466e913 100644 --- a/personal-portfolio/src/components/Banner.js +++ b/personal-portfolio/src/components/Banner.js @@ -55,7 +55,7 @@ export const Banner = () => { {({ isVisible }) =>
Welcome to my Portfolio -

{`Hi! I'm Judy`} {text}

+

{`Hi! I'm Judy`} {text}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

}