57 lines
2.1 KiB
Text
57 lines
2.1 KiB
Text
---
|
|
import { LiaDotCircle } from "react-icons/lia";
|
|
import { Image } from "astro:assets";
|
|
import Link from "next/link";
|
|
import qp from "../../images/qp.webp";
|
|
import { IoIosArrowDroprightCircle } from "react-icons/io";
|
|
---
|
|
|
|
<div class="text-white flex flex-col items-center md:my-[7%] my-[12%] relative">
|
|
<div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[4%]">
|
|
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
|
|
<p>Quarterly Project</p>
|
|
</div>
|
|
<div class="w-[70vw] aspect-[2.5/1] relative">
|
|
<div id="qp-skeleton" class="skeleton absolute inset-0 rounded-full z-0">
|
|
<Image
|
|
src={qp}
|
|
alt="qp showcase photo"
|
|
class="md:opacity-0 md:w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full relative in-view:animate-fade-down"
|
|
data-inview
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
data-inview
|
|
href="/projects/quarterly"
|
|
className="in-view:animate-fade-left absolute top-[25%] md:right-[15%] right-[10%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center md:text-[1.3vw] text-[2vw] hover:bg-ieee-yellow duration-300 shadow-md"
|
|
>
|
|
more details
|
|
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] mt-[1%]" />
|
|
</Link>
|
|
<div
|
|
data-inview
|
|
class="in-view:animate-fade-right md:w-[45%] w-[70%] text-[1.8vw] md:text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute md:-bottom-[6%] -bottom-[15%] md:left-[15%] left-[5%] px-[1.5%] py-[1%] rounded-[1.5vw]"
|
|
>
|
|
<p class="md:text-[1.4vw] text-[2.2vw] mb-[2%]">Quarterly Project</p>
|
|
<p>
|
|
Getting started on hardware development or want to make your own project?
|
|
Need something to put on your resume? IEEE's Quarterly Projects aims to
|
|
provide students with project experience in a span of 10 weeks. Check out
|
|
QP page for more detail!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const image = document.getElementById("qp-image");
|
|
const skeleton = document.getElementById("qp-skeleton");
|
|
|
|
if (image) {
|
|
image.onload = () => {
|
|
skeleton.style.display = "none";
|
|
};
|
|
}
|
|
});
|
|
</script>
|