phil/plcom
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

experience card: ability to display image on left or right

Browse source
This commit is contained in:
Philippe Loctaux 2023-06-03 01:17:55 +02:00
parent d259a88c02
commit 511710ee78
2 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/experience-card.astro
View file

@ -8,7 +8,7 @@ interface Props {
title: string; title: string;
link?: { label: string; uri: string }; link?: { label: string; uri: string };
notAvailable?: boolean; notAvailable?: boolean;
image?: string; image?: {src: string, rightPosition: boolean };
tech?: string[]; tech?: string[];
} }
const { const {
@ -30,9 +30,9 @@ const logoCss = `h-16 w-16 rounded-xl mr-4 ${
}`; }`;
--- ---
<div class={`${image ? "2xl:flex 2xl:flex-row-reverse items-stretch justify-between" : "" } w-full rounded-2xl ${backgroundColor}`}> <div class={`${image ? `2xl:flex ${image.rightPosition ? "2xl:flex-row-reverse" : "" } items-stretch justify-between` : "" } w-full rounded-2xl ${backgroundColor}`}>
<!-- Optional image on the side --> <!-- Optional image on the side -->
{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" />} {image && <img loading="lazy" src={image.src} class={`flex w-full 2xl:w-1/2 grow ${image.rightPosition ? "2xl:rounded-tl-none 2xl:rounded-r-2xl" : "2xl:rounded-tr-none 2xl:rounded-l-2xl"} rounded-t-2xl object-cover`} />}
<!-- Main content --> <!-- Main content -->
<div class=`p-6 ${image ? "flex flex-col grow-0" : ""} justify-between h-full`> <div class=`p-6 ${image ? "flex flex-col grow-0" : ""} justify-between h-full`>

4
src/components/projects.astro
View file

@ -100,7 +100,7 @@ import ExperienceCard from "./experience-card.astro";
dates="September 2020 - January 2023" dates="September 2020 - January 2023"
title="Epitech Innovative Project" title="Epitech Innovative Project"
notAvailable={true} notAvailable={true}
image="/images/naviarent.jpg" image={{ src: "/images/naviarent.jpg", rightPosition: true }}
tech={[ tech={[
"NodeJS", "NodeJS",
"Angular", "Angular",
@ -181,7 +181,7 @@ import ExperienceCard from "./experience-card.astro";
dates="April 2017 - January 2020" dates="April 2017 - January 2020"
title="Timelapse" title="Timelapse"
link={{ uri: "https://timelapse.canvas.place", label: "Website" }} link={{ uri: "https://timelapse.canvas.place", label: "Website" }}
image="/images/canvas.png" image={{ src: "/images/canvas.png", rightPosition: false }}
tech={["FFmpeg", "Shell scripting", "nginx"]} tech={["FFmpeg", "Shell scripting", "nginx"]}
> >
<p>canvas.place is a shared place to express creativity.</p> <p>canvas.place is a shared place to express creativity.</p>