diff --git a/package.json b/package.json index 00ee5d7..fa7d621 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "mchacks12", + "name": "mchacks13", "private": true, "description": "McHacks website", "version": "1.0.0", diff --git a/src/assets/images/designs/mchacks13-bg.svg b/src/assets/images/designs/mchacks13-bg.svg index 3829ae6..a6c00f8 100644 --- a/src/assets/images/designs/mchacks13-bg.svg +++ b/src/assets/images/designs/mchacks13-bg.svg @@ -1,9 +1,9 @@ - - + + - - + + - + diff --git a/src/assets/images/designs/mchacks13-campfire.svg b/src/assets/images/designs/mchacks13-campfire.svg new file mode 100644 index 0000000..322d9ed --- /dev/null +++ b/src/assets/images/designs/mchacks13-campfire.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx index f99d41a..fc95cd2 100644 --- a/src/components/About/About.jsx +++ b/src/components/About/About.jsx @@ -8,17 +8,18 @@ const About = ({ scrollRef }) => ( -

Dream, develop, deploy!

+

Code That Casts Spells

- For 24 hours, over 500 of the boldest young minds come - together at McGill University for a jam-packed weekend - of beginner-to-pro workshops, networking, and epic hacking. + For 24 enchanting hours, McGill transforms into + a realm of imagination and innovation. Over 500 + curious minds will gather under one roof, casting + spells of creativity through code, design, and daring ideas.

- Whether you're writing your first line of code, playing around - with APIs, or building the next blockchain, McHacks is the place - for you. We'll see you this January at the 12th annual rendition - of Canada's original collegiate hackathon! + Whether you're summoning your first "Hello, World!", brewing APIs in your cauldron, + or crafting the next big tech potion, McHacks is your very own playground. + Join us for the 13th edition of Canada’s most magical hackathon – and bring + your ideas to life, one line of code at a time.

diff --git a/src/components/About/Container.jsx b/src/components/About/Container.jsx index 32cda78..edf7970 100644 --- a/src/components/About/Container.jsx +++ b/src/components/About/Container.jsx @@ -1,4 +1,5 @@ import styled from "styled-components" +import * as styleVars from "../variable" export const Container = styled.section` position: relative; @@ -17,6 +18,16 @@ export const Container = styled.section` margin-top: 50px; } + @media screen and (max-width: ${styleVars.xsUp}) { + display: flex; + flex-direction: column; + align-self: center; + justify-self: center; + margin-top: 20px; + width: 80%; + right: 0px; + } + ` export default Container diff --git a/src/components/About/Content.jsx b/src/components/About/Content.jsx index 58ebf0d..56d328f 100644 --- a/src/components/About/Content.jsx +++ b/src/components/About/Content.jsx @@ -28,4 +28,9 @@ export const Content = styled.div` @media only screen and (max-width: ${styleVars.smUp}) { padding: 0; } + + @media only screen and (max-width: ${styleVars.xsUp}) { + padding: 10px; + gap: 30px; + } ` diff --git a/src/components/About/Text.jsx b/src/components/About/Text.jsx index bfb29cb..8670594 100644 --- a/src/components/About/Text.jsx +++ b/src/components/About/Text.jsx @@ -33,7 +33,22 @@ export const Text = styled.div` } @media only screen and (max-width: ${styleVars.xsUp}) { - padding: 20px; + padding: 0px; + + h1 { + font-size: 17px; + font-style: italic; + font-weight: 700; + line-height: normal; + letter-spacing: -0.85px; + } + p { + padding: 0px; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + } } ` diff --git a/src/components/FAQ/Container.jsx b/src/components/FAQ/Container.jsx index 4a396db..92f23b4 100644 --- a/src/components/FAQ/Container.jsx +++ b/src/components/FAQ/Container.jsx @@ -69,6 +69,7 @@ const Container = styled.section` .question { color: ${styleVars.m12DarkestTeal}; } + } } @media only screen and (max-width: 1000px) { @@ -80,6 +81,13 @@ const Container = styled.section` height: 200px; } + @media screen and (max-width: ${styleVars.xsUp}) { + margin-top: 20px !important; + right: 0px !important; + height: auto; + + } + &.hidden { display: none !important; } diff --git a/src/components/FAQ/FAQ.jsx b/src/components/FAQ/FAQ.jsx index 9d58c62..ae14ab3 100644 --- a/src/components/FAQ/FAQ.jsx +++ b/src/components/FAQ/FAQ.jsx @@ -14,32 +14,32 @@ const FAQ = ({ scrollRef }) => (
- A hackathon is a social coding event where programmers, designers, - and developers collaborate to solve a problem. + A hackathon is a 24-hour adrenaline rush where creativity meets code! It’s a social coding + event where programmers, designers, and developers team up to solve real-world challenges. + At McHacks, you’ll gain valuable insights from industry professionals, receive guidance + from experienced mentors, and network with sponsors and fellow innovators – all while + enjoying free food, great vibes, and maybe even walking away with an awesome prize (or an internship 👀). + - This year, we'll be running McHacks for 24 hours! It will be on - the weekend of January 25-26. + McHacks takes place on January 17th–18th at the downtown McGill University campus. - This year McHacks is taking place in person at the University - Centre Building on the McGill University campus. We’ll provide - more details on the specifics as we get closer to McHacks, but - right now all you need to do is apply. + Simply apply through our website! Once accepted, bring your laptop + and your ideas – we’ll provide the rest (snacks, mentors, and unlimited coffee refills included). - Students from all backgrounds and skill levels are welcome at - McHacks. + Anyone and everyone! Whether you’re a designer or a developer, + from Montreal or New York, in university or CEGEP – McHacks welcomes hackers of all kinds. - We welcome students with a variety of skill sets! While experience - coding and programming is a plus, we offer beginner friendly - workshops and mentorship to get you started. Teams will also need - people with strong presentation skills and brilliant ideas. + Whatever you know right now! McHacks is all about learning, experimenting, + and creating. Whether you’re writing your first “Hello, World!”, designing your + first prototype, or refining your machine learning model, we’ll have mentors and workshops to help you grow. diff --git a/src/components/FAQ/WindowStyles.jsx b/src/components/FAQ/WindowStyles.jsx index 948343c..d77f29a 100644 --- a/src/components/FAQ/WindowStyles.jsx +++ b/src/components/FAQ/WindowStyles.jsx @@ -32,5 +32,25 @@ export const WindowStyles = styled.div` font-size: 16px; color: ${styleVars.m12White}; } + + @media only screen and (max-width: ${styleVars.xsUp}) { + margin: 20px 0px; + display: flex; + flex-direction: column; + align-self: center; + justify-self: center; + width: 80%; + padding: 20px; + + + h2 { + font-size: 17px; + font-style: italic; + font-weight: 700; + line-height: normal; + letter-spacing: -0.85px; + } + } + } ` export default WindowStyles diff --git a/src/components/Footer/Container.jsx b/src/components/Footer/Container.jsx index edb959d..1907ed3 100644 --- a/src/components/Footer/Container.jsx +++ b/src/components/Footer/Container.jsx @@ -2,17 +2,16 @@ import styled from "styled-components" import * as styleVars from "../variable" export const Container = styled.footer` - background: ${() => - typeof window !== "undefined" && - !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname) - ? "rgba(170, 170, 170, 0.3)" - : styleVars.hackWhite}; - - border-top: ${() => - typeof window !== "undefined" && - !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname) - ? "1px solid rgba(255, 255, 255, 0.5)" - : `1px solid ${styleVars.m13Red}`}; + + ${props => props.$isHomePage ? ` + background: rgba(170, 170, 170, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.5); + ` : ` + background: ${styleVars.hackWhite}; + border-top: 1px solid ${styleVars.m13Red}; + `} + + display: flex; width: 100%; diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index fc13ebe..b49f176 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -11,44 +11,60 @@ import { import Container from "./Container" import Links from "./Links" import PageLink from "./PageLink" +import {Location } from "@reach/router" import SocialLink from "./SocialLink" -const Footer = () => ( - - - Code of Conduct - Privacy Policy - Discord Guide - MLH Code of Conduct - {/* TODO uhhhh is this supposed to be todo for 2025???!!!! - - Press Kit - */} - - - - - - +const pageLinks = [ + { href: "/code-of-conduct", text: "Code of Conduct" }, + { href: "/privacy", text: "Privacy Policy" }, + { href: "/discord-guide", text: "Discord Guide" }, + { href: "https://hackp.ac/coc", text: "MLH Code of Conduct", external: true }, + // TODO uhhhh is this supposed to be todo for 2025???!!!! + // { href: "/press-kit", text: "Press Kit" }, +] - - - +const socialLinks = [ + { href: "mailto:contact@mchacks.ca?Subject=Hello!", icon: faEnvelope }, + { href: "https://fb.com/mcgillhacks", icon: faFacebookSquare }, + { href: "https://instagram.com/mcgillhacks", icon: faInstagram }, + { href: "https://twitter.com/mcgillhacks", icon: faXTwitter }, +] - - - - - - - - - - +const Footer = () => ( + + {({ location }) => { + const isHomePage = !location.pathname.includes('/discord-guide/') && !location.pathname.includes('/privacy') && !location.pathname.includes('/code-of-conduct/'); + return ( + + + {pageLinks.map(({ href, text, external }) => ( + + {text} + + ))} + + + {socialLinks.map(({ href, icon }) => ( + + + + ))} + + + ) + }} + ) -export default Footer +export default Footer \ No newline at end of file diff --git a/src/components/Footer/PageLink.jsx b/src/components/Footer/PageLink.jsx index 7b2d624..174b5bb 100644 --- a/src/components/Footer/PageLink.jsx +++ b/src/components/Footer/PageLink.jsx @@ -3,25 +3,25 @@ import * as styleVars from "../variable" export const PageLink = styled.a` - color: ${() => - typeof window !== "undefined" && - !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname) - ? styleVars.hackWhite - : styleVars.m13Red}; + ${props => props.$isHomePage ? ` + color: ${styleVars.hackWhite}; + &:focus, + &:hover { + color: ${styleVars.colorHackRed}; + } + ` : ` + color: ${styleVars.m13Red}; + &:focus, + &:hover { + color: ${styleVars.m12Maroon}; + } + `} + font-weight: 500; cursor: pointer; text-decoration: none; letter-spacing: 1px; word-spacing: 3px; - - &:focus, - &:hover { - color: ${() => - typeof window !== "undefined" && - !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname) - ? styleVars.colorHackRed - : styleVars.m12Maroon}; - } ` export default PageLink diff --git a/src/components/Footer/SocialLink.jsx b/src/components/Footer/SocialLink.jsx index 33539b7..c408e8b 100644 --- a/src/components/Footer/SocialLink.jsx +++ b/src/components/Footer/SocialLink.jsx @@ -2,23 +2,22 @@ import styled from "styled-components" import * as styleVars from "../variable" export const SocialLink = styled.a` - color: ${() => - typeof window !== "undefined" && - !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname) - ? styleVars.hackWhite - : styleVars.m13Red}; + ${props => props.$isHomePage ? ` + color: ${styleVars.hackWhite}; + &:focus, + &:hover { + color: ${styleVars.colorHackRed}; + } + ` : ` + color: ${styleVars.m13Red}; + &:focus, + &:hover { + color: ${styleVars.m12Maroon}; + } + `} cursor: pointer; text-decoration: none; font-size: 16px; - - &:focus, - &:hover { - color: ${() => - typeof window !== "undefined" && - !["/privacy/", "/code-of-conduct/", "/discord-guide/"].includes(window.location.pathname) - ? styleVars.colorHackRed - : styleVars.m12Maroon}; - } `; export default SocialLink; diff --git a/src/components/Hero/Button.jsx b/src/components/Hero/Button.jsx index 1522c43..357c14c 100644 --- a/src/components/Hero/Button.jsx +++ b/src/components/Hero/Button.jsx @@ -37,6 +37,17 @@ export const Button = styled.button` margin-right: 0; align-items: left; } + + @media screen and (max-width: ${styleVars.xsUp}) { + font-size: 16px; + margin: 0px; + padding: 5px 16px; + font-size: 13px; + font-style: normal; + font-weight: 600; + line-height: normal; + letter-spacing: -0.65px; + } ` export default Button diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx index a676ed3..74a581b 100644 --- a/src/components/Hero/Hero.jsx +++ b/src/components/Hero/Hero.jsx @@ -64,10 +64,10 @@ const Hero = () => ( -
- {/* */} - {/* */} -
+ {/*
+ + +
*/} {/* */} (
- A hackathon is a social coding event where programmers, designers, - and developers collaborate to solve a problem. + Help us celebrate innovation! Judges review projects, meet brilliant student teams, and decide which hacks shine the brightest. + You’ll get a front-row seat to creativity in action, and help recognize the ideas that push boundaries! 👉 + Apply Now - This year, we'll be running McHacks for 24 hours! It will be on - the weekend of January 25-26. + Every great hacker needs a guide. Mentors guide hackers through technical challenges, brainstorm solutions, and inspire teams + to come up with their next Big Idea. Whether you’re a developer, designer, or entrepreneur, your insight makes a huge impact. 👉 + Apply Now - This year McHacks is taking place in person at the University - Centre Building on the McGill University campus. We’ll provide - more details on the specifics as we get closer to McHacks, but - right now all you need to do is apply. + Help keep the magic alive behind the scenes! Volunteers support logistics, registration, workshops, + and more – keeping the event running smoothly. It’s a fun, fast-paced weekend full of collaboration, energy, and community spirit. 👉 + Apply Now
diff --git a/src/components/Involvement/WindowStyles.jsx b/src/components/Involvement/WindowStyles.jsx index b39812b..f388965 100644 --- a/src/components/Involvement/WindowStyles.jsx +++ b/src/components/Involvement/WindowStyles.jsx @@ -47,5 +47,24 @@ export const WindowStyles = styled.div` height: auto; } } + + @media screen and (max-width: ${styleVars.xsUp}) { + margin: 20px 0px; + display: flex; + flex-direction: column; + align-self: center; + justify-self: center; + width: 80%; + padding: 20px; + + + h2 { + font-size: 17px; + font-style: italic; + font-weight: 700; + line-height: normal; + letter-spacing: -0.85px; + } + } ` export default WindowStyles diff --git a/src/components/Sponsor/Container.jsx b/src/components/Sponsor/Container.jsx index ceb6bb3..1554695 100644 --- a/src/components/Sponsor/Container.jsx +++ b/src/components/Sponsor/Container.jsx @@ -1,4 +1,5 @@ import styled from "styled-components" +import * as styleVars from "../variable" export const Container = styled.section` position: relative; @@ -26,6 +27,17 @@ export const Container = styled.section` margin-top: 100px; padding-right: 50px; } + + @media screen and (max-width: ${styleVars.xsUp}) { + padding: 0px; + display: flex; + flex-direction: column; + align-self: center; + justify-self: center; + margin-top: 20px; + width: 80%; + right: 0px; + } ` export default Container diff --git a/src/components/Sponsor/Content.jsx b/src/components/Sponsor/Content.jsx index 7823a76..b4282a4 100644 --- a/src/components/Sponsor/Content.jsx +++ b/src/components/Sponsor/Content.jsx @@ -24,4 +24,9 @@ export default styled.div` @media only screen and (max-width: ${styleVars.smUp}) { padding: 0; } + + @media only screen and (max-width: ${styleVars.xsUp}) { + padding: 10px; + gap: 30px; + } ` diff --git a/src/components/Sponsor/Sponsor.jsx b/src/components/Sponsor/Sponsor.jsx index 5e8d85a..6877d3c 100644 --- a/src/components/Sponsor/Sponsor.jsx +++ b/src/components/Sponsor/Sponsor.jsx @@ -6,8 +6,6 @@ import Image from "./Image" import Text from "./Text" import Button from "./Button" -import SponsorImg from "../../assets/images/designs/mchacks12-sponsor-image.svg" -import Bubble from "../../assets/images/designs/mchacks12-bubble.svg" const mailTo = () => { window.location = "mailto:sponsorship@mchacks.ca?Subject=Hello!" @@ -19,15 +17,17 @@ const Sponsor = ({ scrollRef }) => (

Sponsoring McHacks

- This winter, the best and brightest students from around the world - will connect for 24 hours to shake the world of technology. We want - you to be a part of this incredible experience, and we need your help - to bring it to life! + Imagine this: a room full of caffeine, creativity, + and code. 500+ students chasing the next big idea – using your tools, your tech, your spark.That’s McHacks. + A 24-hour adrenaline rush where limits are tested and boundaries don’t exist. Your support fuels this magic, + turning dreams into prototypes and imagination into impact. Bring your tech, your insight, and your energy, + and let’s create something that lasts beyond just the 24 Hours.

- Spend a weekend with McHacks and witness tomorrow’s leaders using your - technologies to solve real problems from the ground up. We've got a - table with your name on it! + View our sponsorship package at https://lnkd.in/gKyD7Jqj. + Our sponsorship packages along with our add-ons are flexible + and designed to meet your goals-whether it’s hiring, outreach, + or community impact Contact sponsor@mchacks.ca for more details.

{/* */} diff --git a/src/components/Sponsor/Text.jsx b/src/components/Sponsor/Text.jsx index 847df13..7134324 100644 --- a/src/components/Sponsor/Text.jsx +++ b/src/components/Sponsor/Text.jsx @@ -31,7 +31,22 @@ export const Text = styled.div` } @media only screen and (max-width: ${styleVars.xsUp}) { - padding: 20px; + padding: 0px; + + h2 { + font-size: 17px; + font-style: italic; + font-weight: 700; + line-height: normal; + letter-spacing: -0.85px; + } + p { + padding: 0px; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + } } ` diff --git a/src/components/variable.jsx b/src/components/variable.jsx index a251922..f6bafd3 100644 --- a/src/components/variable.jsx +++ b/src/components/variable.jsx @@ -81,7 +81,7 @@ export const hackGrey = "#797979" export const globalColorPrimary = hackWhite // screen breakpoint sizes -export const xsUp = "425px" +export const xsUp = "435px" export const smUp = "768px" export const mdUp = "992px" export const lgUp = "1200px"