Merge pull request #33 from sarkartanmay393/dev

Add: Routine Push [`dev` to `main`]
sarkartanmay393 · Feb 13, 2023 · 8d18586 · 8d18586
2 parents 5b7c1d9 + d3561d5
commit 8d18586
Show file tree

Hide file tree

Showing 33 changed files with 222 additions and 150 deletions.
diff --git a/package.json b/package.json
@@ -17,9 +17,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "ps": "parcel src/index.html -p 1234",
-    "pb": "parcel build src/index.html"
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/index.html b/public/index.html
@@ -30,5 +30,6 @@
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
+        <div id="menuboard"></div>
     </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -79,7 +79,7 @@ button {
 }
 
 span {
-    color: orangered;
+    color: rgb(255, 109, 55);
 }
 
 

diff --git a/src/App.js b/src/App.js
@@ -196,7 +196,7 @@ function App({ db }) {
 
 
   // For setting current screen scroll position in global css variable
-  window.onscroll= () => {
+  window.onscroll = () => {
     let scrollPosition = window.pageYOffset / (document.body.offsetHeight - window.innerHeight);
     document.body.style.setProperty('--scroll', scrollPosition);
     // console.log(scrollPosition)
@@ -285,8 +285,8 @@ function App({ db }) {
       });
     }
 
+    document.body.style.setProperty("--screenWidth", window.screen.width);
     syncWebsiteData(db);
-    // console.log(websiteData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -314,6 +314,7 @@ function App({ db }) {
     );
   }
 
