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

complete project page

Browse source
This commit is contained in:
Shing Hung 2025-01-04 21:54:08 -08:00
parent cd4105cacd
commit c196601cfe
12 changed files with 150 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/qp.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

BIN
public/robocup.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
public/signal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 216 KiB

BIN
public/supercomp.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

11
src/components/core/Title.astro Normal file
View file

@ -0,0 +1,11 @@
---
const {title} = Astro.props;
import { LiaDotCircle } from "react-icons/lia";
---
<div class="flex items-center text-[3vw] ml-[10%] pt-[10%] text-white font-semibold">
<LiaDotCircle className=" mr-[1vw] text-[2.7vw]"/>
<p>
{title}
</p>
</div>

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

@ -1,7 +1,6 @@
---
import Link from "next/link";
import { GoArrowDownRight } from "react-icons/go";
import { Image } from "astro:assets";
import { FaGear } from "react-icons/fa6";
import { IoMdCalendar } from "react-icons/io";
import { RiRobot2Fill } from "react-icons/ri";
@ -10,7 +9,11 @@ const {image, text, link} = Astro.props;
<div class="w-[15vw] relative group">
<img src={image} alt="involvement background" class="aspect-[230/425] object-cover rounded-[2vw] group-hover:opacity-70 duration-300"/>
<Link href={link} className="absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between">
<Link
href={link}
target={text==="H.A.R.D. HACK"? "_blank":"_self"}
className="absolute top-0 w-[15vw] pt-[5%] aspect-[230/425] flex flex-col justify-between"
>
<div class="w-full flex justify-end pr-[5%]">
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw]">
{

35
src/components/projects/AP.astro Normal file
View file

@ -0,0 +1,35 @@
---
import { LiaDotCircle } from "react-icons/lia";
import ProjectSection from "./ProjectSection.astro";
---
<div class="text-white h-[65vh] justify-between mt-[15%] mb-[30%] mx-[10%] relative">
<div class="flex items-center text-[2.7vw] mb-[7%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p>
Annual Projects
</p>
</div>
<p class="text-[1.2vw] mt-[5%] mb-[3%] ml-[25%] font-light">
Erat hendrerit tristique erat; parturient cursus fringilla feugiat.
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
Tellus nibh vivamus tempus molestie tristique quis
</p>
<div class="flex items-center text-[1.2vw] font-light mb-[7%] justify-between ml-[20%]">
<LiaDotCircle className="text-[2vw] pt-[0.5%]"/>
<p class="text-[2vw]">
ridiculus nec egestas
</p>
<p class="w-3/5">
Erat hendrerit tristique erat; parturient cursus fringilla feugiat.
Eget faucibus fames ridiculus nec egestas convallis cubilia malesuada.
Tellus nibh vivamus tempus molestie tristique quis
</p>
</div>
<ProjectSection />
</div>

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

@ -1,64 +1,50 @@
---
import annualProjects from "../../data/annualProjects.json";
interface Props {
width?: string;
}
const { width = "100%" } = Astro.props;
import { FaGear } from "react-icons/fa6";
import { GoArrowDownRight } from "react-icons/go";
import { IoIosArrowDroprightCircle } from "react-icons/io";
---
<div class="flex gap-[1.5vw] h-[50vh]">
{
Object.entries(annualProjects).map(
([title, project], index) => (
<a
href={project.url || "#"}
class={`project-card group relative flex-1 rounded-[1.5vw] overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`}
data-project={index + 1}
target={title==="Supercomputing"? "_blank":"_self"}
>
<img
src={project.image}
alt={`${title} Project`}
class="opacity-70 w-full h-full object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110"
/>
<div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] 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">
<p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap text-[1.2vw] font-light mb-[5%]">
{title}
</p>
<p class="hidden [.expanded_&]:contents transition-all duration-300 overflow-hidden">
{project.description}
</p>
<div class="w-full flex justify-end invisible [.expanded_&]:visible h-0 [.expanded_&]:h-auto">
<div class="flex items-center text-[1.3vw] [.expanded_&]:mt-[5%]">
more details
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]"/>
</div>
</div>
</div>
<GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]"/>
</div>
<section class="w-full py-12">
<div class={`mx-auto`} style={`width: ${width}`}>
<div class="flex flex-col md:flex-row gap-6 md:h-[400px]">
{
Object.entries(annualProjects).map(
([title, project], index) => (
<a
href={project.url || "#"}
class={`project-card group relative h-[300px] md:h-auto flex-none md:flex-1 rounded-lg overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`}
data-project={index + 1}
>
<img
src={project.image}
alt={`${title} Project`}
class="w-full h-full object-cover rounded-lg transition-transform duration-500 ease-in-out md:group-hover:scale-110"
/>
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-lg" />
<div class="absolute bottom-0 left-0 p-6 text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:translate-y-[-30px]">
<h3 class="text-xl font-bold mb-2 transition-transform duration-300">
{title}
</h3>
<p class="md:opacity-0 md:[.expanded_&]:opacity-100 transition-all duration-300 max-h-0 md:[.expanded_&]:max-h-[200px] overflow-hidden">
{project.description}
</p>
</div>
<div
class="absolute bottom-2 right-2 bg-white rounded-full p-2 shadow
md:opacity-0 md:[.expanded_&]:opacity-100 transition-opacity duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-black"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 7l10 10m0-10v10h-10"
/>
</svg>
</div>
</a>
)
)
}
</div>
</div>
</section>
<div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black text-[2vw] absolute top-[3%] right-[5%]">
<FaGear/>
</div>
</a>
)
)
}
</div>
<style>
.project-card {

34
src/components/projects/QP.astro Normal file
View file

@ -0,0 +1,34 @@
---
import { LiaDotCircle } from "react-icons/lia";
import { Image } from "astro:assets";
import Link from "next/link";
import qp from "../../../public/qp.png"
import { IoIosArrowDroprightCircle } from "react-icons/io";
---
<div class="text-white flex flex-col items-center my-[7%] relative">
<div class="flex items-center text-[2.7vw] mb-[4%]">
<LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
<p>
Quarterly Project
</p>
</div>
<Image src={qp} alt="qp showcase photo" class="w-[70vw] aspect-[2.5/1] rounded-full"/>
<Link href="/quarterly" className="absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md">
more details
<IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] mt-[1%]"/>
</Link>
<div class="w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]">
<p class="text-[1.4vw] 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>

