Skip to content

Commit

Permalink
✨ Update homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
JoshHeng committed Jul 31, 2024
1 parent c6b69cf commit 5a10364
Show file tree
Hide file tree
Showing 42 changed files with 295 additions and 61 deletions.
16 changes: 16 additions & 0 deletions src/components/captioned-image.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export default function CaptionedImage({
src,
alt,
caption,
}: {
src: string;
alt: string;
caption: string;
}) {
return (
<figure className="w-56 flex-shrink-0">
<img src={src} alt={alt} className="h-auto w-full object-contain" />
<figcaption>{caption}</figcaption>
</figure>
);
}
37 changes: 23 additions & 14 deletions src/components/carousel.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import {
FiArrowLeftCircle,
FiArrowRightCircle,
FiChevronLeft,
FiChevronRight,
} from 'react-icons/fi';
import { AnimationHandlerResponse } from 'react-responsive-carousel/lib/ts/components/Carousel/types';
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';

export type CarouselSlide = {
src: string;
Expand Down Expand Up @@ -38,8 +32,12 @@ function ArrowButton({

export default function TechCrewCarousel({
slides,
slideClasses,
bottomRightCaption,
}: {
slides: CarouselSlide[];
slideClasses?: string;
bottomRightCaption?: boolean;
}) {
return (
<Carousel
Expand All @@ -61,13 +59,24 @@ export default function TechCrewCarousel({
}
>
{slides.map((slide, i) => (
<figure key={i} className="bg-black">
<img
src={slide.src}
alt={slide.caption}
className="object-contain opacity-60"
/>
<figcaption>{slide.caption}</figcaption>
<figure key={i}>
{bottomRightCaption || (
<figcaption className="mb-1">{slide.caption}</figcaption>
)}

<div className="bg-black">
<img
src={slide.src}
alt={slide.caption}
className={`object-contain ${slideClasses}`}
/>
</div>

{bottomRightCaption && (
<figcaption className="text-right mt-1 mr-1">
{slide.caption}
</figcaption>
)}
</figure>
))}
</Carousel>
Expand Down
21 changes: 11 additions & 10 deletions src/components/home/general-carousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,30 @@ import { CarouselSlide } from '@site/src/components/carousel';

const carousel: CarouselSlide[] = [
{
src: require('@site/static/images/general-carousel/bandsoc-joshheng.jpg')
src: require('@site/static/images/home/general-carousel/bandsoc-joshheng.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption: 'BandSoc Showcase, 2023. Photo © Josh Heng',
},
{
src: require('@site/static/images/general-carousel/fringeimprov-joshheng.jpg')
src: require('@site/static/images/home/general-carousel/fringeimprov-joshheng.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption:
'The Improv Musical at Edinburgh Fringe, Music Theatre Warwick, 2023. Photo © Josh Heng',
},
{
src: require('@site/static/images/general-carousel/interuni-joshheng.jpg')
src: require('@site/static/images/home/general-carousel/interuni-joshheng.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption: 'InterUni, Music Theatre Warwick, 2023. Photo © Josh Heng',
},
{
src: require('@site/static/images/general-carousel/wonder-joshheng.jpg')
src: require('@site/static/images/home/general-carousel/wonder-joshheng.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption: 'Wonder, Warwick Christian Union, 2024. Photo © Josh Heng',
},
{
src: require('@site/static/images/general-carousel/wsaf-joshheng.jpg')
src: require('@site/static/images/home/general-carousel/wsaf-joshheng.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption: 'Warwick Student Arts Festival, 2024. Photo © Josh Heng',
},
];

Expand Down
23 changes: 12 additions & 11 deletions src/components/home/shows-carousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,35 @@ import { CarouselSlide } from '@site/src/components/carousel';

const carousel: CarouselSlide[] = [
{
src: require('@site/static/images/shows-carousel/godspell-joshheng.jpg')
src: require('@site/static/images/home/shows-carousel/godspell-joshheng.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
},
{
src: require('@site/static/images/shows-carousel/fame-joshheng.jpg')
src: require('@site/static/images/home/shows-carousel/fame-joshheng.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption: 'FAME, Music Theatre Warwick, 2023. Photo © Josh Heng',
},
{
src: require('@site/static/images/shows-carousel/opera-joshheng.jpg')
src: require('@site/static/images/home/shows-carousel/opera-joshheng.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption: 'Carmen, Warwick Opera, 2024. Photo © Josh Heng',
},
{
src: require('@site/static/images/shows-carousel/themarksman-unknown.jpg')
src: require('@site/static/images/home/shows-carousel/themarksman-unknown.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption: 'The Marksman, Warwick Opera, 2022. Photo © Unknown',
},
{
src: require('@site/static/images/shows-carousel/anythinggoes-chrismiles.jpg')
src: require('@site/static/images/home/shows-carousel/anythinggoes-chrismiles.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption: 'Anything Goes, Music Theatre Warwick, 2016. Photo © Chris Miles',
},
{
src: require('@site/static/images/shows-carousel/improv-joshheng.jpg')
src: require('@site/static/images/home/shows-carousel/improv-joshheng.jpg')
.default,
caption: 'Godspell, Music Theatre Warwick, 2024. Photo © Josh Heng',
caption:
'The Improv Musical, Music Theatre Warwick, 2023. Photo © Josh Heng',
},
];

Expand Down
11 changes: 10 additions & 1 deletion src/components/home/shows.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,13 @@

We mainly operate in Warwick Arts Centre, a professional touring venue with a 550-seat theatre and a black box theatre.
We work with societies such as the Drama Collective, Music Theatre Warwick and Opera Warwick to put on several
productions each term, with roles including lighting design, sound design, set design and stage management.
productions each term, with roles including lighting design, sound design, set design and stage management.

Shows are a well-structured and often multi-term process, with Tech Crew members joining production teams from the
initial planning stages before 'panel' until the end of show week. These are typically a more involved process, but
can be more rewarding than hires as there is a bigger opportunity for realising your own designs in a commercial
arts venue.

Previous shows include Company (Music Theatre Warwick, 2024, WAC Theatre), Carmen (Warwick Opera, 2024, WAC
Theatre), A Streetcar Named Desire (Warwick University Drama Society, 2024, WAC Studio) and The Tempest
(Shakesoc x Warwick University Drama Society, 2024, WAC Studio). A full list can be found on the Show Archive.
84 changes: 83 additions & 1 deletion src/components/home/the-exec.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,89 @@
const YEAR = '2024/2025';
const exec: ExecMember[] = [
{
name: 'Ben Hammond',
roles: ['President'],
image: require('@site/static/images/home/exec/ben.jpg').default,
},
{
name: 'Stan Simmons',
roles: ['Hires Manager', 'Vice President'],
image: require('@site/static/images/home/exec/stan.jpg').default,
},
{
name: 'Josh Heng',
roles: ['Treasurer'],
image: require('@site/static/images/home/exec/josh.jpg').default,
},
{
name: 'Kishan Sharma',
roles: ['Secretary'],
image: require('@site/static/images/home/exec/kishan.jpg').default,
},
{
name: 'Freya Cox',
roles: ['Training Manager'],
image: require('@site/static/images/home/exec/freya.jpg').default,
},
{
name: 'Ethan Graham',
roles: ['Equipment Manager', 'Safety Officer'],
image: require('@site/static/images/home/exec/ethan.jpg').default,
},
{
name: 'Kit Calvert',
roles: ['Socials and Publicity Secretary', 'Welfare Officer'],
image: require('@site/static/images/home/exec/kit.jpg').default,
},
{
name: 'Danny Turner',
roles: ['Socials and Publicity Secretary', 'Equal Opportunities Officer'],
image: require('@site/static/images/home/exec/danny.jpg').default,
},
];

type ExecMember = {
name: string;
roles: string[];
image: string;
};

export default function TheExec() {
return (
<div>
<h2>The Exec</h2>
<h2>The TechXec</h2>
<p>
The Tech Crew Exec are a group of members elected to oversee the society
and its operations and can be contacted at{' '}
<a href="mailto:[email protected]" target="_blank">
[email protected]
</a>
. For the year {YEAR}, the TechXec are:
</p>
<div className="flex flex-wrap gap-4 mt-2">
{exec.map((member) => (
<article className="overflow-hidden rounded-xl flex w-56 flex-col border-black border-2">
<header className="bg-black h-10 flex justify-center items-center">
<div className="rounded-2xl w-12 h-3 mt-0.5 bg-white" />
</header>
<div className="flex-grow flex flex-col px-4 py-4 text-black">
<img
src={member.image}
alt={`Image of ${member.name}`}
className="mx-auto mb-2 w-28 h-auto"
/>
<ul className="text-center text-sm">
{member.roles.map((role) => (
<li key={role}>{role}</li>
))}
</ul>
</div>
<footer className="bg-black text-white text-center uppercase font-bold text-lg px-2 py-2">
{member.name}
</footer>
</article>
))}
</div>
</div>
);
}
4 changes: 4 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,8 @@ h2 {

.theme-doc-markdown blockquote {
@apply mb-2;
}

.theme-doc-markdown p, .content-styling p {
@apply mb-3;
}
Loading

0 comments on commit 5a10364

Please sign in to comment.