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

chore: code formatting clean up

Browse source
This commit is contained in:
Ayo 2022-09-26 10:49:41 +02:00
parent 8300bb6327
commit c10dacfb5f
5 changed files with 192 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Back.astro
View file

@ -1,11 +1,12 @@
--- ---
const {url}= Astro.props; const { url } = Astro.props;
--- ---
<nav><a href={url}>&larr; Back</a></nav> <nav><a href={url}>&larr; Back</a></nav>
<style> <style>
nav { nav {
margin-bottom: -1rem; margin-bottom: -1rem;
} }
nav a { nav a {

125
src/components/Card.astro
View file

@ -1,83 +1,86 @@
--- ---
export interface Props { export interface Props {
title: string; title: string;
body: string; body: string;
href: string; href: string;
} }
const { href, title, body } = Astro.props; const { href, title, body } = Astro.props;
--- ---
<li class="link-card"> <li class="link-card">
<a href={href}> <a href={href}>
<h2> <h2>
{title} {title}
<span>&rarr;</span> <span>&rarr;</span>
</h2> </h2>
<p> <p>
{body} {body}
</p> </p>
</a> </a>
</li> </li>
<style> <style>
:root { :root {
--link-gradient: linear-gradient(45deg, var(--color-brand-blue-1), var(--color-brand-blue-3) 30%, var(--color-border) 60%); --link-gradient: linear-gradient(
} 45deg,
var(--color-brand-blue-1),
var(--color-brand-blue-3) 30%,
var(--color-border) 60%
);
}
.link-card { .link-card {
list-style: none; list-style: none;
display: flex; display: flex;
padding: 0.15rem; padding: 0.15rem;
background-image: var(--link-gradient); background-image: var(--link-gradient);
background-size: 400%; background-size: 400%;
border-radius: 0.5rem; border-radius: 0.5rem;
background-position: 100%; background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
} }
.link-card > a { .link-card > a {
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
line-height: 1.4; line-height: 1.4;
padding: 1em 1.3em; padding: 1em 1.3em;
border-radius: 0.35rem; border-radius: 0.35rem;
color: var(--text-color); color: var(--text-color);
background-color: white; background-color: white;
opacity: 0.8; opacity: 0.8;
} }
h2 { h2 {
margin: 0; margin: 0;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
} }
p { p {
font-weight: normal; font-weight: normal;
margin-top: 0.75rem; margin-top: 0.75rem;
margin-bottom: 0; margin-bottom: 0;
} }
h2 span { h2 span {
display: inline-block; display: inline-block;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
} }
.link-card:is(:hover, :focus-within) { .link-card:is(:hover, :focus-within) {
background-position: 0; background-position: 0;
} }
.link-card:is(:hover, :focus-within) h2 { .link-card:is(:hover, :focus-within) h2 {
/* /*
color: #4f39fa; color: #4f39fa;
*/ */
color: var(--color-brand-blue-2); color: var(--color-brand-blue-2);
} }
.link-card:is(:hover, :focus-within) h2 span {
will-change: transform;
transform: translateX(2px);
}
.link-card:is(:hover, :focus-within) h2 span {
will-change: transform;
transform: translateX(2px);
}
</style> </style>

25
src/components/Footer.astro
View file

@ -1,16 +1,19 @@
<footer> <footer>
<ul role="list" style="list-style:none"> <ul role="list" style="list-style:none">
<li>2022 &#169; <strong>Ayo Ayco</strong>. All Rights Reserved</li> <li>2022 &#169; <strong>Ayo Ayco</strong>. All Rights Reserved</li>
<li><strong>Ayo Ayco</strong> | Software Engineer + Web Developer</li> <li><strong>Ayo Ayco</strong> | Software Engineer + Web Developer</li>
<li>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li> <li>
</ul> Missing old content? I moved <a href="https://classic.ayco.io"
>my previous site</a>
</li>
</ul>
</footer> </footer>
<style> <style>
footer { footer {
color: #888; color: #888;
font-size: small; font-size: small;
margin-top: 2em; margin-top: 2em;
text-align: right; text-align: right;
} }
</style> </style>

119
src/pages/now.astro
View file

@ -1,68 +1,77 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from "../layouts/Layout.astro";
import Card from '../components/Card.astro'; import Footer from "../components/Footer.astro";
import Footer from '../components/Footer.astro'; import Back from "../components/Back.astro";
import Back from '../components/Back.astro';
--- ---
<Layout title="Ayo Ayco | Software Engineer + Web Developer"> <Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main> <main>
<Back url="/" /> <Back url="/" />
<h1><span class="text-gradient">Now</span></h1> <h1><span class="text-gradient">Now</span></h1>
<em>What am I currently up to?</em> <em>What am I currently up to?</em>
<p>This year (2022) I have moved to The Netherlands with my family; specifically to the northern area of Amsterdam.</p> <p>
<p>For work, I'm busy being a consultant, doing mostly frontend development.</p> This year (2022) I have moved to The Netherlands with my family;
<p>If I'm not working, I am playing games on Xbox with my kid, Kahel, or most probably trying to annoy my wife, Jen, with silly jokes.</p> specifically to the northern area of Amsterdam.
<p>I have also found a renewed joy in exploring opensource projects in my spare time.</p> </p>
<hr /> <p>
<em><a href="https://nownownow.com/about">About now pages</a></em> For work, I'm busy being a consultant, doing mostly frontend development.
<Footer /> </p>
</main> <p>
If I'm not working, I am playing games on Xbox with my kid, Kahel, or most
probably trying to annoy my wife, Jen, with silly jokes.
</p>
<p>
I have also found a renewed joy in exploring opensource projects in my
spare time.
</p>
<hr />
<em><a href="https://nownownow.com/about">About now pages</a></em>
<Footer />
</main>
</Layout> </Layout>
<style> <style>
h1 { h1 {
margin: 2rem 0; margin: 2rem 0;
} }
main { main {
margin: auto; margin: auto;
padding: 1em; padding: 1em;
max-width: var(--content-width); max-width: var(--content-width);
} }
.text-gradient { .text-gradient {
font-weight: 900; font-weight: 900;
background-image: var(--ayo-gradient); background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite; animation: pulse 4s ease-in-out infinite;
background-size: 500% 500%; background-size: 500% 500%;
-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;
} }
.highlighted-content { .highlighted-content {
line-height: 1.6; line-height: 1.6;
margin: 1rem 0; margin: 1rem 0;
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--color-bg); color: var(--color-bg);
} }
.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 {
display: grid;
gap: 1rem;
padding: 0;
}
.link-card-grid {
display: grid;
gap: 1rem;
padding: 0;
}
</style> </style>

95
src/pages/social.astro
View file

@ -1,60 +1,59 @@
--- ---
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";
import Back from '../components/Back.astro'; import Back from "../components/Back.astro";
--- ---
<Layout title="Ayo Ayco | Software Engineer + Web Developer"> <Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main> <main>
<Back url="/" /> <Back url="/" />
<h1>Social <span class="text-gradient">Links</span></h1> <h1>Social <span class="text-gradient">Links</span></h1>
<ul role="list" class="link-card-grid"> <ul role="list" class="link-card-grid">
<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="Some music I made as a hobby"
/> />
</ul> </ul>
<Footer /> <Footer />
</main> </main>
</Layout> </Layout>
<style> <style>
h1 { h1 {
margin: 2rem 0; margin: 2rem 0;
} }
.highlighted-content { .highlighted-content {
line-height: 1.6; line-height: 1.6;
margin: 1rem 0; margin: 1rem 0;
background: #4f39fa; background: #4f39fa;
padding: 1rem; padding: 1rem;
border-radius: 0.4rem; border-radius: 0.4rem;
color: var(--color-bg); color: var(--color-bg);
} }
.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 {
display: grid;
gap: 1rem;
padding: 0;
}
.link-card-grid {
display: grid;
gap: 1rem;
padding: 0;
}
</style> </style>