diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..8599e2e --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +hackmerced.com \ No newline at end of file diff --git a/package.json b/package.json index 811bfcc..2be1ac0 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "hackmercedviii", + "homepage": "https://hackmerced.com", "version": "0.1.0", "private": true, "dependencies": { @@ -18,7 +19,9 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "predeploy": "npm run build", + "deploy": "gh-pages -d build" }, "eslintConfig": { "extends": [ @@ -37,5 +40,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "gh-pages": "^5.0.0" } } diff --git a/src/App.css b/src/App.css index 795bdb4..765e86e 100644 --- a/src/App.css +++ b/src/App.css @@ -2,38 +2,58 @@ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Unbounded:wght@300;400&display=swap'); - +.html{ + overflow-y: hidden; +} .App { text-align: center; min-height: 100vh; + max-width:fit-content; } .App-link { color: #61dafb; } + +a { + color: #FF7676; +} + .Tracks{ background: radial-gradient(50% 50% at 50% 50%, #D801DC 0%, #FF7676 100%); background-blend-mode: overlay; mix-blend-mode: normal; backdrop-filter: blur(6px); - color:white; - height: 54vh; - width: 100vw; - position: relative; + height: 75vh; + max-width: 100vw; + align-items: center; + text-align: center; + +} +.Tracks-title{ + margin-top: 0; + font-family: 'Unbounded'; + font-weight: normal; + margin-bottom: 2em; + padding-top: 3em; + text-align: left; + position: absolute; + padding-left: 10vw; } .Tracks-Flex{ justify-content: center; display: flex; - text-align: center; + } .Track-Card{ background: linear-gradient(170.14deg, rgba(37, 18, 18) 1.13%, rgba(143, 26, 26) 104.83%); height: 35vh; width: 20vw; padding:2em; - padding-top: 2vh; + padding-top: 5vh; margin:1em; + margin-top: 20vh; opacity: .7; } .Track-Name{ @@ -99,6 +119,9 @@ .FAQ-summary .MuiAccordionSummary-expandIconWrapper.Mui-expanded { transform: rotate(90deg); } +.accordion-link{ + color: white; +} .accordion-title{ font-family: 'DM Sans'; @@ -135,8 +158,9 @@ justify-content: space-between; align-content: center; padding-bottom:3rem; - background: linear-gradient(107.08deg, rgba(60, 26, 69, 0.7) 2.64%, rgba(67, 25, 92, 0.7) 135.38%); + background: linear-gradient(107.08deg, #3C1A45, #43195C); /* background-color: red; */ + z-index: 2; } .nav-items{ display: flex; @@ -145,7 +169,15 @@ right: 1rem; margin-top: 0.8rem; } + +.nav-items .button, .nav-items .registerButton{ + font-family: 'DM Sans'; + font-weight: bold; + font-size: 1em; +} + .nav-items > li{ + min-width: 1.5rem; margin-right: 3rem; list-style-type: none; } @@ -182,16 +214,39 @@ .MainPage{ background-color: #B61255; + background: radial-gradient(89.01% 89.01% at 72.01% 35.06%, #D83F0E 0%, #AD066A 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */; + background-blend-mode: overlay; + mix-blend-mode: normal; position:relative; display: flex; width: 100%; - height: 60vh; + height: 80vh; font-size: calc(1em + 2vmin); + font-family: 'unbounded'; + + background: radial-gradient(89.01% 89.01% at 72.01% 35.06%, #D83F0E 0%, #AD066A 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */; + background-blend-mode: overlay; + mix-blend-mode: normal; } .Main-text{ position: absolute; + text-align: left; left:10rem; top:10rem; + filter: drop-shadow(0px 0px 40px #FF5E54); + z-index: 3; +} +.Main-video{ + min-width: 100vw; + max-height: 100vh; + object-fit: cover; + overflow-y: hidden; +} +.Main-video{ + min-width: 100vw; + max-height: 100vh; + object-fit: cover; + overflow-y: hidden; } .Main-title{ color:#FFFFFF; @@ -199,14 +254,21 @@ .Main-subtitle{ color:#FFFFFF; } -.registerButton2{ +.Main-subtitle2{ + color:#FFFFFF; + font-weight: 500; + font-size: 0.6em; +} +.Main-registerButton2{ background-color: #FFFFFF; border: 0.18rem solid black; border-radius: 100px; + font-family: 'unbounded'; width: 15rem; height:2rem; transition-duration: .4s; + border: none; } .registerButton2:hover{ background-color: #AD0624; @@ -214,4 +276,77 @@ color: #FFFFFF; cursor: pointer; transform: translate(0.1rem, -0.1rem); -} \ No newline at end of file + border: none; +} + +/*MOBILE VIEWPORTS*/ +@media screen and (min-width: 300px) and (max-width: 880px) { + .MainPage{ + overflow-y: hidden; + display: block; + } + .Main-video{ + padding-left: 0; + position:sticky; + left:0; + z-index: 1; + overflow: hidden; + } + .Main-video:-webkit-scrollbar { + display: none; + + } + .Main-text{ + left:auto; + padding-left: 1em; + font-size: smaller; + z-index: 3; + } + .nav-items{ + left: 0; + } + .nav-items > li{ + margin-right: 1.5em; + } + .Tracks-Flex{ + display: inline-block; + + } + .Track-Card{ + width: auto; + padding-top: 0; + margin-top: 0; + } + .Tracks{ + height: auto; + margin-top: 0; + padding-top: 0; + z-index: 3; + position: relative; + } + .Tracks-title{ + text-align: left; + padding-left:1.5em; + position:initial; + } + .FAQ-accordion{ + position: relative; + flex-direction: column; + } + .MuiGrid2-root.FAQ-grid{ + display: block; + columns: 1; + gap: 0rem; + + } + .FAQ-accordion{ + width: 80vw; + } + .FAQ{ + position: relative; + z-index: 3; + text-align: left; + } + + +} diff --git a/src/Assets/landing.mp4 b/src/Assets/landing.mp4 new file mode 100644 index 0000000..f0161f9 Binary files /dev/null and b/src/Assets/landing.mp4 differ diff --git a/src/Components/FAQ.js b/src/Components/FAQ.js index 8b3f74e..92fea5f 100644 --- a/src/Components/FAQ.js +++ b/src/Components/FAQ.js @@ -14,6 +14,10 @@ const FAQAccordion = (props) => {

