Development (#29)

* Modified files for changing the themes on all the pages * Refactored all JavaScript files * Fixed the spacing of the CSS files * del: deleted an empty line * add: added an empty line * add: added conditional for deploying another branch * del: removed the writing of CNAME line * del: deleted the branch and the optional environment change
GhostVaibhav · Jun 30, 2024 · 7727fde · 7727fde
1 parent f86918d
commit 7727fde
Show file tree

Hide file tree

Showing 8 changed files with 366 additions and 248 deletions.
diff --git a/.github/workflows/node.js.dev.yml b/.github/workflows/node.js.dev.yml
@@ -25,13 +25,13 @@ jobs:
       run: npm install
     - name: Setting up Git
       run: |
-           git remote set-url origin https://GhostVaibhav:${{ secrets.PASS }}@github.com/GhostVaibhav/Simple.git
-           git config --global user.email "[email protected]"
-           git config --global user.name "Vaibhav Sharma"
+          git remote set-url origin https://GhostVaibhav:${{ secrets.PASS }}@github.com/GhostVaibhav/Simple.git
+          git config --global user.email "[email protected]"
+          git config --global user.name "Vaibhav Sharma"
     - name: Writing to environment variable
       run: |
-           touch .env
-           echo 'REACT_APP_RECAPTCHA_KEY=${{ secrets.REACT_APP_RECAPTCHA_KEY }}' >> .env
-           npm install gh-pages --save-dev
+          touch .env
+          echo 'REACT_APP_RECAPTCHA_KEY=${{ secrets.REACT_APP_RECAPTCHA_KEY }}' >> .env
+          npm install gh-pages --save-dev
     - name: Building and deploying the site
       run: npm run deploy
diff --git a/src/App.css b/src/App.css
@@ -35,4 +35,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -72,6 +72,7 @@ function App() {
     const [verified, setVerified] = useState(false);
     const challengeBtnCountMax = 10;
     const [challengeBtn, setChallengeBtn] = useState(1);
+    const [theme, setTheme] = useState("blue");
     function inInput() {
         const elem = document.getElementById("in-name");
         const elem2 = document.getElementById("in-email");
@@ -114,14 +115,14 @@ function App() {
                 <Suspense fallback={<Loader />}>
                     <Router>
                         <OutsideAlerter isPhone={isPhone}>
-                            <Navbar isPhone={isPhone} sidebar={sidebar} setSidebar={setSidebar} handleClose={handleClose} handleOpen={handleOpen} useKey={useKey} />
+                            <Navbar isPhone={isPhone} sidebar={sidebar} theme={theme} setTheme={setTheme} setSidebar={setSidebar} handleClose={handleClose} handleOpen={handleOpen} useKey={useKey} />
                         </OutsideAlerter>
                         <AnimatePresence>
                             <Routes>
-                                <Route path="/" element={<Introduction isPhone={isPhone} />} />
-                                <Route path="/about" element={<About isPhone={isPhone} setChallengeBtn={setChallengeBtn} challengeBtn={challengeBtn} btnCountMax={challengeBtnCountMax} />} />
-                                <Route path="/projects" element={<Projects />} />
-                                <Route path="/contact" element={<Contact verified={verified} setVerified={setVerified} />} />
+                                <Route path="/" element={<Introduction isPhone={isPhone} theme={theme} />} />
+                                <Route path="/about" element={<About isPhone={isPhone} theme={theme} setChallengeBtn={setChallengeBtn} challengeBtn={challengeBtn} btnCountMax={challengeBtnCountMax} />} />
+                                <Route path="/projects" element={<Projects theme={theme} isPhone={isPhone} />} />
+                                <Route path="/contact" element={<Contact theme={theme} verified={verified} setVerified={setVerified} />} />
                             </Routes>
                         </AnimatePresence>
                     </Router>

diff --git a/src/components/About.js b/src/components/About.js
diff --git a/src/components/Introduction.js b/src/components/Introduction.js
@@ -28,11 +28,22 @@ function Introduction(props) {
     const navigate = useNavigate();
     let clickCounter = 1;
     function toAbout() {
-        if(clickCounter === 7)
+        if (clickCounter === 7)
             navigate("./about");
         else
             clickCounter++;
     }
+    const colors = {
+        green: {
+            textColor: "text-green-500",
+        },
+        red: {
+            textColor: "text-red-500",
+        },
+        blue: {
+            textColor: "text-indigo-500",
+        }
+    };
     useEffect(() => {
         AOS.init();
     }, []);
@@ -56,7 +67,7 @@ function Introduction(props) {
                                 <span data-blobity-magnetic="true" data-blobity-tooltip="Hi in French" className="py-2 spin_words first-letter:font-bold block">Salut</span>
                             </motion.div>
                         </div>
-                        <motion.span onClick={toAbout} initial="out" animate="in" exit="out" variants={pageTransition} data-blobity-offset-x="10" style={{ "fontFamily": "Caveat" }} className="text-indigo-500 text-5xl md:text-6xl select-none">
+                        <motion.span onClick={toAbout} initial="out" animate="in" exit="out" variants={pageTransition} data-blobity-offset-x="10" style={{ "fontFamily": "Caveat" }} className={`${colors[props.theme].textColor} transition-colors ease-linear duration-500 text-5xl md:text-6xl select-none`}>
                             I'm Vaibhav
                         </motion.span>
                     </div>

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -1,7 +1,22 @@
 import { Link, useNavigate } from "react-router-dom";
 import GPL from "../images/gplv3.png";
+import ThemeButton from "./ThemeButton";
 
 function Navbar(props) {
+    const colors = {
+        green: {
+            navbarColor: "bg-green-800",
+            navbarHoverColor: "bg-green-700",
+        },
+        red: {
+            navbarColor: "bg-orange-900",
+            navbarHoverColor: "bg-red-800",
+        },
+        blue: {
+            navbarColor: "bg-gray-800",
+            navbarHoverColor: "bg-gray-800",
+        }
+    };
     const displayIcons = false;
     const navigate = useNavigate();
     function hoverIn(element) {
@@ -166,7 +181,7 @@ function Navbar(props) {
                 </div> */}
             {/* </div> */}
             <div className="z-50 fixed flex text-white top-0 sidebar transform -translate-x-[11rem] h-screen transition duration-200 ease-in-out">
-                <div className="flex border-r-gray-700 border-r-[1px] md:opacity-95 bg-gray-800 flex-col">
+                <div className={`flex border-r-gray-700 border-r-[1px] md:opacity-95 transition-all ease-linear duration-500 ${colors[props.theme].navbarColor} flex-col`}>
                     <div className="sticky">
                         {/* Logo */}
                         <Link to="/" onClick={props.isPhone() && props.handleClose}>
@@ -190,7 +205,7 @@ function Navbar(props) {
                             <div>
                                 <Link to="/" onClick={props.isPhone() && props.handleClose}>
                                     <div className="m-1 mx-2">
-                                        <article onMouseEnter={displayIcons && !props.isPhone() ? () => hoverIn(".icon1") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon1") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className="flex items-center justify-between rounded-md hover:bg-gray-700 md:hover:bg-gray-800 p-2 pr-4">
+                                        <article onMouseEnter={displayIcons && !props.isPhone() ? () => hoverIn(".icon1") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon1") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className={`flex items-center justify-between rounded-md hover:${colors[props.theme].navbarHoverColor} p-2 pr-4`}>
                                             <div>
                                                 <svg xmlns="http://www.w3.org/2000/svg" className="mx-1 inline h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                     <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
@@ -207,7 +222,7 @@ function Navbar(props) {
                             <div>
                                 <Link to="/projects" onClick={props.isPhone() && props.handleClose}>
                                     <div className="m-1 mx-2">
-                                        <article onMouseEnter={displayIcons && !props.isPhone() ? () => hoverIn(".icon2") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon2") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className="flex items-center justify-between rounded-md hover:bg-gray-700 md:hover:bg-gray-800 p-2 pr-4">
+                                        <article onMouseEnter={displayIcons && !props.isPhone() ? () => hoverIn(".icon2") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon2") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className={`flex items-center justify-between rounded-md hover:${colors[props.theme].navbarHoverColor} p-2 pr-4`}>
                                             <div>
                                                 <svg xmlns="http://www.w3.org/2000/svg" className="inline mx-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                     <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />
@@ -224,7 +239,7 @@ function Navbar(props) {
                             <div>
                                 <Link to="/about" onClick={props.isPhone() && props.handleClose}>
                                     <div className="m-1 mx-2">
-                                        <article onMouseEnter={displayIcons && !props.isPhone() ? () => hoverIn(".icon3") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon3") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className="flex items-center justify-between rounded-md hover:bg-gray-700 md:hover:bg-gray-800 p-2 pr-4">
+                                        <article onMouseEnter={displayIcons && !props.isPhone() ? () => hoverIn(".icon3") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon3") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className={`flex items-center justify-between rounded-md hover:${colors[props.theme].navbarHoverColor} p-2 pr-4`}>
                                             <div>
                                                 <svg xmlns="http://www.w3.org/2000/svg" className="mx-1 inline h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                     <path fillRule="evenodd" d="M10 2a1 1 0 00-1 1v1a1 1 0 002 0V3a1 1 0 00-1-1zM4 4h3a3 3 0 006 0h3a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm2.5 7a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm2.45 4a2.5 2.5 0 10-4.9 0h4.9zM12 9a1 1 0 100 2h3a1 1 0 100-2h-3zm-1 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1z" clipRule="evenodd" />
@@ -241,7 +256,7 @@ function Navbar(props) {
                             <div>
                                 <Link to="contact" onClick={props.isPhone() && props.handleClose}>
                                     <div className="m-1 mx-2">
-                                        <article onMouseEnter={displayIcons && !props.isPhone() ? () => hoverIn(".icon4") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon4") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className="flex items-center hover:bg-gray-700 md:hover:bg-gray-800 rounded-md p-2 pr-4">
+                                        <article onMouseEnter={displayIcons && !props.isPhone() ? () => hoverIn(".icon4") : () => { }} onMouseLeave={displayIcons && !props.isPhone() ? () => hoverOut(".icon4") : () => { }} data-blobity-magnetic="true" data-blobity-radius="12" className={`flex items-center hover:${colors[props.theme].navbarHoverColor} rounded-md p-2 pr-4`}>
                                             <svg xmlns="http://www.w3.org/2000/svg" className="mx-1 inline h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                                 <path fillRule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clipRule="evenodd" />
                                             </svg>
@@ -265,10 +280,16 @@ function Navbar(props) {
                                     Vaibhav Sharma
                                 </div>
                             </div>
+                            <div className="w-full mt-2 h-[1px] bg-gray-600" />
+                            <div className="flex">
+                                <ThemeButton bgColor="bg-[#059669]" setTheme={props.setTheme} active={props.theme === "green"} />
+                                <ThemeButton bgColor="bg-[#ff220e]" setTheme={props.setTheme} active={props.theme === "red"} />
+                                <ThemeButton bgColor="bg-[#2563eb]" setTheme={props.setTheme} active={props.theme === "blue"} />
+                            </div>
                         </nav>
                     </div>
                 </div>
-                <button aria-label="Sidebar button" onClick={click} className="h-fit ml-6 open-button cursor-none transition duration-150 focus:outline-none opacity-90 backdrop-blur-xl mx-0 m-2 p-4 rounded-full bg-gray-900 hover:bg-gray-700 border border-gray-700 z-10 -right-16 top-0 text-white">
+                <button aria-label="Sidebar button" onClick={click} className="h-fit ml-3 open-button cursor-none transition duration-150 focus:outline-none opacity-90 backdrop-blur-xl mx-0 m-2 p-4 rounded-full bg-gray-900 hover:bg-gray-700 border border-gray-700 z-10 -right-16 top-0 text-white">
                     <div id="menu-button" className="block">
                         <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="white" viewBox="0 0 24 24" stroke="currentColor">
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />