Merge pull request #27 from mdyeates/update/About

Update/about

package.json

@@ -11,6 +11,7 @@
  "framer-motion": "^10.0.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-icons": "^4.10.1",
  "react-intersection-observer": "^9.4.3",
  "react-modal": "^3.16.1",
  "react-router-dom": "^6.8.2",

src/App.js

@@ -1,4 +1,6 @@
 import Header from "./components/Header";
+import Footer from "./components/Footer";
+
 import Loader from "./pages/loader/loader";
 import { useState } from "react";
 import { Routes, Route, useLocation, Navigate } from "react-router-dom";
@@ -8,7 +10,6 @@ import About from "./pages/about/About";
 import Portfolio from "./pages/portfolio/Portfolio";
 import Contact from "./pages/contact/Contact";
 import PageNotFound from "./pages/404/PageNotFound";
-
 function App() {
  const personalDetails = {
  name: "Michael Yeates",
@@ -58,6 +59,7 @@ function App() {
  <Route path="/page-not-found" element={<PageNotFound />} />
  <Route path="*" element={<Navigate to="/page-not-found" />} />
  </Routes>
+ <Footer />
  </>
  )}
  </>

src/components/AboutMe.js

@@ -1,95 +1,86 @@
-// import aboutMeImg from "../images/aboutme.jpeg";
-// import { motion } from "framer-motion";
-// import SocialIcons from "../components/SocialIcons";
-// import { useInView } from "react-intersection-observer";
-// import { useState, useEffect } from "react";
-// import resume from "../pages/about/michael-yeates-resume.pdf";
+import aboutMeImg from "../images/aboutme.jpeg";
+import { motion } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import { NavLink } from "react-router-dom";
+import { FiArrowUpRight } from "react-icons/fi";
 
-const AboutMe = ({ name, email, location, availability, brand }) => {
- // const [ref, inView] = useInView({
- // threshold: 0.2,
- //  triggerOnce: true,
- // });
+const AboutMe = ({ name }) => {
+ const [ref, inView] = useInView({
+  threshold: 0.4,
+ triggerOnce: true,
+ });
 
- // const [downloading, setDownloading] = useState(false);
+ const staggerVariants = {
+ initial: { opacity: 0 },
+ animate: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.3,
+ },
+ },
+ };
 
- // useEffect(() => {
- // setDownloading(false);
- // }, [downloading]);
-
- // const handleDownload = () => {
- // setDownloading(true);
- // const link = document.createElement("a");
- // link.href = resume;
- // link.download = "Michael-Yeates-Resume.pdf";
- // link.onload = () => {
- // link.remove();
- // setDownloading(false);
- // };
- // document.body.appendChild(link);
- // link.click();
- // };
+ const paragraphVariants = {
+ initial: { y: 20, opacity: 0 },
+ animate: { y: 0, opacity: 1 },
+ };
 
  return (
- <p style={{ color: "grey" }}>Stay tuned for updates!</p>
- // <div className="aboutContainer container">
- // <div className="row">
- // <motion.div
- // className="personalImage col-12 col-lg-4"
- // ref={ref}
- // initial={{ x: "-10vw", opacity: 0 }}
- // animate={inView ? { x: 0, opacity: 1 } : { x: "-10vw", opacity: 0 }}
- // transition={{ duration: 0.4, ease: "easeInOut" }}
- // >
- // <img src={aboutMeImg} alt={name} />
- // </motion.div>
- // <motion.div
- // className="personalInfo col-12 col-lg-8"
- // ref={ref}
- // initial={{ x: "10vw", opacity: 0 }}
- // animate={inView ? { x: 0, opacity: 1 } : { x: "10vw", opacity: 0 }}
- // transition={{ duration: 0.4, ease: "easeInOut" }}
- // >
- // <div className="contentContainer">
- // <h4>Nice to meet you</h4>
- // <h5>I'm a Software Engineer who crafts amazing digital experiences!</h5>
- // <div className="contentDescription">
- // <p>{brand}</p>
- // </div>
- // <div className="infoContainer">
- // <div className="row">
- // <div className="col-12 col-md-6 info">
- // <span>Name:</span>
- // <p>Michael Yeates</p>
- // </div>
- // <div className="col-12 col-md-6 info">
- // <span>Email:</span>
- // <p>
- // <a href={`mailto:${email}`}>{email}</a>
- // </p>
- // </div>
- // </div>
- // <div className="row">
- // <div className="col-12 col-md-6 info">
- // <span>Location:</span>
- // <p>{location}</p>
- // </div>
- // <div className="col-12 col-md-6 info">
- // <span>Availability:</span>
- // <p>{availability}</p>
- // </div>
- // </div>
- // </div>
- // <div className="buttonContainer">
- // <button className="btn downloadCV" /*onClick={handleDownload}*/ disabled={downloading}>
- // {downloading ? "Downloading..." : "Download Resume"}
- // </button>{" "}
- // <SocialIcons />
- // </div>
- // </div>
- // </motion.div>
- // </div>
- // </div>
+ <div className="aboutContainer container">
+ <div className="row">
+ <motion.div
+ className="personalImage col-12 col-lg-6"
+ ref={ref}
+ initial={{ x: "-10vw", opacity: 0, scale: 0.5 }}
+ animate={inView ? { x: 0, opacity: 1, scale: 1 } : { x: "-10vw", opacity: 0, scale: 0.5 }}
+ transition={{ delay: 0.5, duration: 0.4, ease: "easeInOut" }}
+ whileHover={{ scale: 1.05 }}
+ >
+ <motion.img src={aboutMeImg} alt={name} />
+ </motion.div>
+ <div className="personalInfo col-12 col-lg-6">
+ <motion.div className="contentContainer" variants={staggerVariants}>
+ <motion.h4 variants={paragraphVariants}>Nice to meet you! 👋🏻</motion.h4>
+ <motion.h5 variants={paragraphVariants}>I'm a Software Engineer at Amazon.</motion.h5>
+ <motion.div
+ className="contentDescription"
+ variants={staggerVariants}
+ initial="initial"
+ animate={inView ? "animate" : "initial"}
+ >
+ <motion.p variants={paragraphVariants}>
+ Today, I find myself knee-deep in an exhilarating chapter of my journey as a degree apprentice at the
+ tech titan, <span style={{ color: "white" }}> Amazon</span>. My playground? The captivating universe of{" "}
+ <span style={{ color: "white" }}> Alexa</span>.
+ </motion.p>
+ <br />
+ <motion.p variants={paragraphVariants}>
+ Here, I don my <span style={{ color: "white" }}> problem-solving </span>
+ cape and dive headfirst into real-world challenges, all while relentlessly pursuing a{" "}
+ <span style={{ color: "white" }}> Digital and Technology Solutions</span> degree from the University of
+ Roehampton. So here I am, juggling bits of binary and real-life conundrums, all while crafting my own
+ success story.
+ </motion.p>
+ <br />
+ <motion.p variants={paragraphVariants}>
+ Life is a kaleidoscope of experiences, far beyond the confines of work. When code isn't my focus, I'm
+ conquering cycling routes, feeling the wind on spirited runs, and fueling my love for Formula One. Amid
+ serene moments, I transform into a film aficionado, seeking films that kindle inspiration and provoke
+ thought.
+ </motion.p>
+ </motion.div>
+ <NavLink to="/portfolio">
+ <motion.button className="btn" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.99 }}>
+ <p>View Portfolio</p>
+ <div>
+ <FiArrowUpRight whileHover={{ scale: 4 }} className="arrow-icon" />
+ </div>
+ </motion.button>
+ </NavLink>
+ </motion.div>
+ </div>
+ </div>
+ </div>
  );
 };
 

