Skip to content

Commit

Permalink
Squashed commit of the following:
Browse files Browse the repository at this point in the history 
commit a07853c
Author: Aaron Chan <[email protected]>
Date:   Sun Aug 4 00:22:34 2024 -0700

    feat: replace register button with case studies button

commit cf68bf7
Author: Aaron Chan <[email protected]>
Date:   Thu Apr 18 23:05:18 2024 -0700

    fix: minor styling fixes for consistency

commit ae9bf88
Author: Brian Liu <[email protected]>
Date:   Thu Apr 18 21:39:06 2024 -0700

    Added Recap Page, Edited Navbar bug where font was too big and overflowing
  • Loading branch information
@aaronchan32
aaronchan32 committed Aug 4, 2024
1 parent 75a471b commit ea51fcc
Show file tree
Hide file tree
Showing 20 changed files with 872 additions and 252 deletions.
46 changes: 35 additions & 11 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@ import LogoAndRegister from './components/LogoAndRegister/LogoAndRegister';
import Asteroid from './components/Asteroid/Asteroid';
import JudgeFunFacts from './components/JudgeFunFacts/JudgeFunFacts';
import MobileFooter from './components/MobileFooter/MobileFooter';
import Recap from './pages/Recap/Recap';
import { useNavigation } from './util/useNavigation';

