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

style: top section; footer typography, layout

Browse source
This commit is contained in:
Ayo 2022-09-18 09:44:52 +02:00
parent 4c05659bb2
commit 522e94b750
3 changed files with 107 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Footer.astro
View file

@ -1,6 +1,8 @@
<footer> <footer>
<ul role="list" style="list-style:none"> <ul role="list" style="list-style:none">
<li>2022 &#169; <a href="/">Ayo Ayco</a>. All Rights Reserved</li> <li>2022 &#169; <a href="/">Ayo Ayco</a>. All Rights Reserved</li>
<li>Ayo Ayco | Software Engineer + Web Developer</li>
<li>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li> <li>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li>
</ul> </ul>
</footer> </footer>
@ -12,7 +14,9 @@
footer { footer {
color: #888; color: #888;
margin-left: -40px; font-size: small;
margin: 40px 0 0 -40px;
text-align: right;
} }
footer a { footer a {

209
src/pages/index.astro
View file

@ -5,124 +5,117 @@ import Footer from "../components/Footer.astro";
--- ---
<Layout title="Ayo Ayco | Software Engineer + Web Developer"> <Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main> <main>
<h1>Hi, I'm <span class="text-gradient">Ayo!</span></h1> <div class="highlighted-section">
<ul role="list" class="highlighted-content"> <div class="top-content">
<li>👨🏻‍💻 Software Extraordinaire</li> <h1>Ayo Ayco</h1>
<li>🕵🏻‍♂️ Frontend Detective Consultant</li> <ul role="list">
<li>📚 BS Computer Science</li> <li>👨🏻‍💻 Software Extraordinaire</li>
</ul> <li>🕵🏻‍♂️ Frontend Detective Consultant</li>
<ul role="list" class="link-card-grid"> <li>📚 BS Computer Science</li>
<Card </ul>
href="https://blog.ayco.io/" </div>
title="Blog" </div>
body="Read my articles on technology, productivity, and life in general."
/> <div class="main-content">
<Card <ul role="list" class="link-card-grid">
href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing" <Card
title="CV / Resume" href="https://blog.ayco.io/"
body="Download and peruse my skills and experience." title="Blog"
/> body="Read my articles on technology, productivity, and life in general."
<Card />
href="/social" <Card
title="Social" href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
body="Explore a galaxy of my social accounts." title="CV / Resume"
/> body="Download and peruse my skills and experience."
<Card />
href="https://github.com/ayoayco" <Card
title="Github" href="/social"
body="See my public projects over at Github. ❤️" title="Social"
/> body="Explore a galaxy of my social accounts."
</ul> />
<Footer /> <Card
</main> href="https://github.com/ayoayco"
title="Github"
body="See my public projects over at Github. ❤️"
/>
</ul>
<Footer />
</div>
</main>
</Layout> </Layout>
<style> <style>
:root { :root {
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4); --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
} --content-width: 800px;
h1 {
margin: 2rem 0;
}
main {
margin: auto;
padding: 1em;
max-width: 60ch;
}
.text-gradient {
font-weight: 900;
background: var(--astro-gradient);
animation: pulse 4s ease-in-out infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position-y: 100%;
border-radius: 0.4rem;
}
@keyframes pulse {
0%,
100% {
background-position-y: 0%;
} }
50% {
background-position-y: 80%;
}
}
.highlighted-content { h1 {
line-height: 1.6; margin: 0 0 2rem 0;
margin: 1rem 0 1.75rem;
background: var(--astro-gradient);
background-size: 400% 400%;
background-color: var(--);
animation: gradient 15s ease-in-out infinite;
padding: 2rem;
border-radius: 0.4rem;
color: var(--color-bg);
list-style-type: none;
font-size: x-large;
font-weight: bold;
box-shadow: 0 8px 8px -4px lightblue;
}
.highlighted-content code {
font-size: 0.875em;
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
} }
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.link-card-grid { .top-content {
display: grid; margin: auto;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); padding: 1em;
gap: 1rem; max-width: var(--content-width);
padding: 0; font-weight: bold;
} font-size: x-large;
color: var(--color-bg);
line-height: 1.6;
}
.top-content ul {
list-style-type: none;
}
.main-content {
margin: auto;
padding: 1em;
max-width: var(--content-width);
}
.highlighted-section {
background: var(--astro-gradient);
background-size: 400% 400%;
background-color: var(--);
animation: gradient 15s ease-in-out infinite;
padding: 2rem;
box-shadow: 0 8px 8px -4px lightblue;
}
.highlighted-section code {
font-size: 0.875em;
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 1rem;
padding: 0;
}
@media only screen @media only screen
and (min-device-width: 360px) and (min-device-width: 360px)
and (max-device-width: 812px) { and (max-device-width: 812px) {
.section-content {
.highlighted-content {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
} }
</style> </style>

2
src/pages/social.astro
View file

@ -25,7 +25,7 @@ import Footer from '../components/Footer.astro';
body="Some music I made as a hobby" body="Some music I made as a hobby"
/> />
</ul> </ul>
<Footer></Footer> <Footer />
</main> </main>
</Layout> </Layout>