add mobile view to board page
This commit is contained in:
Shing Hung
parent
47b4575b50
commit
766e324bfe
4 changed files with 45 additions and 62 deletions
|
|
@ -5,26 +5,25 @@ import Link from "next/link";
|
|||
const {name, position, picture, email} = Astro.props;
|
||||
---
|
||||
<div class = "text-white">
|
||||
|
||||
<div class = "text-ieee-yellow">
|
||||
<Link href="s1hung@ucsd.edu" className = "flex items-center ml-[3%] py-[0.5vh]">
|
||||
<MdEmail className = "text-[1.5vw] mr-[0.5%]"/>
|
||||
<p class = "text-[0.8vw]">
|
||||
<Link href={`mailto:${email}`} className = "flex items-center ml-[3%] py-[0.5vh] group">
|
||||
<MdEmail className = "md:text-[1.5vw] text-[2.5vw] mr-[0.5%] group-hover:scale-110 group-hover:opacity-70 duration-300"/>
|
||||
<p class = "md:text-[0.8vw] text-[2vw]">
|
||||
{email}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class = "w-[20vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center">
|
||||
<img src ={picture} alt = "officer" class = "w-[18vw] rounded-[10%] pt-[5%] pb-[3%] relative" >
|
||||
<div class = "bg-white w-fit rounded-full aspect-square p-[0.4vw] text-ieee-black text-[1.8vw] absolute ml-[13.5vw] mt-[3vh]">
|
||||
<div class = "md:w-[20vw] w-[35vw] aspect-[334/440] bg-gradient-to-t from-ieee-blue-100/5 to-ieee-blue-100/25 rounded-[10%] flex flex-col items-center relative">
|
||||
<img src ={picture} alt = "officer" class = "md:w-[18vw] w-[31vw] md:rounded-[1.5vw] rounded-[3vw] mt-[5%] mb-[3%]" >
|
||||
<div class = "bg-white w-fit rounded-full aspect-square md:p-[0.4vw] p-[0.8vw] text-ieee-black md:text-[1.8vw] text-[3.5vw] absolute md:right-[1.5vw] md:top-[1.5vw] right-[2.5vw] top-[2.5vw]">
|
||||
<FaGear/>
|
||||
</div>
|
||||
<div class = "w-full flex justify-between px-[7%]">
|
||||
<p data-inview class = " in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]">
|
||||
<p data-inview class = " in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw]">
|
||||
{name}
|
||||
</p>
|
||||
<div data-inview class = "in-view:animate-fade-up text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
|
||||
<div data-inview class = "md:mt-[0.5vw] mt-[1.5vw] in-view:animate-fade-up md:text-[0.8vw] text-[1.5vw] md:w-[8vw] w-[15vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
|
||||
{position}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,28 +7,26 @@ import Officer from "../board/Officer.astro";
|
|||
import officers from "../../data/officers.json";
|
||||
---
|
||||
|
||||
<div class="text-white flex flex-col items-center mt-[15vh] mb-[10vh]">
|
||||
<div data-inview class="relative w-[21vw] in-view:animate-fade-down">
|
||||
<div class="text-white flex flex-col items-center md:mt-[10vw] mt-[20vw] mb-[10vh]">
|
||||
<div data-inview class="relative w-[40vw] md:w-[21vw] in-view:animate-fade-down">
|
||||
<Image src={about} alt="About background image" />
|
||||
<Image
|
||||
src={neko}
|
||||
alt="About image"
|
||||
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[14vw] rounded-[2vw]"
|
||||
class="absolute top-[10%] left-[16%] aspect-[399/491] object-cover w-[27vw] md:w-[14vw] rounded-[2vw]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-[2.5vw] flex items-center mt-[2vh]">
|
||||
<div class="text-[5vw] md:text-[2.5vw] flex items-center mt-[2vh]">
|
||||
<LiaDotCircle className="mr-[1vw] pt-[0.5%]" />
|
||||
<p>MEET THE BOARD</p>
|
||||
</div>
|
||||
|
||||
<p class="text-[1.3vw] w-[56%] my-[3%] font-extralight text-center">
|
||||
Erat hendrerit tristique erat; parturient cursus fringilla feugiat. Eget
|
||||
faucibus fames ridiculus nec egestas convallis cubilia malesuada. Tellus
|
||||
nibh vivamus tempus molestie tristique quis
|
||||
<p class="md:text-[1.3vw] text-[2.5vw] md:w-[56%] w-[70%] my-[3%] font-extralight text-center">
|
||||
Our board comprises 31 students of varying majors, colleges, and interests! Feel free to reach out for any questions about our position or experiences.
|
||||
</p>
|
||||
|
||||
<div class="grid gap-[3vw] grid-cols-3 mt-[10vh]">
|
||||
<div class="grid gap-[3vw] md:grid-cols-3 grid-cols-2 mt-[10vh]">
|
||||
{
|
||||
officers.map((officer) => (
|
||||
<Officer
|
||||
|
|
|
|||
|
|
@ -13,6 +13,34 @@
|
|||
"email": "sxxu@ucsd.edu",
|
||||
"type": ["Executives", "Internal"]
|
||||
},
|
||||
{
|
||||
"name": "Rana Singh",
|
||||
"position": "Vice Chair External",
|
||||
"picture": "https://placehold.co/800x800?text=RANA%20SINGH",
|
||||
"email": "ras010@ucsd.edu",
|
||||
"type": ["Executives"]
|
||||
},
|
||||
{
|
||||
"name": "Rohil Kadekar",
|
||||
"position": "Vice Chair Projects",
|
||||
"picture": "/officers/rohil.jpg",
|
||||
"email": "rkadekar@ucsd.edu",
|
||||
"type": ["Executives", "Projects"]
|
||||
},
|
||||
{
|
||||
"name": "Shipra Gudekar",
|
||||
"position": "Vice Chair Events",
|
||||
"picture": "/officers/shipra.jpg",
|
||||
"email": "sgudekar@ucsd.edu",
|
||||
"type": ["Executives", "Events"]
|
||||
},
|
||||
{
|
||||
"name": "Lisa Liu",
|
||||
"position": "Vice Chair Finance",
|
||||
"picture": "/officers/lisa.jpg",
|
||||
"email": "lil043@ucsd.edu",
|
||||
"type": ["Executives"]
|
||||
},
|
||||
{
|
||||
"name": "Charles Nguyen",
|
||||
"position": "Webmaster",
|
||||
|
|
@ -62,27 +90,6 @@
|
|||
"email": "c1uy@ucsd.edu",
|
||||
"type": ["Internal"]
|
||||
},
|
||||
{
|
||||
"name": "Shipra Gudekar",
|
||||
"position": "Vice Chair Events",
|
||||
"picture": "/officers/shipra.jpg",
|
||||
"email": "sgudekar@ucsd.edu",
|
||||
"type": ["Executives", "Events"]
|
||||
},
|
||||
{
|
||||
"name": "Rohil Kadekar",
|
||||
"position": "Vice Chair Projects",
|
||||
"picture": "/officers/rohil.jpg",
|
||||
"email": "rkadekar@ucsd.edu",
|
||||
"type": ["Executives", "Projects"]
|
||||
},
|
||||
{
|
||||
"name": "Lisa Liu",
|
||||
"position": "Vice Chair Finance",
|
||||
"picture": "/officers/lisa.jpg",
|
||||
"email": "lil043@ucsd.edu",
|
||||
"type": ["Executives"]
|
||||
},
|
||||
{
|
||||
"name": "Erik Duarte",
|
||||
"position": "Events Coordinator",
|
||||
|
|
@ -97,13 +104,6 @@
|
|||
"email": "siy015@ucsd.edu",
|
||||
"type": ["Executives", "Events"]
|
||||
},
|
||||
{
|
||||
"name": "Rana Singh",
|
||||
"position": "Vice Chair External",
|
||||
"picture": "https://placehold.co/800x800?text=RANA%20SINGH",
|
||||
"email": "ras010@ucsd.edu",
|
||||
"type": ["Executives"]
|
||||
},
|
||||
{
|
||||
"name": "Rafaella Gomes",
|
||||
"position": "Project Space Chair",
|
||||
|
|
@ -132,13 +132,6 @@
|
|||
"email": "ppincencia@ucsd.edu",
|
||||
"type": ["Projects"]
|
||||
},
|
||||
{
|
||||
"name": "Ritoban Roy-Chowdhury",
|
||||
"position": "Supercomputing Chair",
|
||||
"picture": "https://placehold.co/800x800?text=Ritoban%20Roy-Chowdhury",
|
||||
"email": "rroychowdhury@ucsd.edu",
|
||||
"type": ["Projects"]
|
||||
},
|
||||
{
|
||||
"name": "Akhil Ram Shankar",
|
||||
"position": "Quarterly Projects Chair",
|
||||
|
|
@ -188,13 +181,6 @@
|
|||
"email": "rsrikanth@ucsd.edu",
|
||||
"type": ["Events"]
|
||||
},
|
||||
{
|
||||
"name": "Dihan Lin",
|
||||
"position": "Outreach Chair",
|
||||
"picture": "/officers/dihan.jpg",
|
||||
"email": "dil009@ucsd.edu",
|
||||
"type": ["Events"]
|
||||
},
|
||||
{
|
||||
"name": "Anika Agarwal",
|
||||
"position": "Outreach Chair",
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ import board from "../images/board.png";
|
|||
<Layout>
|
||||
<Image
|
||||
src={board}
|
||||
alt="JOIN US"
|
||||
alt="BOARD"
|
||||
class="absolute left-[1vw] w-[4vw] top-[15vh]"
|
||||
/>
|
||||
<Image
|
||||
src={board}
|
||||
alt="JOIN US"
|
||||
alt="BOARD"
|
||||
class="absolute right-[1vw] w-[4vw] top-[15vh]"
|
||||
/>
|
||||
<Officers />
|
||||
|
|
|
|||
Loading…
Reference in a new issue