function Rotate() {
function App() {
const scrollContainerRef = useRef<HTMLElement>(null);
const scroll1Ref = useRef<HTMLElement>(null);
const scroll2Ref = useRef<HTMLElement>(null);
const scroll3Ref = useRef<HTMLElement>(null);
const scroll4Ref = useRef<HTMLDivElement>(null);
const scroll5Ref = useRef<HTMLDivElement>(null);
const planetRef = useRef<SVGSVGElement>(null);
const fakeLogoRef = useRef<HTMLImageElement>(null);
const fakeRegisterRef = useRef<HTMLDivElement>(null);
Expand All @@ -28,56 +31,77 @@ function Rotate() {
const mobileJudgesRef = useRef<HTMLDivElement>(null);
const [logoLoaded, setLogoLoaded] = useState(false);
const homeRef = useRef<HTMLDivElement>(null);
const mobileRecapRef = useRef<HTMLDivElement>(null);

const scrollRefList = [scroll1Ref, scroll2Ref, scroll3Ref, scroll4Ref];
const scrollRefList = [
scroll1Ref,
scroll2Ref,
scroll3Ref,
scroll4Ref,
scroll5Ref
];
const mobileScrollRefList = [
scroll1Ref,
mobileFAQRef,
scroll3Ref,
mobileJudgesRef
mobileJudgesRef,
mobileRecapRef
];

const [pausedPlanet, setPausedPlanet] = useState('');
const registerClosed = true;

useGSAP(() => {
handleRotate(planetRef);
});

const {
navigateToPage,
pageSelected,
navLinks,
isHamburgerOpen,
toggleHamburger
} = useNavigation({
scrollContainerRef,
mobileScrollRefList,
scrollRefList,
setPausedPlanet
});

return (
<main ref={scrollContainerRef} className="scroll-cont">
<Asteroid homeRef={homeRef} />
<OrbitingPlanets planetRef={planetRef} pausedPlanet={pausedPlanet} />
<Navbar
navLinks={navLinks}
isHamburgerOpen={isHamburgerOpen}
toggleHamburger={toggleHamburger}
pageSelected={pageSelected}
navRef={navRef}
scrollRefList={scrollRefList}
scrollContainerRef={scrollContainerRef}
setPausedPlanet={setPausedPlanet}
mobileScrollRefList={mobileScrollRefList}
/>
<LogoAndRegister
registerClosed={registerClosed}
navRef={navRef}
scrollContainerRef={scrollContainerRef}
fakeLogoRef={fakeLogoRef}
fakeRegisterRef={fakeRegisterRef}
logoLoaded={logoLoaded}
navigateToPage={navigateToPage}
/>
<Home
registerClosed={registerClosed}
homeRef={homeRef}
scroll1Ref={scroll1Ref}
fakeLogoRef={fakeLogoRef}
fakeRegisterRef={fakeRegisterRef}
setLogoLoaded={setLogoLoaded}
navigateToPage={navigateToPage}
/>
<FAQ scroll2Ref={scroll2Ref} mobileFAQRef={mobileFAQRef} />
<Timeline scroll3Ref={scroll3Ref} />
<Judges scroll4Ref={scroll4Ref} mobileJudgesRef={mobileJudgesRef} />
<JudgeFunFacts />
<Recap scroll5Ref={scroll5Ref} mobileRecapRef={mobileRecapRef} />
<MobileFooter />
</main>
);
}

export default Rotate;
export default App;
24 changes: 19 additions & 5 deletions src/components/Asteroid/Asteroid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import FragmentAsteroid2 from './Fragments/Fragment-Asteroid-2';
import FragmentAsteroid3 from './Fragments/Fragment-Asteroid-3';
import FragmentAsteroid4 from './Fragments/Fragment-Asteroid-4';
import asteroidLogic from './asteroidLogic';
import useIsDesktop from '../../util/useIsDesktop';

type AsteroidProps = {
homeRef: React.RefObject<HTMLElement>;
Expand All @@ -30,11 +31,17 @@ type EndPoint = Point & {
};

export default function Asteroid({ homeRef }: AsteroidProps) {
const isDesktop = useIsDesktop();

const [asteroidAnimations, setAsteroidAnimations] = useState<
animationProps[]
>([]); // [ {x: number, y: number}
//Read-only value that persists across renders
const numAsteroids = useRef(Math.floor(Math.random() * 4) + 6).current;
let numAsteroids = useRef(Math.floor(Math.random() * 4) + 6).current;

if (!isDesktop) {
numAsteroids = 6;
}

const [asteroidVisibility, setAsteroidVisibility] = useState<boolean[]>(
Array(numAsteroids).fill(false)
Expand Down Expand Up @@ -93,6 +100,7 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
if (homeElement) {
const style = window.getComputedStyle(homeElement);
asteroidLogic({
isDesktop,
numAsteroids,
contentPaddingLeft: parseInt(style.paddingLeft),
contentPaddingRight: parseInt(style.paddingRight),
Expand All @@ -102,7 +110,7 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
setFragmentEndPts
});
}
}, [homeRef, numAsteroids]);
}, [homeRef, isDesktop, numAsteroids]);

const calculateClickMeInitial = () => {
const isLeft = Math.random() > 0.5;
Expand All @@ -119,7 +127,10 @@ export default function Asteroid({ homeRef }: AsteroidProps) {

const clickMeInitial = calculateClickMeInitial();

const clickMeLocation = { x: window.innerWidth / 3 - 50, y: 100 };
const clickMeLocation = {
x: window.innerWidth / 3 - 50,
y: !isDesktop ? 75 : 100
};

const FragmentAsteroidComponents = [
FragmentAsteroid1,
Expand Down Expand Up @@ -182,7 +193,6 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
key={`fragment-${index}-${i}`}
className="fragment"
initial={currentAsteroidLocation[index]}
// initial={asteroidAnimations[index]?.animate}
animate={{
x: fragmentEdPts[index * 4 + i].x,
y: fragmentEdPts[index * 4 + i].y,
Expand Down Expand Up @@ -222,7 +232,11 @@ export default function Asteroid({ homeRef }: AsteroidProps) {
}}
>
<LargeAsteroid2 />
{index === 0 && <p className="asteroid-signifier">Click Me !</p>}
{index === 0 && (
<p className="asteroid-signifier">
{isDesktop ? 'Click' : 'Tap'} Me !
</p>
)}
</motion.div>
)
)
Expand Down
50 changes: 44 additions & 6 deletions src/components/Asteroid/asteroidLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import { Point, animationProps } from './Asteroid';

//prettier-ignore
type AsteroidProps = {
isDesktop: boolean;
numAsteroids: number;
contentPaddingLeft: number;
contentPaddingRight: number;
contentWidth: number;
setAsteroidVisibility: React.Dispatch<React.SetStateAction<boolean[]>>;
setAsteroidAnimations: React.Dispatch<React.SetStateAction<animationProps[]>>;
setFragmentEndPts: React.Dispatch<React.SetStateAction<Point[]>>;
contentPaddingLeft: number;
contentPaddingRight: number;
contentWidth: number;
setAsteroidVisibility: React.Dispatch<React.SetStateAction<boolean[]>>;
setAsteroidAnimations: React.Dispatch<React.SetStateAction<animationProps[]>>;
setFragmentEndPts: React.Dispatch<React.SetStateAction<Point[]>>;
};

export default function asteroidLogic({
isDesktop,
numAsteroids,
contentPaddingLeft,
contentPaddingRight,
Expand Down Expand Up @@ -45,6 +47,42 @@ export default function asteroidLogic({
//Endpt y: 0 < y < window.innerHeight
let generatedCount = 0;
const generateEndPT = () => {
if (!isDesktop) {
// Top of content
if (generatedCount < 2) {
generatedCount++;
return {
x: Math.max(
Math.random() * (window.innerWidth - 100),
window.innerWidth / 2
),
y: Math.max(Math.random() * 80, 25),
rotate: Math.random() * 360
};
}

//Bottom Left of Content
if (generatedCount < 5) {
generatedCount++;
return {
x: Math.random() * (window.innerWidth / 2) + 5,
y:
Math.random() * (window.innerHeight / 2 - 100) +
window.innerHeight / 2,
rotate: Math.random() * 360
};
} else {
//Bottom Right of Content
generatedCount++;
return {
x:
(Math.random() * window.innerWidth - 50) / 2 +
window.innerWidth / 2,
y: Math.random() * (window.innerHeight / 2) + window.innerHeight / 2,
rotate: Math.random() * 360
};
}
}
const contentRight = window.innerWidth - contentPaddingRight;

//Let side of content
Expand Down
2 changes: 1 addition & 1 deletion src/components/JudgeCard/JudgeCard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
flex-direction: row-reverse;
}

@media (max-width: 390px) {
@media (max-width: 425px) {
flex-direction: column;

&:nth-of-type(even) {
Expand Down
7 changes: 1 addition & 6 deletions src/components/LogoAndRegister/LogoAndRegister.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@

.button {
background: $primary-orange;
border: none;
display: inline-block;
font-size: 1.5em;
padding: 0.5em 1.2em;
Expand All @@ -27,12 +28,6 @@
background-color 0.3s,
color 0.3s;

&.disabled:hover {
cursor: not-allowed;
background-color: $primary-orange;
color: $primary-white;
}

&:hover {
background-color: $primary-white;
color: $primary-orange;
Expand Down
47 changes: 11 additions & 36 deletions src/components/LogoAndRegister/LogoAndRegister.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import './LogoAndRegister.scss';
import { useEffect, useRef } from 'react';
import Logo from '/images/Logo.svg';
import CustomToolTip from '../CustomToolTIp/CustomToolTip';
import { Pages } from '../../util/useNavigation';

type LogoAndRegisterProps = {
scrollContainerRef: React.RefObject<HTMLElement>;
fakeLogoRef: React.RefObject<HTMLImageElement>;
fakeRegisterRef: React.RefObject<HTMLDivElement>;
navRef: React.RefObject<HTMLDivElement>;
logoLoaded: boolean;
registerClosed: boolean;
navigateToPage: (page: Pages, pageIndex: number) => void;
};

export default function LogoAndRegister({
Expand All @@ -18,7 +18,7 @@ export default function LogoAndRegister({
fakeRegisterRef,
navRef,
logoLoaded,
registerClosed
navigateToPage
}: LogoAndRegisterProps) {
const logoRef = useRef<HTMLImageElement>(null);
const registerRef = useRef<HTMLImageElement>(null);
Expand Down Expand Up @@ -53,7 +53,7 @@ export default function LogoAndRegister({

if (registerRef.current && fakeRegisterInfo) {
registerRef.current.style.transform = `translate(${fakeRegisterInfo.x}px, ${fakeRegisterInfo.y}px)`;
registerRef.current.style.opacity = registerClosed ? '0.5' : '1';
registerRef.current.style.opacity = '1';
setTimeout(() => {
registerRef.current!.style.transition = 'transform 0.4s ease-out';
}, 500);
Expand Down Expand Up @@ -87,44 +87,19 @@ export default function LogoAndRegister({
lastScrollTopRef.current = scrollPosition <= 0 ? 0 : scrollPosition;
});
}
}, [
logoLoaded,
fakeLogoRef,
scrollContainerRef,
fakeRegisterRef,
navRef,
registerClosed
]);
}, [logoLoaded, fakeLogoRef, scrollContainerRef, fakeRegisterRef, navRef]);

return (
<div className="logo-and-register">
<img ref={logoRef} src={Logo} alt="Design Frontiers Logo" />
<div
data-tooltip-id={`fake-register-tooltip`}
data-tooltip-content={'Registration is closed.'}
data-tooltip-place="top"
className="register-button disabled"
ref={registerRef}
>
<a
className={`button parallelogram ${registerClosed ? 'disabled' : ''}`}
href={
registerClosed
? 'javascript:;'
: 'https://forms.gle/3vDkncYXUpMrX7D17'
}
target={registerClosed ? '_self' : '_blank'}
rel="noreferrer"
aria-disabled={registerClosed}
<div className="register-button disabled " ref={registerRef}>
<button
onClick={() => navigateToPage('Recap', 4)}
className="button parallelogram"
>
<span className="skew-fix">REGISTER NOW</span>
</a>
<span className="skew-fix">VIEW CASE STUDIES</span>
</button>
</div>
<CustomToolTip
id="fake-register-tooltip"
place="top"
content="Registration is closed."
/>
</div>
);
}
8 changes: 7 additions & 1 deletion src/components/MobileFooter/MobileFooter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,24 @@ footer {
display: flex;
flex-direction: row;
align-items: center;
p {
font-size: $footer-font-size;
}

flex-wrap: wrap;

svg {
height: $p-size;
height: $footer-font-size;
}

#heart {
margin-inline-start: calc($footer-font-size / 2);
margin-inline-end: calc($footer-font-size / 3);
}
}
a {
font-size: $footer-font-size;
}

@media (min-width: $mobile-breakpoint) {
display: none;
Expand Down
Loading

0 comments on commit ea51fcc

Please sign in to comment.