Skip to content

Commit

Permalink
FIX: smoothness of teamcard transition and eslint errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@JOSU9435
JOSU9435 committed Feb 24, 2023
1 parent c2c466d commit 137bcd2
Show file tree
Hide file tree
Showing 6 changed files with 704 additions and 722 deletions.
1 change: 1 addition & 0 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"rules": {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [1, { "extensions": [".jsx"] }],
"react/prop-types": "off",
"react/no-unknown-property": [
2,
{ "ignore": ["intensity", "position", "object", "rotation"] }
Expand Down
138 changes: 81 additions & 57 deletions src/components/Navbar/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,101 @@ import React from "react";
import { useEffect } from "react";
import { useState } from "react";
import "./Navbar.scss";
import { GiHamburgerMenu } from 'react-icons/gi';
import { ImCross } from 'react-icons/im';
import logo from '../../assets/images/logo.png'
import { GiHamburgerMenu } from "react-icons/gi";
import { ImCross } from "react-icons/im";
import logo from "../../assets/images/logo.png";
import { Link } from "react-router-dom";


function Navbar() {

const [winWidth, setWinWidth] = useState(window.innerWidth)
const [hamburg, setHamburg] = useState(false)
const [winWidth, setWinWidth] = useState(window.innerWidth);
const [hamburg, setHamburg] = useState(false);

useEffect(() => {
window.addEventListener('resize', (e) => {
setWinWidth(window.innerWidth)
window.addEventListener("resize", () => {
setWinWidth(window.innerWidth);
console.log(hamburg);
})
}, [])
});
}, []);

return (
<nav className="navbar">
<div className="logo">
<Link to="/">
<img src={logo} alt="" />
<img src={logo} alt="" />
</Link>
</div>
<img className="nav-img" src="" alt="" />
<div className="backdrop" style={{ zIndex: `${hamburg===true?200:-100}`,background: `${hamburg === false ? 'transparent' : 'rgba(0, 0, 0, 0.492)'}` }}></div>
{winWidth > 900 ? <ul className="nav-list">
<li className="nav-button home">
<Link to="/" className="nav-link">
Home
</Link>
</li>
<li className="nav-button projects">
<Link to="/projects" className="nav-link">
Projects
</Link>
</li>
<li className="nav-button team">
<Link to="/team" className="nav-link">
Team
</Link>
</li>
</ul> : <>
<div className="hamburger" style={{fontSize: `${hamburg===false?'40px':'30px'}`,margin: `${hamburg===false?'auto':''}`, marginRight: `${hamburg===false?'2rem':''}`,transform: `${hamburg===true?'translateY(-50%)':''}`, position: `${hamburg===true?'fixed':''}`, right: `${hamburg===true?'30px':''}`}} onClick={() => { hamburg === false ? setHamburg(true) : hamburg === true ? setHamburg(false) : '' }}>
{hamburg === false ? <GiHamburgerMenu /> : <ImCross />}
</div>
<div className="hamburg-sidebar" style={{ transform: `${hamburg === true ? 'translateX(0%)' : ''}` }}>

<ul className="hamlist">

<li className="nav-button home">
<Link to="/" className="nav-link">
Home
</Link>
</li>
<li className="nav-button projects">
<Link to="/projects" className="nav-link">
Projects
</Link>
</li>
<li className="nav-button team">
<Link to="/team" className="nav-link">
Team
</Link>
</li>
</ul>

</div>
</>
}
<div
className="backdrop"
style={{
zIndex: `${hamburg === true ? 200 : -100}`,
background: `${hamburg === false ? "transparent" : "rgba(0, 0, 0, 0.492)"}`,
}}
></div>
{winWidth > 900 ? (
<ul className="nav-list">
<li className="nav-button home">
<Link to="/" className="nav-link">
Home
</Link>
</li>
<li className="nav-button projects">
<Link to="/projects" className="nav-link">
Projects
</Link>
</li>
<li className="nav-button team">
<Link to="/team" className="nav-link">
Team
</Link>
</li>
</ul>
) : (
<>
<div
className="hamburger"
style={{
fontSize: `${hamburg === false ? "40px" : "30px"}`,
margin: `${hamburg === false ? "auto" : ""}`,
marginRight: `${hamburg === false ? "2rem" : ""}`,
transform: `${hamburg === true ? "translateY(-50%)" : ""}`,
position: `${hamburg === true ? "fixed" : ""}`,
right: `${hamburg === true ? "30px" : ""}`,
}}
onClick={() => {
hamburg === false
? setHamburg(true)
: hamburg === true
? setHamburg(false)
: "";
}}
>
{hamburg === false ? <GiHamburgerMenu /> : <ImCross />}
</div>
<div
className="hamburg-sidebar"
style={{ transform: `${hamburg === true ? "translateX(0%)" : ""}` }}
>
<ul className="hamlist">
<li className="nav-button home">
<Link to="/" className="nav-link">
Home
</Link>
</li>
<li className="nav-button projects">
<Link to="/projects" className="nav-link">
Projects
</Link>
</li>
<li className="nav-button team">
<Link to="/team" className="nav-link">
Team
</Link>
</li>
</ul>
</div>
</>
)}
</nav>
);
}
Expand Down
96 changes: 45 additions & 51 deletions src/components/Team/Team-Card/TeamCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,45 @@
import React from "react";
import './TeamCard.scss'
import {Link, Route} from "react-router-dom"
import fb from "../../../assets/images/fb.svg"
import insta from "../../../assets/images/insta.svg"
import lin from "../../../assets/images/linkedin.svg"
import twt from "../../../assets/images/twitter.svg"
import github from "../../../assets/images/github.svg"


