judygab/web-dev-projects

Projects repo for tutorials for my YouTube Channel

web-dev-projects

web-dev-projects's Issues

Key prop in Projects component

Hi @judygab !

I was taking a look at the Projects component and found out you used the array indexes for your key prop. Wouldn´t it be better to create a hardcoded ID on the array, in case you change orders or create any buttons in the future?

Anyway, thank you for the contribution you make with all your videos and projects!

Fixing "Projects" Component ID Typo in NavBar for Smooth Navigation

I found a small bug, the id in the projects component added one less s, which caused the inability to jump in the NavBar, fixing it can make it easier for people who use it in the future, anyway, your videos and code are perfect!!!

Navbar Css

The css of Navbar is not proper.Please fix it .

useEffect in Banner component

Hello there!
I'm following the tutorial but I cannot make the useEffect work. Everything else in the page is working up to that point, but the dynamic text does not want to work.
Here's my code for the Banner component:
import { useState, useEffect } from "react"; import { Container, Row, Col } from "react-bootstrap"; import { ArrowRightCircle } from "react-bootstrap-icons"; import headerImg from "../assets/img/header-img.svg"; export const Banner = () => { const [loopNum, setLoopNum] = useState(0); const [isDeleting, setIsDeleting] = useState(false); const toRotate = ["Web Developer", "Web Designer", "UI/UX Designer"]; const [text, setText] = useState(""); const [delta, setDelta] = useState(300 - Math.random() * 100); const period = 2000; useEffect(() => { let ticker = setInterval(() => { 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); setDelta(period); } else if (isDeleting && updatedText === "") { setIsDeleting(false); setLoopNum(loopNum + 1); setDelta(500); } }; return ( <section className="banner" id="home"> <Container> <Row className="align-items-center"> <Col xs={12} md={6} xl={7}> <span className="tagline">Welcome to my Portfolio</span> <h1> {Hi! I'm a webdecoded} <span className="wrap">{text}</span> </h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eos illo exercitationem amet iusto doloribus assumenda corrupti fuga libero quos, quasi quis. Suscipit, ipsam ullam autem soluta accusantium natus tenetur! </p> <button> Let's connect <ArrowRightCircle size={25} /> </button> </Col> <Col xs={12} md={6} xl={5}> <img src={headerImg} alt="header_img" /> </Col> </Row> </Container> </section> ); };

Thank you in advance!

Header reloads every time we scroll bottom and go up

Header loads everytime we go down and and come back

Jiggling layout

It seems like the typing animation of the banner's header affects the whole layout of the website when the animation starts running and it makes the whole layout expand or shirk constantly.

node_modules detected on path: web-dev-projects/food-ordering-app/server

Please include node_modules on .gitignore to ignore node_modules from being committed.

Scroll issue

There is bug in scrolling

how do i fix this? can you help me please

WARNING in [eslint]
src\components\Banner.js
Line 22:8: React Hook useEffect has missing dependencies: 'delta' and 'tick'. Either include them or remove the dependency array react-hooks/exhaustive-deps

webpack compiled with 1 warning

Request for Write Access to Contribute Changes

Hello Judgab,
I hope this message finds you well. I am writing to request write access to the web-dev-projects repository. I have recently cloned the repository and made some improvements to the content of the project, specifically updating the heading and paragraph in one of the files to enhance the project's presentation.

Here are the details of the changes I made:

Heading Update: Improved the readability and clarity of the main heading.
Paragraph Update: Enhanced the description to provide a more engaging and informative user experience.

These changes aim to improve the user interface and overall presentation of the project. I believe these updates will be beneficial to the repository, and I would like to contribute them directly.

Reason for Request:

I am keen to contribute to the project and help improve its content.
I believe my changes will add value to the project.
Having write access will allow me to contribute more efficiently in the future.
Proposed Solution:
If granting write access is not feasible, I am happy to submit my changes via a pull request from a forked repository. Please let me know if this approach is preferred or if there are any specific guidelines I should follow.

Thank you for considering my request. I look forward to your response.

Best regards,

Sneha Attri

Typo in App.css

In src/Apps.css there is a typo in line 66 which causes build to abort

input: focus, textarea:focus, select:focus {
outline: none;
}

should be:

input:focus, textarea:focus, select:focus {
outline: none;
}

Navbar Projects

Hello, first your work is incredible!
Looking at the site I noticed that the link of the projects in the navbar was not targeting the projects part. I found that in the projects component the id was like 'project', but it should be called 'projects'. once again beautiful work.

Sorry my "ingles, google translator. lol

Projects Tabs

When you select the different tabs in Project, the first row of in Tab 1 is at the top, the first row in Tab 2 spaces the distance of elements in Tab 1 and the similarly the issue extends to Tab 3. Could you explain why is the first row not on top for each tab?

want hover effect.

Hello!!
how r u Miss!
can we add hover {
cursor : pointer;
} effect for the three tabs under projects. when, i move cursor on tabs it becomes reading one.
so how to add effect, please tell.

Let's Connect button doesn't work

Typo: Contact.js in portfolio

Protfolio Website Mailchimp CORBS ERROR

Please help me with my Mailchimp CORBS ERROR while signup the newsletter.

Jump to title Project doesn't work

Nav bar Project