attempt #4
This commit is contained in:
chark1es
parent
d84d20ca03
commit
4dbcf04199
9 changed files with 417 additions and 216 deletions
|
|
@ -1,17 +1,34 @@
|
|||
---
|
||||
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 items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<p class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="w-[70%] md:text-[1.4vw] text-[2vw] font-light ">
|
||||
{text}
|
||||
<div class="flex items-center text-[4.5vw] md:text-[2.5vw] mb-[3%]">
|
||||
<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"
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="w-[70%] md:text-[1.4vw] text-[2vw] font-light">
|
||||
{text}
|
||||
</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,26 @@
|
|||
---
|
||||
const {title} = Astro.props;
|
||||
const { title } = Astro.props;
|
||||
import { LiaDotCircle } from "react-icons/lia";
|
||||
---
|
||||
|
||||
<div class="flex items-center md:text-[2.5vw] text-[4vw] mb-[5%]">
|
||||
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
|
||||
<p>
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
<LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
|
||||
<p>
|
||||
{title}
|
||||
</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -4,41 +4,78 @@ import { GoArrowDownRight } from "react-icons/go";
|
|||
import { FaGear } from "react-icons/fa6";
|
||||
import { IoMdCalendar } from "react-icons/io";
|
||||
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"/>
|
||||
<Link
|
||||
href={link}
|
||||
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"
|
||||
<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
|
||||
href={link}
|
||||
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"
|
||||
>
|
||||
<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] flex items-center justify-center"
|
||||
>
|
||||
{
|
||||
text === "PROJECTS" ? (
|
||||
<RiRobot2Fill className="icon-fix" />
|
||||
) : text === "EVENTS" ? (
|
||||
<IoMdCalendar className="icon-fix" />
|
||||
) : (
|
||||
<FaGear className="icon-fix" />
|
||||
)
|
||||
}
|
||||
</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 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]">
|
||||
{
|
||||
text === "PROJECTS"? <RiRobot2Fill/>:
|
||||
text === "EVENTS"? <IoMdCalendar/>:
|
||||
<FaGear/>
|
||||
}
|
||||
</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 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}
|
||||
</p>
|
||||
<GoArrowDownRight className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow"/>
|
||||
</div>
|
||||
|
||||
{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">
|
||||
UC San Diego’s largest
|
||||
hardware focused hackathon
|
||||
hold by IEEE UCSD, HKN, and TNT
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
</Link>
|
||||
<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}
|
||||
</p>
|
||||
<GoArrowDownRight
|
||||
className="text-[5vw] md:text-[3vw] leading-none group-hover:text-ieee-yellow icon-fix"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{
|
||||
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">
|
||||
UC San Diego's largest hardware focused hackathon hold by IEEE UCSD,
|
||||
HKN, and TNT
|
||||
</p>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</Link>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,53 @@
|
|||
---
|
||||
import Link from "next/link";
|
||||
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 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"/>
|
||||
<p class="text-[2.7vw] md:text-[1.7vw] font-bold text-center">
|
||||
{title}
|
||||
</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%]"}`}>
|
||||
{text}
|
||||
</p>
|
||||
<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
|
||||
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">
|
||||
{title}
|
||||
</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%]"}`}
|
||||
>
|
||||
{text}
|
||||
</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">
|
||||
more details
|
||||
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[2vw] md:text-[1.4vw]"/>
|
||||
</Link>
|
||||
<p class="text-[7vw] md:text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]">
|
||||
{number}
|
||||
</p>
|
||||
</div>
|
||||
<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
|
||||
<IoIosArrowDroprightCircle
|
||||
className="ml-[0.5vw] text-[2vw] md:text-[1.4vw] icon-fix"
|
||||
/>
|
||||
</Link>
|
||||
<p
|
||||
class="text-[7vw] md:text-[3.7vw] font-bold text-ieee-blue-300/50 absolute bottom-[5%]"
|
||||
>
|
||||
{number}
|
||||
</p>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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="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>
|
||||
</div>
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ import ProjectSection from "./ProjectSection.astro";
|
|||
<div
|
||||
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="w-3/5">
|
||||
IEEE @ UCSD's annual projects are intended for students with intermediate
|
||||
|
|
@ -30,27 +30,20 @@ import ProjectSection from "./ProjectSection.astro";
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="project-section-container">
|
||||
<ProjectSection />
|
||||
</div>
|
||||
<ProjectSection />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* iOS-specific fixes */
|
||||
/* iOS-specific fixes for icon alignment */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.project-section-container {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.project-section-container {
|
||||
width: 100%;
|
||||
margin-left: -5%;
|
||||
margin-right: -5%;
|
||||
padding: 0 5%;
|
||||
.icon-fix {
|
||||
/* Fix vertical alignment on iOS */
|
||||
position: relative;
|
||||
top: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { Image } from "astro:assets";
|
|||
---
|
||||
|
||||
<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) => (
|
||||
|
|
@ -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"
|
||||
/>
|
||||
<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%]">
|
||||
{title}
|
||||
</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="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
|
||||
more details
|
||||
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
|
||||
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw] icon-fix" />
|
||||
</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 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
|
||||
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>
|
||||
</a>
|
||||
|
|
@ -64,19 +64,6 @@ import { Image } from "astro:assets";
|
|||
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) {
|
||||
.project-card.expanded {
|
||||
flex: 2;
|
||||
|
|
@ -91,17 +78,33 @@ import { Image } from "astro:assets";
|
|||
}
|
||||
}
|
||||
|
||||
/* Fix for iOS Safari and mobile devices */
|
||||
@media screen and (max-width: 767px) {
|
||||
.project-card {
|
||||
width: 100%;
|
||||
margin-bottom: 5vw;
|
||||
height: auto;
|
||||
/* 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);
|
||||
}
|
||||
|
||||
.project-card img {
|
||||
height: 60vw;
|
||||
object-fit: cover;
|
||||
/* Specific fixes for project card icons */
|
||||
.project-card .bg-white {
|
||||
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>
|
||||
|
|
@ -156,23 +159,20 @@ import { Image } from "astro:assets";
|
|||
function handleImageLoading() {
|
||||
const projectImages = document.querySelectorAll(".project-card img");
|
||||
|
||||
projectImages.forEach((img) => {
|
||||
// Type assertion to fix TypeScript errors
|
||||
const image = img as HTMLImageElement;
|
||||
|
||||
projectImages.forEach((image) => {
|
||||
// Ensure the image is fully loaded, even if it's already in cache
|
||||
if (image.complete) {
|
||||
image.style.opacity = "1";
|
||||
const skeleton = image.previousElementSibling as HTMLElement;
|
||||
if ((image as HTMLImageElement).complete) {
|
||||
(image as HTMLElement).style.opacity = "1";
|
||||
const skeleton = image.previousElementSibling;
|
||||
if (skeleton && skeleton.classList.contains("skeleton")) {
|
||||
skeleton.style.display = "none";
|
||||
(skeleton as HTMLElement).style.display = "none";
|
||||
}
|
||||
} else {
|
||||
image.addEventListener("load", () => {
|
||||
image.style.opacity = "1";
|
||||
const skeleton = image.previousElementSibling as HTMLElement;
|
||||
(image as HTMLElement).style.opacity = "1";
|
||||
const skeleton = image.previousElementSibling;
|
||||
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);
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -7,56 +7,68 @@ 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
|
||||
<div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[4%]">
|
||||
<LiaDotCircle className="mr-[1vw] pt-[0.5%] icon-fix" />
|
||||
<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
|
||||
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>
|
||||
<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] icon-fix" />
|
||||
</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");
|
||||
<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>
|
||||
|
||||
if (image) {
|
||||
image.onload = () => {
|
||||
skeleton.style.display = "none";
|
||||
};
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const image = document.getElementById("qp-image");
|
||||
const skeleton = document.getElementById("qp-skeleton");
|
||||
|
||||
if (image) {
|
||||
image.onload = () => {
|
||||
if (skeleton) {
|
||||
(skeleton as HTMLElement).style.display = "none";
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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 Link from "next/link";
|
||||
---
|
||||
|
||||
<Link 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" />
|
||||
<Link
|
||||
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 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}
|
||||
</p>
|
||||
<GoArrowDownRight className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 "/>
|
||||
</div>
|
||||
<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
|
||||
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}
|
||||
</p>
|
||||
<GoArrowDownRight
|
||||
className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 icon-fix"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -6,37 +6,80 @@ import InView from "../components/core/InView.astro";
|
|||
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="dark" class="w-full h-full m-0 bg-ieee-black">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>IEEEUCSD</title>
|
||||
<script
|
||||
src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"
|
||||
></script>
|
||||
<script is:inline>
|
||||
// Set default theme to dark if not already set
|
||||
if (!localStorage.getItem("theme")) {
|
||||
localStorage.setItem("theme", "dark");
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
} else {
|
||||
// Apply saved theme
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
document.documentElement.setAttribute("data-theme", savedTheme);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<InView />
|
||||
<body class="w-full h-full m-0 bg-ieee-black">
|
||||
<div class="text-white min-h-screen">
|
||||
<header class="sticky top-0 w-full z-[999]">
|
||||
<Navbar />
|
||||
</header>
|
||||
<main class="w-[95%] mx-auto">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>IEEEUCSD</title>
|
||||
<script
|
||||
src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"
|
||||
></script>
|
||||
<script is:inline>
|
||||
// Set default theme to dark if not already set
|
||||
if (!localStorage.getItem("theme")) {
|
||||
localStorage.setItem("theme", "dark");
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
} else {
|
||||
// Apply saved theme
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
document.documentElement.setAttribute("data-theme", savedTheme);
|
||||
}
|
||||
</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>
|
||||
<InView />
|
||||
<body class="w-full h-full m-0 bg-ieee-black">
|
||||
<div class="text-white min-h-screen">
|
||||
<header class="sticky top-0 w-full z-[999]">
|
||||
<Navbar />
|
||||
</header>
|
||||
<main class="w-[95%] mx-auto">
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</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>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue