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

style: typography and colors

Browse source
This commit is contained in:
Ayo 2022-09-17 19:57:22 +02:00
parent 60e98c5fb2
commit f4e09bd8e6
5 changed files with 133 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Card.astro
View file

@ -73,4 +73,6 @@ const { href, title, body } = Astro.props;
will-change: transform; will-change: transform;
transform: translateX(2px); transform: translateX(2px);
} }
</style> </style>

23
src/components/Footer.astro
View file

@ -1,15 +1,13 @@
<footer> <footer>
<ul role="list" style="list-style:none"> <ul role="list" style="list-style:none">
<li>This website is a shameless template of <a href="https://astro.build" target="_blank">Astro</a></li> <li>2022 &#169; <a href="/">Ayo Ayco</a>. All Rights Reserved</li>
<li>2022 @ <a href="/">Ayo Ayco</a>. All Rights Reserved</li> <li>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li>
<li>Moved my old website to <a href="https://classic.ayco.io">a new address</a>.</li>
</ul> </ul>
</footer> </footer>
<style> <style>
:root { :root {
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4); --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
} }
footer { footer {
@ -18,13 +16,12 @@
} }
footer a { footer a {
font-weight: 900; font-weight: 900;
background-image: var(--astro-gradient); background-image: var(--astro-gradient);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-size: 100% 200%; background-size: 100% 200%;
background-position-y: 100%; background-position-y: 100%;
border-radius: 0.4rem; border-radius: 0.4rem;
animation: pulse 4s ease-in-out infinite;
} }
</style> </style>

2
src/layouts/Layout.astro
View file

@ -37,7 +37,7 @@ import Footer from '../components/Footer.astro';
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--color-text); color: var(--color-text);
background-color: var(--color-bg); background-color: var(--color-bg);
} }
body { body {
margin: 0; margin: 0;

186
src/pages/index.astro
View file

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

43
src/pages/social.astro
View file

@ -8,25 +8,23 @@ import Footer from '../components/Footer.astro';
<main> <main>
<nav><a href="/">Back</a></nav> <nav><a href="/">Back</a></nav>
<h1>Social <span class="text-gradient">Links</span></h1> <h1>Social <span class="text-gradient">Links</span></h1>
<div class="content"> <ul role="list" class="link-card-grid">
<ul role="list" style="list-style:none"> <Card
<Card href="https://twitter.com/ayoayco/"
href="https://twitter.com/ayoayco/" title="Twitter"
title="Twitter" body="Tweets about my takes on technology and current events"
body="Tweets about my takes on technology and current events" />
/> <Card
<Card href="https://www.linkedin.com/in/ayoayco/"
href="https://www.linkedin.com/in/ayoayco/" title="LinkedIn"
title="LinkedIn" body="Connect with me and my professional network"
body="Connect with me and my professional network" />
/> <Card
<Card href="https://soundcloud.com/ayoayco/"
href="https://soundcloud.com/ayoayco/" title="SoundCloud"
title="SoundCloud" body="Some music I made as a hobby"
body="Yes, I make music... until I moved to a new contry this year" />
/> </ul>
</ul>
</div>
<Footer></Footer> <Footer></Footer>
</main> </main>
</Layout> </Layout>
@ -36,10 +34,6 @@ import Footer from '../components/Footer.astro';
--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4); --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
} }
div.content {
margin-left: -40px;
}
h1 { h1 {
margin: 2rem 0; margin: 2rem 0;
} }
@ -53,12 +47,12 @@ import Footer from '../components/Footer.astro';
.text-gradient { .text-gradient {
font-weight: 900; font-weight: 900;
background-image: var(--astro-gradient); background-image: var(--astro-gradient);
animation: pulse 4s ease-in-out infinite;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-size: 100% 200%; background-size: 100% 200%;
background-position-y: 100%; background-position-y: 100%;
border-radius: 0.4rem; border-radius: 0.4rem;
animation: pulse 4s ease-in-out infinite;
} }
@keyframes pulse { @keyframes pulse {
@ -89,7 +83,6 @@ import Footer from '../components/Footer.astro';
.link-card-grid { .link-card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 1rem; gap: 1rem;
padding: 0; padding: 0;
} }