Skip to content

Commit

Permalink
fix the navbar when scroll
Browse files Browse the repository at this point in the history
  • Loading branch information
@GalMalach08
GalMalach08 committed Jul 19, 2022
1 parent a4f8903 commit fe69953
Show file tree
Hide file tree
Showing 6 changed files with 293 additions and 192 deletions.
65 changes: 30 additions & 35 deletions src/components/Home/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,39 @@
import React, {useState, useEffect} from 'react';
import React, { useState, useEffect } from "react";

import About from '../Section/About/About';
import Contact from '../Section/Contact/Contact';
import Exp from '../Section/Experience/Exp';
import Footer from '../Section/Footer/Footer';
import Header from '../Section/Header/Header';
import Nav from '../Section/Nav/Nav';

import PreLoader from '../Pages/PreLoader/PreLoader';
import About from "../Section/About/About";
import Contact from "../Section/Contact/Contact";
import Exp from "../Section/Experience/Exp";
import Footer from "../Section/Footer/Footer";
import Header from "../Section/Header/Header";
import Nav from "../Section/Nav/Nav";

import PreLoader from "../Pages/PreLoader/PreLoader";

const HomePage = () => {
return (
<div>
<Header />
<Nav />
<About />
<Exp />
<Contact />
<Footer />
</div>
)
}
const [inView, setInView] = useState("");
return (
<div>
<Header setInView={setInView} />
<Nav inView={inView} />
<About setInView={setInView} />
<Exp setInView={setInView} />
<Contact setInView={setInView} />
<Footer />
</div>
);
};

const Home = () => {
const [loading, setLoading] = useState(false);

useEffect(() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 2500);
}, []);
const [loading, setLoading] = useState(false);

return (
<div>
{loading ? <PreLoader /> : <HomePage />}
</div>
)
useEffect(() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 2500);
}, []);

}
return <div>{loading ? <PreLoader /> : <HomePage />}</div>;
};

export default Home;
export default Home;
82 changes: 47 additions & 35 deletions src/components/Section/About/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,76 @@
import React from 'react';
import './About.css';
import React, { useRef, useEffect } from "react";
import { useIsInViewport } from "../../utils/utils";
import "./About.css";

import About_Image from '../../../assets/Pics/about_image.png';
import About_Image from "../../../assets/Pics/about_image.png";


import { FaAward } from 'react-icons/fa';
import { BsFolder } from 'react-icons/bs';
import { BsStar } from 'react-icons/bs';
import { FaAward } from "react-icons/fa";
import { BsFolder } from "react-icons/bs";
import { BsStar } from "react-icons/bs";

var ProjectNumber;

fetch('https://api.github.com/users/losier').then(response => response.json()).then(data => {
ProjectNumber = `${data.public_repos + data.public_gists + '+'}`
}).catch(() => {
ProjectNumber = '60+';
});
fetch("https://api.github.com/users/losier")
.then((response) => response.json())
.then((data) => {
ProjectNumber = `${data.public_repos + data.public_gists + "+"}`;
})
.catch(() => {
ProjectNumber = "60+";
});

const About = ({ setInView }) => {
const aboutRef = useRef(null);
const isInViewport = useIsInViewport(aboutRef);

useEffect(() => {
isInViewport && setInView("#about");
}, [isInViewport]);

const About = () => {
return (
<section id='about'>
<section id="about" ref={aboutRef}>
<h5>Get To Know</h5>
<h2>About Me</h2>

<div className='container about_container'>
<div className='about_me'>
<div className='about_me-image'>
<img src={About_Image} alt='profile_pic' />
<div className="container about_container">
<div className="about_me">
<div className="about_me-image">
<img src={About_Image} alt="profile_pic" />
</div>
</div>

<div className='about_content'>
<div className='about_card'>

<article className='about_card-content'>
<FaAward className='about_icons' />
<div className="about_content">
<div className="about_card">
<article className="about_card-content">
<FaAward className="about_icons" />
<h5>Experience</h5>
<small>Curently studying</small>
</article>

<article className='about_card-content'>
<BsFolder className='about_icons' />
<article className="about_card-content">
<BsFolder className="about_icons" />
<h5>Projects</h5>
<small>{ProjectNumber}</small>
</article>

<article className='about_card-content'>
<BsStar className='about_icons' />
<article className="about_card-content">
<BsStar className="about_icons" />
<h5>Achivements</h5>
<small>69</small>
</article>
</div>
<p>
Hello! My name is <span>Aarab Nishchal</span> and I enjoy creating things that live on the internet.
My interest in web development started back in high school and has been something that's been a part of my life for the past few years.<br />
I am a creative problem solver who loves to create and is always trying new things.
</p>
<p>
Hello! My name is <span>Aarab Nishchal</span> and I enjoy creating
things that live on the internet. My interest in web development
started back in high school and has been something that's been a
part of my life for the past few years.
<br />I am a creative problem solver who loves to create and is
always trying new things.
</p>
</div>
</div>
</section>
)
}
);
};