function TeamCard(props){
return( <div className="teamCard">
<div className="animation">
<div className="pic">
<img src={props.ImageSrc} alt=" " className="image"
loading="lazy" />
</div>
</div>
<div className="details">
<div>
<div className="name">{props.Name}</div>
</div>
<div>
<div className="domian">{props.Domain}</div>
</div>
</div>
<div className="description">{props.Description}</div>
<div className="socials">
<div className="linkdin socialIcon">
<a href = {props.Linkdin} target="_blank">
<img src={lin} alt="" />
</a>
</div>
<div className="facebook socialIcon">
<a href = {props.Facebook} target="_blank">
<img src={fb} alt="" />
</a>
</div>
<div className="github socialIcon">
<a href={props.Twitter } target="_blank">
<img className="git" src={github} alt="" />
</a>
</div>
</div>


</div>
)
};

export default TeamCard;
import React from "react";
import "./TeamCard.scss";
import fb from "../../../assets/images/fb.svg";
import lin from "../../../assets/images/linkedin.svg";
import github from "../../../assets/images/github.svg";

function TeamCard(props) {
return (
<div className="teamCard">
<div className="animation">
<div className="pic">
<img src={props.ImageSrc} alt=" " className="image" loading="lazy" />
</div>
</div>
<div className="details">
<div>
<div className="name">{props.Name}</div>
</div>
<div>
<div className="domian">{props.Domain}</div>
</div>
</div>
<div className="description">{props.Description}</div>
<div className="socials">
<div className="linkdin socialIcon">
<a href={props.Linkdin} target="_blank" rel="noreferrer">
<img src={lin} alt="" />
</a>
</div>
<div className="facebook socialIcon">
<a href={props.Facebook} target="_blank" rel="noreferrer">
<img src={fb} alt="" />
</a>
</div>
<div className="github socialIcon">
<a href={props.Twitter} target="_blank" rel="noreferrer">
<img className="git" src={github} alt="" />
</a>
</div>
</div>
</div>
);
}

export default TeamCard;
Loading

0 comments on commit 137bcd2

Please sign in to comment.