diff --git a/.gitignore b/.gitignore index 6034ae17..845d23b8 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,4 @@ .idea/vcs.xml .idea/workspace.xml -.vscode/* \ No newline at end of file +.vscode/* diff --git a/README.md b/README.md new file mode 100644 index 00000000..9ea1d8f3 --- /dev/null +++ b/README.md @@ -0,0 +1,10 @@ + + # location + + Note: Please ensure you have installed nodejs + + To preview and run the project on your device: + 1) Open project folder in Visual Studio Code + 2) In the terminal, run `npm install` + 3) Run `npm start` to view project in browser + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..035159b8 --- /dev/null +++ b/package.json @@ -0,0 +1,41 @@ +{ + "name": "location", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "@types/jest": "^29.5.0", + "@types/node": "^16.11.14", + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "web-vitals": "^2.1.4", + "typescript": "^4.5.4", + "react-router-dom": "^6.2.1" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "root": true + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} \ No newline at end of file diff --git a/public/google-maps-image@2x.png b/public/google-maps-image@2x.png new file mode 100644 index 00000000..a5b45bf6 Binary files /dev/null and b/public/google-maps-image@2x.png differ diff --git a/public/group-151@2x.png b/public/group-151@2x.png new file mode 100644 index 00000000..82a929cf Binary files /dev/null and b/public/group-151@2x.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..4d358fc2 --- /dev/null +++ b/public/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + location + + + +
+ + diff --git a/public/rectangle-49@2x.png b/public/rectangle-49@2x.png new file mode 100644 index 00000000..701dde62 Binary files /dev/null and b/public/rectangle-49@2x.png differ diff --git a/public/simplification@2x.png b/public/simplification@2x.png new file mode 100644 index 00000000..71cd9784 Binary files /dev/null and b/public/simplification@2x.png differ diff --git a/public/social-media-buttons@2x.png b/public/social-media-buttons@2x.png new file mode 100644 index 00000000..6bd8669b Binary files /dev/null and b/public/social-media-buttons@2x.png differ diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 00000000..5896ae81 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,70 @@ +import { useEffect } from "react"; +import { + Routes, + Route, + useNavigationType, + useLocation, +} from "react-router-dom"; +import Contact from "./pages/Contact"; +import Frame from "./pages/Frame"; +import Group from "./pages/Group"; +import Frame1 from "./pages/Frame1"; + +function App() { + const action = useNavigationType(); + const location = useLocation(); + const pathname = location.pathname; + + useEffect(() => { + if (action !== "POP") { + window.scrollTo(0, 0); + } + }, [action, pathname]); + + useEffect(() => { + let title = ""; + let metaDescription = ""; + + switch (pathname) { + case "/": + title = ""; + metaDescription = ""; + break; + case "/frame": + title = ""; + metaDescription = ""; + break; + case "/group-151": + title = ""; + metaDescription = ""; + break; + case "/frame1": + title = ""; + metaDescription = ""; + break; + } + + if (title) { + document.title = title; + } + + if (metaDescription) { + const metaDescriptionTag: HTMLMetaElement | null = document.querySelector( + 'head > meta[name="description"]' + ); + if (metaDescriptionTag) { + metaDescriptionTag.content = metaDescription; + } + } + }, [pathname]); + + return ( + + } /> + } /> + } /> + } /> + + ); +} +export default App; diff --git a/src/components/LocationText.module.css b/src/components/LocationText.module.css new file mode 100644 index 00000000..590a5a9b --- /dev/null +++ b/src/components/LocationText.module.css @@ -0,0 +1,9 @@ +.location { + font-size: 40px; + display: inline-block; + font-family: var(--font-space-grotesk); + color: var(--color-white); + text-align: center; + width: 310px; + height: 109px; +} diff --git a/src/components/LocationText.tsx b/src/components/LocationText.tsx new file mode 100644 index 00000000..852f947b --- /dev/null +++ b/src/components/LocationText.tsx @@ -0,0 +1,8 @@ +import { FunctionComponent } from "react"; +import styles from "./LocationText.module.css"; + +const LocationText: FunctionComponent = () => { + return Location; +}; + +export default LocationText; diff --git a/src/components/Rectangle.module.css b/src/components/Rectangle.module.css new file mode 100644 index 00000000..8ad76175 --- /dev/null +++ b/src/components/Rectangle.module.css @@ -0,0 +1,5 @@ +.rectangleDiv { + background-color: #843b3b; + width: 642px; + height: 481px; +} diff --git a/src/components/Rectangle.tsx b/src/components/Rectangle.tsx new file mode 100644 index 00000000..207b7e62 --- /dev/null +++ b/src/components/Rectangle.tsx @@ -0,0 +1,8 @@ +import { FunctionComponent } from "react"; +import styles from "./Rectangle.module.css"; + +const Rectangle: FunctionComponent = () => { + return
; +}; + +export default Rectangle; diff --git a/src/components/RectangleVector.module.css b/src/components/RectangleVector.module.css new file mode 100644 index 00000000..6989824f --- /dev/null +++ b/src/components/RectangleVector.module.css @@ -0,0 +1,5 @@ +.rectangleDiv { + background-color: #702122; + width: 642px; + height: 192px; +} diff --git a/src/components/RectangleVector.tsx b/src/components/RectangleVector.tsx new file mode 100644 index 00000000..33c3b448 --- /dev/null +++ b/src/components/RectangleVector.tsx @@ -0,0 +1,8 @@ +import { FunctionComponent } from "react"; +import styles from "./RectangleVector.module.css"; + +const RectangleVector: FunctionComponent = () => { + return
; +}; + +export default RectangleVector; diff --git a/src/components/TBDText.module.css b/src/components/TBDText.module.css new file mode 100644 index 00000000..5fc7dc1d --- /dev/null +++ b/src/components/TBDText.module.css @@ -0,0 +1,9 @@ +.tbd { + font-size: 20px; + font-family: var(--font-space-grotesk); + color: var(--color-gray); + text-align: left; + display: inline-block; + width: 437.7px; + height: 61.5px; +} diff --git a/src/components/TBDText.tsx b/src/components/TBDText.tsx new file mode 100644 index 00000000..a81d6d80 --- /dev/null +++ b/src/components/TBDText.tsx @@ -0,0 +1,8 @@ +import { FunctionComponent } from "react"; +import styles from "./TBDText.module.css"; + +const TBDText: FunctionComponent = () => { + return
TBD
; +}; + +export default TBDText; diff --git a/src/components/TBDText1.module.css b/src/components/TBDText1.module.css new file mode 100644 index 00000000..7d3dde50 --- /dev/null +++ b/src/components/TBDText1.module.css @@ -0,0 +1,6 @@ +.tbd { + font-size: var(--font-size-16xl); + font-family: var(--font-space-grotesk); + color: var(--color-gray); + text-align: center; +} diff --git a/src/components/TBDText1.tsx b/src/components/TBDText1.tsx new file mode 100644 index 00000000..c9c89622 --- /dev/null +++ b/src/components/TBDText1.tsx @@ -0,0 +1,8 @@ +import { FunctionComponent } from "react"; +import styles from "./TBDText1.module.css"; + +const TBDText1: FunctionComponent = () => { + return TBD; +}; + +export default TBDText1; diff --git a/src/components/TBDText2.module.css b/src/components/TBDText2.module.css new file mode 100644 index 00000000..7d3dde50 --- /dev/null +++ b/src/components/TBDText2.module.css @@ -0,0 +1,6 @@ +.tbd { + font-size: var(--font-size-16xl); + font-family: var(--font-space-grotesk); + color: var(--color-gray); + text-align: center; +} diff --git a/src/components/TBDText2.tsx b/src/components/TBDText2.tsx new file mode 100644 index 00000000..fd4f33c9 --- /dev/null +++ b/src/components/TBDText2.tsx @@ -0,0 +1,8 @@ +import { FunctionComponent } from "react"; +import styles from "./TBDText2.module.css"; + +const TBDText2: FunctionComponent = () => { + return TBD; +}; + +export default TBDText2; diff --git a/src/components/TBDText3.module.css b/src/components/TBDText3.module.css new file mode 100644 index 00000000..7d3dde50 --- /dev/null +++ b/src/components/TBDText3.module.css @@ -0,0 +1,6 @@ +.tbd { + font-size: var(--font-size-16xl); + font-family: var(--font-space-grotesk); + color: var(--color-gray); + text-align: center; +} diff --git a/src/components/TBDText3.tsx b/src/components/TBDText3.tsx new file mode 100644 index 00000000..c428d502 --- /dev/null +++ b/src/components/TBDText3.tsx @@ -0,0 +1,8 @@ +import { FunctionComponent } from "react"; +import styles from "./TBDText3.module.css"; + +const TBDText3: FunctionComponent = () => { + return TBD; +}; + +export default TBDText3; diff --git a/src/global.css b/src/global.css new file mode 100644 index 00000000..c624bd0c --- /dev/null +++ b/src/global.css @@ -0,0 +1,20 @@ +@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap"); +body { + margin: 0; + line-height: normal; +} +:root { + /* fonts */ + --font-space-grotesk: "Space Grotesk"; + + /* font sizes */ + --font-size-16xl: 35px; + --font-size-3xl: 22px; + + /* Colors */ + --color-gray: #fffdfd; + --color-white: #fff; + + /* Border radiuses */ + --br-8xs: 5px; +} diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 00000000..83307182 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; +import { BrowserRouter } from "react-router-dom"; +import "./global.css"; + +const container = document.getElementById("root"); +const root = createRoot(container!); + +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/src/pages/Contact.module.css b/src/pages/Contact.module.css new file mode 100644 index 00000000..77196511 --- /dev/null +++ b/src/pages/Contact.module.css @@ -0,0 +1,127 @@ +.contactChild { + position: absolute; + top: 98px; + left: 52px; + background-color: #a25555; + width: 1366px; + height: 984px; +} +.contactItem { + position: absolute; + bottom: 26px; + left: 53px; + width: 1365px; + height: 351px; + object-fit: cover; +} +.about, +.home, +.register { + position: absolute; + top: 894px; + left: 393px; +} +.about, +.register { + top: 939px; +} +.register { + top: 984px; + left: 391px; +} +.contact1, +.faq, +.sponsors { + position: absolute; + top: 894px; + left: 572px; +} +.contact1, +.faq { + top: 939px; + left: 577px; +} +.contact1 { + top: 984px; + left: 573px; +} +.questionsContactUs { + font-family: var(--font-space-grotesk); +} +.span { + font-weight: 500; +} +.infoellehackscom2 { + text-decoration: underline; +} +.infoellehackscom { + color: inherit; +} +.email { + position: absolute; + top: 977px; + left: 858px; + text-align: left; +} +.location { + position: absolute; + top: 162px; + left: calc(50% - 535px); + font-size: 64px; +} +.googleMapsImage { + position: absolute; + top: 244px; + left: 186px; + border-radius: var(--br-8xs); + width: 534px; + height: 364.7px; + object-fit: cover; +} +.thePondRd { + margin: 0; +} +.thePondRdContainer, +.victorPhillipDahdaleh { + position: absolute; + left: 771px; + color: var(--color-gray); +} +.thePondRdContainer { + top: 314px; + font-size: 26px; + text-align: left; + display: inline-block; + width: 437.7px; + height: 61.5px; +} +.victorPhillipDahdaleh { + top: 244px; + font-size: var(--font-size-16xl); +} +.contactInner, +.socialMediaButtons { + position: absolute; + top: 916px; + left: 855px; + width: 307px; + height: 35px; + object-fit: cover; +} +.contactInner { + top: 891.2px; + left: 150.2px; + width: 122.5px; + height: 122.5px; + object-fit: contain; +} +.contact { + position: relative; + width: 100%; + height: 1104px; + overflow: hidden; + text-align: center; + font-size: var(--font-size-3xl); + color: var(--color-white); + font-family: var(--font-space-grotesk); +} diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx new file mode 100644 index 00000000..6ad125c3 --- /dev/null +++ b/src/pages/Contact.tsx @@ -0,0 +1,52 @@ +import { FunctionComponent } from "react"; +import styles from "./Contact.module.css"; + +const Contact: FunctionComponent = () => { + return ( +
+
+ + Home + About + Register + Sponsors + FAQ + Contact +
+ Questions? Contact us at + {` `} + + + info@ellehacks.com + + +
+ Location + +
+

