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 root = true
[*.vue] [*.{vue,astro}]
charset = utf-8 charset = utf-8
indent_style = space indent_style = space
indent_size = 2 indent_size = 2

44
src/components/BgGrid.astro
View File

@@ -1,24 +1,34 @@
<div <div
id="grid-bg-wrapper" 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"
> >
<svg <div id="grid-bg-inner" class="col-start-1 row-start-1 w-full h-full">
id="grid-bg" <svg
class="col-start-1 row-start-1 w-full h-full opacity-50" xmlns="http://www.w3.org/2000/svg" id="grid-bg"
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> <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"/> <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> </pattern>
</defs> </defs>
<rect width="100%" height="100%" fill="url(#grid)" /> <rect width="100%" height="100%" fill="url(#grid)" />
</svg> </svg>
</div>
</div> </div>
<style lang="scss"> <style>
#grid-bg { #grid-bg-inner {
transform: scaleY(0.7) skewX(-24deg) skewY(12deg); 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> </style>

2
src/components/Card.astro
View File

@@ -36,7 +36,7 @@ const { imageCover, imageHeight, imageWidth, imageLoading = "lazy" } = Astro.pro
<slot name="heading" /> <slot name="heading" />
</header> </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" /> <slot name="body" />
</div> </div>
</div> </div>

16
src/layouts/HomeLayout.astro
View File

@@ -84,16 +84,16 @@ const websiteDomain = "alexcreates.fr"
</head> </head>
<body class="h-screen relative bg-slate-950 text-white px-12 overflow-hidden"> <body class="h-screen relative bg-slate-950 text-white px-12 overflow-hidden">
<Navbar floating /> <Navbar floating />
<slot /> <slot />
{hasParticles && {hasParticles &&
<BgParticles /> <BgParticles />
} }
{hasGrid && {hasGrid &&
<BgGrid /> <BgGrid />
} }
</body> </body>
</html> </html>

4
src/layouts/Layout.astro
View File

@@ -1,4 +1,4 @@
--- ---
import '../../assets/css/main.css' import '../../assets/css/main.css'
import BgParticles from '../components/BgParticles.astro' import BgParticles from '../components/BgParticles.astro'
import BgGrid from '../components/BgGrid.astro' import BgGrid from '../components/BgGrid.astro'
@@ -83,7 +83,7 @@ const websiteDomain = "alexcreates.fr"
</script> </script>
</head> </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 /> <Navbar />
<slot /> <slot />

14
src/pages/projects.astro
View File

@@ -13,9 +13,9 @@ import Layout from '../layouts/Layout.astro';
</div> </div>
<section class="mt-8"> <section class="mt-8">
<ul class="grid grid-cols-12 gap-4 md:gap-6 lg:gap-8"> <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 class="col-span-12 md:col-span-6 lg:col-span-5 xl:col-span-4"> <li>
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={180} imageWidth={400} imageLoading="eager"> <Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} imageWidth={400} imageLoading="eager">
<Fragment slot="icon"> <Fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-7 fill-emerald-600"> <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> <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> </Fragment>
</Card> </Card>
</li> </li>
<li class="col-span-12 md:col-span-6 lg:col-span-5 xl:col-span-4"> <li>
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={180} imageWidth={400} imageLoading="eager"> <Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} imageWidth={400} imageLoading="eager">
<Fragment slot="icon"> <Fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-7 fill-emerald-600"> <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" /> <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> </Fragment>
</Card> </Card>
</li> </li>
<li class="col-span-12 md:col-span-6 lg:col-span-5 xl:col-span-4"> <li>
<Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={180} imageWidth={400} imageLoading="eager"> <Card imageCover="https://picsum.photos/id/536/400/200" imageHeight={200} imageWidth={400} imageLoading="eager">
<Fragment slot="icon"> <Fragment slot="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-7 fill-emerald-600"> <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" /> <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" />