Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

attempt #4

Browse source
This commit is contained in:
chark1es 2025-03-08 14:44:48 -08:00
parent d84d20ca03
commit 4dbcf04199
9 changed files with 417 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/core/About.astro
View file

@ -1,17 +1,34 @@
--- ---
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
const {title, text} = Astro.props; const { title, text } = Astro.props;
--- ---
<div class="flex flex-col items-center text-white my-[10%]"> <div class="flex flex-col items-center text-white my-[10%]">
<div class="flex items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]"> <div class="flex items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
<p class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black"> <p
class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black"
>
{title} {title}
</p> </p>
</div> </div>
<p class="w-[70%] md:text-[1.4vw] text-[2vw] font-light "> <p class="w-[70%] md:text-[1.4vw] text-[2vw] font-light">
{text} {text}
</p> </p>
</div> </div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

19
src/components/core/Subtitle.astro
View file

@ -1,11 +1,26 @@
--- ---
const {title} = Astro.props; const { title } = Astro.props;
import { LiaDotCircle } from "react-icons/lia"; import { LiaDotCircle } from "react-icons/lia";
--- ---
<div class="flex items-center md:text-[2.5vw] text-[4vw] mb-[5%]"> <div class="flex items-center md:text-[2.5vw] text-[4vw] mb-[5%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/> <LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
<p> <p>
{title} {title}
</p> </p>
</div> </div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

69
src/components/join/Involvement.astro
View file

