I am building my single-page portfolio website which has a few sections having full-screen height with their own component.
import React, { useRef, useEffect } from "react";
import { Element } from "react-scroll";
import Contact from "../components/Contact";
import Hero from "../components/Hero";
import Who from "../components/Who";
import Works from "../components/Works";
import Works2 from "../components/Works2";
const Homepage = () => {
return (
<div className="HomeWrapper">
<Hero />
<Who id='who' />
<Works />
<Works2 />
<Contact />
</div>
);
};
export default Homepage;
and In homepage Hero Component I have a navbar component which have navigation links.
import React from 'react'
import {Avatar, Box, Container, IconButton, Typography} from '@mui/material'
import Navbar from './Navbar'
import Profile from '../assets/profile.png';
import { useTypewriter } from 'react-simple-typewriter'
import { SocialIcon } from 'react-social-icons';
import InstagramIcon from '@mui/icons-material/Instagram';
import TwitterIcon from '@mui/icons-material/Twitter';
import RedditIcon from '@mui/icons-material/Reddit';
import SouthIcon from '@mui/icons-material/South';
import { Link } from 'react-scroll';
const Hero = () => {
const [text] = useTypewriter({
words: ['Developer', 'Cyber-Savvy',],
loop: 0,
typeSpeed:70,
})
return (
<Box sx={{height:'100svh', scrollSnapAlign:'center'}}>
<Navbar />
<Container maxWidth='md' sx={{height:'100%'}}>
<Box sx={{display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', mt:4, width:'100%',}}>
{/* Main Image */}
<Avatar src={Profile} sx={{width:{xs:180, sm:180, md:250, lg:250}, height:'auto',boxShadow: 20, border: "0.5px solid gray", borderRadius:10 }} />
{/* <Box component='img' src={Profile} sx={{width:300, height:'auto', borderRadius:20, boxShadow:50}}/> */}
{/* Greetings Typography */}
<Box sx={{display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center', mt:2}}>
<Typography sx={{fontSize:{xs:20, sm:18, md:20, lg:20}}}> Salam </Typography>
{/* What you are title */}
<Typography sx={{fontSize:{xs:18, sm:22, md:24, lg:24}}}>My name is Nehat Khan</Typography>
<Typography sx={{fontSize:{xs:16, sm:20, md:26, lg:26}, mt:1, textTransform:'uppercase'}}>Developer | Tech Savy | Father</Typography>
{/* <Box sx={{display:'flex', gap:1}}>
<Typography sx={{fontSize:{xs:20, sm:20, md:26, lg:26}, textTransform:'uppercase'}}>I am a </Typography>
<Typography color='primary' sx={{fontSize:{xs:20, sm:20, md:30, lg:30}, textTransform:'uppercase'}}> {text}</Typography>
</Box> */}
</Box>
{/* socia Links */}
<Box sx={{display:'flex', gap:3, mt:2}}>
<TwitterIcon sx={{fontSize:{xs:26, md:28},':hover':{color:'#E95420'}}}/>
<InstagramIcon sx={{fontSize:{xs:26, md:28},':hover':{color:'#E95420'}}} />
<RedditIcon sx={{fontSize:{xs:26, md:28},':hover':{color:'#E95420'}}} />
</Box>
<IconButton className='animeIcon' sx={{mt:{xs:8, md:15, lg:15}}}>
<SouthIcon color='primary' sx={{ fontSize:{xs:40, md:50}}}/>
</IconButton>
</Box>
</Container>
</Box>
)
}
export default Hero
The navbar Component -
import {
Box,
Button,
Container,
IconButton,
Menu,
MenuItem,
Typography,
} from "@mui/material";
import React, { useRef, useState } from "react";
import Logo1 from "../assets/white_transparent.webp";
import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
import CloseIcon from "@mui/icons-material/Close";
import { Link } from 'react-scroll'
const Navbar = () => {
const [anchorElm, setAnchorElm] = useState(null);
const [open, setOpen] = useState(false);
const handleClose = () => {
setAnchorElm(null);
setOpen(false);
};
const handleClick = (e) => {
setAnchorElm(e.currentTarget);
setOpen(true);
};
const scrollToAbout = ()=>{
}
return (
<Container maxWidth="xl">
<Box sx={{display: "flex",justifyContent: "space-between",paddingTop: 2,alignItems: "center",}}>
{/* Logo */}
<Box component="img"src={Logo1}sx={{width: { xs: 150, sm: 150, md: 200, lg: 200 },height: { xs: 60, sm: 60, md: 80, lg: 80 },cursor: "pointer",}}/>
{/* Links */}
<Box sx={{display: { xs: "none", sm: "none", md: "flex", lg: "flex" },gap: 4,alignItems: "center",}}>
<Link to="who" smooth={true} duration={500} offset={50}>
<Typography sx={{fontSize: 12,cursor: "pointer",textTransform: "uppercase",transition: "color 0.2s ease-in-out",":hover": {color: "#E95420",transition: "color 0.2s ease-in-out",},}}>
About
</Typography>
</Link>
<Typography sx={{fontSize: 12,cursor: "pointer",textTransform: "uppercase",transition: "color 0.2s ease-in-out",":hover": {color: "#E95420",transition: "color 0.2s ease-in-out",},}}>
Services
</Typography>
<Typography sx={{fontSize: 12,cursor: "pointer",textTransform: "uppercase",transition: "color 0.2s ease-in-out",":hover": {color: "#E95420",transition: "color 0.2s ease-in-out",},}}>
Projects
</Typography>
<Typography
sx={{fontSize: 12,cursor: "pointer",textTransform: "uppercase",transition: "color 0.2s ease-in-out",":hover": {color: "#E95420",transition: "color 0.2s ease-in-out",},}}>
Blog
</Typography>
<Button size="medium"variant="contained"endIcon={<EmojiPeopleIcon />}sx={{ml: 4,display: { xs: "none", sm: "none", md: "flex", lg: "flex" },}}>
Say Hello
</Button>
</Box>
{/* Hamburger Menu For Mobile Screen */}
<IconButton id="basic-menu"onClick={handleClick}sx={{ display: { xs: "flex", sm: "flex", md: "none", lg: "none" } }}>
{open ? (<CloseIcon sx={{ color: "#A9A9A9", fontSize: 34 }} />) : (<MenuOpenIcon sx={{ color: "#A9A9A9", fontSize: 34 }} />)}
</IconButton>
<Menu
anchorEl={anchorElm}
open={open}
onClose={handleClose}
PaperProps={{style: {backgroundColor: "#202020", color: "#A9A9A9",},}}>
<MenuItem>ABOUT</MenuItem>
<MenuItem>SERVICES</MenuItem>
<MenuItem>PROJECTS</MenuItem>
<MenuItem>BLOG</MenuItem>
<MenuItem>
<Button variant="contained" endIcon={<EmojiPeopleIcon />}>
SAY HELLO
</Button>
</MenuItem>
</Menu>
</Box>
</Container>
);
};
export default Navbar;
And here in Navbar Component I wrap the first Menu Link "ABOUT" with react-scroll Link component and gave the to='who' and gave id='who' to the component where I want to scroll. <Who id="who"/> which is in the homepage. Now when I click on the link it say "target Element not found". Please help me out with this. What I want is that when user clicks on any link it should scroll to that particular component associated with it.
