diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c8f20e9 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + extends: ["react-app", "prettier"], + plugins: ["jsx-a11y"], +}; diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..227b71f --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +build +coverage \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/package-lock.json b/package-lock.json index ae04306..5923069 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "my-app", + "name": "Code-For-Dallas-App", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "my-app", + "name": "Code-For-Dallas-App", "version": "0.1.0", "dependencies": { "@smakss/react-scroll-direction": "^1.0.4", @@ -19,6 +19,11 @@ "react-waypoint": "^10.3.0", "styled-components": "^5.3.11", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-react": "^7.32.2", + "prettier": "2.8.8" } }, "node_modules/@adobe/css-tools": { @@ -2470,17 +2475,17 @@ } }, "node_modules/@eslint/js": { - "version": "8.41.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz", - "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==", + "version": "8.42.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.42.0.tgz", + "integrity": "sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.11.8", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", - "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==", + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz", + "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==", "dependencies": { "@humanwhocodes/object-schema": "^1.2.1", "debug": "^4.1.1", @@ -7117,15 +7122,15 @@ } }, "node_modules/eslint": { - "version": "8.41.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", - "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", + "version": "8.42.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.42.0.tgz", + "integrity": "sha512-ulg9Ms6E1WPf67PHaEY4/6E2tEn5/f7FXGzr3t9cBMugOmf1INYvuUwwh1aXQN4MfJ6a5K2iNwP3w4AColvI9A==", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", "@eslint/eslintrc": "^2.0.3", - "@eslint/js": "8.41.0", - "@humanwhocodes/config-array": "^0.11.8", + "@eslint/js": "8.42.0", + "@humanwhocodes/config-array": "^0.11.10", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", "ajv": "^6.10.0", @@ -7171,6 +7176,18 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint-config-prettier": { + "version": "8.8.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz", + "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==", + "dev": true, + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-config-react-app": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz", @@ -13724,6 +13741,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -15936,16 +15968,16 @@ } }, "node_modules/typescript": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz", - "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=12.20" + "node": ">=4.2.0" } }, "node_modules/unbox-primitive": { diff --git a/package.json b/package.json index b6e6c12..8206a0a 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,11 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] + "eject": "react-scripts eject", + "format": "prettier --write ./src", + "lint": "eslint --fix src/**/*.{js,jsx}", + "format-check": "prettier --check ./src", + "lint-check": "eslint src/**/*.{js,jsx}" }, "browserslist": { "production": [ @@ -38,5 +36,11 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "eslint": "^8.42.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-react": "^7.32.2", + "prettier": "2.8.8" } } diff --git a/src/App.js b/src/App.js index 5ae103b..2b14248 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,18 @@ // import logo from './logo.svg'; -import './App.css'; -import { useState } from 'react'; -import { useEffect } from 'react'; -import { Waypoint } from 'react-waypoint'; +import "./App.css"; +import { useState } from "react"; +import { useEffect } from "react"; +import { Waypoint } from "react-waypoint"; -import clearNav from './components/Nav/clearNavFunc'; +import clearNav from "./components/Nav/clearNavFunc"; -import Header from './components/Header/header'; -import About from './components/About/About'; -import Projects from './components/Projects/Projects'; -import Donations from './components/Donations/Donations' +import Header from "./components/Header/header"; +import About from "./components/About/About"; +import Projects from "./components/Projects/Projects"; +import Donations from "./components/Donations/Donations"; import { useDetectScroll } from "@smakss/react-scroll-direction"; // https://stackoverflow.com/a/62497293/10474024 -import Footer from './components/Footer/Footer'; +import Footer from "./components/Footer/Footer"; function App() { const [activeNavStr, setActiveNavStr] = useState("navHome"); @@ -20,7 +20,6 @@ function App() { const [scrollDir] = useDetectScroll({}); useEffect(() => { - // --- Original working section used for nav scrolling --- const navSec = document.getElementsByClassName("nav-header")[0]; const sticky = document.getElementById("Header").offsetHeight - 30; // cannot use hook - otherwise it re-renders @@ -34,7 +33,6 @@ function App() { navSec.classList.add("sticky"); navSec.classList.add("offset"); navSec.classList.add("scrolling"); - } else { navSec.classList.remove("sticky"); navSec.classList.remove("offset"); @@ -59,25 +57,40 @@ function App() { // setStickyNum(); // }, []); - function wpDance(wpType, wpNum, loc, prevWPpos, currWPpos, evt, - wpTop, vpTop, vpBtm, data) { - + function wpDance( + wpType, + wpNum, + loc, + prevWPpos, + currWPpos, + evt, + wpTop, + vpTop, + vpBtm, + data + ) { console.log(`activeNavStr: ${activeNavStr}`); console.log(`navClickedStr: ${navClickedStr}`); const destination = data.dest; if (scrollDir === "down") { - console.log(`WP${wpNum} ${wpType} (${loc}) | scrollDir: ${scrollDir} ---> going into ${destination}`); + console.log( + `WP${wpNum} ${wpType} (${loc}) | scrollDir: ${scrollDir} ---> going into ${destination}` + ); } // else if ( scrollDir === "still" ) { // } else { - console.log(`WP${wpNum} ${wpType} (${loc}) | scrollDir: ${scrollDir} ---> likely the start`); + console.log( + `WP${wpNum} ${wpType} (${loc}) | scrollDir: ${scrollDir} ---> likely the start` + ); } const intPrevNavStr = data.prev; - console.log(`WP${wpNum} ${wpType} (${loc}) | intPrevNavStr: ${intPrevNavStr}`); + console.log( + `WP${wpNum} ${wpType} (${loc}) | intPrevNavStr: ${intPrevNavStr}` + ); let intActiveNavStr; if (navClickedStr === "") { intActiveNavStr = data.curr; @@ -85,17 +98,25 @@ function App() { intActiveNavStr = navClickedStr; } - console.log(`WP${wpNum} ${wpType} (${loc}) | intActiveNavStr: ${intActiveNavStr}`); + console.log( + `WP${wpNum} ${wpType} (${loc}) | intActiveNavStr: ${intActiveNavStr}` + ); console.log(intActiveNavStr); // const intNextNavStr = data.next; // console.log(`WP${wpNum} ${wpType} (${loc}) | intNextNavStr: ${intNextNavStr}`); // getLIelems("headerNav", "li"); - console.log(`WP${wpNum} ${wpType} (${loc}) | previousPosition: ${prevWPpos}`); - console.log(`WP${wpNum} ${wpType} (${loc}) | currentPosition: ${currWPpos}`); + console.log( + `WP${wpNum} ${wpType} (${loc}) | previousPosition: ${prevWPpos}` + ); + console.log( + `WP${wpNum} ${wpType} (${loc}) | currentPosition: ${currWPpos}` + ); if (!evt) { - console.log(`=============== WP${wpNum} ${wpType} (${loc}) | This came from a menu click? (likely just the start of site here) ===============`); + console.log( + `=============== WP${wpNum} ${wpType} (${loc}) | This came from a menu click? (likely just the start of site here) ===============` + ); } console.log(`WP${wpNum} ${wpType} (${loc}) | event: ${evt}`); console.log(`WP${wpNum} ${wpType} (${loc}) | waypointTop: ${wpTop}`); @@ -121,7 +142,9 @@ function App() { // console.log(`WP${wpNum} ${wpType} (${loc}) next (uncertain if updated): ${nextActiveNav}`); // console.log(nextActiveNav); - console.log(`SEtting NAv classes with ${intPrevNavStr} and ${intActiveNavStr}`) + console.log( + `SEtting NAv classes with ${intPrevNavStr} and ${intActiveNavStr}` + ); // let temp = document.getElementById(intPrevNavStr); // console.log(temp); @@ -149,7 +172,6 @@ function App() { // if (currentURL.includes("#")) { // console.log(`WP${wpNum} ${wpType} (${loc}) | lastNav URL: ${lastNav}`) - // if (clickedBool) { // console.log(`WP${wpNum} ${wpType} (${loc}) | A LINK WAS CLICKED!!! Must update NAV`); // for (const [key, val] of Object.entries(navMenuIDs)) { @@ -190,7 +212,6 @@ function App() { clearNav(intActiveNavStr); } } - } return ( @@ -211,237 +232,453 @@ function App() { */} { + onEnter={({ + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + }) => { // console.log("isntantiation - setting active nav to navHome"); let data = null; if (!navClickedStr) { - if (scrollDir === "down" || scrollDir === "still") { // line is going up from bottom + if (scrollDir === "down" || scrollDir === "still") { + // line is going up from bottom data = { prev: "navHome", curr: "navHome", - dest: "about section" - } - } - else { // SCROLLING UP - line is coming down from top + dest: "about section", + }; + } else { + // SCROLLING UP - line is coming down from top data = { prev: "navAbout", curr: "navHome", - dest: "home section" - } + dest: "home section", + }; } console.log("Calling the wpDance ..."); - wpDance("OE", 0, "after header / before About", previousPosition, currentPosition, event, - waypointTop, viewportTop, viewportBottom, data); - } - else { + wpDance( + "OE", + 0, + "after header / before About", + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); + } else { console.log("Calling the wpDance ..."); - wpDance("OE", 0, "after header / before About", activeNavStr, navClickedStr, event, - waypointTop, viewportTop, viewportBottom, data); + wpDance( + "OE", + 0, + "after header / before About", + activeNavStr, + navClickedStr, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); setNavClickedStr(""); } }} - onLeave={({ previousPosition, currentPosition, event, waypointTop, viewportTop, viewportBottom }) => { + onLeave={({ + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + }) => { let data = null; if (!navClickedStr) { - if (scrollDir === "down" || scrollDir === "still") { // line is going up past top + if (scrollDir === "down" || scrollDir === "still") { + // line is going up past top data = { prev: "navHome", // navHome? curr: "navAbout", - dest: "projects section" - } - } - else { // SCROLLING UP - line is coming down past bottom + dest: "projects section", + }; + } else { + // SCROLLING UP - line is coming down past bottom data = { prev: "navAbout", curr: "navHome", - dest: "home section" - } + dest: "home section", + }; } console.log("Calling the wpDance ..."); - wpDance("OL", 0, "after Header / before About", previousPosition, currentPosition, event, - waypointTop, viewportTop, viewportBottom, data); - } - else { + wpDance( + "OL", + 0, + "after Header / before About", + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); + } else { console.log("Calling the wpDance ..."); - wpDance("OL", 0, "after Header / before About", activeNavStr, navClickedStr, event, - waypointTop, viewportTop, viewportBottom, data); + wpDance( + "OL", + 0, + "after Header / before About", + activeNavStr, + navClickedStr, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); } }} /> { + onEnter={({ + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + }) => { // console.log("isntantiation - setting active nav to navHome"); let data = null; if (!navClickedStr) { - if (scrollDir === "down" || scrollDir === "still") { // line is going up from bottom + if (scrollDir === "down" || scrollDir === "still") { + // line is going up from bottom data = { prev: "navAbout", curr: "navAbout", - dest: "projects section" - } - } - else { // SCROLLING UP - line is coming down from top + dest: "projects section", + }; + } else { + // SCROLLING UP - line is coming down from top data = { prev: "navDonations", curr: "navProjects", - dest: "about section" - } + dest: "about section", + }; } console.log("Calling the wpDance ..."); - wpDance("OE", 1, "after About / before Projects", previousPosition, currentPosition, event, - waypointTop, viewportTop, viewportBottom, data); - } - else { + wpDance( + "OE", + 1, + "after About / before Projects", + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); + } else { console.log("Calling the wpDance ..."); - wpDance("OE", 1, "after About / before Projects", activeNavStr, navClickedStr, event, - waypointTop, viewportTop, viewportBottom, data); + wpDance( + "OE", + 1, + "after About / before Projects", + activeNavStr, + navClickedStr, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); setNavClickedStr(""); } }} - onLeave={({ previousPosition, currentPosition, event, waypointTop, viewportTop, viewportBottom }) => { + onLeave={({ + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + }) => { let data = null; if (!navClickedStr) { - if (scrollDir === "down" || scrollDir === "still") { // line is going up past top + if (scrollDir === "down" || scrollDir === "still") { + // line is going up past top data = { prev: "navProjects", // navHome? curr: "navDonations", - dest: "footer section" - } - } - else { // SCROLLING UP - line is coming down past bottom + dest: "footer section", + }; + } else { + // SCROLLING UP - line is coming down past bottom data = { prev: "navProjects", curr: "navAbout", - dest: "about section" - } + dest: "about section", + }; } console.log("Calling the wpDance ..."); - wpDance("OL", 1, "before Projects", previousPosition, currentPosition, event, - waypointTop, viewportTop, viewportBottom, data); - } - else { + wpDance( + "OL", + 1, + "before Projects", + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); + } else { console.log("Calling the wpDance ..."); - wpDance("OL", 1, "before Projects", activeNavStr, navClickedStr, event, - waypointTop, viewportTop, viewportBottom, data); + wpDance( + "OL", + 1, + "before Projects", + activeNavStr, + navClickedStr, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); } }} /> { + onEnter={({ + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + }) => { // console.log("isntantiation - setting active nav to navHome"); let data = null; if (!navClickedStr) { - if (scrollDir === "down" || scrollDir === "still") { // line is going up from bottom + if (scrollDir === "down" || scrollDir === "still") { + // line is going up from bottom data = { prev: "navAbout", curr: "navProjects", // currently too short of a site to have this be navProjects onEnter - dest: "footer section" - } - } - else { // SCROLLING UP - line is coming down from top + dest: "footer section", + }; + } else { + // SCROLLING UP - line is coming down from top data = { prev: "navDonations", curr: "navProjects", - dest: "about section" - } + dest: "about section", + }; } console.log("Calling the wpDance ..."); - wpDance("OE", 2, "after About / before Projects", previousPosition, currentPosition, event, - waypointTop, viewportTop, viewportBottom, data); - } - else { + wpDance( + "OE", + 2, + "after About / before Projects", + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); + } else { console.log("Calling the wpDance ..."); - wpDance("OE", 2, "after About / before Projects", activeNavStr, navClickedStr, event, - waypointTop, viewportTop, viewportBottom, data); + wpDance( + "OE", + 2, + "after About / before Projects", + activeNavStr, + navClickedStr, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); setNavClickedStr(""); } }} - onLeave={({ previousPosition, currentPosition, event, waypointTop, viewportTop, viewportBottom }) => { + onLeave={({ + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + }) => { let data = null; if (!navClickedStr) { - if (scrollDir === "down" || scrollDir === "still") { // line is going up past top + if (scrollDir === "down" || scrollDir === "still") { + // line is going up past top data = { prev: "navProjects", // navHome? curr: "navDonations", - dest: "footer section" - } - } - else { // SCROLLING UP - line is coming down past bottom + dest: "footer section", + }; + } else { + // SCROLLING UP - line is coming down past bottom data = { prev: "navProjects", curr: "navAbout", - dest: "header section" - } + dest: "header section", + }; } console.log("Calling the wpDance ..."); - wpDance("OL", 2, "after About / before Donations", previousPosition, currentPosition, event, - waypointTop, viewportTop, viewportBottom, data); - } - else { + wpDance( + "OL", + 2, + "after About / before Donations", + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); + } else { console.log("Calling the wpDance ..."); - wpDance("OL", 2, "after About / before Donations", activeNavStr, navClickedStr, event, - waypointTop, viewportTop, viewportBottom, data); + wpDance( + "OL", + 2, + "after About / before Donations", + activeNavStr, + navClickedStr, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); } }} /> { + onEnter={({ + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + }) => { // console.log("isntantiation - setting active nav to navHome"); let data = null; if (!navClickedStr) { - if (scrollDir === "down" || scrollDir === "still") { // line is going up from bottom + if (scrollDir === "down" || scrollDir === "still") { + // line is going up from bottom data = { prev: "navProjects", curr: "navDonations", // currently too short of a site to have this be navDonations onEnter - dest: "footer section" - } - } - else { // SCROLLING UP - line is coming down from top + dest: "footer section", + }; + } else { + // SCROLLING UP - line is coming down from top data = { prev: "navDonations", curr: "navDonations", - dest: "projects section" - } + dest: "projects section", + }; } console.log("Calling the wpDance ..."); - wpDance("OE", 3, "after Donations / before Footer", previousPosition, currentPosition, event, - waypointTop, viewportTop, viewportBottom, data); - } - else { + wpDance( + "OE", + 3, + "after Donations / before Footer", + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); + } else { console.log("Calling the wpDance ..."); - wpDance("OE", 3, "after Donations / before Footer", activeNavStr, navClickedStr, event, - waypointTop, viewportTop, viewportBottom, data); + wpDance( + "OE", + 3, + "after Donations / before Footer", + activeNavStr, + navClickedStr, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); setNavClickedStr(""); } }} - onLeave={({ previousPosition, currentPosition, event, waypointTop, viewportTop, viewportBottom }) => { + onLeave={({ + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + }) => { let data = null; if (!navClickedStr) { - if (scrollDir === "down" || scrollDir === "still") { // line is going up past top + if (scrollDir === "down" || scrollDir === "still") { + // line is going up past top data = { prev: "navDonations", // navHome? curr: "navDonations", - dest: "footer section" - } - } - else { // SCROLLING UP - line is coming down past bottom + dest: "footer section", + }; + } else { + // SCROLLING UP - line is coming down past bottom data = { prev: "navDonations", curr: "navProjects", - dest: "about section" - } + dest: "about section", + }; } console.log("Calling the wpDance ..."); - wpDance("OL", 3, "after Donations / before Footer", previousPosition, currentPosition, event, - waypointTop, viewportTop, viewportBottom, data); - } - else { + wpDance( + "OL", + 3, + "after Donations / before Footer", + previousPosition, + currentPosition, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); + } else { console.log("Calling the wpDance ..."); - wpDance("OL", 3, "after Donations / before Footer", activeNavStr, navClickedStr, event, - waypointTop, viewportTop, viewportBottom, data); + wpDance( + "OL", + 3, + "after Donations / before Footer", + activeNavStr, + navClickedStr, + event, + waypointTop, + viewportTop, + viewportBottom, + data + ); } }} /> diff --git a/src/App.test.js b/src/App.test.js index 1f03afe..64b6d87 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,7 +1,10 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; +/* eslint-disable */ +// TODO: Turn back on eslint when this file is more ready to go. -test('renders learn react link', () => { +import { render, screen } from "@testing-library/react"; +import App from "./App"; + +test("renders learn react link", () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); diff --git a/src/components/About/About.css b/src/components/About/About.css index aafc054..5bd78fa 100644 --- a/src/components/About/About.css +++ b/src/components/About/About.css @@ -19,4 +19,4 @@ font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; -} \ No newline at end of file +} diff --git a/src/components/About/About.html b/src/components/About/About.html index 78aaea8..e16f34c 100644 --- a/src/components/About/About.html +++ b/src/components/About/About.html @@ -1,41 +1,42 @@ - - - - - - Code for Dallas - - -
-