18
src/data/annualProjects.json
View file

@ -1,17 +1,17 @@
{
"Supercomputing": {
"description": "Explore the field of supercomputing.",
"image": "https://placehold.co/600x400",
"url": "/project-page"
},
"Robocup": {
"description": "Participate in the Robocup competition.",
"image": "https://placehold.co/600x400",
"url": "/project-page"
"image": "/robocup.png",
"url": "/robocup"
},
"Signal Processing": {
"description": "Explore the field of signal processing.",
"image": "https://placehold.co/600x400",
"url": "/project-page"
"image": "/signal.png",
"url": "/signal"
},
"Supercomputing": {
"description": "Explore the field of supercomputing.",
"image": "/supercomp.png",
"url": "https://supercomputing-club.sdsc.edu/"
}
}

3
src/pages/404.astro Normal file
View file

@ -0,0 +1,3 @@
<div>
404 ERROR
</div>

11
src/pages/projects.astro
View file

@ -1,7 +1,16 @@
---
import Layout from "../layouts/Layout.astro";
import Title from "../components/core/Title.astro";
import QP from "../components/projects/QP.astro";
import AP from "../components/projects/AP.astro";
import { Image } from "astro:assets";
import join from "../../public/join.png";
---
<Layout>
Projects
<Image src={join} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[60vh]" />
<Image src={join} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[60vh]" />
<Title title="PROJECTS" />
<QP />
<AP />
</Layout>