John Leidy II Portfolio Website

Built using React.js

Please take a look at the new and improved portfolio written in Typescript and built with React! New Portfolio

Code Details Section:

Intersection Observer

View Code

JS File inside of your function component

const AboutTitleRef = useRef();
const [TitleVisible, setTitleVisible] = useState();

useEffect(()=>{
    const observer = new IntersectionObserver(([entry])=>{
        setTitleVisible(entry.isIntersecting)
        console.log(TitleVisible)
    });
    observer.observe(AboutTitleRef.current)
},[AboutTitleRef,TitleVisible]);

return(
    <AboutTitle ref={AboutTitleRef} inView = {TitleVisible}>
        About
    </AboutTitle>
)

Styled Component for Title

export const AboutTitle = styled.div`
    transition: 3s all ease;
    opacity: ${(props) => (props.inView ? "1" : "0")};
`;

Tracking state of a checkbox in a class component

View Code

JS File inside of your class component

constructor(){
    super()
    this.state = {
        checked : false
    }

    this.checkRef = React.createRef();
    this.handleCheckbox = this.handleCheckbox.bind(this);
}


handleCheckbox(event){
    if(event === true){
        //this is if the checkbox is checked
        this.setState({
            checked : event
        },() => {})
    }
    if(event === false){
        //this is if the checkbox is not checked
        this.setState({
            checked : event
        },() => {})
    }
};

render(){return(
    <Checkbox
    ref = {this.checkRef}
    onChange = {(e) => this.handleCheckbox(e.target.checked)}
    />
)}

Passing setState into a class component to set the state for use in another component

View Code

function App() {
  const [lightordark, setLightOrDark] = React.useState(false)
  return (
    <div className='remove_scroll'>
      <ParticlesComponent active = {lightordark}/>
      <MainPage setLightOrDark = {setLightOrDark}/>
    </div>

  );

};

Below are more screenshots of the website:

Images

Landing / Hero Section

About Me

Projects

Degrees

Experience / Footer

Thanks for stopping by!

John