About Code for Dallas

-

- Code for Dallas is a non-profit organization dedicated to using technology - to make Dallas a better place to live, work, and play. We bring together - civic-minded developers, designers, data geeks, leaders, and innovators - who volunteer their time to create open source solutions for the Dallas - community. -

- -

Who We Are

-

- We are a diverse group of volunteers from various backgrounds and professions, - united by our belief in the power of technology to effect positive change in our community. -

- -

How We Help

-

- We develop open-source projects that address community needs, provide tech - education, and advocate for digital rights and accessibility. -

- -

How to Join

-

- If you're interested in joining Code for Dallas, get in touch with us through - our contact page, or come to one of our monthly meetups. We welcome people - of all skill levels and backgrounds! -

-
- - \ No newline at end of file + + + + + + Code for Dallas + + +
+

About Code for Dallas

+

+ Code for Dallas is a non-profit organization dedicated to using + technology to make Dallas a better place to live, work, and play. We + bring together civic-minded developers, designers, data geeks, leaders, + and innovators who volunteer their time to create open source solutions + for the Dallas community. +

+ +

Who We Are

+

+ We are a diverse group of volunteers from various backgrounds and + professions, united by our belief in the power of technology to effect + positive change in our community. +

+ +

How We Help

+

+ We develop open-source projects that address community needs, provide + tech education, and advocate for digital rights and accessibility. +

