experience-card: force image breakpoint at 2xl, im tired of this shit
This commit is contained in:
parent
1137b74cc0
commit
d259a88c02
2 changed files with 5 additions and 15 deletions
|
|
@ -8,7 +8,7 @@ interface Props {
|
|||
title: string;
|
||||
link?: { label: string; uri: string };
|
||||
notAvailable?: boolean;
|
||||
image?: { uri: string; breakpoint: string };
|
||||
image?: string;
|
||||
tech?: string[];
|
||||
}
|
||||
const {
|
||||
|
|
@ -28,21 +28,11 @@ const {
|
|||
const logoCss = `h-16 w-16 rounded-xl mr-4 ${
|
||||
logoTransparentBackground === true ? "p-2 bg-white" : ""
|
||||
}`;
|
||||
|
||||
// Card behavior with and without image
|
||||
const cardCss = `${
|
||||
image
|
||||
? `${image.breakpoint}:flex ${image.breakpoint}:flex-row-reverse items-stretch justify-between`
|
||||
: ""
|
||||
} w-full rounded-2xl ${backgroundColor}`;
|
||||
|
||||
// Image behavior
|
||||
const imageCss = `flex ${image?.breakpoint}:w-1/2 grow ${image?.breakpoint}:rounded-tl-none ${image?.breakpoint}:rounded-r-2xl rounded-t-2xl object-cover`;
|
||||
---
|
||||
|
||||
<div class={cardCss}>
|
||||
<div class={`${image ? "2xl:flex 2xl:flex-row-reverse items-stretch justify-between" : "" } w-full rounded-2xl ${backgroundColor}`}>
|
||||
<!-- Optional image on the side -->
|
||||
{image && <img loading="lazy" src={image.uri} class={imageCss} />}
|
||||
{image && <img loading="lazy" src={image} class="flex w-full 2xl:w-1/2 grow 2xl:rounded-tl-none 2xl:rounded-r-2xl rounded-t-2xl object-cover" />}
|
||||
|
||||
<!-- Main content -->
|
||||
<div class=`p-6 ${image ? "flex flex-col grow-0" : ""} justify-between h-full`>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ import ExperienceCard from "./experience-card.astro";
|
|||
dates="September 2020 - January 2023"
|
||||
title="Epitech Innovative Project"
|
||||
notAvailable={true}
|
||||
image={{ uri: "/images/naviarent.jpg", breakpoint: "2xl" }}
|
||||
image="/images/naviarent.jpg"
|
||||
tech={[
|
||||
"NodeJS",
|
||||
"Angular",
|
||||
|
|
@ -181,7 +181,7 @@ import ExperienceCard from "./experience-card.astro";
|
|||
dates="April 2017 - January 2020"
|
||||
title="Timelapse"
|
||||
link={{ uri: "https://timelapse.canvas.place", label: "Website" }}
|
||||
image={{ uri: "/images/canvas.png", breakpoint: "md" }}
|
||||
image="/images/canvas.png"
|
||||
tech={["FFmpeg", "Shell scripting", "nginx"]}
|
||||
>
|
||||
<p>canvas.place is a shared place to express creativity.</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue