thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated team page

Browse Source
This commit is contained in:
IZZY 2025-05-06 16:08:32 +01:00
parent 13eea18683
commit dff877513f
2 changed files with 73 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/background.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

115
src/app/the-team/page.tsx
View File

@ -1,50 +1,81 @@
"use client"; // Required for components in Next.js (using client-side rendering) "use client";
import styles from './page.module.css';
const teamMembers = [ const teamMembers = [
{ name: "Tim Howitz", {
title: "Chief Crack Inspector", name: "Tim Howitz",
description: "Tim is responsible for analysing structures on a day to day basis, in his home life he is a keen outdoors enthusiast, with 3 kids and a dog.", title: "Chief Crack Inspector",
image: "/Timthescientist.PNG" }, description:
{ name: "Emily Neighbour", "Tim is responsible for analysing structures on a day-to-day basis. In his home life he is a keen outdoors enthusiast, with three kids and a dog.",
title: "Chief Software Engineer", image: "/Timthescientist.PNG",
description: "Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching and becoming a mute", },
image: "/Emilythescientist.PNG" }, {
{ name: "Izzy Patterson", name: "Emily Neighbour",
title: "Chief Geologist", title: "Chief Software Engineer",
description: "Izzy team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them", description:
image: "/Izzythescientist.PNG" }, "Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching, and becoming a mute.",
{ name: "Lukeshan Thananchayan", image: "/Emilythescientist.PNG",
title: "Chief Duster", },
description: "Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure - he likes to play monopoly, on repeat... maybe one day hell get a hotel", {
image: "/Lukeshanthescientist.PNG" }, name: "Izzy Patterson",
title: "Chief Geologist",
description:
"Izzy's team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them.",
image: "/Izzythescientist.PNG",
},
{
name: "Lukeshan Thananchayan",
title: "Chief Duster",
description:
"Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure, he likes to play Monopoly on repeat. Maybe one day he'll get a hotel!",
image: "/Lukeshanthescientist.PNG",
},
]; ];
export default function Page() { export default function TeamPage() {
return ( return (
<div className={styles.container}> <div className="relative min-h-screen py-12 px-4 flex items-center justify-center">
{/* Header */} {/* Background */}
<h1 className={styles.header}>Meet The Team</h1> <div
<p className={styles.subheader}> className="absolute inset-0 bg-cover bg-center z-0"
Our expert team is made up of scientists around the globe. Our heads of department are shown below. style={{
</p> backgroundImage: 'url("/background.PNG")',
}}
aria-hidden="true"
/>
aria-hidden="true"
/>
{/* Overlay */}
<div className="absolute inset-0 bg-black bg-opacity-40 z-10" aria-hidden="true" />
{/* Team Members Section */} {/* Main Content */}
<div className={styles.team}> <div className="max-w-4xl mx-auto w-full relative z-20">
{teamMembers.map((member, index) => ( <h1 className="text-3xl md:text-4xl font-extrabold text-center text-white mb-4 drop-shadow-lg">
<div key={index} className={styles.card}> Meet The Team
{/* Image */} </h1>
<img src={member.image} alt={member.name} className={styles.image} /> <p className="text-lg text-gray-200 text-center mb-12 drop-shadow">
Our global team is made up of dedicated scientists and professionals.
{/* Text Content */} Meet our department heads below.
<div className={styles.text}> </p>
<h2 className={styles.name}>{member.name}</h2> <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
<p className={styles.title}>{member.title}</p> {teamMembers.map((member, idx) => (
<p className={styles.description}>{member.description}</p> <div
</div> key={idx}
</div> className="bg-white/90 rounded-lg shadow p-6 flex flex-col items-center hover:shadow-xl transition-shadow"
))} >
<img
src={member.image}
alt={member.name}
className="w-28 h-28 object-cover rounded-full border-4 border-blue-100 mb-4"
/>
<h2 className="text-lg font-bold text-gray-800 text-center">{member.name}</h2>
<p className="text-sm font-semibold text-blue-600 text-center mb-2 uppercase tracking-wide">
{member.title}
</p>
<p className="text-gray-600 text-sm text-center">{member.description}</p>
</div> </div>
))}
</div> </div>
); </div>
</div>
);
} }