export default About
export default About;
110 changes: 71 additions & 39 deletions src/components/Section/Contact/Contact.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,116 @@
import React, { useRef, useEffect, useState } from 'react';
import emailjs from 'emailjs-com';
import './Contact.css';
import React, { useRef, useEffect, useState } from "react";
import { useIsInViewport } from "../../utils/utils";

import { HiOutlineMail } from 'react-icons/hi';
import { FaTelegramPlane } from 'react-icons/fa';
import { BsSnapchat } from 'react-icons/bs';
import emailjs from "emailjs-com";
import "./Contact.css";

import { HiOutlineMail } from "react-icons/hi";
import { FaTelegramPlane } from "react-icons/fa";
import { BsSnapchat } from "react-icons/bs";

const Contact = ({ setInView }) => {
const contactRef = useRef(null);
const isInViewport = useIsInViewport(contactRef);

const Contact = () => {
useEffect(() => {
isInViewport && setInView("#contact");
}, [isInViewport]);

const Expire = props => {
const Expire = (props) => {
const [visible, setVisible] = useState(true);

useEffect(() => {
const timer = setTimeout(() => {
const timer = setTimeout(() => {
setVisible(false);
}, props.delay);
return () => clearTimeout(timer)
}, props.delay);
return () => clearTimeout(timer);
}, [props.delay]);

return visible ? <div>{props.children}</div> : <div />;
};

const [status, setStatus] = useState('');
const [status, setStatus] = useState("");
const form = useRef();
const sendEmail = (e) => {
e.preventDefault();

emailjs.sendForm('service_azymqng', 'template_jo2cvj7', form.current, 'KiorzUSNq5lRmavZ9')
.then((result) => {
emailjs
.sendForm(
"service_azymqng",
"template_jo2cvj7",
form.current,
"KiorzUSNq5lRmavZ9"
)
.then(
(result) => {
console.log(result.text);
setStatus("Your message has been sent successfully!");
}, (error) => {
},
(error) => {
console.log(error.text);
setStatus("Some thing went wrong. Please try again later.");
});
e.target.reset();
}
);
e.target.reset();
};

return (
<section id='contact'>
<section id="contact" ref={contactRef}>
<h5>Say, Hello</h5>
<h2>Contact</h2>

<div className='container contact_container'>
<div className='contact_options'>
<article className='contact_option'>
<HiOutlineMail className='contact_icons'/>
<div className="container contact_container">
<div className="contact_options">
<article className="contact_option">
<HiOutlineMail className="contact_icons" />
<h4>Email</h4>
<h5>nishu@duck.com</h5>
<a href='mailto:nishu@duck.com' target="_blank" rel="noreferrer">Send a message</a>
<a href="mailto:nishu@duck.com" target="_blank" rel="noreferrer">
Send a message
</a>
</article>

<article className='contact_option'>
<FaTelegramPlane className='contact_icons'/>
<article className="contact_option">
<FaTelegramPlane className="contact_icons" />
<h4>Telegram</h4>
<h5>t.me/zzcwc</h5>
<a href='https://t.me/zzcwc' target="_blank" rel="noreferrer">Send a message</a>
<a href="https://t.me/zzcwc" target="_blank" rel="noreferrer">
Send a message
</a>
</article>

<article className='contact_option'>
<BsSnapchat className='contact_icons'/>
<article className="contact_option">
<BsSnapchat className="contact_icons" />
<h4>Snapchat</h4>
<h5>nishu.kr</h5>
<a href='https://snapchat.com/add/nishu.kr' target="_blank" rel="noreferrer">Send a message</a>
<a
href="https://snapchat.com/add/nishu.kr"
target="_blank"
rel="noreferrer"
>
Send a message
</a>
</article>
</div>
<form ref={form} onSubmit={sendEmail}>
<input type='text' name='name' placeholder='Your Name' required/>
<input type='email' name='email' placeholder='Your Email' required/>
<textarea name='message' rows="?" placeholder='Your Message' required></textarea>
<button type='submit' className='btn btn-primary'>👋 Say Hello</button>
<div className='status'>
<input type="text" name="name" placeholder="Your Name" required />
<input type="email" name="email" placeholder="Your Email" required />
<textarea
name="message"
rows="?"
placeholder="Your Message"
required
></textarea>
<button type="submit" className="btn btn-primary">
👋 Say Hello
</button>
<div className="status">
<Expire delay="5000">{status}</Expire>
</div>
</form>
</div>
</section>
)
}
);
};

export default Contact
export default Contact;

0 comments on commit fe69953

Please sign in to comment.