From 63f47fe6669e6c90d9e4835301b995f04c954b46 Mon Sep 17 00:00:00 2001 From: mspronesti Date: Fri, 10 Feb 2023 22:08:17 +0100 Subject: [PATCH] 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 --- src/assets/home2.svg | 1 - src/components/About/About.js | 8 +- src/components/About/AboutCard.js | 6 +- src/components/About/Github.js | 44 ++++++--- src/components/BtnTottleTheme.js | 22 +++++ src/components/Footer.js | 20 ++-- src/components/Home/Home.js | 2 +- src/components/Home/HomeIntro.js | 14 +-- src/components/Navbar.js | 30 +----- src/components/Particle.js | 122 +++++++++++++++++------ src/components/Projects/ProjectCards.js | 3 +- src/components/Projects/Projects.js | 2 +- src/hooks/themeHook.js | 46 +++++++++ src/index.js | 5 +- src/style.css | 126 +++++++++++------------- 15 files changed, 286 insertions(+), 165 deletions(-) delete mode 100644 src/assets/home2.svg create mode 100644 src/components/BtnTottleTheme.js create mode 100644 src/hooks/themeHook.js diff --git a/src/assets/home2.svg b/src/assets/home2.svg deleted file mode 100644 index 7749baa..0000000 --- a/src/assets/home2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/About/About.js b/src/components/About/About.js index 39af6c8..40605bc 100644 --- a/src/components/About/About.js +++ b/src/components/About/About.js @@ -22,7 +22,7 @@ function About() { }} >

- About Me + About Me

@@ -35,15 +35,15 @@ function About() {

- Languages - and Frameworks I use + Languages + and Frameworks I use

- Tools I use + Tools I use

diff --git a/src/components/About/AboutCard.js b/src/components/About/AboutCard.js index fe2e8f3..807708e 100644 --- a/src/components/About/AboutCard.js +++ b/src/components/About/AboutCard.js @@ -8,9 +8,9 @@ function AboutCard() {

- Hi Everyone, I am Massimiliano Pronesti, - a passionate Computer Science Engineering student from Italy, - currently in France. + Hi Everyone, I am Massimiliano Pronesti, + a passionate Computer Science Engineering student from Italy, + currently in France.

diff --git a/src/components/About/Github.js b/src/components/About/Github.js index c68124d..342d180 100644 --- 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 (

- Days I Code + Days I Code

+ diff --git a/src/components/BtnTottleTheme.js b/src/components/BtnTottleTheme.js new file mode 100644 index 0000000..dae4633 --- /dev/null +++ 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 ( + + ); +}; + +export default BtnToggleTheme; \ No newline at end of file diff --git a/src/components/Footer.js b/src/components/Footer.js index c7adb12..552ca55 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -8,17 +8,24 @@ import { import { FaLinkedinIn } from "react-icons/fa"; function Footer() { + let date = new Date(); + let year = date.getFullYear(); + return ( + + +

Copyright © {year} Massimiliano Pronesti

+ +