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;
link?: { label: string; uri: string };
notAvailable?: boolean;
image?: string;
image?: {src: string, rightPosition: boolean };
tech?: string[];
}
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 -->
{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 -->
<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"
title="Epitech Innovative Project"
notAvailable={true}
image="/images/naviarent.jpg"
image={{ src: "/images/naviarent.jpg", rightPosition: true }}
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="/images/canvas.png"
image={{ src: "/images/canvas.png", rightPosition: false }}
tech={["FFmpeg", "Shell scripting", "nginx"]}
>
<p>canvas.place is a shared place to express creativity.</p>