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

Fixed some responsive layout issues

Browse Source
This commit is contained in:
Alexis
2025-06-09 22:43:01 +02:00
parent af13d934fa
commit 6292e92311
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Heading.astro
View File

@@ -7,17 +7,17 @@ const { tag = "h1" } = Astro.props;
---
{tag === 'h1' &&
<h1 class="font-heading text-5xl font-bold">
<h1 class="font-heading text-4xl md:text-5xl font-bold">
<slot name="default" />
</h1>
}
{tag === 'h2' &&
<h2 class="font-heading text-3xl font-bold">
<h2 class="font-heading text-xl md:text-3xl font-bold">
<slot name="default" />
</h2>
}
{tag === 'h3' &&
<h3 class="font-heading text-xl font-bold">
<h3 class="font-heading md:text-xl font-bold">
<slot name="default" />
</h3>
}

12
src/components/home/Hero.astro
View File

@@ -7,13 +7,13 @@ import BgParticles from "./BgParticles.astro";
<section id="hero" class="relative h-screen overflow-clip max-w-full">
<div class="h-full container grid place-items-center auto-rows-auto">
<div class="max-w-2xl text-center">
<div class="px-4 max-w-2xl text-center">
<Heading tag="h1">
Hello, I'm Alexis ! 👋
Hello, I'm Alexis&nbsp;!&nbsp;👋
</Heading>
<div class="mt-4">
<p class="text-xl">
<p class="md:text-xl">
I'm a front-end engineer from France and all-around web enthusiast.
</p>
</div>
@@ -21,8 +21,8 @@ import BgParticles from "./BgParticles.astro";
<hr class="my-4 w-12 mx-auto border-none h-[.33rem] rounded-[100vmax] bg-gradient-to-b from-emerald-500 to-emerald-600" />
<div>
<p class="text-xl">
Let's build something cool together :)
<p class="md:text-xl">
Let's build something cool together&nbsp;:)
</p>
</div>
@@ -50,6 +50,8 @@ import BgParticles from "./BgParticles.astro";
</div>
</div>
<p class="absolute px-4 bottom-8 left-1/2 -translate-x-1/2 opacity-50 text-xs md:text-sm text-center">@2025&nbsp;·&nbsp;Website is currently a WIP&nbsp;;&nbsp;some things may change&nbsp;!</p>
<div
id="grid-bg-wrapper"
class="contrast-more:hidden absolute -inset-full -z-10 isolate grid place-items-center pointer-events-none"