diff --git a/package.json b/package.json index b1968a3..4f1bc3c 100644 --- 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 index 306f4b9..3b28178 100644 --- a/public/index.html +++ b/public/index.html @@ -30,5 +30,6 @@
+ \ No newline at end of file diff --git a/src/App.css b/src/App.css index b82fac5..c2a10cb 100644 --- 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 index 916308c..cef692c 100644 --- 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 ( {isMobile ? <> : } diff --git a/src/assets/menu.svg b/src/assets/menu.svg deleted file mode 100644 index 373b4c0..0000000 --- a/src/assets/menu.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - diff --git a/src/components/AboutMe.js b/src/components/AboutMe.js index 8821d48..b30fda8 100644 --- 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 index d60f873..c539ee1 100644 --- 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 index 2520ed4..b0e7aae 100644 --- 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 index 4d946a6..9224967 100644 --- 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 index ecf6f1c..2c63748 100644 --- 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 index 13c311f..77a91f3 100644 --- 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 new file mode 100644 index 0000000..b0e8bf6 --- /dev/null +++ b/src/components/Hamburger.js @@ -0,0 +1,13 @@ +import '../styles/Hamburger.css'; + + +const Hamburger = ({ openMenu }) => { + return ( +
+ + +
+ ); +} + +export default Hamburger; \ No newline at end of file diff --git a/src/components/IntroCard.js b/src/components/IntroCard.js index ac461c4..5e432cc 100644 --- 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 new file mode 100644 index 0000000..8096ff1 --- /dev/null +++ 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 ( +
  • + + /{label} + +
    • + ); +} + +const MenuBoardChild = () => { + return ( +
    +
      + + + +
    +
    + ); +}; + +const NavBarItems = () => { + return ( + + ); +} + +const MenuBoard = ({ child = MenuBoardChild }) => { + return ReactDOM.createPortal( + child, + document.getElementById('menuboard') + ); +} + +export { MenuBoard, CustomLink, MenuBoardChild, NavBarItems }; \ No newline at end of file diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 14d6091..50fd488 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -1,11 +1,9 @@ -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); @@ -13,9 +11,9 @@ function NavBar() { 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 ( -
  • - - / - {label} - -
    • - ); - } + // document.body.onclick = () => openMenu(); return ( <> {isMenuOpen ? -
    -
      - - - -
    -
    : - <> + + : <> }
    diff --git a/src/components/ProjectSection.js b/src/components/ProjectSection.js index e7f0672..c7c89e4 100644 --- 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 index ccd0934..a6b5a2c 100644 --- 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 index 2fe00f5..374b2ab 100644 --- 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 index 044c545..4d91da1 100644 --- 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 b/src/styles/AboutMe.css similarity index 98% rename from src/components/AboutMe.css rename to src/styles/AboutMe.css index 89ccc08..2888c53 100644 --- a/src/components/AboutMe.css +++ b/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 b/src/styles/BlogCard.css similarity index 96% rename from src/components/BlogCard.css rename to src/styles/BlogCard.css index 4267dfd..1b336c9 100644 --- a/src/components/BlogCard.css +++ b/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; } } \ No newline at end of file diff --git a/src/components/ContactCard.css b/src/styles/ContactCard.css similarity index 98% rename from src/components/ContactCard.css rename to src/styles/ContactCard.css index b8bbf23..c3c3322 100644 --- a/src/components/ContactCard.css +++ b/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 b/src/styles/FollowLine.css similarity index 82% rename from src/components/FollowLine.css rename to src/styles/FollowLine.css index 50d7713..5717735 100644 --- a/src/components/FollowLine.css +++ b/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; } \ No newline at end of file diff --git a/src/components/FooterCard.css b/src/styles/FooterCard.css similarity index 100% rename from src/components/FooterCard.css rename to src/styles/FooterCard.css diff --git a/src/components/FunFactCard.css b/src/styles/FunFactCard.css similarity index 100% rename from src/components/FunFactCard.css rename to src/styles/FunFactCard.css diff --git a/src/styles/Hamburger.css b/src/styles/Hamburger.css new file mode 100644 index 0000000..7099270 --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/src/components/IntroCard.css b/src/styles/IntroCard.css similarity index 90% rename from src/components/IntroCard.css rename to src/styles/IntroCard.css index db5fb8a..588aae5 100644 --- a/src/components/IntroCard.css +++ b/src/styles/IntroCard.css @@ -42,8 +42,7 @@ background: none; - border: 1px solid rgb(255, 109, 55); - + border: 1px solid orange; box-shadow: 0px 0px 4px 2px rgba(245, 245, 245, 0.1), 0px 0px 4px 2px transparent inset; @@ -53,8 +52,9 @@ } .intro-card #left button:hover { - color: white; - background: rgb(255, 109, 55); + color: lightgreen; + border: 1px solid lightgreen; + box-shadow: 0px 0px 5px 1px lightgreen; } .intro-card #right { @@ -111,9 +111,12 @@ .intro-card #left p { font-size: 14px; + font-style: italic; + } .intro-card #right p { font-size: 15px; + font-style: italic; } } \ No newline at end of file diff --git a/src/styles/Menuboard.css b/src/styles/Menuboard.css new file mode 100644 index 0000000..a5eb835 --- /dev/null +++ b/src/styles/Menuboard.css @@ -0,0 +1,64 @@ +.activeTab { + color: lightgreen; + font-weight: bold; +} + +.menu-board { + color: white; + background-color: rgb(21, 36, 36); + + border-bottom: 0px solid white; + /* border: 1px solid red; */ + padding: 0 16px; + + display: flex; + flex-direction: column; + align-items: center; + + top: 48px; + position: fixed; + width: 100%; + height: fit-content; +} + +.menu-board ul { + list-style-type: none; + border: 0px solid white; + + width: fit-content; + padding: 0; +} + +.menu-board li { + border: 0px solid white; + width: 100%; + padding: 8px 0; + + font-weight: bold; + font-size: 22px; +} + + +.NavBarItems { + margin: 0 0; + list-style: none; + + display: flex; +} + +.NavBarItems li { + padding: 0 8px; +} + +.NavBarItems li a:hover { + color: lightgreen; +} + +.NavBarItems li a { + font-size: 14px; + text-decoration: none; +} + +.NavBarItems li a span { + color: rgb(255, 109, 55); +} \ No newline at end of file diff --git a/src/components/NavBar.css b/src/styles/NavBar.css similarity index 65% rename from src/components/NavBar.css rename to src/styles/NavBar.css index 5abfa5a..6e8b7ed 100644 --- a/src/components/NavBar.css +++ b/src/styles/NavBar.css @@ -10,14 +10,11 @@ background-color: #282C33; } -.activeTab { - color: lightgreen; -} - #kakashi-face-nav { animation: spin 1s linear; /* animation: spin duration timing-function delay iteration-count direction fill-mode; */ } + @keyframes spin { to { transform: rotate(360deg); @@ -38,21 +35,25 @@ height: 1px; background-color: white; } + 25% { width: 25%; height: 1.05px; background-color: white; } + 50% { width: 50%; height: 1.1px; background-color: orange; } + 75% { width: 75%; height: 1.15px; background-color: orange; } + 100% { width: 100%; height: 1.2px; @@ -62,9 +63,10 @@ nav { - border: 0px solid orangered; + border: 0px solid rgb(255, 109, 55); display: flex; justify-content: space-between; + align-items: center; padding: 1rem 10rem; color: white; @@ -77,48 +79,6 @@ nav h2 { font-size: 18px; } -#menu-btn { - /* height: 18px; */ - /* width: 8px; */ - - background: none; - border: 0px solid white; -} - -.menu-board { - color: white; - background-color: rgb(21, 36, 36); - - border-bottom: 0px solid white; - /* border: 1px solid red; */ - padding: 0 16px; - - display: flex; - flex-direction: column; - align-items: center; - - top: 48px; - position: fixed; - width: 100%; - height: fit-content; -} - -.menu-board ul { - list-style-type: none; - border: 0px solid white; - - width: fit-content; - padding: 0; -} - -.menu-board li { - border: 0px solid white; - width: 100%; - padding: 8px 0; - - font-weight: bold; - font-size: 22px; -} nav h2:hover { color: lightgreen; @@ -128,31 +88,6 @@ nav h2 img { height: 18px; } -nav ul { - margin: 0 0; - list-style: none; - - display: flex; -} - -nav ul li { - padding: 0 8px; -} - -nav ul li a:hover { - color: lightgreen; -} - -nav ul li a { - font-size: 14px; - text-decoration: none; - color: white; -} - -nav ul li a span { - color: orangered; -} - @media (max-width: 600px) { diff --git a/src/components/ProjectSection.css b/src/styles/ProjectSection.css similarity index 98% rename from src/components/ProjectSection.css rename to src/styles/ProjectSection.css index b1c8633..afb0799 100644 --- a/src/components/ProjectSection.css +++ b/src/styles/ProjectSection.css @@ -13,7 +13,7 @@ } #projects span { - color: orangered; + color: rgb(255, 109, 55); } #projects header { diff --git a/src/components/QuoteCard.css b/src/styles/QuoteCard.css similarity index 100% rename from src/components/QuoteCard.css rename to src/styles/QuoteCard.css diff --git a/src/components/ScrollToTop.module.css b/src/styles/ScrollToTop.module.css similarity index 100% rename from src/components/ScrollToTop.module.css rename to src/styles/ScrollToTop.module.css diff --git a/src/components/SkillSection.css b/src/styles/SkillSection.css similarity index 98% rename from src/components/SkillSection.css rename to src/styles/SkillSection.css index af29ca3..685c11e 100644 --- a/src/components/SkillSection.css +++ b/src/styles/SkillSection.css @@ -13,7 +13,7 @@ } #skills #hash { - color: orangered; + color: rgb(255, 109, 55); } #skills header {