Skip to content

Update styling and information on Opportunities page #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alehxs wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Update styling and information on Opportunities page #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
95174b0
feat(opportunities): refresh opportunities section styling and inform…
alehxs Sep 11, 2025
a373e90
fix(positions): Remove card links
alehxs Sep 11, 2025
75ec76e
fix(positions): restore apply button with updated links
alehxs Sep 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/opportunities/Opportunities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const BackgroundRoles = () => {
marketing
</span>
<span className="animate-jump-in animate-delay-[550ms] absolute top-[22%] left-[35%] opacity-40 text-lg md:text-2xl lg:text-4xl text-[#EE9BE6]">
software dev
software development
</span>
<span className="animate-jump-in animate-delay-[650ms] absolute top-[17%] left-[55%] opacity-40 text-lg md:text-2xl lg:text-4xl text-[#887FF2]">
corporate relations
Expand Down
76 changes: 36 additions & 40 deletions src/opportunities/OpportunitiesInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,43 @@ const OpportunitiesRoles = [
{
name: "Intern",
icon: "/assets/opportunities/intern.svg",
year: "Fall 2024",
year: "Fall 2025",
description:
"Gain hands-on experience by working under a director, with the opportunity to grow into an officer role.",
applicationLink: "https://forms.gle/9PZiZkXpjcGVRVzUA",
applicationLink: "",
},

{
name: "Team Lead",
icon: "/assets/opportunities/teamLead.svg",
year: "Fall 2024 - Spring 2025",
year: "Fall 2025 - Spring 2026",
description:
"Lead a team to create innovative projects and present them to company representatives.",
applicationLink:
"https://docs.google.com/forms/d/e/1FAIpQLSdtJq9k76CMKvqo_MhmHVVGM0ZncKllp5vZ67BRs2IuGBOvsA/viewform",
applicationLink:
"https://docs.google.com/forms/d/e/1FAIpQLSerxtg1YGQIz4ulbFYA1haIU1VpxARK14-YHhrcnR20ut8hcw/viewform?usp=sharing&ouid=100624813009928062247",
},

{
name: "CUES - Advanced Team",
name: "Advanced Team",
icon: "/assets/opportunities/cues.svg",
year: "Fall 2024 - Spring 2025",
description:
"Partner with UH research faculty to develop a Nigerian employment database.",
applicationLink:
"https://docs.google.com/forms/d/e/1FAIpQLScwDkeMms9bg7D_SZ8mqVCBJWdYoHpaKomR38A0IXZcuJw3og/viewform",
year: "Fall 2025 - Spring 2026",
description: "Collaborate with a team to build an AI Coaching Mentor Pairing Application for a sponsor.",
applicationLink:
"https://docs.google.com/forms/d/e/1FAIpQLSeQ_Rr9VR5Q87lsvt8ofQ033VBmOo4EtlSSpEyhsToXM0fM5w/viewform",
},

{
name: "Committee Position",
icon: "/assets/opportunities/committee.svg",
year: "Fall 2024 - Spring 2025",
year: "Fall 2025 - Spring 2026",
description:
"Contribute to workshops, events, web development, and marketing initiatives.",
applicationLink:
"https://docs.google.com/forms/d/e/1FAIpQLSe2ek4WWAqtz3If-p55_HuN1DNjL9xHhegTxytHtZDXOb79Bw/viewform",
applicationLink: "",
},
];

const style =
"flex items-start p-7 h-[200px] relative font-bold rounded-lg bg-[#151515] text-white ring-1 ring-dark-primary ring-inset";
"flex items-start p-8 h-[200px] relative font-bold rounded-lg bg-[#151515] text-white ring-1 ring-dark-primary ring-inset";

const OpportunitiesItems = OpportunitiesRoles.map((role) => (
<Flashcard
Expand All @@ -67,29 +65,27 @@ const OpportunitiesItems = OpportunitiesRoles.map((role) => (
</div>
}
backHTML={
<div className="relative group">
<div className="relative group h-full">
<div className="absolute -inset-0.5 bg-dark-primary blur-lg opacity-30 transform scale-90 group-hover:scale-100 transition-all duration-300" />
<div className={`${style} justify-around items-start h-full flex-col`}>
<span className="flex h-full flex-col items-center justify-between font-normal">
<span className="md:text-sm lg:text-base text-sm">
{role.description}
</span>
<div className="flex py-8 px-8 h-[200px] relative font-normal rounded-lg bg-[#151515] text-white ring-1 ring-dark-primary ring-inset flex-col justify-between">
<div className="md:text-sm lg:text-base text-sm">
{role.description}
</div>

{role.applicationLink && (
<div className="relative group">
<a
href={role.applicationLink}
target="_blank"
className="flex h-8 w-32 md:h-10 md:w-36 justify-center items-center p-2 relative font-bold text-center rounded-lg bg-black text-white ring-1 ring-dark-primary ring-inset hover:text-black hover:bg-dark-primary"
rel="noreferrer"
>
<span className="flex">
<span className="text-xs md:text-base">Apply</span>
</span>
</a>
</div>
)}
</span>
{role.applicationLink && (
<div className="relative group flex justify-center">
<a
href={role.applicationLink}
target="_blank"
className="flex h-8 w-32 md:h-10 md:w-36 justify-center items-center p-2 relative font-bold text-center rounded-lg bg-black text-white ring-1 ring-dark-primary ring-inset hover:text-black hover:bg-dark-primary"
rel="noreferrer"
>
<span className="flex">
<span className="text- md:text-.base">Apply</span>
</span>
</a>
</div>
)}
</div>
</div>
}
Expand All @@ -98,10 +94,10 @@ const OpportunitiesItems = OpportunitiesRoles.map((role) => (

const OpportunitiesInfo = () => {
return (
<div className="text-white p-4" id="opportunitiesInfo">
<div className="text-white p-4 max-w-7xl mx-auto" id="opportunitiesInfo">
<div className="flex flex-wrap flex-col justify-center">
<div className="rounded md:mx-20 my-4">
<section className="md:w-3/4 mx-auto">
<section className="md:w-10/12 mx-auto">
<p className="text-lg p-6 opacity-90">
Join a vibrant team of college students eager to make a difference
through workshops, projects, competitions, and other coding
Expand All @@ -112,7 +108,7 @@ const OpportunitiesInfo = () => {
</div>

<div className="rounded md:mx-20 max-h-[100%] md:max-h-[30rem]">
<section className="md:w-8/12 mx-auto">
<section className="md:w-10/12 mx-auto">
<div className="flex flex-wrap p-6">{OpportunitiesItems}</div>
</section>
</div>
Expand All @@ -121,4 +117,4 @@ const OpportunitiesInfo = () => {
);
};

export default OpportunitiesInfo;
export default OpportunitiesInfo;