+ +

How to Join

+

+ If you're interested in joining Code for Dallas, get in touch with us + through our contact page, or come to one of our monthly meetups. We + welcome people of all skill levels and backgrounds! +

+
+ + diff --git a/src/components/About/About.js b/src/components/About/About.js index 73b6445..4d2303d 100644 --- a/src/components/About/About.js +++ b/src/components/About/About.js @@ -1,42 +1,43 @@ -import React from 'react'; -import './About.css'; +import React from "react"; +import "./About.css"; -import Mission from '../Mission'; +import Mission from "../Mission"; const About = () => { - return ( -
-

About Code for Dallas

-

- Code for Dallas is a non-profit organization dedicated to using technology - to make Dallas a better place to live, work, and play. We bring together - civic-minded developers, designers, data geeks, leaders, and innovators - who volunteer their time to create open source solutions for the Dallas - community. -

+ return ( +
+

About Code for Dallas

+

+ Code for Dallas is a non-profit organization dedicated to using + technology to make Dallas a better place to live, work, and play. We + bring together civic-minded developers, designers, data geeks, leaders, + and innovators who volunteer their time to create open source solutions + for the Dallas community. +

- + -

Who We Are

-

- We are a diverse group of volunteers from various backgrounds and professions, - united by our belief in the power of technology to effect positive change in our community. -

+

Who We Are

+

+ We are a diverse group of volunteers from various backgrounds and + professions, united by our belief in the power of technology to effect + positive change in our community. +

-

How We Help

-

- We develop open-source projects that address community needs, provide tech - education, and advocate for digital rights and accessibility. -

+

How We Help

+

+ We develop open-source projects that address community needs, provide + tech education, and advocate for digital rights and accessibility. +

-

How to Join

-

- If you're interested in joining Code for Dallas, get in touch with us through - our contact page, or come to one of our monthly meetups. We welcome people - of all skill levels and backgrounds! -

-
- ) -} +

How to Join

+

+ If you're interested in joining Code for Dallas, get in touch with + us through our contact page, or come to one of our monthly meetups. We + welcome people of all skill levels and backgrounds! +

+
+ ); +}; -export default About; \ No newline at end of file +export default About; diff --git a/src/components/Donations/Donations.css b/src/components/Donations/Donations.css index ad945d4..d34bfa3 100644 --- a/src/components/Donations/Donations.css +++ b/src/components/Donations/Donations.css @@ -1,25 +1,25 @@ #Donations { - display: flex; - flex-direction: column; - /* align-items: center; */ /* not needed with column + center text alignment */ - align-content: center; - background-color: burlywood; - /* margin-top: 1rem; + display: flex; + flex-direction: column; + /* align-items: center; */ /* not needed with column + center text alignment */ + align-content: center; + background-color: burlywood; + /* margin-top: 1rem; margin-bottom: 1rem; */ - padding-top: 2rem; - padding-bottom: 2rem; - /* min-height: 30vh; */ - text-align: center; + padding-top: 2rem; + padding-bottom: 2rem; + /* min-height: 30vh; */ + text-align: center; } #Donations p { - margin-bottom: 0; - margin-top: 0; - padding-bottom: 2em; - padding-top: 2rem; + margin-bottom: 0; + margin-top: 0; + padding-bottom: 2em; + padding-top: 2rem; } #Donations .btn { - float: right; - border: 2px solid black -} \ No newline at end of file + float: right; + border: 2px solid black; +} diff --git a/src/components/Donations/Donations.js b/src/components/Donations/Donations.js index cfc77f8..deed210 100644 --- a/src/components/Donations/Donations.js +++ b/src/components/Donations/Donations.js @@ -2,22 +2,22 @@ import React from "react"; import "./Donations.css"; const Donations = () => { - return ( -
-

