+
+ {/* bg image */}
-
- = ({ contentVisible }) => {
- return (
- <>
-
- {contentVisible && (
-
-
- )}
-
- = ({ items, maxHeight }) => {
+ return (
+ = ({ src }) => {
+ return (
+ 
+ );
+};
diff --git a/src/components/projects/ProjectsPage.tsx b/src/components/projects/ProjectsPage.tsx
index 8aebddd..037b4dd 100644
--- a/src/components/projects/ProjectsPage.tsx
+++ b/src/components/projects/ProjectsPage.tsx
@@ -1,35 +1,46 @@
+"use client";
+
+
import GlowingLine from "@/components/decorations/GlowingLine";
import { useEffect, useState } from "react";
import { collection, getDocs } from "firebase/firestore";
import { db } from "@/lib/firebase/firebase";
import { Project } from "@/types/project";
import ProjectModal from "./ProjectModal";
+import dynamic from "next/dynamic";
+import { ArrowUpRight } from "lucide-react";
+
+
+
const sortProjects = (projects: Project[]) => {
const termOrder = { Fall: 3, Summer: 2, Spring: 1 };
+
return [...projects].sort((a, b) => {
- // First compare years
if (a.semester.year !== b.semester.year) {
- return b.semester.year - a.semester.year; // Descending order
+ return b.semester.year - a.semester.year;
}
- // If years are equal, compare terms
+
const termComparison =
termOrder[b.semester.term] - termOrder[a.semester.term];
if (termComparison !== 0) {
return termComparison;
}
- // If terms are equal, compare dates
+
return b.buildDate.toMillis() - a.buildDate.toMillis();
});
};
+
export default function ProjectsPage() {
const [projects, setProjects] = useState([]);
const [loading, setLoading] = useState(true);
const [selectedProject, setSelectedProject] = useState(null);
+ const [imageLoaded, setImageLoaded] = useState>({});
+
useEffect(() => {
const fetchProjects = async () => {
@@ -47,32 +58,29 @@ export default function ProjectsPage() {
}
};
+
fetchProjects();
}, []);
+
useEffect(() => {
- // When selectedProject changes (modal opens/closes)
if (selectedProject) {
- // Prevent scrolling on the main page when modal is open
document.body.style.overflow = "hidden";
} else {
- // Re-enable scrolling when modal is closed
document.body.style.overflow = "";
}
- // Cleanup function to ensure scrolling is re-enabled if component unmounts
+
return () => {
document.body.style.overflow = "";
};
}, [selectedProject]);
+
return (
+
+
{contentVisible && (
-
);
}
-
-type HeroImagesProps = {
- contentVisible: boolean;
-};
-
-const HeroImages: React.FC
+
+
+ {/* Image carousel */}
+
+
{contentVisible && (
-
+
+
+
{/* Buttons */}
-
- {contentVisible && (
-
-
+
+ {contentVisible && (
+
- Get Involved
-
+ Get Involved
+ )}
+
+
+
- {/* Logos Section */}
+ {/* Officer Experience Logos*/}
+
+
+ {contentVisible && (
+
- Join {discordCount} Discord Members{" "}
-
- )}
-
+
+
+ )}
+
+
+ +
Led by a team of officers with experience at:
-
- 
- 
- 
+
-
-
-
+
+
+
+
- 
+
-
+
+
+
-
+
- + More!
++ More!
+
+
-
-
-
-
-
-
-
-
- {contentVisible && (
-
-
- )}
-
-
-
- );
-};
diff --git a/src/components/landing/LogoCarousel.tsx b/src/components/landing/LogoCarousel.tsx
deleted file mode 100644
index 2c724c8..0000000
--- a/src/components/landing/LogoCarousel.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-
-interface Logo {
- src: string;
- alt: string;
-}
-
-const LogoCarousel: React.FC = () => {
- const logos: Logo[] = [
- { src: "/landing/logos/roblox.png", alt: "Roblox" },
- { src: "/landing/logos/nvidia.png", alt: "NVIDIA" },
- { src: "/landing/logos/microsoft.png", alt: "Microsoft" },
- { src: "/landing/logos/samsung.png", alt: "Samsung" },
- { src: "/landing/logos/ukg.png", alt: "UKG" },
- { src: "/landing/logos/meta.png", alt: "Meta" }
- ];
-
- // Duplicate the logos array to create a seamless infinite effect
- const duplicatedLogos = [...logos, ...logos];
-
- return (
-
-
- {duplicatedLogos.map((logo, index) => (
-
-
- );
-};
-
-export default LogoCarousel;
diff --git a/src/components/landing/ui/Scroller.tsx b/src/components/landing/ui/Scroller.tsx
new file mode 100644
index 0000000..e082fd9
--- /dev/null
+++ b/src/components/landing/ui/Scroller.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import Image from "next/image";
+
+type Picture = {
+ src: string;
+};
+
+type ScrollerProps = {
+ items: string[];
+ maxHeight: number
+};
+
+export const Scroller: React.FC
- 
-
- ))}
- + More!
-
+
+ );
+};
+
+const Item: React.FC-
+ {items.map((picture, index) => (
+
- + ))} +
-
+ {items.map((picture, index) => (
+
- + ))} +
- {/* Applied noise background for consistency */}
-
- {/* Hero Section with Title */}
+ {/* Hero */}
- {/* Decorative Lines */}
- {/* Projects Grid */}
-
-
- Our Projects
+
- Our Projects
+
+ Latest Projects
Discover our latest custom PC builds @@ -120,11 +128,32 @@ export default function ProjectsPage() {
+
+ {/* Projects */}
+
{loading ? (
-
-
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
) : (
+ {/* Image Skeleton */}
+
+
+
+ {/* Title Skeleton */}
+
+
+
+ {/* Date Skeleton */}
+
+
+
+ {/* Description Skeleton */}
+
+ ))}
+
+
+
+
@@ -132,25 +161,40 @@ export default function ProjectsPage() {
);
}
+
+
+type Props = {
+ children: string;
+ lines?: number;
+ className?: string;
+};
+
+
+const TruncatedText: React.FC = ({
+ children,
+ lines = 2,
+ className = "",
+}) => {
+ const clampClass =
+ {
+ 1: "line-clamp-1",
+ 2: "line-clamp-2",
+ 3: "line-clamp-3",
+ 4: "line-clamp-4",
+ 5: "line-clamp-5",
+ 6: "line-clamp-6",
+ }[lines] || "line-clamp-2";
+
+
+ return (
+
setSelectedProject(project)}
- className="group relative cursor-pointer overflow-hidden rounded-lg bg-gray-950 p-4 shadow-white-glow transition-transform hover:scale-105"
+ className="group relative cursor-pointer overflow-hidden rounded-sm p-4"
>
{/* Project Image */}
-
- {/* Project Modal */}
+
+ {/* Modal */}
{selectedProject && (
+
))}
@@ -158,7 +202,8 @@ export default function ProjectsPage() {
)}
+ {!imageLoaded[project.id] && (
+
+ )}
+ setImageLoaded((prev) => ({
+ ...prev,
+ [project.id]: true,
+ }))
+ }
+ className={`h-full w-full object-cover transition-transform group-hover:scale-105 ${
+ !imageLoaded[project.id] ? "opacity-0" : "opacity-100"
+ } transition-opacity`}
/>
+
{/* Project Info */}
-
- {project.Title}
+
+ {project.Description}
+
- {project.Title}
+
+ {project.Title}
-
+
{project.semester.term + " " + project.semester.year}
++ {children} +
+ ); +}; + + + + +