About.

js

import React from "react";

import Skills from "./Skills";
import { FaFileDownload } from "react-icons/fa";
const About = () => {
return (
<>
<div className="AboutPage">
<div className="AboutText">
<h1 className="AboutTextHeading">
Get to <b>know</b> me!
</h1>
<p>
Hi, my name is <b>Bird Ravi</b> and I am from Thoraipakkam,
Chennai. I'm a <b>Frontend web developer</b> Mechanical Engineering
graduate <b>Proficient in HTML, CSS, JavaScript, and modern frameworks
such as React.js</b>. <br />
<br />
I love to create projects with beautiful designs and put my own
twists on it, you can check out some of my work in the projects
section.
<br />
<br />I am <b>open</b> to new collaborations or work where I can
contribute and grow. Feel free to connect with me, links are in the
footer.
<br />
Apart from coding I love to make discord servers,designs and do
photography in my spare time.
</p>
<a href="Resume.pdf" download className="resume-btn">
<button>
Download Resume <FaFileDownload></FaFileDownload>
</button>
</a>
</div>

<div></div>
</div>

<h1 className="SkillsHeading"> Skillset</h1>

<div className="skills">
<Skills skill="HTML" />
<Skills skill="CSS" />
<Skills skill="Bootstrap" />
<Skills skill="Tailwind" />
<Skills skill="Javascript" />
<Skills skill="React" />
<Skills skill="Git" />
<Skills skill="Github" />
<Skills skill="C++" />
<Skills skill="Figma" />
<Skills skill="Npm" />
</div>
</>
);
};

export default About;

Contact.js

import React, { useState } from "react";

import { FaCheck } from "react-icons/fa";

const Contact = () => {

const [formData, setFormData] = useState({
name: "",
email: "",
message: "",
});
const [submitted, setSubmitted] = useState(false);

const handleChange = (e) => {

const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};

const handleSubmit = (e) => {

e.preventDefault();
console.log("Form submitted!");
setSubmitted(true);
};

return (
<div className="contact-container">
<h2>Contact Me</h2>
{submitted ? (
<p className="submitted-message">Form has been submitted!</p>
) : (
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
 <label htmlFor="message">Message:</label>
<textarea
id="message"
name="message"
value={formData.message}
onChange={handleChange}
required
/>
</div>
<a type="submit" href="mailTo:[email protected]">
<button className="submit-btn">
{" "}
Submit
<FaCheck> </FaCheck>{" "}
</button>
</a>
</form>
)}
</div>
);
};

export default Contact;

Footer.js

import React from "react";

import { FaGithub, FaInstagram } from "react-icons/fa";
import { GrMail } from "react-icons/gr";

const Footer = () => {

const date = new Date();
let year = date.getFullYear();
return (
<footer>
<h4>Copyright &copy; {year} | All Rights Reserved.</h4>
<div className="footerLinks">
<a href="https://ravi2666.github.io/" target="_blank">
<FaGithub />
</a>
<a href="#" target="_blank">
<FaInstagram />
</a>

<a href="mailTo:[email protected]" target="_blank">

<GrMail />
</a>
</div>
</footer>
);
};

export default Footer;

Home.js

import React from "react";

import { Link } from "react-router-dom";
import Type from "./Type";
import Tilt from "react-parallax-tilt";
import Avatar from "../images/Avatar.png";
import { CgPhone } from "react-icons/cg";
import { BsPerson } from "react-icons/bs";
const Home = () => {
return (
<div>
<div className="HomePage">
<div className="HomeText">
<h1>Hello there!</h1>
<h1>
I'M <b>Bird Ravi</b>
</h1>
<Type />
<Link to="/About">
<button>
About Me
<BsPerson />
</button>
</Link>

<Link to="/Contact">
<button>
Contact <CgPhone />
</button>
</Link>
</div>
<Tilt>
<img className="Avatar" src={Avatar} alt="" />
</Tilt>
</div>
</div>
);
};

export default Home;

MoveToTop.js

import { useEffect } from "react";

import { useLocation } from "react-router-dom";

const MoveToTop = () => {

const path = useLocation();

useEffect(() => {
window.scrollTo(0, 0);
}, [path]);
};

export default MoveToTop;

NavBar.js

import React from "react";

import { useState } from "react";
import { Link } from "react-router-dom";
import { AiOutlineHome } from "react-icons/ai";
import { BsPerson, BsCodeSlash } from "react-icons/bs";
import { CgPhone } from "react-icons/cg";

const Nav = () => {

const [navbarblur, setnavbarblur] = useState(false);

function scrollHandler() {
if (window.scrollY >= 20) {
setnavbarblur(true);
} else {
setnavbarblur(false);
}
}

var showMenu = () => {

var bar = document.getElementsByClassName("bar");
var ham = document.getElementsByClassName("NavbarLinks");
bar[0].classList.toggle("barOne");
bar[1].classList.toggle("barTwo");
bar[2].classList.toggle("barThree");

ham[0].classList.toggle("showNavbar");
};

var hideMenu = () => {

var bar = document.getElementsByClassName("bar");
var ham = document.getElementsByClassName("NavbarLinks");
bar[0].classList.remove("barOne");
bar[1].classList.remove("barTwo");
bar[2].classList.remove("barThree");
ham[0].classList.remove("showNavbar");
};

window.addEventListener("scroll", scrollHandler);

return (
<nav className={navbarblur ? "Navbar blur" : "Navbar"}>
<h1
title="Reload"
onClick={() => window.location.reload(true)}
className="Logo"
>
BR
</h1>

<div className="Hamburger" onClick={showMenu}>

<span className="bar"></span>
<span className="bar"></span>
<span className="bar"></span>
</div>

<ul className="NavbarLinks">
<li onClick={hideMenu}>
<Link to="/">
<AiOutlineHome /> Home
</Link>
</li>
 <li onClick={hideMenu}>
<Link to="/About">
<BsPerson /> About
</Link>
</li>
<li onClick={hideMenu}>
<Link to="/Project">
<BsCodeSlash /> Projects
</Link>
</li>
<li onClick={hideMenu}>
<Link to="/Contact">
<CgPhone />
Contact
</Link>
</li>
</ul>
</nav>
);
};