How To Donate

-

This is the donations section!

-
- -
- Looking to support us? Click the button to see our donation page: -
-
-
- ); + return ( +
+

How To Donate

+

This is the donations section!

+
+ +
+ Looking to support us? Click the button to see our donation page: +
+
+
+ ); }; export default Donations; diff --git a/src/components/Donations/donation.html b/src/components/Donations/donation.html index 6429ab4..70d577e 100644 --- a/src/components/Donations/donation.html +++ b/src/components/Donations/donation.html @@ -1,15 +1,15 @@ - - - - + +
- -
- Looking to support us? Click the button to see our donation page: -
+ +
+ Looking to support us? Click the button to see our donation page: +
- + diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 919c52f..c8a83b7 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -1,14 +1,14 @@ .footer { - margin: auto; - width: 60%; + margin: auto; + width: 60%; } .footer-links { - width: 100%; - display: flex; - justify-content: space-evenly; + width: 100%; + display: flex; + justify-content: space-evenly; } -.footer-links>div { - margin: 1em; -} \ No newline at end of file +.footer-links > div { + margin: 1em; +} diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 58c183a..161b955 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,21 +1,22 @@ -import React from 'react'; -import './Footer.css'; +import React from "react"; +import "./Footer.css"; const Footer = () => { - return ( - - ) -} + return ( + + ); +}; -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/Header/header-ORIGINAL.jsx b/src/components/Header/header-ORIGINAL.jsx index 1c20a9c..d821a08 100644 --- a/src/components/Header/header-ORIGINAL.jsx +++ b/src/components/Header/header-ORIGINAL.jsx @@ -1,8 +1,8 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; // import ReactDOM from 'react-dom'; -import styled from 'styled-components'; +import styled from "styled-components"; -import Logo from '../Logo'; +import Logo from "../Logo"; const Wrapper = styled.header` display: flex; @@ -20,10 +20,10 @@ class Header extends Component { return ( - Code For Dallas + Code For Dallas ); } } -export default Header; \ No newline at end of file +export default Header; diff --git a/src/components/Header/header.css b/src/components/Header/header.css index a4574f8..63b7586 100644 --- a/src/components/Header/header.css +++ b/src/components/Header/header.css @@ -1,44 +1,44 @@ header { - align-items: center; - display: flex; - /* flex-direction: row; */ - justify-content: space-between; - /* background-color: #282c34; */ - width: 100%; + align-items: center; + display: flex; + /* flex-direction: row; */ + justify-content: space-between; + /* background-color: #282c34; */ + width: 100%; } .header_logo_div { - display: flex; - align-items: center; + display: flex; + align-items: center; } .header_logo_image { - height: 2em; + height: 2em; } .header_menu_list { - display: flex; - justify-content: space-between; - gap: 1em; + display: flex; + justify-content: space-between; + gap: 1em; } .header_menu_item { - list-style: none; + list-style: none; } #Header { - width: 100%; - margin-bottom: 2em; + width: 100%; + margin-bottom: 2em; } section#Header { - padding-top: 0; - padding-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #Header h1 { - font-size: 2.5rem; - font-family: sans-serif; - margin: 0; - width: 100%; + font-size: 2.5rem; + font-family: sans-serif; + margin: 0; + width: 100%; } diff --git a/src/components/Header/header.html b/src/components/Header/header.html index 7c8e841..fc69462 100644 --- a/src/components/Header/header.html +++ b/src/components/Header/header.html @@ -1,34 +1,37 @@ - - - - - + + + + + Header - - + +
-
- - -
-
- -
+
+ + +
+
+ +
- + diff --git a/src/components/Header/header.js b/src/components/Header/header.js index e080c0e..4507d59 100644 --- a/src/components/Header/header.js +++ b/src/components/Header/header.js @@ -1,14 +1,12 @@ -import React from 'react'; -import './header.css' -import Nav from '../Nav/nav'; +import React from "react"; +import "./header.css"; +import Nav from "../Nav/nav"; -export default function Header({setActiveNavStr}) { - +export default function Header({ setActiveNavStr }) { return ( ); - } diff --git a/src/components/Logo/Logo-ORIGINAL.jsx b/src/components/Logo/Logo-ORIGINAL.jsx index f638c9b..435310b 100644 --- a/src/components/Logo/Logo-ORIGINAL.jsx +++ b/src/components/Logo/Logo-ORIGINAL.jsx @@ -1,7 +1,6 @@ -import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; +import React, { Component } from "react"; -import styled from 'styled-components'; +import styled from "styled-components"; const Image = styled.img` max-width: 200px; @@ -9,10 +8,8 @@ const Image = styled.img` class Logo extends Component { render() { - return ( - - ); + return ; } -}; +} export default Logo; diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js index 9975d50..8bcfd0d 100644 --- a/src/components/Logo/Logo.js +++ b/src/components/Logo/Logo.js @@ -1,7 +1,7 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; // import ReactDOM from 'react-dom'; -import styled from 'styled-components'; +import styled from "styled-components"; // import temp from '../../temp.png'; // from src main folder // import logo from './temp.png' // local folder @@ -25,6 +25,6 @@ class Logo extends Component { ); } -}; +} export default Logo; diff --git a/src/components/Mission/index.jsx b/src/components/Mission/index.jsx index 65f0f02..a49487d 100644 --- a/src/components/Mission/index.jsx +++ b/src/components/Mission/index.jsx @@ -1,10 +1,10 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; // import ReactDOM from 'react-dom'; -import styled from 'styled-components'; +import styled from "styled-components"; const Wrapper = styled.section` display: block; - background-color: #6FACD5; + background-color: #6facd5; `; const Heading = styled.h1` @@ -21,8 +21,11 @@ class Mission extends Component { render() { return ( - Mission Statement - We're just trying to make the world a better place and come up with great mission statements! + Mission Statement + + We're just trying to make the world a better place and come up + with great mission statements! + ); } diff --git a/src/components/Nav/README.md b/src/components/Nav/README.md index 8e73aa0..37b2e36 100644 --- a/src/components/Nav/README.md +++ b/src/components/Nav/README.md @@ -6,4 +6,4 @@ When adding or removing a header nav menu item, you need to: 1. update [clearNavFunc.js]("./clearNavFunc.js") - as of May 2023, we do not have a template set up so it is hard coded. -2. Update WayPoints (add or remove as needed) from [App.js]("../../App.js") \ No newline at end of file +2. Update WayPoints (add or remove as needed) from [App.js]("../../App.js") diff --git a/src/components/Nav/clearNavFunc.js b/src/components/Nav/clearNavFunc.js index 40ee715..426d83e 100644 --- a/src/components/Nav/clearNavFunc.js +++ b/src/components/Nav/clearNavFunc.js @@ -1,18 +1,18 @@ // import $ from 'jquery'; export default function clearNav(clickedNavStr) { - // var nav = $('.header-nav-wrap'); - // nav.slideToggle(); + // var nav = $('.header-nav-wrap'); + // nav.slideToggle(); - const navMenuIDs = { - home: "navHome", - about: "navAbout", - projects: "navProjects", - donations: "navDonations" - // contact: "navContact" - } - for (var key in navMenuIDs) { - document.getElementById(navMenuIDs[key]).classList.remove("current"); - } - document.getElementById(clickedNavStr).classList.add("current"); -} \ No newline at end of file + const navMenuIDs = { + home: "navHome", + about: "navAbout", + projects: "navProjects", + donations: "navDonations", + // contact: "navContact" + }; + for (var key in navMenuIDs) { + document.getElementById(navMenuIDs[key]).classList.remove("current"); + } + document.getElementById(clickedNavStr).classList.add("current"); +} diff --git a/src/components/Nav/nav-BASE.js b/src/components/Nav/nav-BASE.js index 782e90f..9d37231 100644 --- a/src/components/Nav/nav-BASE.js +++ b/src/components/Nav/nav-BASE.js @@ -1,90 +1,113 @@ -import React from 'react'; +/* eslint-disable */ +// TODO: Turn back on eslint when this file is more ready to go. + +import React from "react"; // import './Nav.css'; -export default function Nav({setActiveNavStr}) { - return ( -
-
- Homepage -
- + ssMobileMenu(elem)} + onClick={(event) => { + event.preventDefault(); + toggleOpen(event, "Mobile Menu"); + }} + > + Menu + +
+ ); +} diff --git a/src/components/Nav/nav.css b/src/components/Nav/nav.css index c7000fc..2d6bf28 100644 --- a/src/components/Nav/nav.css +++ b/src/components/Nav/nav.css @@ -17,56 +17,55 @@ * * ------------------------------------------------------------------- */ - .nav-header { - /* display: flex; +.nav-header { + /* display: flex; align-items: center; */ - width: 100%; - height: 72px; /* without this the other header components touch the top */ - background-color: transparent; - /* position: absolute; */ /* having this caused overlap */ - top: 0; - z-index: 500; + width: 100%; + height: 72px; /* without this the other header components touch the top */ + background-color: transparent; + /* position: absolute; */ /* having this caused overlap */ + top: 0; + z-index: 500; } .nav-header.offset { - -webkit-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - -webkit-transition: all 1s ease-in-out; - transition: all 1s ease-in-out; + -webkit-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + -webkit-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; } .nav-header.scrolling { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } .nav-header.sticky { - position: fixed; - top: 0; - background-color: #000000 !important; - opacity: 0; - visibility: hidden; - z-index: 600; - color: white; + position: fixed; + top: 0; + background-color: #000000 !important; + opacity: 0; + visibility: hidden; + z-index: 600; + color: white; } /* .nav-header.sticky .header-logo a { */ .nav-header.sticky .header-logo img { - margin: 0; + margin: 0; } .nav-header.sticky .header-nav-wrap { - top: 0; + top: 0; } .nav-header.sticky.scrolling { - opacity: 1; - visibility: visible; + opacity: 1; + visibility: visible; } - /* ------------------------------------------------------------------- * ## header logo - (_site-layout.css) * ------------------------------------------------------------------- */ @@ -95,212 +94,212 @@ transition: all 0.3s ease-in-out; } */ - /* ------------------------------------------------------------------- * ## mobile menu toggle - (_site-layout.css) * ------------------------------------------------------------------- */ .header-menu-toggle { - color: rgba(255, 255, 255, 0.5); - display: none; - /* font-family: "Montserrat", sans-serif; */ - font-family: 'Noto Sans Cherokee', sans-serif; - font-size: 1.4rem; - font-weight: 400; /* regular */ - height: 42px; - letter-spacing: .2rem; - line-height: 42px; - position: absolute; - right: 29px; - top: 18px; - width: 42px; - text-transform: uppercase; - transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; + color: rgba(255, 255, 255, 0.5); + display: none; + /* font-family: "Montserrat", sans-serif; */ + font-family: "Noto Sans Cherokee", sans-serif; + font-size: 1.4rem; + font-weight: 400; /* regular */ + height: 42px; + letter-spacing: 0.2rem; + line-height: 42px; + position: absolute; + right: 29px; + top: 18px; + width: 42px; + text-transform: uppercase; + transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; } -.header-menu-toggle:hover, .header-menu-toggle:focus { - color: #FFFFFF; +.header-menu-toggle:hover, +.header-menu-toggle:focus { + color: #ffffff; } .header-menu-toggle span { - display: block; - width: 24px; - height: 2px; - margin-top: -1px; - position: absolute; - left: 9px; - top: 50%; - right: auto; - bottom: auto; - background-color: white; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - font: 0/0 a; - text-shadow: none; - color: transparent; + display: block; + width: 24px; + height: 2px; + margin-top: -1px; + position: absolute; + left: 9px; + top: 50%; + right: auto; + bottom: auto; + background-color: white; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + font: 0/0 a; + text-shadow: none; + color: transparent; } .header-menu-toggle span::before, .header-menu-toggle span::after { - content: ''; - width: 100%; - height: 100%; - background-color: inherit; - position: absolute; - left: 0; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; + content: ""; + width: 100%; + height: 100%; + background-color: inherit; + position: absolute; + left: 0; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; } .header-menu-toggle span::before { - top: -9px; + top: -9px; } .header-menu-toggle span::after { - bottom: -9px; + bottom: -9px; } .nav-header.sticky .header-menu-toggle { - top: 12px; + top: 12px; } .header-menu-toggle.is-clicked span { - background-color: rgba(255, 255, 255, 0); - -webkit-transition: all 0.1s ease-in-out; - transition: all 0.1s ease-in-out; + background-color: rgba(255, 255, 255, 0); + -webkit-transition: all 0.1s ease-in-out; + transition: all 0.1s ease-in-out; } .header-menu-toggle.is-clicked span::before, .header-menu-toggle.is-clicked span::after { - background-color: white; + background-color: white; } .header-menu-toggle.is-clicked span::before { - top: 0; - -webkit-transform: rotate(135deg); - -ms-transform: rotate(135deg); - transform: rotate(135deg); + top: 0; + -webkit-transform: rotate(135deg); + -ms-transform: rotate(135deg); + transform: rotate(135deg); } .header-menu-toggle.is-clicked span::after { - bottom: 0; - -webkit-transform: rotate(225deg); - -ms-transform: rotate(225deg); - transform: rotate(225deg); + bottom: 0; + -webkit-transform: rotate(225deg); + -ms-transform: rotate(225deg); + transform: rotate(225deg); } - /* ------------------------------------------------------------------- * ## navigation - (_site-layout.scss) * ------------------------------------------------------------------- */ .header-nav-wrap { - /* font-family: "Montserrat", sans-serif; */ - font-family: 'Noto Sans Cherokee', sans-serif; - font-size: 11px; - font-weight: 700; /* bold */ - letter-spacing: .25rem; - /* position: absolute; */ - right: 50px; - text-transform: uppercase; - top: 9px; + /* font-family: "Montserrat", sans-serif; */ + font-family: "Noto Sans Cherokee", sans-serif; + font-size: 11px; + font-weight: 700; /* bold */ + letter-spacing: 0.25rem; + /* position: absolute; */ + right: 50px; + text-transform: uppercase; + top: 9px; } .header-nav { - display: inline-block; - list-style: none; - margin: 0; - height: 72px; /* may not be needed? */ + display: inline-block; + list-style: none; + margin: 0; + height: 72px; /* may not be needed? */ } .header-nav li { - display: inline-block; - padding-left: 0; - margin-right: 2rem; + display: inline-block; + padding-left: 0; + margin-right: 2rem; } #headerNav li { - line-height: 72px; - /* color: #FFFFFF; */ + line-height: 72px; + /* color: #FFFFFF; */ } #headerNav li:hover { - cursor: pointer; + cursor: pointer; } .header-nav li a { - display: block; - line-height: 72px; - color: #FFFFFF; + display: block; + line-height: 72px; + color: #ffffff; } -.header-nav li.current a, .header-nav li.current, #headerNav li.current { - color: #FF69B4; /* PINK - FF69B4 */ - font-family: 'Noto Sans Cherokee', sans-serif; - font-weight: 800; /* extrabold */ +.header-nav li.current a, +.header-nav li.current, +#headerNav li.current { + color: #ff69b4; /* PINK - FF69B4 */ + font-family: "Noto Sans Cherokee", sans-serif; + font-weight: 800; /* extrabold */ } .highlights { - display: flex; - flex-flow: row wrap; + display: flex; + flex-flow: row wrap; } - /* ------------------------------------------------------------------- * responsive: * header * ------------------------------------------------------------------- */ @media only screen and (max-width: 800px) { - .header-logo { - left: 40px; - } - .header-nav-wrap { - display: none; - height: auto; - width: 100%; - right: auto; - top: 0; - left: 0; - /* background-color: #000000; */ - padding: 120px 40px 21px; - } - .header-nav-wrap .header-nav { - display: block; - height: auto; - margin: 0 0 4.2rem 0; - border-top: 1px solid rgba(255, 255, 255, 0.07); - } - .header-nav-wrap .header-nav li { - display: block; - margin: 0; - padding: 0; - border-bottom: 1px dotted rgba(255, 255, 255, 0.07); - } - .header-nav-wrap .header-nav li a, .header-nav li { - padding: 18px 0; - line-height: 18px; - } - .header-menu-toggle { - display: block; - } - .highlights { - flex-flow: column nowrap; - } + .header-logo { + left: 40px; + } + .header-nav-wrap { + display: none; + height: auto; + width: 100%; + right: auto; + top: 0; + left: 0; + /* background-color: #000000; */ + padding: 120px 40px 21px; + } + .header-nav-wrap .header-nav { + display: block; + height: auto; + margin: 0 0 4.2rem 0; + border-top: 1px solid rgba(255, 255, 255, 0.07); + } + .header-nav-wrap .header-nav li { + display: block; + margin: 0; + padding: 0; + border-bottom: 1px dotted rgba(255, 255, 255, 0.07); + } + .header-nav-wrap .header-nav li a, + .header-nav li { + padding: 18px 0; + line-height: 18px; + } + .header-menu-toggle { + display: block; + } + .highlights { + flex-flow: column nowrap; + } } @media only screen and (max-width: 1200px) { - .highlights { - flex-flow: row nowrap; - } + .highlights { + flex-flow: row nowrap; + } } - /* ------------------------------------------------------------------- * make sure the menu is visible on larger screens * ------------------------------------------------------------------- */ @media only screen and (min-width: 801px) { - .header-nav-wrap { - display: block !important; - } + .header-nav-wrap { + display: block !important; + } } diff --git a/src/components/Nav/nav.js b/src/components/Nav/nav.js index 637165c..ba719a5 100644 --- a/src/components/Nav/nav.js +++ b/src/components/Nav/nav.js @@ -1,89 +1,101 @@ -import React from 'react'; -import './nav.css'; -import Logo from '../Logo/Logo'; -import $ from 'jquery'; +/* eslint-disable */ +// TODO: Turn back on eslint when this file is more ready to go. -// export default function Nav() { -export default function Nav({ setActiveNavStr }) { - - const toggleOpen = (evt, navStr) => { - console.log(`${navStr} menu option was clicked - setting activeNavStr`); - setActiveNavStr(navStr); - // evt.preventDefault(); - var toggleButton = $('.header-menu-toggle'), - nav = $('.header-nav-wrap'); - - if (toggleButton.is(':visible')) { - nav.addClass('mobile'); - // if (nav.hasClass('mobile')) { - // toggleButton.toggleClass('is-clicked'); - // nav.slideToggle(); - // } - nav.slideToggle(); - } - toggleButton.toggleClass('is-clicked'); - // window.location.replace(`/${navStr}`); - }; +import React from "react"; +import "./nav.css"; +import Logo from "../Logo/Logo"; +import $ from "jquery"; +export default function Nav({ setActiveNavStr }) { + const toggleOpen = (evt, navStr) => { + console.log(`${navStr} menu option was clicked - setting activeNavStr`); + setActiveNavStr(navStr); + // evt.preventDefault(); + var toggleButton = $(".header-menu-toggle"), + nav = $(".header-nav-wrap"); - function scrollToTop() { - // window.location.replace("/#"); - window.scrollTo({ - top: 0, - behavior: 'smooth' - }); + if (toggleButton.is(":visible")) { + nav.addClass("mobile"); + // if (nav.hasClass('mobile')) { + // toggleButton.toggleClass('is-clicked'); + // nav.slideToggle(); + // } + nav.slideToggle(); } + toggleButton.toggleClass("is-clicked"); + // window.location.replace(`/${navStr}`); + }; - function scrollToPos(idStr) { - // https://plainjs.com/javascript/styles/get-the-position-of-an-element-relative-to-the-document-24/ - // const elemTop = document.querySelector(idStr).getBoundingClientRect().top; - var elemTop = document.querySelector(idStr).getBoundingClientRect().top; - // if (idStr === "navProjects") { - // elemTop = document.querySelector(idStr).getBoundingClientRect().top - 400; - // } - console.log(`elemTop: ${elemTop}`); - console.log(elemTop); - window.scrollTo({ - top: elemTop + window.pageYOffset, - behavior: 'smooth' - }); - } + function scrollToTop() { + // window.location.replace("/#"); + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + } - return ( -
- -
- ) -} \ No newline at end of file + + + { + event.preventDefault(); + // toggleOpen(event, "Mobile Menu") + }} + > + Menu + + + ); +} diff --git a/src/components/Projects/Projects.css b/src/components/Projects/Projects.css index 68bf705..bc69186 100644 --- a/src/components/Projects/Projects.css +++ b/src/components/Projects/Projects.css @@ -1,83 +1,83 @@ /* .projects { */ #Projects { - padding-top: 2rem; - padding-bottom: 3rem; - text-align: center; - background-color: blueviolet; + padding-top: 2rem; + padding-bottom: 3rem; + text-align: center; + background-color: blueviolet; } .header { - margin-bottom: 1rem; + margin-bottom: 1rem; } .slider { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } .carousel { - display: flex; - padding-top: 2rem; - overflow-x: auto; - scroll-snap-type: x mandatory; - -webkit-overflow-scrolling: touch; + display: flex; + padding-top: 2rem; + overflow-x: auto; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; } .card { - flex: 0 0 auto; - width: 300px; - /* margin-top: 1.5rem; */ - margin-right: 20px; - background-color: #fff; - border: 1px solid #ccc; - /*#e9e9e9*/ - scroll-snap-align: start; + flex: 0 0 auto; + width: 300px; + /* margin-top: 1.5rem; */ + margin-right: 20px; + background-color: #fff; + border: 1px solid #ccc; + /*#e9e9e9*/ + scroll-snap-align: start; } .card img { - width: 100%; - /* border-radius: 4px 4px 0 0; */ + width: 100%; + /* border-radius: 4px 4px 0 0; */ } .card-description { - padding: 1.5rem; + padding: 1.5rem; } .card-description h3 { - margin-top: 0; + margin-top: 0; } .card-buttons { - display: flex; - justify-content: space-between; - margin-top: 1rem; + display: flex; + justify-content: space-between; + margin-top: 1rem; } .card-buttons .btn { - text-decoration: none; - /* flex: 1; + text-decoration: none; + /* flex: 1; padding: 0.5rem; */ - padding: 0.5rem 1rem; - background-color: #007bff; - color: #fff; - border-radius: 4px; - font-size: 0.9rem; - transition: background-color 0.3s, color 0.3s; /* Add transition effect */ + padding: 0.5rem 1rem; + background-color: #007bff; + color: #fff; + border-radius: 4px; + font-size: 0.9rem; + transition: background-color 0.3s, color 0.3s; /* Add transition effect */ } .card-buttons .btn:hover { - background-color: #000; - color: #ff0; /* Change text color to yellow */ - } + background-color: #000; + color: #ff0; /* Change text color to yellow */ +} .card-buttons .btn:last-child { - margin-right: 0; + margin-right: 0; } @media (max-width: 767px) { - .card { - width: 200px; - margin-top: 1.5rem; - margin-right: 10px; - } -} \ No newline at end of file + .card { + width: 200px; + margin-top: 1.5rem; + margin-right: 10px; + } +} diff --git a/src/components/Projects/Projects.js b/src/components/Projects/Projects.js index 522d1bb..85ff932 100644 --- a/src/components/Projects/Projects.js +++ b/src/components/Projects/Projects.js @@ -1,49 +1,70 @@ -import React from 'react'; -import './Projects.css'; +import React from "react"; +import "./Projects.css"; const Projects = () => { - return ( -
-

Projects

-
-
-
- Project 1 -
-

Project 1

-

Description of Project 1

- -
-
-
- Project 2 -
-

Project 2

-

Description of Project 2

- -
-
-
- Project 3 -
-

Project 3

-

Description of Project 3

- -
-
+ return ( +
+

Projects

+
+
+
+ Project 1 +
+

Project 1

+

Description of Project 1

+
+
+
+ Project 2 +
+

Project 2

+

Description of Project 2

+
-
- ) -} +
+
+ Project 3 +
+

