Fun Side Projects card
This commit is contained in:
Ayo
parent
f767c367fb
commit
2b76508471
6 changed files with 125 additions and 17 deletions
20
src/components/Posts.astro
Normal file
20
src/components/Posts.astro
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
import Card from "./Card.astro";
|
||||
import type { AstroInstance } from "astro";
|
||||
|
||||
export interface Props {
|
||||
posts: AstroInstance[];
|
||||
title: string;
|
||||
}
|
||||
const { title, posts } = Astro.props;
|
||||
const postUrls: string[] = posts.map((post) => post.url || "");
|
||||
---
|
||||
|
||||
<h2>{title}</h2>
|
||||
{
|
||||
postUrls
|
||||
.filter((url) => url !== "")
|
||||
.map((url) => (
|
||||
<Card href={url} title={url?.replace("/now/and-then/", "")} body="" />
|
||||
))
|
||||
}
|
||||
0
src/layouts/Post.astro
Normal file
0
src/layouts/Post.astro
Normal file
|
|
@ -24,28 +24,29 @@ import Footer from "../components/Footer.astro";
|
|||
<main>
|
||||
<section class="cards-section">
|
||||
<ul role="list" class="cards-section__grid">
|
||||
<Card
|
||||
href="/showcase"
|
||||
title="Fun Side Projects"
|
||||
body="See demos of opensource side projects I created"
|
||||
/>
|
||||
<Card
|
||||
href="/social"
|
||||
title="Social"
|
||||
body="Connect with me on various social platforms"
|
||||
/>
|
||||
<Card
|
||||
newTab={true}
|
||||
href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
|
||||
title="CV / Resume"
|
||||
body="Download and peruse my skills and experience."
|
||||
body="Download and peruse my skills and experience"
|
||||
/>
|
||||
<Card
|
||||
newTab={true}
|
||||
href="https://github.com/ayoayco"
|
||||
title="Github"
|
||||
body="See my public projects over at Github."
|
||||
/>
|
||||
<Card
|
||||
href="/social"
|
||||
title="Social"
|
||||
body="Connect with me on various social platforms."
|
||||
/>
|
||||
<Card
|
||||
href="/showcase"
|
||||
title="UI Components"
|
||||
body="See demos of opensource components I created."
|
||||
body="See my public projects over at Github"
|
||||
/>
|
||||
|
||||
</ul>
|
||||
<Footer />
|
||||
</section>
|
||||
|
|
|
|||
74
src/pages/now/and-then/09-20-2022.astro
Normal file
74
src/pages/now/and-then/09-20-2022.astro
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import Footer from "../../../components/Footer.astro";
|
||||
import Back from "../../../components/Back.astro";
|
||||
---
|
||||
|
||||
<Layout title="Now | Ayo Ayco | Software Engineer + Web Developer">
|
||||
<main>
|
||||
<Back url="/now" />
|
||||
<h1><span class="text-gradient">Sep. 20, 2022</span></h1>
|
||||
<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>
|
||||
<Footer />
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.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";
|
||||
import Posts from "../../components/Posts.astro";
|
||||
|
||||
const posts = await Astro.glob("./and-then/*.astro");
|
||||
---
|
||||
|
||||
<Layout title="Now | Ayo Ayco | Software Engineer + Web Developer">
|
||||
|
|
@ -24,6 +27,9 @@ import Back from "../components/Back.astro";
|
|||
I have also found a renewed joy in exploring opensource projects in my
|
||||
spare time.
|
||||
</p>
|
||||
|
||||
<Posts posts={posts} title="...and then" />
|
||||
|
||||
<hr />
|
||||
<em><a href="https://nownownow.com/about">About now pages</a></em>
|
||||
<Footer />
|
||||
|
|
@ -5,11 +5,18 @@ import Card from "../../components/Card.astro";
|
|||
import Back from "../../components/Back.astro";
|
||||
---
|
||||
|
||||
<Layout title="UI Components | Ayo Ayco | Software Engineer + Web Developer">
|
||||
<Layout title="Fun Side Projects | Ayo Ayco | Software Engineer + Web Developer">
|
||||
<main>
|
||||
<Back url="/" />
|
||||
<h1>UI <span class="text-gradient">Components</span></h1>
|
||||
<h1>Fun <span class="text-gradient">Side Projects</span></h1>
|
||||
<ul role="list">
|
||||
<Card
|
||||
newTab
|
||||
href="https://kaboom.ayco.io"
|
||||
title="Kaboom!"
|
||||
body="A simple physics simulation with Matter.js 👨🏻🔬"
|
||||
/>
|
||||
|
||||
<Card
|
||||
href="/showcase/astro-reactive-form"
|
||||
title="Astro Reactive Form"
|
||||
|
|
|
|||
Loading…
Reference in a new issue