export default Nav;

ProjectBox.js

import React from "react";

import { FaGithub } from "react-icons/fa";
import { CgFileDocument } from "react-icons/cg";

const ProjectBox = ({ projectPhoto, projectName }) => {

const desc = {
LevelsDesc:
"This website is a for a local gym to help with their sales.This helped me
understand React better and more clearly. I also learned how to host on vercel.",
LevelsGithub: "#",
LevelsWebsite: "#",

MovieDesc:
"This web app is for helping you find your desired movie.The project helped
me with understanding the working of API.I also learned new CSS properties and
tricks.",
MovieGithub: "#",
MovieWebsite: "#",

ColourPaletteDesc:
"This website helps you generate random colours that you can use as a
palette.The project helped me understand Javascript more deeply using advance
techniques",
ColourPaletteGithub: "#",
ColourPaletteWebsite: "#",

BackpackDesc:
"This webpageis was made for an ecommerce brand showcasing their
backpacks.The project taught me how to use custom cursors and arrange text in a
much better way",
BackpackGithub: "#",
BackpackWebsite: "#",
};
 return (
<div className="projectBox">
<img className="projectPhoto" src={projectPhoto} alt="Project display" />
<div>
<br />
<h3>{projectName}</h3>
<br />
{desc[projectName + "Desc"]}
<br />

<a href={desc[projectName + "Github"]} target="_blank">

<button className="projectbtn">
<FaGithub /> Github
</button>
</a>

<a href={desc[projectName + "Website"]} target="_blank">

<button className="projectbtn">
<CgFileDocument /> Site
</button>
</a>
</div>
</div>
);
};
export default ProjectBox;

Projects.js

import React from "react";

import ProjectBox from "./ProjectBox";
import FilmImage from "../images/Film.png";
import GymImage from "../images/gym.png";
import ColourImage from "../images/colour.png";
import BackpackImage from "../images/backpack.png";

const Projects = () => {

return (
<div>
<h1 className="projectHeading">
My <b>Projects</b>
</h1>
<div className="project">
<ProjectBox projectPhoto={GymImage} projectName="Levels" />
<ProjectBox projectPhoto={FilmImage} projectName="Movie" />
<ProjectBox projectPhoto={ColourImage} projectName="ColourPalette" />
<ProjectBox projectPhoto={BackpackImage} projectName="Backpack" />
</div>
</div>
);
};

export default Projects;

Skills.js
import React from "react";
import { CgCPlusPlus } from "react-icons/cg";
import {
FaReact,
FaGitAlt,
FaGithub,
FaNpm,
FaFigma,
FaBootstrap,
FaHtml5,
FaCss3,
} from "react-icons/fa";
import { DiJavascript1 } from "react-icons/di";
import { SiTailwindcss } from "react-icons/si";

const Skills = ({ skill }) => {

const icon = {
HTML: <FaHtml5 />,
CSS: <FaCss3 />,
Javascript: <DiJavascript1 />,
Bootstrap: <FaBootstrap />,
Tailwind: <SiTailwindcss />,
"C++": <CgCPlusPlus />,
React: <FaReact />,
Git: <FaGitAlt />,
Github: <FaGithub />,
Npm: <FaNpm />,
Figma: <FaFigma />,
};

return (
<div title={skill} className="SkillBox">
{icon[skill]}
</div>
);
};

export default Skills;

Type.js

import React from "react";

import Typewriter from "typewriter-effect";

const Type = () => {

return (
<div className="TypeEffect">
<Typewriter
options={{
strings: ["Web Developer", "Web Designer", "Front End Developer"],
autoStart: true,
loop: true,
delay: 70,
deleteSpeed: 20,
}}
/>
</div>
);
};

export default Type;

App.js

import { Route, Routes, useLocation } from "react-router-dom";

import { useEffect, useState } from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import Nav from "./Components/Navbar";
import Footer from "./Components/Footer";
import Home from "./Components/Home";
import About from "./Components/About";
import Project from "./Components/Projects";
import Contact from "./Components/Contact";
import MoveToTop from "./Components/MoveToTop";
import CircleLoader from "react-spinners/CircleLoader";
import "./App.css";

function App() {
const [loading, setLoading] = useState(true);
const location = useLocation();

useEffect(() => {
setLoading(true);

setTimeout(() => {
setLoading(false);
}, 1900);
}, []);

return (
<div>
{loading ? (
<div className="loader">
<CircleLoader
color={"#011c38"}
loading={true}
size={100}
aria-label="Loading Spinner"
data-testid="loader"
/>
</div>
) : (
<>
<Nav />
<MoveToTop />

<TransitionGroup>
<CSSTransition key={location.key} classNames="fade" timeout={500}>
<Routes location={location}>
<Route path="/" element={<Home />} />
<Route path="/About" element={<About />} />
<Route path="/Project" element={<Project />} />
<Route path="/Contact" element={<Contact />} />
</Routes>
</CSSTransition>
</TransitionGroup>
 <Footer />
</>
)}
</div>
);
}

export default App;

App.css

.fade-enter {
opacity: 0;
}

.fade-enter-active {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}

.fade-exit {
opacity: 1;
}

.fade-exit-active {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}