mirror of
https://github.com/PotentiaRobotics/potentia-website.git
synced 2025-04-09 14:50:16 -04:00
111 lines
3.2 KiB
Plaintext
111 lines
3.2 KiB
Plaintext
---
|
|
//Layout imports
|
|
import Layout from '../layouts/Layout.astro';
|
|
import Nav from '../components/Nav.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
//Component Imports
|
|
import PersonCard from '../components/cards/PersonCard.astro';
|
|
import Tag from '/src/components/buttons/Tag.astro';
|
|
import OutlineButton from '/src/components/buttons/OutlineButton.astro';
|
|
//Image imports
|
|
import Ram from '/src/images/people/ram.png';
|
|
import Anish from '/src/images/people/anish.jpg';
|
|
|
|
|
|
|
|
---
|
|
|
|
<Layout title="| Team">
|
|
<!-- Navbar -->
|
|
<Nav> <span slot="team" class="text-blue-300">TEAM</span></Nav>
|
|
|
|
<!-- Header -->
|
|
<h1 class="text-blue-300 text-center my-10 font-bold text-3xl font-mono">Meet our team</h1>
|
|
|
|
<!-- Instruction header -->
|
|
<h2 id="h2" class="text-center text-3xl mb-10 font-bold font-mono text-white">Click the buttons to look at out amazing team !!!! <br>(You can select different categories !!!!!)</h2>
|
|
|
|
<!-- Category buttons -->
|
|
<div class="flex flex-row justify-center mb-20 space-x-14">
|
|
<!-- Leads -->
|
|
<button id="lead" class="border-blue-400 text-blue-500 text-lg font-bold font-mono px-2 py-2 border-2 rounded-lg button hid" > Leads</button>
|
|
|
|
<!-- Engineering -->
|
|
<button id="engineering" class="border-blue-400 text-blue-500 text-lg font-bold font-mono px-2 py-2 border-2 rounded-lg button hid" > Engineering</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="grid-cols-3 flex justify-center space-x-10 gap-y-10 mb-20">
|
|
<!-- Engineering category -->
|
|
<div class=" hidden" id="engineeringDiv">
|
|
|
|
|
|
<PersonCard title="Ram Vempati" id="" image={Ram}>
|
|
Hello my name is ram and I am from tech support.
|
|
<div slot="tags">
|
|
<Tag>Lead</Tag>
|
|
<Tag>Engineering</Tag>
|
|
<Tag>Gait Generation</Tag>
|
|
</div>
|
|
</PersonCard>
|
|
|
|
</div>
|
|
<!-- Lead category -->
|
|
<div class=" hidden" id="leadDiv">
|
|
|
|
<PersonCard title="Anish suvurna" id="" image={Anish}>
|
|
Hello this is anish and i trap kids in my basement
|
|
<div slot="tags">
|
|
<Tag>Basement</Tag>
|
|
<Tag>CV</Tag>
|
|
<Tag>Programming</Tag>
|
|
<Tag>Lead</Tag>
|
|
</div>
|
|
</PersonCard>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</Layout>
|
|
|
|
|
|
<!-- Script -->
|
|
|
|
<!-- Show engineering div when the engineerng button is clicked -->
|
|
<script>
|
|
var buttons = document.getElementsByClassName("button");
|
|
|
|
|
|
// Engineering divs
|
|
document.getElementById("engineering").addEventListener("click", function(){
|
|
document.getElementById("engineeringDiv").classList.toggle("hidden");
|
|
});
|
|
// Lead Divs
|
|
document.getElementById("lead").addEventListener("click", function(){
|
|
document.getElementById("leadDiv").classList.toggle("hidden");
|
|
});
|
|
|
|
|
|
// Make buttons red on click
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
buttons[i].addEventListener("click", function() {
|
|
this.classList.toggle("border-red-400");
|
|
this.classList.toggle("text-red-400");
|
|
});
|
|
}
|
|
|
|
|
|
// Remove h2 permenantly on button click
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
buttons[i].addEventListener("click", function() {
|
|
document.getElementById("h2").remove()
|
|
});
|
|
}
|
|
|
|
</script>
|