Skip to content

Typos fixed #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aditi-hinge wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Typos fixed #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c2e0e9f
Row className typo fixed
aditi-hinge Aug 30, 2022
775ecc5
link name changed from 'projects' to 'project'
aditi-hinge Aug 30, 2022
7827d73
typo fixed from 'section' to 'second'
aditi-hinge Aug 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 58 additions & 27 deletions personal-portfolio/src/components/Banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,108 @@
import { useState, useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
import headerImg from "../assets/img/header-img.svg";
import { ArrowRightCircle } from 'react-bootstrap-icons';
import 'animate.css';
import TrackVisibility from 'react-on-screen';
import { ArrowRightCircle } from "react-bootstrap-icons";
import "animate.css";
import TrackVisibility from "react-on-screen";

export const Banner = () => {
const [loopNum, setLoopNum] = useState(0);
const [isDeleting, setIsDeleting] = useState(false);
const [text, setText] = useState('');
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 toRotate = ["Web Developer", "Web Designer", "UI/UX Designer"];
const period = 2000;

useEffect(() => {
let ticker = setInterval(() => {
tick();
}, delta);

return () => { clearInterval(ticker) };
}, [text])
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);
let updatedText = isDeleting
? fullText.substring(0, text.length - 1)
: fullText.substring(0, text.length + 1);

setText(updatedText);

if (isDeleting) {
setDelta(prevDelta => prevDelta / 2);
setDelta((prevDelta) => prevDelta / 2);
}

if (!isDeleting && updatedText === fullText) {
setIsDeleting(true);
setIndex(prevIndex => prevIndex - 1);
setIndex((prevIndex) => prevIndex - 1);
setDelta(period);
} else if (isDeleting && updatedText === '') {
} else if (isDeleting && updatedText === "") {
setIsDeleting(false);
setLoopNum(loopNum + 1);
setIndex(1);
setDelta(500);
} else {
setIndex(prevIndex => prevIndex + 1);
setIndex((prevIndex) => prevIndex + 1);
}
}
};

return (
<section className="banner" id="home">
<Container>
<Row className="aligh-items-center">
<Row className="align-items-center">
<Col xs={12} md={6} xl={7}>
<TrackVisibility>
{({ isVisible }) =>
<div className={isVisible ? "animate__animated animate__fadeIn" : ""}>
<span className="tagline">Welcome to my Portfolio</span>
<h1>{`Hi! I'm Judy`} <span className="txt-rotate" dataPeriod="1000" data-rotate='[ "Web Developer", "Web Designer", "UI/UX Designer" ]'><span className="wrap">{text}</span></span></h1>
<p>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.</p>
<button onClick={() => console.log('connect')}>Let’s Connect <ArrowRightCircle size={25} /></button>
</div>}
{({ isVisible }) => (
<div
className={
isVisible ? "animate__animated animate__fadeIn" : ""
}
>
<span className="tagline">Welcome to my Portfolio</span>
<h1>
{`Hi! I'm Judy`}{" "}
<span
className="txt-rotate"
dataPeriod="1000"
data-rotate='[ "Web Developer", "Web Designer", "UI/UX Designer" ]'
>
<span className="wrap">{text}</span>
</span>
</h1>
<p>
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.
</p>
<button onClick={() => console.log("connect")}>
Let’s Connect <ArrowRightCircle size={25} />
</button>
</div>
)}
</TrackVisibility>
</Col>
<Col xs={12} md={6} xl={5}>
<TrackVisibility>
{({ isVisible }) =>
<div className={isVisible ? "animate__animated animate__zoomIn" : ""}>
<img src={headerImg} alt="Header Img"/>
</div>}
{({ isVisible }) => (
<div
className={
isVisible ? "animate__animated animate__zoomIn" : ""
}
>
<img src={headerImg} alt="Header Img" />
</div>
)}
</TrackVisibility>
</Col>
</Row>
</Container>
</section>
)
}
);
};
77 changes: 54 additions & 23 deletions personal-portfolio/src/components/NavBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import { useState, useEffect } from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import logo from '../assets/img/logo.svg';
import navIcon1 from '../assets/img/nav-icon1.svg';
import navIcon2 from '../assets/img/nav-icon2.svg';
import navIcon3 from '../assets/img/nav-icon3.svg';
import { HashLink } from 'react-router-hash-link';
import {
BrowserRouter as Router
} from "react-router-dom";
import logo from "../assets/img/logo.svg";
import navIcon1 from "../assets/img/nav-icon1.svg";
import navIcon2 from "../assets/img/nav-icon2.svg";
import navIcon3 from "../assets/img/nav-icon3.svg";
import { HashLink } from "react-router-hash-link";
import { BrowserRouter as Router } from "react-router-dom";

export const NavBar = () => {

const [activeLink, setActiveLink] = useState('home');
const [activeLink, setActiveLink] = useState("home");
const [scrolled, setScrolled] = useState(false);

useEffect(() => {
Expand All @@ -21,16 +18,16 @@ export const NavBar = () => {
} else {
setScrolled(false);
}
}
};

window.addEventListener("scroll", onScroll);

return () => window.removeEventListener("scroll", onScroll);
}, [])
}, []);