+
   return (
     <BrowserRouter>
       {isMobile ? <></> : <FollowLine />}

diff --git a/src/assets/menu.svg b/src/assets/menu.svg
diff --git a/src/components/AboutMe.js b/src/components/AboutMe.js
@@ -1,4 +1,4 @@
-import './AboutMe.css';
+import '../styles/AboutMe.css';
 
 function AboutSection({ intro, p1, p2, p3 }) {
 

diff --git a/src/components/BlogCard.js b/src/components/BlogCard.js
@@ -1,4 +1,4 @@
-import './BlogCard.css';
+import '../styles/BlogCard.css';
 
 function BlogSection() {
     const viewAll = `View All ⇢`;

diff --git a/src/components/ContactCard.js b/src/components/ContactCard.js
@@ -1,4 +1,4 @@
-import "./ContactCard.css";
+import "../styles/ContactCard.css";
 
 const LinkedinSVG = require("../assets/linkedin.svg").default;
 const MailSVG = require("../assets/mail.svg").default;

diff --git a/src/components/FollowLine.js b/src/components/FollowLine.js
@@ -1,4 +1,4 @@
-import './FollowLine.css';
+import '../styles/FollowLine.css';
 
 const GithubSVG = require('../assets/github.svg').default;
 const TwitterSVG = require('../assets/twitter.svg').default;

diff --git a/src/components/FooterCard.js b/src/components/FooterCard.js
@@ -1,4 +1,4 @@
-import './FooterCard.css';
+import '../styles/FooterCard.css';
 
 const KakashiSVG = require('../assets/kakashi.svg').default;
 const GithubSVG = require('../assets/github.svg').default;

diff --git a/src/components/FunFactCard.js b/src/components/FunFactCard.js
@@ -1,4 +1,4 @@
-import './FunFactCard.css';
+import '../styles/FunFactCard.css';
 
 function FunfactSection({ funfacts, funfact_highlights }) {
     return (

diff --git a/src/components/Hamburger.js b/src/components/Hamburger.js
@@ -0,0 +1,13 @@
+import '../styles/Hamburger.css';
+
+
+const Hamburger = ({ openMenu }) => {
+    return (
+        <div className='hamburger' onClick={openMenu}>
+            <span className='hamburger-topbun'></span>
+            <span className='hamburger-bottombun'></span>
+        </div>
+    );
+}
+
+export default Hamburger;
diff --git a/src/components/IntroCard.js b/src/components/IntroCard.js
@@ -1,4 +1,4 @@
-import './IntroCard.css';
+import '../styles/IntroCard.css';
 import { useEffect, useState } from 'react';
 
 const HomeImage = require('../assets/home-img.svg').default;

diff --git a/src/components/Menuboard.js b/src/components/Menuboard.js
@@ -0,0 +1,51 @@
+import "../styles/Menuboard.css";
+import ReactDOM from 'react-dom';
+import { useRouteMatch } from "react-router-dom";
+
+
+// imported from react router website
+const CustomLink = ({ k, label, to, activeOnlyWhenExact, tabIndex }) => {
+    let match = useRouteMatch({
+        path: to,
+        exact: activeOnlyWhenExact
+    });
+
+    return (
+        <li>
+            <a className={match ? 'activeTab' : ''} href={to} tabIndex={tabIndex} >
+                /{label}
+            </a>
+        </li>
+    );
+}
+
+const MenuBoardChild = () => {
+    return (
+        <div className='menu-board'>
+            <ul>
+                <CustomLink k={'ul-0'} activeOnlyWhenExact={true} to='/' label="home" tabIndex={0}></CustomLink>
+                <CustomLink k={'ul-1'} to='/projects' label="projects" tabIndex={1}></CustomLink>
+                <CustomLink k={'ul-2'} to='/about' label="about-me" tabIndex={2}></CustomLink>
+            </ul>
+        </div>
+    );
+};
+
+const NavBarItems = () => {
+    return (
+        <ul className="NavBarItems">
+            <CustomLink k={'ul-0'} activeOnlyWhenExact={true} to='/' label="home" tabIndex={0}></CustomLink>
+            <CustomLink k={'ul-1'} to='/projects' label="projects" tabIndex={1}></CustomLink>
+            <CustomLink k={'ul-2'} to='/about' label="about-me" tabIndex={2}></CustomLink>
+        </ul>
+    );
+}
+
+const MenuBoard = ({ child = MenuBoardChild }) => {
+    return ReactDOM.createPortal(
+        child,
+        document.getElementById('menuboard')
+    );
+}
+
+export { MenuBoard, CustomLink, MenuBoardChild, NavBarItems };
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -1,21 +1,19 @@
-import './NavBar.css';
+import '../styles/NavBar.css';
+import Hamburger from "./Hamburger";
 import { useEffect, useState } from 'react';
-import { useRouteMatch } from "react-router-dom";
+import { MenuBoardChild, NavBarItems } from "./Menuboard";
 
 const KakashiSVG = require('../assets/kakashi.svg').default;
-// const MenuSVG = require('../assets/menu.svg');
-
-
 
 function NavBar() {
     const [isMobile, setIsMobile] = useState(false);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [color, setColor] = useState('');
 
     window.onload = () => {
-      document.getElementById("kakashi-face-nav").animate([
-          {transform: 'rotate(360deg)'},
-      ], 1000)
+        document.getElementById("kakashi-face-nav").animate([
+            { transform: 'rotate(360deg)' },
+        ], 1000)
     };
 
     useEffect(() => {
@@ -25,50 +23,25 @@ function NavBar() {
             setColor('rgb(21, 36, 36)') : setColor('');
     }, [isMenuOpen]);
 
-    const openMenu = () => { setIsMenuOpen(!isMenuOpen) };
-
-    // imported from react router website
-    const CustomLink = ({ label, to, activeOnlyWhenExact, tabIndex }) => {
-        let match = useRouteMatch({
-            path: to,
-            exact: activeOnlyWhenExact
-        });
+    const openMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+        document.getElementsByClassName('hamburger').item(0).classList.toggle("open");
+    };
 
-        return (
-            <li key='home'>
-                <a className={match ? "activeTab" : ""} href={to} tabIndex={tabIndex} >
-                    <span>/</span>
-                    {label}
-                </a>
-            </li>
-        );
-    }
+    // document.body.onclick = () => openMenu();
 
     return (
         <>
             {isMenuOpen ?
-                <div className='menu-board'>
-                    <ul>
-                        <CustomLink activeOnlyWhenExact={true} to='/' label="home" tabIndex={0}></CustomLink>
-                        <CustomLink to='/projects' label="projects" tabIndex={1}></CustomLink>
-                        <CustomLink to='/about' label="about-me" tabIndex={2}></CustomLink>
-                    </ul>
-                </div> :
-                <></>
+                <MenuBoardChild />
+                : <></>
             }
             <section className='full-navbar'>
                 <nav style={{ 'backgroundColor': `${color}` }} >
                     <a href='/'><h2><img id='kakashi-face-nav' src={KakashiSVG} alt='kakashi-face' />Tanmay</h2></a>
                     {isMobile ?
-                        <>
-                            <p id='menu-btn' onClick={openMenu}>{isMenuOpen ? '❎' : '='}</p>
-                        </>
-                        :
-                        <ul>
-                            <CustomLink activeOnlyWhenExact={true} to='/' label="home" tabIndex={0}></CustomLink>
-                            <CustomLink to='/projects' label="projects" tabIndex={1}></CustomLink>
-                            <CustomLink to='/about' label="about-me" tabIndex={2}></CustomLink>
-                        </ul>
+                        <Hamburger openMenu={openMenu} />
+                        : <NavBarItems />
                     }
                 </nav>
                 <div className='progress-bar'></div>

diff --git a/src/components/ProjectSection.js b/src/components/ProjectSection.js
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import './ProjectSection.css';
+import '../styles/ProjectSection.css';
 
 function ProjectSection({ projects }) {
     const viewAll = `View All ⇢`;

diff --git a/src/components/QuoteCard.js b/src/components/QuoteCard.js
@@ -1,4 +1,4 @@
-import './QuoteCard.css';
+import '../styles/QuoteCard.css';
 
 function QuoteCard({ quote, author }) {
 

diff --git a/src/components/ScrollToTop.jsx b/src/components/ScrollToTop.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import styles from "./ScrollToTop.module.css";
+import styles from "../styles/ScrollToTop.module.css";
 import ChevronDoubleUp from "../assets/chevron-double-up.svg";
 
 const ScrollToTop = () => {

diff --git a/src/components/SkillSection.js b/src/components/SkillSection.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import './SkillSection.css';
+import '../styles/SkillSection.css';
 
 function SkillSection({ Skills }) {
     const [skills, setSkills] = useState([]);

diff --git a/src/components/AboutMe.css → src/styles/AboutMe.css b/src/components/AboutMe.css → src/styles/AboutMe.css
@@ -13,7 +13,7 @@
 }
 
 #about #hash {
-    color: orangered;
+    color: rgb(255, 109, 55);
 }
 
 #about main {

diff --git a/src/components/BlogCard.css → src/styles/BlogCard.css b/src/components/BlogCard.css → src/styles/BlogCard.css
@@ -13,7 +13,7 @@
 }
 
 #blogs span {
-    color: orangered;
+    color: rgb(255, 109, 55);
 }
 
 #blogs header {
@@ -112,7 +112,7 @@
 }
 
 .blog-card:hover #blog-card-main .blog-card-row {
-    color: orangered;
+    color: rgb(255, 109, 55);
 }
 
 #blog-card-main-subtitle {
@@ -178,7 +178,7 @@
         font-size: 12px;
     }
 
-    #blog-card-main h2  {
+    #blog-card-main h2 {
         line-height: 18px;
     }
 }
diff --git a/src/components/ContactCard.css → src/styles/ContactCard.css b/src/components/ContactCard.css → src/styles/ContactCard.css
@@ -14,7 +14,7 @@
 }
 
 #contact #hash {
-    color: orangered;
+    color: rgb(255, 109, 55);
 }
 
 #contact main {

