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:raviprem2001@gmail.com">
<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 © {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:raviprem2001@gmail.com" 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;
}
