Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsify project component #67

Merged
merged 7 commits into from
Feb 6, 2025
Merged

Responsify project component #67

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1ab556f
Responsify Project Component
NOTSMKAMAL Feb 2, 2025
808fe77
Merge branch 'dev' of https://github.com/acm-ucr/quant-website into N…
NOTSMKAMAL Feb 2, 2025
13da759
Fixed npm building bug and updated hardcoded css to tailwind
NOTSMKAMAL Feb 2, 2025
3d8dc2c
fixed the visibility of the svg file
NOTSMKAMAL Feb 2, 2025
3199e3a
Merge branch 'dev' into NOTSMKAMAL/ResponsifyProjectComponent
NOTSMKAMAL Feb 2, 2025
713255c
fixed formatting and merge conflicts
NOTSMKAMAL Feb 2, 2025
a955409
Width value changed to fraction value
NOTSMKAMAL Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions src/components/project/project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,25 @@ const Project = (props: {
description: string;
}) => {
return (
<div className="flex h-2/6 w-8/12 flex-col text-lg">
<div className="flex flex-row items-center justify-center gap-24 p-8 text-white">
<div className="flex h-1/2 w-1/6 items-center justify-center rounded-full bg-[#94C7ED]">
<Image className="h-20 w-20" src={image_src} alt={props.image_alt} />
<div className="min-h-fit w-96 rounded-lg text-sm max-lg:border-[1px] max-lg:border-quant-gray max-lg:bg-quant-gray-100 lg:flex lg:h-2/6 lg:w-9/12 lg:flex-col lg:text-lg">
NOTSMKAMAL marked this conversation as resolved.
Show resolved Hide resolved
<div className="flex flex-col items-center justify-center p-4 text-white lg:flex-row lg:items-center lg:justify-center lg:gap-24 lg:p-8 lg:text-white">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-quant-blue-200 lg:flex lg:min-h-44 lg:min-w-44 lg:items-center lg:justify-center lg:rounded-full">
<Image
className="w-24 max-lg:w-10"
src={image_src}
alt={props.image_alt}
/>
</div>
<div className="flex flex-col">
<div className="p-3 font-questrial text-4xl font-bold">
<div className="flex flex-col justify-center max-lg:items-center">
<div className="p-3 font-questrial text-lg font-bold lg:text-4xl lg:font-bold">
{props.name}
</div>
<div className="max-w-5xl p-3 font-roboto text-lg">
<div className="font-roboto text-sm lg:max-w-5xl lg:p-3 lg:font-roboto lg:text-lg">
{props.description}
</div>
</div>
</div>
<div className="w-7/8 border-2"></div>
<div className="lg:w-7/8 lg:border-2"></div>
</div>
);
};
Expand Down
2 changes: 2 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ module.exports = {
white: "#FFFFFF",
navy: "#0F0E37",
gray: "#C3D0DF",
skyblue: "#ADC0EB",
"blue-100": "#A7D6FD",
"blue-200": "#94C7ED",
"gray-100": "#CAE7FF69",
},
},
},
Expand Down
Loading