diff --git a/src/components/FollowLine.css → src/styles/FollowLine.css b/src/components/FollowLine.css → src/styles/FollowLine.css
@@ -4,11 +4,10 @@
     padding: 1rem 2rem;
 
     height: fit-content;
-    width: min-content;
+    width: fit-content;
 
     position: fixed;
     top: 8%;
-
     border: 0px solid white;
 }
 
@@ -22,4 +21,8 @@
 .follow-line img {
     height: 18px;
     margin-top: 8px;
+}
+
+.follow-line img:hover {
+    padding: 1px;
 }
diff --git a/src/components/FooterCard.css → src/styles/FooterCard.css b/src/components/FooterCard.css → src/styles/FooterCard.css
diff --git a/src/components/FunFactCard.css → src/styles/FunFactCard.css b/src/components/FunFactCard.css → src/styles/FunFactCard.css
diff --git a/src/styles/Hamburger.css b/src/styles/Hamburger.css
@@ -0,0 +1,36 @@
+.hamburger {
+    cursor: pointer;
+
+    height: fit-content;
+    width: fit-content;
+    transition: all 0.25s;
+}
+
+.hamburger-topbun,
+.hamburger-bottombun {
+    content: "";
+    display: block;
+
+    width: 18px;
+    height: 1px;
+    background: #fff;
+
+    transform: rotate(0);
+    transition: all 0.25s;
+}
+
+.hamburger-bottombun {
+    transform: translateY(5px);
+}
+
+.open {
+    transform: rotate(90deg);
+}
+
+.open .hamburger-topbun {
+    transform: rotate(45deg) translateY(0px);
+}
+
+.open .hamburger-bottombun {
+    transform: rotate(-45deg) translateY(0px);
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,7 +79,7 @@ button { @@
     }
     span {
-        color: orangered;
+        color: rgb(255, 109, 55);
     }
@@ Expand Down @@