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

Changed paye layout

Browse Source
This commit is contained in:
Alexis
2026-01-18 16:43:02 +01:00
parent 54711f38f5
commit 1fd173ecbe
6 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@@ -1,6 +1,6 @@
root = true
[*.vue]
[*.{vue,astro}]
charset = utf-8
indent_style = space
indent_size = 2

24
src/components/BgGrid.astro
View File

@@ -1,24 +1,34 @@
<div
id="grid-bg-wrapper"
class="contrast-more:hidden absolute -inset-full -z-10 isolate grid place-items-center pointer-events-none"
class="contrast-more:hidden absolute inset-0 -z-10 isolate grid place-items-center pointer-events-none"
>
<div id="grid-bg-inner" class="col-start-1 row-start-1 w-full h-full">
<svg
id="grid-bg"
class="col-start-1 row-start-1 w-full h-full opacity-50" xmlns="http://www.w3.org/2000/svg"
style="mask-image: radial-gradient(circle at center, black 0%, black 5%, transparent 28%);"
class=" opacity-50" xmlns="http://www.w3.org/2000/svg"
>
<defs>
<pattern id="grid" width="38" height="38" patternUnits="userSpaceOnUse">
<pattern id="grid" width="38" height="38" x="19" y="19" patternUnits="userSpaceOnUse">
<path d="M 100 0 L 0 0 0 38" class="stroke-emerald-500 contrast-more:stroke-emerald-700" fill="none" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
</div>
</div>
<style lang="scss">
#grid-bg {
transform: scaleY(0.7) skewX(-24deg) skewY(12deg);
<style>
#grid-bg-inner {
overflow: hidden;
}
#grid-bg {
width: 100%;
height: 100%;
transform: scaleY(0.7) skewX(-24deg) skewY(12deg);
mask-image: radial-gradient(circle at center, black 0%, transparent 60%)
}
#grid-bg rect {
transform: ;
}
</style>

2
src/components/Card.astro
View File

@@ -36,7 +36,7 @@ const { imageCover, imageHeight, imageWidth, imageLoading = "lazy" } = Astro.pro
<slot name="heading" />
</header>
<div class="body text-slate-400 flow text-[.9em]">
<div class="body text-slate-400 flow text-[.9em] max-h-48 overflow-y-auto">
<slot name="body" />
</div>
</div>

2
src/layouts/Layout.astro
View File

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

14
src/pages/projects.astro
View File

@@ -13,9 +13,9 @@ import Layout from '../layouts/Layout.astro';
</div>
<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={180} imageWidth={400} imageLoading="eager">
<ul id="projects-list" class="pb-4 max-sm:overflow-x-auto max-sm:overflow-y-hidden max-sm:snap-x max-sm:snap-mandatory max-sm:scroll-smooth flex gap-2 md:gap-6 lg:gap-8 max-sm:*:snap-start max-sm:*:grow-0 max-sm:*:shrink-0 *:basis-4/5 lg:*:basis-1/3">
<li>
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} 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>
@@ -32,8 +32,8 @@ 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">
<li>
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} 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,8 +50,8 @@ 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">
<li>
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} 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" />