418 lines
13 KiB
HTML
418 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-astro-cid-sckkx6r4>
|
|
<head>
|
|
<title>Stuff: Smaller Building Blocks</title>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta name="generator" content="Astro v4.5.9" />
|
|
<meta name="theme-color" content="#3054bf" />
|
|
<meta
|
|
name="description"
|
|
content="See demos of side projects Ayo Ayco created"
|
|
/>
|
|
<meta name="author" content="Ayo Ayco" />
|
|
<meta name="origin" content="https://ayo.ayco.io/stuff/" />
|
|
<!-- Open Graph data -->
|
|
<meta property="og:site_name" content="Ayo Ayco" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://ayo.ayco.io/stuff/" />
|
|
<meta property="og:title" content="Stuff: Smaller Building Blocks" />
|
|
<meta
|
|
property="og:description"
|
|
content="See demos of side projects Ayo Ayco created"
|
|
/>
|
|
<meta property="og:image" content="/ayo.png" />
|
|
<link rel="me" href="https://ayos.blog" />
|
|
<link rel="me" href="https://social.ayco.io/@ayo" />
|
|
<link rel="me" href="https://metapixl.com/@ayo" />
|
|
<link rel="me" href="https://theres.life/@ayo" />
|
|
<link rel="shortcut icon" type="image/png" href="/static/favicon.ico" />
|
|
<script>
|
|
const title = document.title;
|
|
const defaultTitle =
|
|
"Ayo Ayco | Software Engineer, Web Developer, Consultant";
|
|
if (title) {
|
|
document.title = `${title} | ${defaultTitle}`;
|
|
}
|
|
</script>
|
|
<style>
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
* {
|
|
margin: 0;
|
|
}
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
background: #fff;
|
|
}
|
|
body {
|
|
line-height: 1.5;
|
|
letter-spacing: 0.25px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
img,
|
|
picture,
|
|
video,
|
|
canvas,
|
|
svg,
|
|
iframe {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
overflow-wrap: break-word;
|
|
}
|
|
#root,
|
|
#__next {
|
|
isolation: isolate;
|
|
}
|
|
nav[data-astro-cid-dmqpwcec] {
|
|
background: var(--ayo-gradient);
|
|
display: flex;
|
|
margin: 0 auto;
|
|
}
|
|
nav[data-astro-cid-dmqpwcec] a[data-astro-cid-dmqpwcec] {
|
|
display: inline-block;
|
|
text-decoration: underline;
|
|
color: var(--text-color-light);
|
|
padding: 0.5em 1em;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
nav[data-astro-cid-dmqpwcec] a[data-astro-cid-dmqpwcec]:hover {
|
|
color: var(--color-brand-complement);
|
|
}
|
|
nav[data-astro-cid-dmqpwcec]
|
|
a[data-astro-cid-dmqpwcec]
|
|
svg[data-astro-cid-dmqpwcec] {
|
|
width: 1.5rem;
|
|
}
|
|
#wrapper[data-astro-cid-dmqpwcec] {
|
|
flex: 1;
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
text-align: right;
|
|
}
|
|
@media only screen and (max-device-width: 360px) {
|
|
#wrapper[data-astro-cid-dmqpwcec] {
|
|
text-align: center;
|
|
}
|
|
nav[data-astro-cid-dmqpwcec] a[data-astro-cid-dmqpwcec] {
|
|
padding: 0.5em;
|
|
}
|
|
}
|
|
main {
|
|
margin: auto;
|
|
max-width: var(--content-width);
|
|
padding: 1em;
|
|
}
|
|
h1 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
h2 {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
code {
|
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
|
|
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
|
}
|
|
p,
|
|
img,
|
|
table,
|
|
ul {
|
|
margin: 1em 0;
|
|
font-size: var(--font-size-base);
|
|
}
|
|
.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;
|
|
}
|
|
a {
|
|
font-weight: 700;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
a {
|
|
color: var(--color-brand-complement);
|
|
}
|
|
}
|
|
:root {
|
|
--content-width: 700px;
|
|
--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
|
|
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
|
|
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
|
|
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
|
|
--color-border: hsl(17, 24%, 90%);
|
|
--color-link: var(--color-brand-blue-3);
|
|
--color-brand-blue-1: #3054bf;
|
|
--color-brand-blue-2: #203880;
|
|
--color-brand-blue-3: #416fff;
|
|
--color-brand-blue-4: #101c40;
|
|
--color-brand-blue-5: #3964e6;
|
|
--color-brand-complement: orange;
|
|
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
|
|
--text-color-dark: black;
|
|
--text-color-light: #f8f9fa;
|
|
--bg-dark: #343a40;
|
|
--bg-darker: #212529;
|
|
--bg-darkest: #000;
|
|
}
|
|
html,
|
|
body,
|
|
[data-astro-cid-sckkx6r4] {
|
|
font-family: system-ui, sans-serif;
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-color-dark);
|
|
background-color: var(--text-color-light);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
html,
|
|
body,
|
|
[data-astro-cid-sckkx6r4] {
|
|
background: var(--bg-darker);
|
|
color: var(--text-color-light);
|
|
}
|
|
}
|
|
@keyframes pulse {
|
|
0%,
|
|
to {
|
|
background-position-y: 0%;
|
|
}
|
|
50% {
|
|
background-position-y: 80%;
|
|
}
|
|
}
|
|
footer[data-astro-cid-sz7xmlte] {
|
|
margin-top: 1em;
|
|
text-align: right;
|
|
}
|
|
footer[data-astro-cid-sz7xmlte] ul[data-astro-cid-sz7xmlte] {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
:root {
|
|
--link-gradient: linear-gradient(
|
|
45deg,
|
|
var(--color-brand-blue-1),
|
|
var(--color-brand-blue-3) 30%,
|
|
var(--color-border) 60%
|
|
);
|
|
}
|
|
.link-card[data-astro-cid-dohjnao5] {
|
|
list-style: none;
|
|
display: flex;
|
|
padding: 0.15rem;
|
|
background-size: 400%;
|
|
border-radius: 0.5rem;
|
|
background-position: 100%;
|
|
background-image: var(--link-gradient);
|
|
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.link-card[data-astro-cid-dohjnao5] > a[data-astro-cid-dohjnao5] {
|
|
width: 100%;
|
|
text-decoration: none;
|
|
padding: 1em 1.3em;
|
|
border-radius: 0.35rem;
|
|
background-color: #fff;
|
|
color: var(--text-color-dark);
|
|
}
|
|
h2[data-astro-cid-dohjnao5] {
|
|
margin: 0;
|
|
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
p[data-astro-cid-dohjnao5] {
|
|
font-weight: 400;
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0;
|
|
}
|
|
h2[data-astro-cid-dohjnao5] span[data-astro-cid-dohjnao5] {
|
|
display: inline-block;
|
|
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.link-card[data-astro-cid-dohjnao5]:is(:hover, :focus-within) {
|
|
background-position: 0;
|
|
}
|
|
.link-card[data-astro-cid-dohjnao5]:is(:hover, :focus-within)
|
|
h2[data-astro-cid-dohjnao5]
|
|
span[data-astro-cid-dohjnao5] {
|
|
will-change: transform;
|
|
transform: translate(2px);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.link-card[data-astro-cid-dohjnao5] > a[data-astro-cid-dohjnao5] {
|
|
background-color: var(--bg-dark);
|
|
color: var(--text-color-light);
|
|
}
|
|
}
|
|
ul[data-astro-cid-2zbi74ef] {
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 1rem;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-astro-cid-sckkx6r4>
|
|
<nav data-astro-cid-dmqpwcec>
|
|
<div id="wrapper" data-astro-cid-dmqpwcec>
|
|
<a href="/" data-astro-cid-dmqpwcec>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
data-astro-cid-dmqpwcec
|
|
astro-icon="mdi:home"
|
|
>
|
|
<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
|
</svg>
|
|
home </a
|
|
><a href="https://ayos.blog" data-astro-cid-dmqpwcec>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
data-astro-cid-dmqpwcec
|
|
astro-icon="mdi:blog"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M3 3v18h18V3zm15 15H6v-1h12zm0-2H6v-1h12zm0-4H6V6h12z"
|
|
/>
|
|
</svg>
|
|
blog </a
|
|
><a href="https://ayco.io/@ayo" data-astro-cid-dmqpwcec>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
data-astro-cid-dmqpwcec
|
|
astro-icon="mdi:mastodon"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M20.94 14c-.28 1.41-2.44 2.96-4.97 3.26-1.31.15-2.6.3-3.97.24-2.25-.11-4-.54-4-.54v.62c.32 2.22 2.22 2.35 4.03 2.42 1.82.05 3.44-.46 3.44-.46l.08 1.65s-1.28.68-3.55.81c-1.25.07-2.81-.03-4.62-.5-3.92-1.05-4.6-5.24-4.7-9.5l-.01-3.43c0-4.34 2.83-5.61 2.83-5.61C6.95 2.3 9.41 2 11.97 2h.06c2.56 0 5.02.3 6.47.96 0 0 2.83 1.27 2.83 5.61 0 0 .04 3.21-.39 5.43M18 8.91c0-1.08-.3-1.91-.85-2.56-.56-.63-1.3-.96-2.23-.96-1.06 0-1.87.41-2.42 1.23l-.5.88-.5-.88c-.56-.82-1.36-1.23-2.43-1.23-.92 0-1.66.33-2.23.96C6.29 7 6 7.83 6 8.91v5.26h2.1V9.06c0-1.06.45-1.62 1.36-1.62 1 0 1.5.65 1.5 1.93v2.79h2.07V9.37c0-1.28.5-1.93 1.51-1.93.9 0 1.35.56 1.35 1.62v5.11H18z"
|
|
/>
|
|
</svg>
|
|
social </a
|
|
><a href="https://metapixl.com/i/portfolio/ayo" data-astro-cid-dmqpwcec>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
data-astro-cid-dmqpwcec
|
|
astro-icon="mdi:image"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="m8.5 13.5 2.5 3 3.5-4.5 4.5 6H5m16 1V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2"
|
|
/>
|
|
</svg>
|
|
photos </a
|
|
><a href="https://www.npmjs.com/~aayco" data-astro-cid-dmqpwcec>
|
|
<svg viewBox="0 0 24 24" data-astro-cid-dmqpwcec astro-icon="gg:npm">
|
|
<path
|
|
fill="currentColor"
|
|
fill-rule="evenodd"
|
|
d="M5 21a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2zm1-3V6h12v12h-3V9h-3v9z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
npm
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<main data-astro-cid-2zbi74ef>
|
|
<h1 class="text-gradient" data-astro-cid-2zbi74ef>Stuff</h1>
|
|
<p data-astro-cid-2zbi74ef>
|
|
Because software is not just a huge pile of code, but a combination of
|
|
small, reusable stuff...
|
|
</p>
|
|
<ul data-astro-cid-2zbi74ef>
|
|
<li class="link-card" data-astro-cid-dohjnao5>
|
|
<a
|
|
href="https://ayco.io/n/web-component-base"
|
|
target="_blank"
|
|
data-astro-cid-dohjnao5
|
|
>
|
|
<h2 data-astro-cid-dohjnao5>
|
|
Web Component Base
|
|
<span data-astro-cid-dohjnao5> ↗</span>
|
|
</h2>
|
|
<p data-astro-cid-dohjnao5>
|
|
This provides a minimal vanilla JS base class that aims to reduce
|
|
the complexity of creating reactive custom elements.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="link-card" data-astro-cid-dohjnao5>
|
|
<a
|
|
href="https://ayco.io/n/@ayco/astro-resume"
|
|
target="_blank"
|
|
data-astro-cid-dohjnao5
|
|
>
|
|
<h2 data-astro-cid-dohjnao5>
|
|
Astro Resume <span data-astro-cid-dohjnao5> ↗</span>
|
|
</h2>
|
|
<p data-astro-cid-dohjnao5>
|
|
Utilities for serializing data from server for use in the client
|
|
with types preserved across components.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="link-card" data-astro-cid-dohjnao5>
|
|
<a
|
|
href="https://ayco.io/n/generate-timezone-json"
|
|
target="_blank"
|
|
data-astro-cid-dohjnao5
|
|
>
|
|
<h2 data-astro-cid-dohjnao5>
|
|
Time Zone JSON Generator
|
|
<span data-astro-cid-dohjnao5> ↗</span>
|
|
</h2>
|
|
<p data-astro-cid-dohjnao5>
|
|
Generate a JSON file containing time zones from the official IANA
|
|
Database or your own zone.tab file
|
|
</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<footer data-astro-cid-sz7xmlte>
|
|
<ul style="list-style: none" data-astro-cid-sz7xmlte>
|
|
<li data-astro-cid-sz7xmlte>
|
|
© 2022-2024 <strong data-astro-cid-sz7xmlte>Ayo Ayco</strong>.
|
|
All Rights Reserved
|
|
</li>
|
|
<li data-astro-cid-sz7xmlte>
|
|
This website
|
|
<a
|
|
href="https://ayos.blog/stopped-tracking-on-my-sites"
|
|
data-astro-cid-sz7xmlte
|
|
>does not track users</a
|
|
>
|
|
</li>
|
|
<li data-astro-cid-sz7xmlte>
|
|
See the
|
|
<a
|
|
href="https://ayco.io/sh/ayco.io-flask/tree"
|
|
data-astro-cid-sz7xmlte
|
|
>source code</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|