Skip to content

Commit

Permalink
our hackathons
Browse files Browse the repository at this point in the history
  • Loading branch information
@DonaldKLee
DonaldKLee committed Sep 3, 2024
1 parent 128ed65 commit 631c09e
Show file tree
Hide file tree
Showing 6 changed files with 4,761 additions and 5,464 deletions.
213 changes: 204 additions & 9 deletions components/Hackathons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import styled from 'styled-components';
// import NewsletterModal from './NewsletterModal';
// import { Body, Title2 } from './Typography';
// import Button from './Button';
import SpaceDeer from '../public/assets/space-deer.svg'
import PurpleTexture from '../public/assets/purple-texture.svg'

const HackCampData = {
imgSrc: '/assets/HackCampPlanet.svg',
Expand All @@ -26,15 +28,25 @@ const cmdfData = {
};

const HackathonsContainer = styled.div`
width: 100%;
width: 90%;
justify-content: center;
display: grid;
grid-template-columns: 2fr 2fr;
margin: 10% auto;
${(p) => p.theme.mediaQueries.mobile} {
display: none; /* Hide on mobile */
}
`;

const MobileHackathonsContainer = styled.div`
display: none;
${(p) => p.theme.mediaQueries.mobile} {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
`;

Expand All @@ -48,10 +60,29 @@ const HackathonPlanet = styled.div`
}
`

const MobileHackathonPlanet = styled.div`
display: block;
width: 100%;
margin: 10px 0;
`;


const HackathonImageContainer = styled.div`
border-radius: 50%;
overflow: hidden;
position: relative;
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
`

const DashedConnector = styled.div`
Expand All @@ -70,10 +101,27 @@ const DashedConnector = styled.div`
`}
`

const MobileDashedConnector = styled.div`
position: relative;
width: 80px;
height: 0px;
border: 1.66px solid #BDBAC3;
border-style: dashed;
top: -30px;
${(props) =>
props.open &&
`
border: 1.66px solid #00D88A;
border-style: dashed;
`}
`


const HackathonImage = styled.img`
width: 100%;
height: 100%;
filter: blur(3.5px);
filter: blur(3px);
`

const HackathonDetails = styled.div`
Expand Down Expand Up @@ -101,6 +149,14 @@ const HackathonTitle = styled.h2`
margin-top: 0px;
`

const LiveBadge = styled.span`
background: #F65C5C;
color: white;
padding: 4px 8px;
border-radius: 6.21px;
font-size: 0.5em;
`;

const HackathonDescriptions = styled.p`
color: #FFF;
`
Expand All @@ -117,6 +173,87 @@ const HackathonButton = styled.a`
font-weight: bold;
`

const MobileHackathonDetails = styled.div`
position: relative;
border: 1.66px solid #BDBAC3;
border-radius: 24.84px;
position: relative;
border-style: dashed;
text-align: left;
width: 100%;
padding: 20px;
height: 190px;
${(props) =>
props.open &&
`
border: 1.66px solid #00D88A;
border-style: dashed;
`}
`

const MobileHackathonTitle = styled.span`
color: #FFF;
font-size: 2em;
margin-top: 0px;
`

const MobileHackathonDate = styled.span`
color: #BDBAC3;
float: right;
`

const PurpleTextureImg = styled.img`
position: absolute;
left: -20px;
margin-top: -60px;
float: left;
${(p) => p.theme.mediaQueries.mobile} {
}
`;

const SpaceDeerImg = styled.img`
position: absolute;
float: right;
margin-top: -60px;
right: 20px;
animation: float 5s ease-in-out infinite;
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
${(p) => p.theme.mediaQueries.mobile} {
display: none;
}
`;

const MobileHackathonImageContainer = styled.div`
border-radius: 50%;
overflow: hidden;
position: relative;
width: 160px;
height: 160px;
margin: 20px auto;
`;

const MobileHackathonImage = styled.img`
width: 100%;
height: 100%;
filter: blur(3px);
`;

export default function Hackathons() {
// const [showModal, setShowModal] = useState(false);

Expand All @@ -126,27 +263,27 @@ export default function Hackathons() {
{/* HackCamp */}
<HackathonPlanet>
<HackathonDetails open={HackCampData.open} style={{ top: "-100px" }}>
<HackathonTitle>HackCamp</HackathonTitle>
<HackathonTitle>HackCamp {HackCampData.open && <LiveBadge>Live</LiveBadge>}</HackathonTitle>
<HackathonDescriptions>Canada’s largest beginner hackathon, focused on learning.</HackathonDescriptions>
<HackathonDate>{HackCampData.date}</HackathonDate>
<HackathonButton href={HackCampData.link} target="_blank">Visit website</HackathonButton>
</HackathonDetails>

<DashedConnector open={HackCampData.open} style={{ top: "0px", left: "10px", transform: "rotate(30deg)" }}></DashedConnector>

<HackathonImageContainer style={{width: "179px", height: "179px", float: "right"}}>
<HackathonImageContainer style={{width: "254px", height: "254px", top:"-30px", animation: "float 5s ease-in-out infinite"}}>
<HackathonImage src={HackCampData.imgSrc} />
</HackathonImageContainer>
</HackathonPlanet>

{/* nwHacks */}
<HackathonPlanet>
<HackathonImageContainer style={{width: "304px", height: "304px"}}>
<HackathonImageContainer style={{width: "220px", height: "220px", float: "right", animation: "float 4s ease-in-out infinite" }}>
<HackathonImage src={nwHacksData.imgSrc} />
</HackathonImageContainer>
<DashedConnector open={nwHacksData.open} style={{ top: "80px", left: "-5px", transform: "rotate(-30deg)" }}></DashedConnector>
<DashedConnector open={nwHacksData.open} style={{ top: "80px", left: "-25px", transform: "rotate(-30deg)" }}></DashedConnector>
<HackathonDetails open={nwHacksData.open} style={{ textAlign: "left" }}>
<HackathonTitle>nwHacks</HackathonTitle>
<HackathonTitle>nwHacks {nwHacksData.open && <LiveBadge>Live</LiveBadge>}</HackathonTitle>
<HackathonDescriptions>Our flagship hackathon – largest in Western Canada.</HackathonDescriptions>
<HackathonDate>{nwHacksData.date}</HackathonDate>
<HackathonButton href={nwHacksData.link} target="_blank">Interest Form Open</HackathonButton>
Expand All @@ -156,20 +293,78 @@ export default function Hackathons() {
{/* cmd-f */}
<HackathonPlanet>
<HackathonDetails open={cmdfData.open} style={{ top: "50px", left: "-10px" }}>
<HackathonTitle>cmd-f</HackathonTitle>
<HackathonTitle>cmd-f {cmdfData.open && <LiveBadge>Live</LiveBadge>}</HackathonTitle>
<HackathonDescriptions>Hackathon celebrating underrepresented genders in tech.</HackathonDescriptions>
<HackathonDate>{cmdfData.date}</HackathonDate>
<HackathonButton href={cmdfData.link} target="_blank">Interest Form Open</HackathonButton>
</HackathonDetails>

<DashedConnector open={cmdfData.open} style={{ top: "120px", left: "-5px", transform: "rotate(-30deg)" }}></DashedConnector>

<HackathonImageContainer style={{width: "214.75px", height: "214.75px", textAlign: "right"}}>
<HackathonImageContainer style={{width: "214.75px", height: "214.75px", textAlign: "right", animation: "float 3.5s ease-in-out infinite"}}>
<HackathonImage src={cmdfData.imgSrc} />
</HackathonImageContainer>

</HackathonPlanet>
</HackathonsContainer>

<MobileHackathonsContainer>
{/* HackCamp */}
<MobileHackathonPlanet>
<MobileHackathonImageContainer>
<MobileHackathonImage src={HackCampData.imgSrc} />
</MobileHackathonImageContainer>

<MobileDashedConnector open={HackCampData.open} style={{ transform: "rotate(-40deg)", left: "50px" }}></MobileDashedConnector>

<MobileHackathonDetails open={HackCampData.open}>
<MobileHackathonTitle>HackCamp {HackCampData.open && <LiveBadge>Live</LiveBadge>}</MobileHackathonTitle>
<MobileHackathonDate>{HackCampData.date}</MobileHackathonDate>

<HackathonDescriptions>Canada’s largest beginner hackathon, focused on learning.</HackathonDescriptions>
<HackathonButton href={HackCampData.link} target="_blank">Visit website</HackathonButton>
</MobileHackathonDetails>
</MobileHackathonPlanet>

{/* nwHacks */}
<MobileHackathonPlanet>
<MobileHackathonImageContainer>
<MobileHackathonImage src={nwHacksData.imgSrc} />
</MobileHackathonImageContainer>

<MobileDashedConnector open={nwHacksData.open} style={{ transform: "rotate(40deg)", left: "260px" }}></MobileDashedConnector>

<MobileHackathonDetails open={nwHacksData.open}>
<MobileHackathonTitle>nwHacks {nwHacksData.open && <LiveBadge>Live</LiveBadge>}</MobileHackathonTitle>
<MobileHackathonDate>{nwHacksData.date}</MobileHackathonDate>

<HackathonDescriptions>Our flagship hackathon – largest in Western Canada.</HackathonDescriptions>
<HackathonButton href={nwHacksData.link} target="_blank">Interest Form Open</HackathonButton>
</MobileHackathonDetails>
</MobileHackathonPlanet>

{/* cmd-f */}
<MobileHackathonPlanet>
<MobileHackathonImageContainer>
<MobileHackathonImage src={cmdfData.imgSrc} />
</MobileHackathonImageContainer>

<MobileDashedConnector open={cmdfData.open} style={{ transform: "rotate(-40deg)", left: "50px" }}></MobileDashedConnector>

<MobileHackathonDetails open={cmdfData.open}>
<MobileHackathonTitle>cmd-f {cmdfData.open && <LiveBadge>Live</LiveBadge>}</MobileHackathonTitle>
<MobileHackathonDate>{cmdfData.date}</MobileHackathonDate>

<HackathonDescriptions>Hackathon celebrating underrepresented genders in tech.</HackathonDescriptions>
<HackathonButton href={cmdfData.link} target="_blank">Interest Form Open</HackathonButton>
</MobileHackathonDetails>

</MobileHackathonPlanet>

</MobileHackathonsContainer>

<PurpleTextureImg src={PurpleTexture} />
<SpaceDeerImg src={SpaceDeer} />
</>
);
}
7 changes: 4 additions & 3 deletions components/Hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@ const ComboButton = styled(Button)`
z-index: 1;
${(p) => p.theme.mediaQueries.mobile} {
height: 36px;
height: 32px;
width: 90px;
margin-top: -36px;
margin-left: calc(100% - 90px);
margin-top: -32px;
margin-left: calc(100% - 160px);
}
&:hover {
Expand All @@ -71,6 +71,7 @@ const StyledInput = styled.input`
padding: 4px 8px;
font-size: 14px;
line-height: 24px;
width: 230px;
}
`;

Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"@material-ui/core": "^4.12.3",
"animejs": "^3.2.1",
"axios": "^0.21.1",
"dayjs": "^1.11.13",
"firebase": "^8.0.0",
"lottie-react": "^2.3.1",
"next": "^11.0.1",
Expand All @@ -33,4 +34,4 @@
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0"
}
}
}
39 changes: 39 additions & 0 deletions public/assets/purple-texture.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 631c09e

Please sign in to comment.