feat: add theme toggle button

* add btn to toggle theme via a dedicated hook and context * change github calendar colors * redesign particles to cope with the white theme * change home image * add copyright * make navbar shadow always visible
mspronesti · Feb 10, 2023 · 63f47fe · 63f47fe
1 parent bc25ee9
commit 63f47fe
Show file tree

Hide file tree

Showing 15 changed files with 286 additions and 165 deletions.
diff --git a/src/assets/home2.svg b/src/assets/home2.svg
diff --git a/src/components/About/About.js b/src/components/About/About.js
@@ -22,7 +22,7 @@ function About() {
             }}
           >
             <h1 style={{ fontSize: "2.1em", paddingBottom: "20px" }}>
-              About <strong className="purple">Me</strong>
+              About <strong className="green">Me</strong>
             </h1>
             <Aboutcard />
           </Col>
@@ -35,15 +35,15 @@ function About() {
           </Col>
         </Row>
         <h1 className="project-heading">
-           <strong className="purple">Languages </strong>
-           and <strong className="purple">Frameworks </strong> I use
+           <strong className="green">Languages </strong>
+           and <strong className="green">Frameworks </strong> I use
 
         </h1>
 
         <Techstack />
 
         <h1 className="project-heading">
-          <strong className="purple">Tools</strong> I use
+          <strong className="green">Tools</strong> I use
         </h1>
         <Toolstack />
 

diff --git a/src/components/About/AboutCard.js b/src/components/About/AboutCard.js
@@ -8,9 +8,9 @@ function AboutCard() {
       <Card.Body>
         <blockquote className="blockquote mb-0">
           <p style={{ textAlign: "justify" }}>
-            Hi Everyone, I am <span className="purple">Massimiliano Pronesti</span>,
-            a passionate Computer Science Engineering student from <span className="purple"> Italy</span>,
-            currently in <span className="purple"> France</span>.
+            Hi Everyone, I am <span className="green">Massimiliano Pronesti</span>,
+            a passionate Computer Science Engineering student from <span className="green"> Italy</span>,
+            currently in <span className="green"> France</span>.
 
             <br />
             <br />

diff --git a/src/components/About/Github.js b/src/components/About/Github.js
@@ -1,28 +1,46 @@
 import React from "react";
 import GitHubCalendar from "react-github-calendar";
 import { Row } from "react-bootstrap";
+import { useThemeContext } from "../../hooks/themeHook";
 
 function Github() {
-  // const colourTheme = {
-  //   background: "transparent",
-  //   text: "#ffffff",
-  //   grade4: "#39d353",
-  //   grade3: "#26a641",
-  //   grade2: "#006d32",
-  //   grade1: "#0e4429",
-  //   grade0: "#161b22",
-  // };
+  const { dark } = useThemeContext();
+
+  // personalized colors for the 
+  // contributions calendar
+  const colourTheme = dark ? 
+  // colors for the dark theme
+  {
+    background: "transparent",
+    text: "#ffffff",
+    level4: "#39d353",
+    level3: "#26a641",
+    level2: "#006d32",
+    level1: "#0e4429",
+    level0: "#2d333b",
+  } 
+  :
+  // colors for the white theme
+  {
+    background: "transparent",
+    level4: "#216e39",
+    level3: "#30a14e",
+    level2: "#40c463",
+    level1: "#9be9a8",
+    level0: "#ebedf0",
+  };
+
   return (
     <Row style={{ justifyContent: "center", paddingBottom: "10px" }}>
       <h1 className="project-heading" style={{ paddingBottom: "20px" }}>
-        Days I <strong className="purple">Code</strong>
+        Days I <strong className="green">Code</strong>
       </h1>
+
       <GitHubCalendar
         username="mspronesti"
-        blockSize={15}
+        blockSize={16}
         blockMargin={5}
-        color="#39d353"
-        //theme={colourTheme}
+        theme={colourTheme}
         fontSize={16}
       />
     </Row>

diff --git a/src/components/BtnTottleTheme.js b/src/components/BtnTottleTheme.js
@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { useThemeContext } from '../hooks/themeHook';
+import { BsSun } from 'react-icons/bs';
+import { FiMoon } from 'react-icons/fi';
+import { Button } from 'react-bootstrap';
+
+const BtnToggleTheme = ({ className }) => {
+  const { dark, toggleTheme } = useThemeContext();
+
+  const ToggleThemeIcon = useMemo(
+    () => (dark ? FiMoon : BsSun),
+    [dark],
+  );
+
+  return (
+    <Button className={className + " btn-toggle"} onClick={toggleTheme}>
+      <ToggleThemeIcon style={{ marginTop: "10px", fontSize: "25px" }}/>
+    </Button>
+  );
+};
+
+export default BtnToggleTheme;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -8,47 +8,51 @@ import {
 import { FaLinkedinIn } from "react-icons/fa";
 
 function Footer() {
+  let date = new Date();
+  let year = date.getFullYear();
+
   return (
     <Container fluid className="footer">
       <Row>
         <Col md="4">
         </Col>
+
+        <Col md="4">
+          <h3>Copyright © {year} Massimiliano Pronesti</h3>
+        </Col>
+
         <Col md="4">
           <ul className="footer-icons">
             <li className="social-icons">
-              <a
+              <a className="footer-social-icons"
                 href="https://github.com/mspronesti"
-                style={{ color: "white" }}
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <AiFillGithub />
               </a>
             </li>
             <li className="social-icons">
-              <a
+              <a className="footer-social-icons"
                 href="https://www.linkedin.com/in/massimiliano-pronesti/"
-                style={{ color: "white" }}
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <FaLinkedinIn />
               </a>
             </li>
             <li className="social-icons">
-              <a
+              <a className="footer-social-icons"
                 href="mailto:[email protected]"
-                style={{ color: "white" }}
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 <AiFillMail />
               </a>
             </li>
             <li className="social-icons">
-              <a
+              <a className="footer-social-icons"
                 href="https://www.instagram.com/__mpronesti"
-                style={{ color: "white" }}
                 target="_blank"
                 rel="noopener noreferrer"
               >

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { Container, Row, Col } from "react-bootstrap";
-import homeLogo from "../../assets/home2.svg";
+import homeLogo from "../../assets/home.svg";
 import Particle from "../Particle";
 import HomeIntro from "./HomeIntro";
 import Type from "./Type";

diff --git a/src/components/Home/HomeIntro.js b/src/components/Home/HomeIntro.js
@@ -16,25 +16,25 @@ function HomeIntro() {
         <Row>
           <Col md={8} className="home-about-description">
             <h1 style={{ fontSize: "2.6em" }}>
-              LET ME <span className="purple"> INTRODUCE </span> MYSELF...
+              LET ME <span className="green"> INTRODUCE </span> MYSELF...
             </h1>
             <p className="home-about-body">
               I'm pursuing a Double Degree M.Sc. in Computer Science Engineering at PoliTO and
               Data Science at EURECOM 💻.
               <br />
               <br />I am fluent in classics like
               <i>
-                <b className="purple"> C, C++, Java, Python, Javascript. </b>
+                <b className="green"> C, C++, Python, Java, Rust, Javascript. </b>
               </i>
               <br />
               <br />
               I'm mainly interested in &nbsp;
               <i>
-                <b className="purple">High-Performance Computing</b>, {" "}
-                <b className="purple">
+                <b className="green">High-Performance Computing</b>, {" "}
+                <b className="green">
                   Machine Learning
-                </b>, and, recently <b className="purple">Quantum Computing</b>. 
-                I'm also very passionate about the field of pure <b className="purple">Software Engineering</b>. 
+                </b>, and, recently <b className="green">Quantum Computing</b>. 
+                I'm also very passionate about the field of pure <b className="green">Software Engineering</b>. 
               </i>
               <br />
               <br />
@@ -51,7 +51,7 @@ function HomeIntro() {
           <Col md={12} className="home-about-social">
             <h1>FIND ME ON</h1>
             <p>
-              Feel free to <span className="purple">connect </span>with me
+              Feel free to <span className="green">connect </span>with me
             </p>
             <ul className="home-about-social-links">
               <li className="social-icons">

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -3,18 +3,14 @@ import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
 import Container from "react-bootstrap/Container";
 import { Link } from "react-router-dom";
-// import { CgGitFork } from "react-icons/cg";
-// import Button from "react-bootstrap/Button";
-// import logo from "../assets/logo.png";
+import BtnToggleTheme from "./BtnTottleTheme";
 
 import {
-  // AiFillStar,
   AiOutlineHome,
   AiOutlineFundProjectionScreen,
   AiOutlineUser,
 } from "react-icons/ai";
 
-// import { CgFileDocument } from "react-icons/cg";
 
 function NavBar() {
   const [expand, updateExpanded] = useState(false);
@@ -52,6 +48,7 @@ function NavBar() {
           <span/>
           <span/>
         </Navbar.Toggle>
+
         <Navbar.Collapse id="responsive-navbar-nav">
           <Nav className="mx-auto" defaultActiveKey="#home">
             <Nav.Item>
@@ -83,26 +80,9 @@ function NavBar() {
               </Nav.Link>
             </Nav.Item>
 
-            {/* <Nav.Item>
-              <Nav.Link
-                as={Link}
-                to="/resume"
-                onClick={() => updateExpanded(false)}
-              >
-                <CgFileDocument style={{ marginBottom: "3px" }} /> Resume
-              </Nav.Link>
-            </Nav.Item> */}
-
-           {/* <Nav.Item className="fork-btn">
-              <Button
-                href="https://github.com/mspronesti/mspronesti.github.io"
-                target="_blank"
-                className="fork-btn-inner"
-              >
-                <CgGitFork style={{ fontSize: "1.2em" }} />{" "}
-                <AiFillStar style={{ fontSize: "1.1em" }} />
-              </Button>
-            </Nav.Item> */}
+            <Nav.Item>
+              <BtnToggleTheme className="col-md-12"/>
+            </Nav.Item>
 
           </Nav>
         </Navbar.Collapse>