Joururi/joururi-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added another project

Browse Source
This commit is contained in:
Alexis
2025-12-21 19:42:01 +01:00
parent 9ad25431b5
commit 54711f38f5
3 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Card.astro
View File

@@ -5,9 +5,10 @@ interface Props {
imageCover?: string
imageHeight?: number
imageWidth?: number
imageLoading?: "lazy" | "eager"
}
const { imageCover, imageHeight, imageWidth } = Astro.props
const { imageCover, imageHeight, imageWidth, imageLoading = "lazy" } = Astro.props
---
<article
@@ -19,7 +20,7 @@ const { imageCover, imageHeight, imageWidth } = Astro.props
>
{imageCover && imageHeight && imageWidth &&
<figure class="w-full">
<Image src={imageCover} height={imageHeight} width={imageWidth} alt={""} loading="lazy" class="w-full h-full object-center" />
<Image src={imageCover} height={imageHeight} width={imageWidth} alt={""} loading={imageLoading} class="w-full h-full object-center" />
</figure>
}
@@ -35,7 +36,7 @@ const { imageCover, imageHeight, imageWidth } = Astro.props
<slot name="heading" />
</header>
<div class="body text-slate-400 flow text-[.95em]">
<div class="body text-slate-400 flow text-[.9em]">
<slot name="body" />
</div>
</div>

2
src/layouts/Layout.astro
View File

@@ -83,7 +83,7 @@ const websiteDomain = "alexcreates.fr"
</script>
</head>
<body class="relative bg-slate-950 text-white overflow-hidden px-4 md:px-12 grid grid-rows-[auto_1fr] gap-4">
<body class="h-screen relative bg-slate-950 text-white overflow-hidden px-4 md:px-12 grid grid-rows-[auto_1fr] gap-4 pb-12">
<Navbar />
<slot />

24
src/pages/projects.astro
View File

@@ -5,7 +5,7 @@ import Layout from '../layouts/Layout.astro';
---
<Layout description="my projects" hasGrid>
<main class="relative h-screen max-w-full">
<main class="relative max-w-full">
<div class="flow content">
<Heading tag="h1">
My projects
@@ -15,7 +15,7 @@ import Layout from '../layouts/Layout.astro';
<section class="mt-8">
<ul class="grid grid-cols-12 gap-4 md:gap-6 lg:gap-8">
<li class="col-span-12 md:col-span-6 lg:col-span-5 xl:col-span-4">
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} imageWidth={400}>
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={180} imageWidth={400} imageLoading="eager">
<Fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-7 fill-emerald-600">
<path d="M228.92,49.69a8,8,0,0,0-6.86-1.45L160.93,63.52,99.58,32.84a8,8,0,0,0-5.52-.6l-64,16A8,8,0,0,0,24,56V200a8,8,0,0,0,9.94,7.76l61.13-15.28,61.35,30.68A8.15,8.15,0,0,0,160,224a8,8,0,0,0,1.94-.24l64-16A8,8,0,0,0,232,200V56A8,8,0,0,0,228.92,49.69ZM96,176a8,8,0,0,0-1.94.24L40,189.75V62.25L95.07,48.48l.93.46Zm120,17.75-55.07,13.77-.93-.46V80a8,8,0,0,0,1.94-.23L216,66.25Z"></path>
@@ -33,7 +33,7 @@ import Layout from '../layouts/Layout.astro';
</Card>
</li>
<li class="col-span-12 md:col-span-6 lg:col-span-5 xl:col-span-4">
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} imageWidth={400}>
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={180} imageWidth={400} imageLoading="eager">
<Fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-7 fill-emerald-600">
<path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z" />
@@ -50,6 +50,24 @@ import Layout from '../layouts/Layout.astro';
</Fragment>
</Card>
</li>
<li class="col-span-12 md:col-span-6 lg:col-span-5 xl:col-span-4">
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={180} imageWidth={400} imageLoading="eager">
<Fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-7 fill-emerald-600">
<path d="M83.19,174.4a8,8,0,0,0,11.21-1.6,52,52,0,0,1,83.2,0,8,8,0,1,0,12.8-9.6A67.88,67.88,0,0,0,163,141.51a40,40,0,1,0-53.94,0A67.88,67.88,0,0,0,81.6,163.2,8,8,0,0,0,83.19,174.4ZM112,112a24,24,0,1,1,24,24A24,24,0,0,1,112,112Zm96-88H64A16,16,0,0,0,48,40V64H32a8,8,0,0,0,0,16H48v40H32a8,8,0,0,0,0,16H48v40H32a8,8,0,0,0,0,16H48v24a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V40A16,16,0,0,0,208,24Zm0,192H64V40H208Z" />
</svg>
</Fragment>
<Heading tag="h2" style="h3" slot="heading">
French Representative Lookup
</Heading>
<Fragment slot="body">
<p>I always found it too bothersome to know who represents you in the french national assembly ; you need to input your physical adress to only get your county.</p>
<p>With official datasets, I was built a script to associate county and representative. It was useful for a while, but it's archived.</p>
</Fragment>
</Card>
</li>
</ul>
</section>
</main>