{props.description} + + + {props.link} +

@@ -22,7 +26,7 @@ const FAQAccordion = (props) => { function FAQ() { return ( -
+

frequently asked questions

@@ -51,12 +55,24 @@ function FAQ() { - + - + 'For a parking map resource, please see {here}. Parking on campus at UC Merced is free on weekends. On Friday, parking is free after 6 PM in the North Bowl, Scholars and Bellevue Lot - Green Zone lots. Parking is free after 8 PM in the Le Grand Lot, Library Lots 1 and 2 and Bellevue Lot - Gold Zone lots. Note that parking in the University Lot, Calaveras Lot, H Zones and specially marked spaces are prohibited at all times.'}/> + + + + + + + + + If you are interested in mentoring, please apply using {this form}. If you would like to judge a track, please consider sponsoring us by contacting Intiser Aziz at iaziz2@ucmerced.edu.}/> + + + + -
diff --git a/src/Components/MainPage.js b/src/Components/MainPage.js index 2c4ef60..a68b7aa 100644 --- a/src/Components/MainPage.js +++ b/src/Components/MainPage.js @@ -1,10 +1,22 @@ +import Video from '../Assets/landing.mp4'; function MainPage() { return (
+
); diff --git a/src/Components/NavBar.js b/src/Components/NavBar.js index f9be8dc..5cbac4d 100644 --- a/src/Components/NavBar.js +++ b/src/Components/NavBar.js @@ -2,9 +2,11 @@ function NavBar() { return (
diff --git a/src/Components/Tracks.js b/src/Components/Tracks.js index 37d88a2..6852bb6 100644 --- a/src/Components/Tracks.js +++ b/src/Components/Tracks.js @@ -2,28 +2,28 @@ import { Card } from "@mui/material"; import Support from '../Assets/support_1.svg' function Tracks() { return ( -
+

Tracks

Support logo

Coming soon

- Stay tuned! + Stay tuned to learn more about our prize tracks for this year.
Support logo

Coming soon

- Stay Tuned! + Stay tuned to learn more about our prize tracks for this year.
Support logo

Coming soon

- Stay Tuned! + Stay tuned to learn more about our prize tracks for this year.