const onUpdateActiveLink = (value) => {
setActiveLink(value);
}
};

return (
<Router>
Expand All @@ -44,23 +41,57 @@ export const NavBar = () => {
</Navbar.Toggle>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ms-auto">
<Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('home')}>Home</Nav.Link>
<Nav.Link href="#skills" className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('skills')}>Skills</Nav.Link>
<Nav.Link href="#projects" className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('projects')}>Projects</Nav.Link>
<Nav.Link
href="#home"
className={
activeLink === "home" ? "active navbar-link" : "navbar-link"
}
onClick={() => onUpdateActiveLink("home")}
>
Home
</Nav.Link>
<Nav.Link
href="#skills"
className={
activeLink === "skills" ? "active navbar-link" : "navbar-link"
}
onClick={() => onUpdateActiveLink("skills")}
>
Skills
</Nav.Link>
<Nav.Link
href="#project"
className={
activeLink === "projects"
? "active navbar-link"
: "navbar-link"
}
onClick={() => onUpdateActiveLink("projects")}
>
Projects
</Nav.Link>
</Nav>
<span className="navbar-text">
<div className="social-icon">
<a href="#"><img src={navIcon1} alt="" /></a>
<a href="#"><img src={navIcon2} alt="" /></a>
<a href="#"><img src={navIcon3} alt="" /></a>
<a href="#">
<img src={navIcon1} alt="" />
</a>
<a href="#">
<img src={navIcon2} alt="" />
</a>
<a href="#">
<img src={navIcon3} alt="" />
</a>
</div>
<HashLink to='#connect'>
<button className="vvd"><span>Let’s Connect</span></button>
<HashLink to="#connect">
<button className="vvd">
<span>Let’s Connect</span>
</button>
</HashLink>
</span>
</Navbar.Collapse>
</Container>
</Navbar>
</Router>
)
}
);
};
114 changes: 69 additions & 45 deletions personal-portfolio/src/components/Projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@ import projImg1 from "../assets/img/project-img1.png";
import projImg2 from "../assets/img/project-img2.png";
import projImg3 from "../assets/img/project-img3.png";
import colorSharp2 from "../assets/img/color-sharp2.png";
import 'animate.css';
import TrackVisibility from 'react-on-screen';
import "animate.css";
import TrackVisibility from "react-on-screen";

export const Projects = () => {

const projects = [
{
title: "Business Startup",
Expand Down Expand Up @@ -48,51 +47,76 @@ export const Projects = () => {
<Row>
<Col size={12}>
<TrackVisibility>
{({ isVisible }) =>
<div className={isVisible ? "animate__animated animate__fadeIn": ""}>
<h2>Projects</h2>
<p>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.</p>
<Tab.Container id="projects-tabs" defaultActiveKey="first">
<Nav variant="pills" className="nav-pills mb-5 justify-content-center align-items-center" id="pills-tab">
<Nav.Item>
<Nav.Link eventKey="first">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Tab 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third">Tab 3</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content id="slideInUp" className={isVisible ? "animate__animated animate__slideInUp" : ""}>
<Tab.Pane eventKey="first">
<Row>
{
projects.map((project, index) => {
return (
<ProjectCard
key={index}
{...project}
/>
)
})
}
</Row>
</Tab.Pane>
<Tab.Pane eventKey="section">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quam, quod neque provident velit, rem explicabo excepturi id illo molestiae blanditiis, eligendi dicta officiis asperiores delectus quasi inventore debitis quo.</p>
</Tab.Pane>
<Tab.Pane eventKey="third">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quam, quod neque provident velit, rem explicabo excepturi id illo molestiae blanditiis, eligendi dicta officiis asperiores delectus quasi inventore debitis quo.</p>
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</div>}
{({ isVisible }) => (
<div
className={
isVisible ? "animate__animated animate__fadeIn" : ""
}
>
<h2>Projects</h2>
<p>
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.
</p>
<Tab.Container id="projects-tabs" defaultActiveKey="first">
<Nav
variant="pills"
className="nav-pills mb-5 justify-content-center align-items-center"
id="pills-tab"
>
<Nav.Item>
<Nav.Link eventKey="first">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Tab 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third">Tab 3</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content
id="slideInUp"
className={
isVisible ? "animate__animated animate__slideInUp" : ""
}
>
<Tab.Pane eventKey="first">
<Row>
{projects.map((project, index) => {
return <ProjectCard key={index} {...project} />;
})}
</Row>
</Tab.Pane>
<Tab.Pane eventKey="second">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Cumque quam, quod neque provident velit, rem
explicabo excepturi id illo molestiae blanditiis,
eligendi dicta officiis asperiores delectus quasi
inventore debitis quo.
</p>
</Tab.Pane>
<Tab.Pane eventKey="third">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Cumque quam, quod neque provident velit, rem
explicabo excepturi id illo molestiae blanditiis,
eligendi dicta officiis asperiores delectus quasi
inventore debitis quo.
</p>
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</div>
)}
</TrackVisibility>
</Col>
</Row>
</Container>
<img className="background-image-right" src={colorSharp2}></img>
</section>
)
}
);
};