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>
<style>
nav {
margin-bottom: -1rem;
margin-bottom: -1rem;
}
nav a {

125
src/components/Card.astro
View file

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

25
src/components/Footer.astro
View file

@ -1,16 +1,19 @@
<footer>
<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>Missing old content? I moved <a href="https://classic.ayco.io">my previous site</a></li>
</ul>
<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>
Missing old content? I moved <a href="https://classic.ayco.io"
>my previous site</a>
</li>
</ul>
</footer>
<style>
footer {
color: #888;
font-size: small;
margin-top: 2em;
text-align: right;
}
footer {
color: #888;
font-size: small;
margin-top: 2em;
text-align: right;
}
</style>

119
src/pages/now.astro
View file

@ -1,68 +1,77 @@
---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import Footer from '../components/Footer.astro';
import Back from '../components/Back.astro';
import Layout from "../layouts/Layout.astro";
import Footer from "../components/Footer.astro";
import Back from "../components/Back.astro";
---
<Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main>
<Back url="/" />
<h1><span class="text-gradient">Now</span></h1>
<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>For work, I'm busy being a consultant, doing mostly frontend development.</p>
<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>
<main>
<Back url="/" />
<h1><span class="text-gradient">Now</span></h1>
<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>
For work, I'm busy being a consultant, doing mostly frontend development.
</p>
<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>
<style>
h1 {
margin: 2rem 0;
}
h1 {
margin: 2rem 0;
}
main {
margin: auto;
padding: 1em;
max-width: var(--content-width);
}
main {
margin: auto;
padding: 1em;
max-width: var(--content-width);
}
.text-gradient {
font-weight: 900;
background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite;
background-size: 500% 500%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position-y: 100%;
border-radius: 0.4rem;
}
.text-gradient {
font-weight: 900;
background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite;
background-size: 500% 500%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position-y: 100%;
border-radius: 0.4rem;
}
.highlighted-content {
line-height: 1.6;
margin: 1rem 0;
background: #4f39fa;
padding: 1rem;
border-radius: 0.4rem;
color: var(--color-bg);
}
.highlighted-content {
line-height: 1.6;
margin: 1rem 0;
background: #4f39fa;
padding: 1rem;
border-radius: 0.4rem;
color: var(--color-bg);
}
.highlighted-content code {
font-size: 0.875em;
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;
}
.link-card-grid {
display: grid;
gap: 1rem;
padding: 0;
}
.highlighted-content code {
font-size: 0.875em;
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;
}
.link-card-grid {
display: grid;
gap: 1rem;
padding: 0;
}
</style>

95
src/pages/social.astro
View file

@ -1,60 +1,59 @@
---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import Footer from '../components/Footer.astro';
import Back from '../components/Back.astro';
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import Footer from "../components/Footer.astro";
import Back from "../components/Back.astro";
---
<Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main>
<main>
<Back url="/" />
<h1>Social <span class="text-gradient">Links</span></h1>
<ul role="list" class="link-card-grid">
<Card
href="https://twitter.com/ayoayco/"
title="Twitter"
body="Tweets about my takes on technology and current events"
/>
<Card
href="https://www.linkedin.com/in/ayoayco/"
title="LinkedIn"
body="Connect with me and my professional network"
/>
<Card
href="https://soundcloud.com/ayoayco/"
title="SoundCloud"
body="Some music I made as a hobby"
/>
</ul>
<Footer />
</main>
<h1>Social <span class="text-gradient">Links</span></h1>
<ul role="list" class="link-card-grid">
<Card
href="https://twitter.com/ayoayco/"
title="Twitter"
body="Tweets about my takes on technology and current events"
/>
<Card
href="https://www.linkedin.com/in/ayoayco/"
title="LinkedIn"
body="Connect with me and my professional network"
/>
<Card
href="https://soundcloud.com/ayoayco/"
title="SoundCloud"
body="Some music I made as a hobby"
/>
</ul>
<Footer />
</main>
</Layout>
<style>
h1 {
margin: 2rem 0;
}
h1 {
margin: 2rem 0;
}
.highlighted-content {
line-height: 1.6;
margin: 1rem 0;
background: #4f39fa;
padding: 1rem;
border-radius: 0.4rem;
color: var(--color-bg);
}
.highlighted-content {
line-height: 1.6;
margin: 1rem 0;
background: #4f39fa;
padding: 1rem;
border-radius: 0.4rem;
color: var(--color-bg);
}
.highlighted-content code {
font-size: 0.875em;
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;
}
.link-card-grid {
display: grid;
gap: 1rem;
padding: 0;
}
.highlighted-content code {
font-size: 0.875em;
border: 0.1em solid var(--color-border);
border-radius: 4px;
padding: 0.15em 0.25em;
}
.link-card-grid {
display: grid;
gap: 1rem;
padding: 0;
}
</style>