ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add one-liner intro to home page

Browse source
This commit is contained in:
Ayo Ayco 2025-04-12 09:43:22 +02:00
parent 785ee46706
commit 85dec0f1c1
2 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/variables.css
View file

@ -2,7 +2,7 @@
--content-width: 700px; --content-width: 700px;
--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem); --font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); --font-size-lg: clamp(1.8rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-border: hsl(17, 24%, 90%); --color-border: hsl(17, 24%, 90%);

20
src/pages/index.astro
View file

@ -20,7 +20,7 @@ import now from '../constants/now.json'
/> />
<div class="highlighted-section__content__text"> <div class="highlighted-section__content__text">
<h1 title="Ayo Ayco | Software Engineer + Web Developer"> <h1 title="Ayo Ayco | Software Engineer + Web Developer">
<span class="heavy-text">Ayo</span>Ayco Hi, I'm <span class="heavy-text">Ayo</span>!
</h1> </h1>
<a href="/now" class="now-wrapper"> <a href="/now" class="now-wrapper">
<span class="now-label">Now</span> <span class="now-label">Now</span>
@ -30,6 +30,13 @@ import now from '../constants/now.json'
</div> </div>
</section> </section>
<main> <main>
<section class="introduction-section">
<p>
I care about the <em>Web</em>, and I love to <em>create</em> stuff to <em
>inspire</em
> and <em>serve</em> others.
</p>
</section>
<section class="cards-section"> <section class="cards-section">
<ul class="cards-section__grid"> <ul class="cards-section__grid">
<Card <Card
@ -125,6 +132,17 @@ import now from '../constants/now.json'
padding: 5px 0; padding: 5px 0;
} }
.introduction-section {
p {
font-size: var(--font-size-lg);
}
em {
font-weight: bold;
color: var(--color-brand-complement);
}
}
.cards-section { .cards-section {
margin: auto; margin: auto;
max-width: var(--content-width); max-width: var(--content-width);