@ -4,41 +4,78 @@ import { GoArrowDownRight } from "react-icons/go";
import { FaGear } from "react-icons/fa6"; import { FaGear } from "react-icons/fa6";
import { IoMdCalendar } from "react-icons/io"; import { IoMdCalendar } from "react-icons/io";
import { RiRobot2Fill } from "react-icons/ri"; import { RiRobot2Fill } from "react-icons/ri";
const {image, text, link, delay} = Astro.props; const { image, text, link, delay } = Astro.props;
--- ---
<div data-inview class={` animate-ease-in-out md:w-[15vw] w-[24vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}>
<img src={image} alt="involvement background" class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"/> <div
data-inview
class={` animate-ease-in-out md:w-[15vw] w-[24vw] relative group in-view:animate-fade-up animate-delay-${delay} animate-duration-1000`}
>
<img
src={image}
alt="involvement background"
class="opacity-70 aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-50 duration-300"
/>
<Link <Link
href={link} href={link}
target={text==="H.A.R.D. HACK"? "_blank":"_self"} target={text === "H.A.R.D. HACK" ? "_blank" : "_self"}
className="absolute top-0 md:w-[15vw] w-[25vw] pt-[5%] aspect-[230/425] flex flex-col justify-between" className="absolute top-0 md:w-[15vw] w-[25vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
> >
<div class="w-full flex justify-end md:pr-[5%] pr-[2vw]"> <div class="w-full flex justify-end md:pr-[5%] pr-[2vw]">
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw]"> <div
class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[4.5vw] md:text-[2vw] flex items-center justify-center"
>
{ {
text === "PROJECTS"? <RiRobot2Fill/>: text === "PROJECTS" ? (
text === "EVENTS"? <IoMdCalendar/>: <RiRobot2Fill className="icon-fix" />
<FaGear/> ) : text === "EVENTS" ? (
<IoMdCalendar className="icon-fix" />
) : (
<FaGear className="icon-fix" />
)
} }
</div> </div>
</div> </div>
<div class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[20vw] pb-[3vw] md:pt-[30%] md:pb-[5%]"> <div
<div class="text-[2vw] md:text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end"> class="px-[3%] text-white w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[2vw] pt-[20vw] pb-[3vw] md:pt-[30%] md:pb-[5%]"
<p class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light"> >
<div
class="text-[2vw] md:text-[1.1vw] duration-300 flex w-full px-[3%] justify-between items-end"
>
<p
class="pt-[3%] pb-[2%] px-[10%] border-[0.1vw] border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light"
>
{text} {text}
</p> </p>
<GoArrowDownRight className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"/> <GoArrowDownRight
className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow icon-fix"
/>
</div> </div>
{text === "H.A.R.D. HACK" && {
text === "H.A.R.D. HACK" && (
<p class="text-[1.8vw] md:text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300"> <p class="text-[1.8vw] md:text-[1vw] text-center pt-[10%] group-hover:text-ieee-yellow duration-300">
UC San Diego’s largest UC San Diego's largest hardware focused hackathon hold by IEEE UCSD,
hardware focused hackathon HKN, and TNT
hold by IEEE UCSD, HKN, and TNT
</p> </p>
)
} }
</div> </div>
</Link> </Link>
</div> </div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

42
src/components/main_page/Activity.astro
View file

@ -4,20 +4,50 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
const { title, text, link, number, delay } = Astro.props; const { title, text, link, number, delay } = Astro.props;
--- ---
<div data-inview class={`animate-ease-in-out relative text-white flex flex-col items-center w-[30vw] md:w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black md:h-[33vw] h-[40vw] border-[0.1vw] border-white/40 rounded-[2vw] md:pt-[5%] pt-[15%] pb-[3%] in-view:animate-fade-down duration-500 animate-delay-${delay}`}> <div
<div class="rounded-full aspect-square w-[7vw] md:w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"/> data-inview
class={`animate-ease-in-out relative text-white flex flex-col items-center w-[30vw] md:w-[17vw] bg-gradient-to-b from-ieee-blue-100/40 to-ieee-black md:h-[33vw] h-[40vw] border-[0.1vw] border-white/40 rounded-[2vw] md:pt-[5%] pt-[15%] pb-[3%] in-view:animate-fade-down duration-500 animate-delay-${delay}`}
>
<div
class="rounded-full aspect-square w-[7vw] md:w-[5.5vw] absolute bg-gradient-to-b from-ieee-blue-100 to-ieee-blue-300 -top-[10%] shadow-xl shadow-ieee-blue-300"
>
</div>
<p class="text-[2.7vw] md:text-[1.7vw] font-bold text-center"> <p class="text-[2.7vw] md:text-[1.7vw] font-bold text-center">
{title} {title}
</p> </p>
<p class={`text-[1.7vw] md:text-[1.2vw] w-4/5 ${title === "Professional Development" ? "md:mt-[2%] mt-[2%]":"md:mt-[15%] mt-[5%]"}`}> <p
class={`text-[1.7vw] md:text-[1.2vw] w-4/5 ${title === "Professional Development" ? "md:mt-[2%] mt-[2%]" : "md:mt-[15%] mt-[5%]"}`}
>
{text} {text}
</p> </p>
<Link href={link} className="flex items-center text-[2vw] md:text-[1.2vw] mb-[3%] absolute md:bottom-[22%] bottom-[25%] hover:text-ieee-yellow duration-300"> <Link
href={link}
className="flex items-center text-[2vw] md:text-[1.2vw] mb-[3%] absolute md:bottom-[22%] bottom-[25%] hover:text-ieee-yellow duration-300"
>
more details more details
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[2vw] md:text-[1.4vw]"/> <IoIosArrowDroprightCircle
className="ml-[0.5vw] text-[2vw] md:text-[1.4vw] icon-fix"
/>
</Link> </Link>
<p class="text-[7vw] md:text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]"> <p
class="text-[7vw] md:text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]"
>
{number} {number}
</p> </p>
</div> </div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

29
src/components/projects/AP.astro
View file

@ -5,7 +5,7 @@ import ProjectSection from "./ProjectSection.astro";
<div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative"> <div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative">
<div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]"> <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
<p>Annual Projects</p> <p>Annual Projects</p>
</div> </div>
@ -21,7 +21,7 @@ import ProjectSection from "./ProjectSection.astro";
<div <div
class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]" class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]"
> >
<LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]" /> <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%] icon-fix" />
<p class="md:text-[2vw] text-[3vw] mr-[2vw]">Skills & Requirements</p> <p class="md:text-[2vw] text-[3vw] mr-[2vw]">Skills & Requirements</p>
<p class="w-3/5"> <p class="w-3/5">
IEEE @ UCSD's annual projects are intended for students with intermediate IEEE @ UCSD's annual projects are intended for students with intermediate
@ -30,27 +30,20 @@ import ProjectSection from "./ProjectSection.astro";
</p> </p>
</div> </div>
<div class="project-section-container">
<ProjectSection /> <ProjectSection />
</div>
</div> </div>
<style> <style>
/* iOS-specific fixes */ /* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) { @supports (-webkit-touch-callout: none) {
.project-section-container { .icon-fix {
width: 100%; /* Fix vertical alignment on iOS */
overflow-x: hidden; position: relative;
padding-bottom: 10vw; top: 0;
} display: inline-flex;
} align-items: center;
justify-content: center;
@media screen and (max-width: 767px) { transform: translateY(0);
.project-section-container {
width: 100%;
margin-left: -5%;
margin-right: -5%;
padding: 0 5%;
} }
} }
</style> </style>

101
src/components/projects/ProjectSection.astro
View file

@ -7,7 +7,7 @@ import { Image } from "astro:assets";
--- ---
<div <div
class="flex flex-col md:flex-row md:gap-[1.5vw] md:h-[30vw] w-full md:w-auto mt-[20%] md:mt-0 md:ml-0" class="md:flex md:gap-[1.5vw] md:h-[30vw] md:w-auto w-[70vw] mt-[20%] md:mt-0 ml-[5%] md:ml-0"
> >
{ {
Object.entries(annualProjects).map(([title, project], index) => ( Object.entries(annualProjects).map(([title, project], index) => (
@ -26,7 +26,7 @@ import { Image } from "astro:assets";
class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0" class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0"
/> />
<div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]"> <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
<div class="w-full"> <div class="md:w-full w-[70vw]">
<p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]"> <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]">
{title} {title}
</p> </p>
@ -36,17 +36,17 @@ import { Image } from "astro:assets";
<div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto"> <div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
<div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]"> <div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
more details more details
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" /> <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw] icon-fix" />
</div> </div>
</div> </div>
</div> </div>
<GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" /> <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%] icon-fix" />
</div> </div>
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%]"> <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%] flex items-center justify-center">
<FaGear <FaGear
data-inview data-inview
className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]" className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg] icon-fix"
/> />
</div> </div>
</a> </a>
@ -64,19 +64,6 @@ import { Image } from "astro:assets";
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }
/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
.project-card {
height: auto;
min-height: 30vw;
}
.project-card img {
height: auto;
min-height: 30vw;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.project-card.expanded { .project-card.expanded {
flex: 2; flex: 2;
@ -91,17 +78,33 @@ import { Image } from "astro:assets";
} }
} }
/* Fix for iOS Safari and mobile devices */ /* iOS-specific fixes for icon alignment */
@media screen and (max-width: 767px) { @supports (-webkit-touch-callout: none) {
.project-card { .icon-fix {
width: 100%; /* Fix vertical alignment on iOS */
margin-bottom: 5vw; position: relative;
height: auto; top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
} }
.project-card img { /* Specific fixes for project card icons */
height: 60vw; .project-card .bg-white {
object-fit: cover; display: flex;
align-items: center;
justify-content: center;
}
/* Fix for the arrow icon at the bottom */
.project-card .GoArrowDownRight {
margin-bottom: 0.1vw;
}
/* Fix for the more details icon */
.project-card .IoIosArrowDroprightCircle {
vertical-align: middle;
} }
} }
</style> </style>
@ -156,23 +159,20 @@ import { Image } from "astro:assets";
function handleImageLoading() { function handleImageLoading() {
const projectImages = document.querySelectorAll(".project-card img"); const projectImages = document.querySelectorAll(".project-card img");
projectImages.forEach((img) => { projectImages.forEach((image) => {
// Type assertion to fix TypeScript errors
const image = img as HTMLImageElement;
// Ensure the image is fully loaded, even if it's already in cache // Ensure the image is fully loaded, even if it's already in cache
if (image.complete) { if ((image as HTMLImageElement).complete) {
image.style.opacity = "1"; (image as HTMLElement).style.opacity = "1";
const skeleton = image.previousElementSibling as HTMLElement; const skeleton = image.previousElementSibling;
if (skeleton && skeleton.classList.contains("skeleton")) { if (skeleton && skeleton.classList.contains("skeleton")) {
skeleton.style.display = "none"; (skeleton as HTMLElement).style.display = "none";
} }
} else { } else {
image.addEventListener("load", () => { image.addEventListener("load", () => {
image.style.opacity = "1"; (image as HTMLElement).style.opacity = "1";
const skeleton = image.previousElementSibling as HTMLElement; const skeleton = image.previousElementSibling;
if (skeleton && skeleton.classList.contains("skeleton")) { if (skeleton && skeleton.classList.contains("skeleton")) {
skeleton.style.display = "none"; (skeleton as HTMLElement).style.display = "none";
} }
}); });
} }
@ -183,4 +183,27 @@ import { Image } from "astro:assets";
setTimeout(handleImageLoading, 100); setTimeout(handleImageLoading, 100);
handleImageLoading(); handleImageLoading();
document.addEventListener("astro:page-load", handleImageLoading); document.addEventListener("astro:page-load", handleImageLoading);
// iOS detection and class addition
document.addEventListener("DOMContentLoaded", () => {
// Check if the device is iOS
const isIOS =
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (isIOS) {
// Add iOS-specific class to the body for additional styling if needed
document.body.classList.add("ios-device");
// Apply additional fixes for specific iOS versions if needed
const iOSVersion = parseInt(
(navigator.userAgent.match(/OS (\d+)_/) || [])[1],
10,
);
if (iOSVersion && iOSVersion < 15) {
// Additional fixes for older iOS versions
document.body.classList.add("ios-legacy");
}
}
});
</script> </script>

38
src/components/projects/QP.astro
View file

@ -8,14 +8,11 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
<div class="text-white flex flex-col items-center md:my-[7%] my-[12%] relative"> <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%]"> <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[4%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]" /> <LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
<p>Quarterly Project</p> <p>Quarterly Project</p>
</div> </div>
<div class="w-[70vw] aspect-[2.5/1] relative"> <div class="w-[70vw] aspect-[2.5/1] relative">
<div <div id="qp-skeleton" class="skeleton absolute inset-0 rounded-full z-0">
id="qp-skeleton"
class="skeleton absolute inset-0 rounded-full z-0"
>
<Image <Image
src={qp} src={qp}
alt="qp showcase photo" alt="qp showcase photo"
@ -30,9 +27,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
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" 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 more details
<IoIosArrowDroprightCircle <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] icon-fix" />
className="ml-[0.5vw] text-[1.7vw] mt-[1%]"
/>
</Link> </Link>
<div <div
data-inview data-inview
@ -40,14 +35,29 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
> >
<p class="md:text-[1.4vw] text-[2.2vw] mb-[2%]">Quarterly Project</p> <p class="md:text-[1.4vw] text-[2.2vw] mb-[2%]">Quarterly Project</p>
<p> <p>
Getting started on hardware development or want to make your own Getting started on hardware development or want to make your own project?
project? Need something to put on your resume? IEEE's Quarterly Need something to put on your resume? IEEE's Quarterly Projects aims to
Projects aims to provide students with project experience in a span provide students with project experience in a span of 10 weeks. Check out
of 10 weeks. Check out QP page for more detail! QP page for more detail!
</p> </p>
</div> </div>
</div> </div>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const image = document.getElementById("qp-image"); const image = document.getElementById("qp-image");
@ -55,7 +65,9 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
if (image) { if (image) {
image.onload = () => { image.onload = () => {
skeleton.style.display = "none"; if (skeleton) {
(skeleton as HTMLElement).style.display = "none";
}
}; };
} }
}); });

45
src/components/qp/PastProject.astro
View file

@ -1,18 +1,49 @@
--- ---
const {title, link, image, col} = Astro.props; const { title, link, image, col } = Astro.props;
import { GoArrowDownRight } from "react-icons/go"; import { GoArrowDownRight } from "react-icons/go";
import Link from "next/link"; import Link from "next/link";
--- ---
<Link href={link} target="_blank" className={`ease-in-out group relative col-span-${col} text-white`}> <Link
<img src={image} alt="past projects image" class="md:h-[30vh] h-[15vh] object-cover w-full rounded-[1.5vw] opacity-80 group-hover:opacity-40 duration-300" /> href={link}
target="_blank"
className={`ease-in-out group relative col-span-${col} text-white`}
>
<img
src={image}
alt="past projects image"
class="md:h-[30vh] h-[15vh] object-cover w-full rounded-[1.5vw] opacity-80 group-hover:opacity-40 duration-300"
/>
<div class="absolute bottom-0 px-[3%] w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[1.5vw] pb-[1vw] pt-[5%]"> <div
<div class="text-[1.4vw] md:text-[1.1vw] flex w-full px-[2%] justify-between items-end"> class="absolute bottom-0 px-[3%] w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[1.5vw] pb-[1vw] pt-[5%]"
<p class="py-[0.3vw] px-[1vw] border-[0.1vw] text-nowrap border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light"> >
<div
class="text-[1.4vw] md:text-[1.1vw] flex w-full px-[2%] justify-between items-end"
>
<p
class="py-[0.3vw] px-[1vw] border-[0.1vw] text-nowrap border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light"
>
{title} {title}
</p> </p>
<GoArrowDownRight className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 "/> <GoArrowDownRight
className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 icon-fix"
/>
</div> </div>
</div> </div>
</Link> </Link>
<style>
/* iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
.icon-fix {
/* Fix vertical alignment on iOS */
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
}
</style>

43
src/layouts/Layout.astro
View file

@ -26,6 +26,25 @@ import InView from "../components/core/InView.astro";
document.documentElement.setAttribute("data-theme", savedTheme); document.documentElement.setAttribute("data-theme", savedTheme);
} }
</script> </script>
<style is:global>
/* Global iOS-specific fixes for icon alignment */
@supports (-webkit-touch-callout: none) {
/* Apply to all icons in iOS */
svg {
position: relative;
top: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(0);
}
/* Add iOS-specific class for additional styling */
.ios-device svg {
vertical-align: middle;
}
}
</style>
</head> </head>
<InView /> <InView />
<body class="w-full h-full m-0 bg-ieee-black"> <body class="w-full h-full m-0 bg-ieee-black">
@ -38,5 +57,29 @@ import InView from "../components/core/InView.astro";
</main> </main>
<Footer /> <Footer />
</div> </div>
<script is:inline>
// iOS detection
document.addEventListener("DOMContentLoaded", () => {
// Check if the device is iOS
const isIOS =
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (isIOS) {
// Add iOS-specific class to the body for additional styling
document.body.classList.add("ios-device");
// Apply additional fixes for specific iOS versions if needed
const iOSVersion = parseInt(
(navigator.userAgent.match(/OS (\d+)_/) || [])[1],
10,
);
if (iOSVersion && iOSVersion < 15) {
// Additional fixes for older iOS versions
document.body.classList.add("ios-legacy");
}
}
});
</script>
</body> </body>
</html> </html>