Project 3

+

Description of Project 3

+ +
+
+
+ +
+ ); +}; -export default Projects; \ No newline at end of file +export default Projects; diff --git a/src/components/Projects/README.md b/src/components/Projects/README.md index 3fe971c..fde9227 100644 --- a/src/components/Projects/README.md +++ b/src/components/Projects/README.md @@ -1,5 +1,6 @@ Each Project card will have the following details: -- `proj-img`: an image logo or eye catching photo / GIF -- `desc`: description -- `proj-link1`: link to nonprofit -- `proj-link2`: link to project repo \ No newline at end of file + +- `proj-img`: an image logo or eye catching photo / GIF +- `desc`: description +- `proj-link1`: link to nonprofit +- `proj-link2`: link to project repo diff --git a/src/components/Projects/chatGPT-Projects.css b/src/components/Projects/chatGPT-Projects.css index 4969272..b03c39d 100644 --- a/src/components/Projects/chatGPT-Projects.css +++ b/src/components/Projects/chatGPT-Projects.css @@ -1,81 +1,81 @@ .projects { - padding-top: 2rem; - padding-bottom: 2rem; - text-align: center; - background-color: blueviolet; + padding-top: 2rem; + padding-bottom: 2rem; + text-align: center; + background-color: blueviolet; } .header { - margin-bottom: 1rem; + margin-bottom: 1rem; } .slider { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } .carousel { - display: flex; - overflow-x: auto; - scroll-snap-type: x mandatory; - -webkit-overflow-scrolling: touch; + display: flex; + overflow-x: auto; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; } .card { - flex: 0 0 auto; - width: 300px; - /* margin-top: 1.5rem; */ - margin-right: 20px; - background-color: #fff; - border: 1px solid #ccc; - /*#e9e9e9*/ - scroll-snap-align: start; + flex: 0 0 auto; + width: 300px; + /* margin-top: 1.5rem; */ + margin-right: 20px; + background-color: #fff; + border: 1px solid #ccc; + /*#e9e9e9*/ + scroll-snap-align: start; } .card img { - width: 100%; - /* border-radius: 4px 4px 0 0; */ + width: 100%; + /* border-radius: 4px 4px 0 0; */ } .card-description { - padding: 1.5rem; + padding: 1.5rem; } .card-description h3 { - margin-top: 0; + margin-top: 0; } .card-buttons { - display: flex; - justify-content: space-between; - margin-top: 1rem; + display: flex; + justify-content: space-between; + margin-top: 1rem; } .card-buttons .btn { - text-decoration: none; - /* flex: 1; + text-decoration: none; + /* flex: 1; padding: 0.5rem; */ - padding: 0.5rem 1rem; - background-color: #007bff; - color: #fff; - border-radius: 4px; - font-size: 0.9rem; - transition: background-color 0.3s, color 0.3s; /* Add transition effect */ + padding: 0.5rem 1rem; + background-color: #007bff; + color: #fff; + border-radius: 4px; + font-size: 0.9rem; + transition: background-color 0.3s, color 0.3s; /* Add transition effect */ } .card-buttons .btn:hover { - background-color: #000; - color: #ff0; /* Change text color to yellow */ - } + background-color: #000; + color: #ff0; /* Change text color to yellow */ +} .card-buttons .btn:last-child { - margin-right: 0; + margin-right: 0; } @media (max-width: 767px) { - .card { - width: 200px; - margin-top: 1.5rem; - margin-right: 10px; - } -} \ No newline at end of file + .card { + width: 200px; + margin-top: 1.5rem; + margin-right: 10px; + } +} diff --git a/src/components/Projects/chatGPT-Projects.html b/src/components/Projects/chatGPT-Projects.html index a5c2743..2036957 100644 --- a/src/components/Projects/chatGPT-Projects.html +++ b/src/components/Projects/chatGPT-Projects.html @@ -1,47 +1,59 @@ - - - + - - + - + - + - Code For Dallas - - + Code For Dallas + + - - + + - - + - - + + - - + + -
+

Projects

- Project 1 + Project 1

Project 1

Description of Project 1

@@ -52,7 +64,10 @@

Project 1

- Project 2 + Project 2

Project 2

Description of Project 2

@@ -63,7 +78,10 @@

Project 2

- Project 3 + Project 3

Project 3

Description of Project 3

@@ -78,9 +96,9 @@

Project 3

- - + - diff --git a/src/index.css b/src/index.css index ec2585e..4a1df4d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,13 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } diff --git a/src/index.js b/src/index.js index d563c0f..770ee7d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js index 5253d3a..9ecd33f 100644 --- a/src/reportWebVitals.js +++ b/src/reportWebVitals.js @@ -1,6 +1,6 @@ -const reportWebVitals = onPerfEntry => { +const reportWebVitals = (onPerfEntry) => { if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); diff --git a/src/setupTests.js b/src/setupTests.js index 8f2609b..1dd407a 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -2,4 +2,4 @@ // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; +import "@testing-library/jest-dom";