judygab / web-dev-projects Goto Github PK
View Code? Open in Web Editor NEWProjects repo for tutorials for my YouTube Channel
License: MIT License
Projects repo for tutorials for my YouTube Channel
License: MIT License
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
Header loads everytime we go down and and come back
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;
}
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!
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.
There is bug in scrolling
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.
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,
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!!!
The css of Navbar is not proper.Please fix it .
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
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!
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?
Please include node_modules on .gitignore to ignore node_modules from being committed.
Please help me with my Mailchimp CORBS ERROR while signup the newsletter.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.