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

initial semantic html

Browse source
This commit is contained in:
Ayo 2022-09-24 14:29:43 +02:00
parent 74498d618b
commit a3cb91cff8
4 changed files with 67 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/Card.astro
View file

@ -19,6 +19,7 @@ const { href, title, body } = Astro.props;
</p>
</a>
</li>
<style>
:root {
--link-gradient: linear-gradient(45deg, var(--color-brand-blue-1), var(--color-brand-blue-3) 30%, var(--color-border) 60%);

2
src/components/Footer.astro
View file

@ -2,7 +2,6 @@
<ul role="list" style="list-style:none">
<li>2022 &#169; <strong>Ayo Ayco</strong>. All Rights Reserved</li>
<li><strong>Ayo Ayco</strong> | Software Engineer + Web Developer</li>
<li>View my website's code at <a href="https://github.com/ayoayco/ayco.io-astro">Github</a></li>
<li>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li>
</ul>
</footer>
@ -14,5 +13,4 @@
margin-top: 2em;
text-align: right;
}
</style>

1
src/layouts/Layout.astro
View file

@ -40,7 +40,6 @@ import Footer from '../components/Footer.astro';
--color-brand-blue-4: #101c40;
--color-brand-blue-5: #3964e6;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
}

48
src/pages/index.astro
View file

@ -6,9 +6,11 @@ import Footer from "../components/Footer.astro";
<Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main>
<div class="highlighted-section">
<div class="top-content">
<h1 title="Ayo Ayco | Software Engineer + Web Developer"><span class="heavy-text">Ayo</span>Ayco</h1>
<section class="highlighted-section">
<div class="highlighted-section__content">
<h1 title="Ayo Ayco | Software Engineer + Web Developer">
<span class="heavy-text">Ayo</span>Ayco
</h1>
<ul role="list">
<li>👨🏻‍💻 Software Extraordinaire</li>
<li>🕵🏻‍♂️ Frontend Detective Consultant</li>
@ -19,10 +21,9 @@ import Footer from "../components/Footer.astro";
<span class="status">Settling in The Netherlands &rarr;</a>
</a>
</div>
</div>
<div class="main-content">
<ul role="list" class="link-card-grid">
</section>
<section class="cards-section">
<ul role="list" class="cards-section__grid">
<Card
href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
title="CV / Resume"
@ -45,7 +46,7 @@ import Footer from "../components/Footer.astro";
/>
</ul>
<Footer />
</div>
</section>
</main>
</Layout>
@ -60,7 +61,7 @@ import Footer from "../components/Footer.astro";
color: white;
}
.top-content {
.highlighted-section__content {
margin: auto;
padding: 1em;
max-width: var(--content-width);
@ -92,17 +93,6 @@ import Footer from "../components/Footer.astro";
padding-right: 4px;
}
.top-content ul {
list-style-type: none;
padding: 0;
}
.main-content {
margin: auto;
padding: 1em;
max-width: var(--content-width);
}
.highlighted-section {
background: var(--ayo-gradient);
background-size: 500% 500%;
@ -111,6 +101,12 @@ import Footer from "../components/Footer.astro";
box-shadow: 0 8px 8px -4px lightblue;
}
.highlighted-section__content ul {
list-style-type: none;
padding: 0;
}
.highlighted-section code {
font-size: 0.875em;
border: 0.1em solid var(--color-border);
@ -118,7 +114,13 @@ import Footer from "../components/Footer.astro";
padding: 0.15em 0.25em;
}
.link-card-grid {
.cards-section {
margin: auto;
padding: 1em;
max-width: var(--content-width);
}
.cards-section__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 1rem;
@ -128,7 +130,7 @@ import Footer from "../components/Footer.astro";
@media only screen
and (min-device-width: 280px)
and (max-device-width: 653px) {
.top-content ul li {
.highlighted-section__content ul li {
font-size: 14px;
font-weight: bold;
}
@ -137,7 +139,7 @@ import Footer from "../components/Footer.astro";
@media only screen
and (min-device-width: 360px)
and (max-device-width: 812px) {
.top-content ul li {
.highlighted-section__content ul li {
font-size: 20px;
font-weight: bold;
}