+ 88 The Pond Rd, North York, ON M3J 2S5 +

+
+ + Victor Phillip Dahdaleh Building + + + +
+ ); +}; + +export default Contact; diff --git a/src/pages/Frame.module.css b/src/pages/Frame.module.css new file mode 100644 index 00000000..0172f3bc --- /dev/null +++ b/src/pages/Frame.module.css @@ -0,0 +1,33 @@ +.register { + position: absolute; + top: 984px; + left: 391px; +} +.questionsContactUs { + font-family: var(--font-space-grotesk); +} +.span { + font-weight: 500; +} +.infoellehackscom2 { + text-decoration: underline; +} +.infoellehackscom { + color: inherit; +} +.email { + position: absolute; + top: 977px; + left: 858px; + text-align: left; +} +.frame { + position: relative; + width: 100%; + height: 1006px; + overflow: hidden; + text-align: center; + font-size: var(--font-size-3xl); + color: var(--color-white); + font-family: var(--font-space-grotesk); +} diff --git a/src/pages/Frame.tsx b/src/pages/Frame.tsx new file mode 100644 index 00000000..80e0c64a --- /dev/null +++ b/src/pages/Frame.tsx @@ -0,0 +1,25 @@ +import { FunctionComponent } from "react"; +import styles from "./Frame.module.css"; + +const Frame: FunctionComponent = () => { + return ( +
+ Register +
+ Questions? Contact us at + {` `} + + + info@ellehacks.com + + +
+
+ ); +}; + +export default Frame; diff --git a/src/pages/Frame1.module.css b/src/pages/Frame1.module.css new file mode 100644 index 00000000..472ecd64 --- /dev/null +++ b/src/pages/Frame1.module.css @@ -0,0 +1,14 @@ +.googleMapsImage { + position: absolute; + top: 0; + left: 0; + border-radius: var(--br-8xs); + width: 265px; + height: 205px; + object-fit: cover; +} +.frame { + position: relative; + width: 100%; + height: 205px; +} diff --git a/src/pages/Frame1.tsx b/src/pages/Frame1.tsx new file mode 100644 index 00000000..ed53a912 --- /dev/null +++ b/src/pages/Frame1.tsx @@ -0,0 +1,16 @@ +import { FunctionComponent } from "react"; +import styles from "./Frame1.module.css"; + +const Frame1: FunctionComponent = () => { + return ( +
+ +
+ ); +}; + +export default Frame1; diff --git a/src/pages/Group.module.css b/src/pages/Group.module.css new file mode 100644 index 00000000..41715701 --- /dev/null +++ b/src/pages/Group.module.css @@ -0,0 +1,17 @@ +.simplificationIcon { + position: absolute; + top: 0; + left: 0; + width: 109px; + height: 109px; + overflow: hidden; + object-fit: cover; + transform: rotate(7.64deg); +} +.simplificationParent { + position: relative; + width: 100%; + height: 109px; + transform: rotate(-7.64deg); + transform-origin: 0 0; +} diff --git a/src/pages/Group.tsx b/src/pages/Group.tsx new file mode 100644 index 00000000..e737db68 --- /dev/null +++ b/src/pages/Group.tsx @@ -0,0 +1,16 @@ +import { FunctionComponent } from "react"; +import styles from "./Group.module.css"; + +const Group: FunctionComponent = () => { + return ( +
+ +
+ ); +}; + +export default Group; diff --git a/src/reportWebVitals.tsx b/src/reportWebVitals.tsx new file mode 100644 index 00000000..5fa3583b --- /dev/null +++ b/src/reportWebVitals.tsx @@ -0,0 +1,15 @@ +import { ReportHandler } from "web-vitals"; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/src/typings.d.ts b/src/typings.d.ts new file mode 100644 index 00000000..1fb927a1 --- /dev/null +++ b/src/typings.d.ts @@ -0,0 +1,7 @@ +declare module "*.css" { + interface IClassNames { + [className: string]: string; + } + const classNames: IClassNames; + export = classNames; +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..a273b0cf --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +}