Skip to content

Commit

Permalink
feat: add 2 new sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronchan32
aaronchan32 committed Apr 4, 2024
1 parent 20c9438 commit b2c815d
Show file tree
Hide file tree
Showing 9 changed files with 236 additions and 139 deletions.
24 changes: 4 additions & 20 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,26 +31,10 @@ function Rotate() {
scrollRefList={scrollRefList}
scrollContainerRef={scrollContainerRef}
/>
<section ref={scroll1Ref} className="scroll-section-one">
<div className="one">
<Home />
</div>
</section>
<section ref={scroll2Ref} className="scroll-section-two">
<div className="two">
<FAQ />
</div>
</section>
<section ref={scroll3Ref} className="scroll-section-three">
<div className="three">
<Timeline />
</div>
</section>
<section ref={scroll4Ref} className="scroll-section-four">
<div className="four">
<Judges />
</div>
</section>
<Home scroll1Ref={scroll1Ref} />
<FAQ scroll2Ref={scroll2Ref} />
<Timeline scroll3Ref={scroll3Ref} />
<Judges scroll4Ref={scroll4Ref} />
</main>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/components/Navbar/Navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ nav {
width: 100%;
right: $navbar-margin;
pointer-events: none;
z-index: 1;

.desktop-nav {
list-style-type: none;
Expand Down
60 changes: 32 additions & 28 deletions src/pages/FAQ/FAQ.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,48 @@
import './FAQ.scss';
import { FAQInfo } from './FAQInfo';
import { useRef } from 'react';
import useIsDesktop from '../../util/useIsDesktop';

export default function FAQ() {
const faq1Ref = useRef(null);
const faq2Ref = useRef(null);
const faq1ContainerRef = useRef(null);
type FAQProps = {
scroll2Ref: React.RefObject<HTMLElement>;
};

export default function FAQ({ scroll2Ref }: FAQProps) {
const isDesktop = useIsDesktop();

return (
<div className="faq-stuff">
{isDesktop ? (
<>
<section className="desktop faq" ref={faq1ContainerRef}>
<div ref={faq1Ref} className="faq-container">
<h2>FAQ</h2>
{FAQInfo.slice(0, 3).map(item => (
<div className="block" key={item.question}>
<h4>{item.question}</h4>
<p>{item.answer}</p>
</div>
))}
</div>
</section>
<section className="desktop faq">
<div ref={faq2Ref} className="faq-container">
<h2>FAQ</h2>
{FAQInfo.slice(3, 6).map(item => (
<div className="block" key={item.question}>
<h4>{item.question}</h4>
<p>{item.answer}</p>
</div>
))}
</div>
</section>
<div className="scroll-section-two">
<section className="two desktop faq" ref={scroll2Ref}>
<div className="faq-container">
<h2>FAQ</h2>
{FAQInfo.slice(0, 3).map(item => (
<div className="block" key={item.question}>
<h4>{item.question}</h4>
<p>{item.answer}</p>
</div>
))}
</div>
</section>
</div>
<div className="scroll-section-three ">
<section className="three desktop faq">
<div className="faq-container">
<h2>FAQ</h2>
{FAQInfo.slice(3, 6).map(item => (
<div className="block" key={item.question}>
<h4>{item.question}</h4>
<p>{item.answer}</p>
</div>
))}
</div>
</section>
</div>
</>
) : (
<section className="mobile faq">
<div ref={faq2Ref} className="faq-container">
<div className="faq-container">
<h2>FAQ</h2>
{FAQInfo.map(item => (
<div className="block" key={item.question}>
Expand Down
78 changes: 43 additions & 35 deletions src/pages/Home/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,57 @@ import './Home.scss';
import Logo from '../../../public/Logo.svg';
import { useRef } from 'react';

export default function Home() {
//write the typescript type for this prop

type HomeProps = {
scroll1Ref: React.RefObject<HTMLElement>;
};

export default function Home({ scroll1Ref }: HomeProps) {
const registerRef = useRef(null);
const logoRef = useRef(null);
const mobileDateRef = useRef(null);

return (
<section className="home">
<div className="landing-container">
<div className="right-container">
<div className="logo-container">
<img
ref={logoRef}
src={Logo}
className="logo"
alt="Design Frontiers Logo"
/>
<img src={Logo} className="mobile-logo" alt="" />
</div>
<div className="home-info">
<div className="desktop-view">
<h3>Saturday, April 13th | 9am–5pm | DIB 208</h3>
<p>Journey beyond the horizons of innovation!</p>
<p>
Design Frontiers is Design Co&apos;s very own long day sprint,
where student teams of all backgrounds come together to create
innovative solutions for real-world problems.
</p>
<div className="scroll-section-one">
<section ref={scroll1Ref} className="one home">
<div className="landing-container">
<div className="right-container">
<div className="logo-container">
<img
ref={logoRef}
src={Logo}
className="logo"
alt="Design Frontiers Logo"
/>
<img src={Logo} className="mobile-logo" alt="" />
</div>
<div ref={mobileDateRef} className="mobile-h3-container">
<h3>
Saturday, May 20th <br />
9am-5pm
</h3>
<h3>DIB ROOM 208</h3>
<div className="home-info">
<div className="desktop-view">
<h3>Saturday, April 13th | 9am–5pm | DIB 208</h3>
<p>Journey beyond the horizons of innovation!</p>
<p>
Design Frontiers is Design Co&apos;s very own long day sprint,
where student teams of all backgrounds come together to create
innovative solutions for real-world problems.
</p>
</div>
<div ref={mobileDateRef} className="mobile-h3-container">
<h3>
Saturday, May 20th <br />
9am-5pm
</h3>
<h3>DIB ROOM 208</h3>
</div>
</div>
<div className="register-button" ref={registerRef}>
<a className="button parallelogram" href="#">
<span className="skew-fix">REGISTER NOW</span>
</a>
</div>
</div>
<div className="register-button" ref={registerRef}>
<a className="button parallelogram" href="#">
<span className="skew-fix">REGISTER NOW</span>
</a>
</div>
</div>
</div>
</section>
</section>
</div>
);
}
74 changes: 39 additions & 35 deletions src/pages/Judges/Judges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,50 +4,54 @@ import { useRef } from 'react';
import { JudgeInfo } from './JudgeInfo';
import useIsDesktop from '../../util/useIsDesktop';

export default function Judges() {
type JudgesProps = {
scroll4Ref: React.RefObject<HTMLElement>;
};

export default function Judges({ scroll4Ref }: JudgesProps) {
const judge1Ref = useRef(null);
const judge2Ref = useRef(null);
const judge1ContainerRef = useRef(null);
const judge2ContainerRef = useRef(null);

const isDesktop = useIsDesktop();

console.log(JudgeInfo.slice(3, 5));

return (
<div className="judge-stuff">
{isDesktop ? (
<>
<section className="desktop judges" ref={judge1ContainerRef}>
<div ref={judge1Ref} className="judges-container">
<h2>Judges</h2>
{JudgeInfo.slice(0, 3).map(item => (
<JudgeComponent
key={item.name}
name={item.name}
pronouns={item.pronouns}
position={item.position}
funFact={item.funFact}
imgLink={item.imgLink}
/>
))}
</div>
</section>
<section className="desktop judges" ref={judge2ContainerRef}>
<div ref={judge2Ref} className="judges-container">
<h2>Judges</h2>
{JudgeInfo.slice(3, 5).map(item => (
<JudgeComponent
key={item.name}
name={item.name}
pronouns={item.pronouns}
position={item.position}
funFact={item.funFact}
imgLink={item.imgLink}
/>
))}
</div>
</section>
<div className="scroll-section-five">
<section ref={scroll4Ref} className="five desktop judges">
<div ref={judge1Ref} className="judges-container">
<h2>Judges</h2>
{JudgeInfo.slice(0, 3).map(item => (
<JudgeComponent
key={item.name}
name={item.name}
pronouns={item.pronouns}
position={item.position}
funFact={item.funFact}
imgLink={item.imgLink}
/>
))}
</div>
</section>
</div>
<div className="scroll-section-six">
<section className="six desktop judges">
<div ref={judge2Ref} className="judges-container">
<h2>Judges</h2>
{JudgeInfo.slice(3, 5).map(item => (
<JudgeComponent
key={item.name}
name={item.name}
pronouns={item.pronouns}
position={item.position}
funFact={item.funFact}
imgLink={item.imgLink}
/>
))}
</div>
</section>
</div>
</>
) : (
<section className="mobile judges">
Expand Down
42 changes: 24 additions & 18 deletions src/pages/Timeline/Timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,24 +35,30 @@ const TimlineList = [
}
];

export default function Timeline() {
type TimelineProps = {
scroll3Ref: React.RefObject<HTMLElement>;
};

export default function Timeline({ scroll3Ref }: TimelineProps) {
return (
<section className="timeline">
<ul>
<div>
<h1 className="title">Timeline</h1>
{TimlineList.map((item, index) => (
<li key={index}>
<p className="time">{item.time}</p>
<div className="orange-line"></div>
<div className="title-discription">
<h3>{item.title}</h3>
<p>{item.description}</p>
</div>
</li>
))}
</div>
</ul>
</section>
<div className="scroll-section-four">
<section ref={scroll3Ref} className="four timeline">
<ul>
<div>
<h1 className="title">Timeline</h1>
{TimlineList.map((item, index) => (
<li key={index}>
<p className="time">{item.time}</p>
<div className="orange-line"></div>
<div className="title-discription">
<h3>{item.title}</h3>
<p>{item.description}</p>
</div>
</li>
))}
</div>
</ul>
</section>
</div>
);
}
Empty file added src/pages/Timeline/TimelineInfo.tsx
View file
Empty file.
8 changes: 6 additions & 2 deletions src/styles/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@
.scroll-section-one,
.scroll-section-two,
.scroll-section-three,
.scroll-section-four {
.scroll-section-four,
.scroll-section-five,
.scroll-section-six {
scroll-snap-align: center;
height: 100vh;
padding-left: $content-offset;
Expand All @@ -64,7 +66,9 @@

.two,
.three,
.four {
.four,
.five,
.six {
opacity: 1;
height: 100vh;
transform: rotate(80deg);
Expand Down
Loading

0 comments on commit b2c815d

Please sign in to comment.