src/components/Footer.js

@@ -1,9 +1,33 @@
+import { useState, useEffect } from "react";
+import { AiOutlineStar } from "react-icons/ai";
+import { BiGitRepoForked } from "react-icons/bi";
 const Footer = () => {
  const date = new Date();
  const currentYear = date.getFullYear();
 
+ const [gitHubInfo, setGitHubInfo] = useState({
+ stars: null,
+ forks: null,
+ });
+
+ useEffect(() => {
+ fetch("https://api.github.com/repos/mdyeates/my-portfolio")
+ .then((res) => res.json())
+ .then((json) => {
+ const { stargazers_count, forks_count } = json;
+ setGitHubInfo({
+ stars: stargazers_count,
+ forks: forks_count,
+ });
+ })
+ .catch((e) => console.error(e));
+ }, []);
+
  return (
  <footer>
+ <span>
+ <AiOutlineStar /> {gitHubInfo.stars} <BiGitRepoForked /> {gitHubInfo.forks}
+ </span>
  <p>
  <span>▷</span> Designed and built by Michael Yeates &copy; {currentYear}
  </p>

src/index.css

@@ -3,10 +3,11 @@
 /* --- VARIABLES --- */
 :root {
  --bg-color: #131a22;
+ --bg2-color: #232f3e19;
  --hl-color: #48a3c6;
  --hl2-color: #e47911;
  --text-color: #f3f3f3;
- --secondary-text-color: #9f9f9f;
+ --secondary-text-color: #999999;
  --grey: #9f9f9f76;
  --spacing: 50px;
  --sm-spacing: 30px;

src/pages/about/About.js

@@ -1,12 +1,12 @@
 import AboutMe from "../../components/AboutMe";
-import PageHeader from "../../components/PageHeader";
 
 const About = ({ name, location, brand, email, availability }) => {
  return (
- <section className="about">
- <PageHeader title="About me" description="Coming Soon..." />
- <AboutMe name={name} location={location} brand={brand} email={email} availability={availability} />
- </section>
+ <>
+ <section className="about">
+ <AboutMe name={name} location={location} brand={brand} email={email} availability={availability} />
+ </section>
+ </>
  );
 };