@@ -36,17 +36,17 @@ import { Image } from "astro:assets";
more details
-
+
-
+
-
+
@@ -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;
}
}
@@ -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");
+ }
+ }
+ });
diff --git a/src/components/projects/QP.astro b/src/components/projects/QP.astro
index 9bc3ae1..7abeb90 100644
--- a/src/components/projects/QP.astro
+++ b/src/components/projects/QP.astro
@@ -7,56 +7,68 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
---
-
-
-
Quarterly Project
-
-
-
-
-
-
-
+
+
Quarterly Project
+
+
+
+
- more details
-
-
-
-
Quarterly Project
-
- 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!
-
+ />
+
+
+ more details
+
+
+
+
Quarterly Project
+
+ 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!
+
+
-
diff --git a/src/components/qp/PastProject.astro b/src/components/qp/PastProject.astro
index 8e1a8d1..9b59bde 100644
--- a/src/components/qp/PastProject.astro
+++ b/src/components/qp/PastProject.astro
@@ -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";
---
-
-
+
+
-