updates to now page and highlighted links
This commit is contained in:
Ayo
parent
d8a42ec0a8
commit
d344350285
6 changed files with 103 additions and 41 deletions
|
|
@ -3,6 +3,7 @@ import Icon from "astro-icon";
|
|||
export type Link = {
|
||||
url: string;
|
||||
icon: string;
|
||||
text?: string;
|
||||
};
|
||||
|
||||
export interface Props {
|
||||
|
|
@ -26,7 +27,7 @@ if (Astro.url.pathname !== "/") {
|
|||
.filter((link) => link.url !== "")
|
||||
.map((link) => (
|
||||
<a href={link.url}>
|
||||
<Icon pack="mdi" name={link.icon} /> {link.icon}
|
||||
<Icon pack="mdi" name={link.icon} /> {link.text ?? link.icon}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const links: Link[] = [
|
|||
icon: "mastodon",
|
||||
},
|
||||
{
|
||||
url: "https://ayco.io/github",
|
||||
url: "https://ayco.io/gh",
|
||||
icon: "github",
|
||||
},
|
||||
];
|
||||
|
|
@ -56,17 +56,13 @@ const links: Link[] = [
|
|||
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
|
||||
}
|
||||
|
||||
html {
|
||||
html, body, * {
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
|
|
|
|||
|
|
@ -20,14 +20,12 @@ import Footer from "../components/Footer.astro";
|
|||
<ul role="list">
|
||||
<li>👨🏻💻 Software Extraordinaire</li>
|
||||
<li>🕵🏻♂️ Frontend Detective</li>
|
||||
<li>
|
||||
🚀 Building <a href="https://astro-reactive.dev">Astro Reactive</a>
|
||||
</li>
|
||||
<li>🦌 Contributing to <a href="https://elk.zone">Elk</a></li>
|
||||
<li>🧙♂️ <a href="https://ayco.io/gh">Opensourcerer</a> Wannabe</li>
|
||||
<li>🧸 <a href="https://ayco.io/gh/cozy">Cozy</a> Dev Avocado</li>
|
||||
</ul>
|
||||
<a href="/now" class="now-wrapper">
|
||||
<span class="now-label">Now</span>
|
||||
<span class="status">The Fediverse and Other Passion Projects</span>
|
||||
<span class="status">Building a Cozy Web without borders...</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,23 +38,12 @@ import Footer from "../components/Footer.astro";
|
|||
title="Fun Side Projects"
|
||||
body="See demos of opensource side projects I created"
|
||||
/>
|
||||
<Card
|
||||
href="/social"
|
||||
title="Social Links"
|
||||
body="Connect with me on various social platforms"
|
||||
/>
|
||||
<Card
|
||||
newTab={true}
|
||||
href="/cv"
|
||||
title="CV / Resume"
|
||||
body="Download and peruse my skills and experience"
|
||||
/>
|
||||
<Card
|
||||
newTab={true}
|
||||
href="/github"
|
||||
title="Github"
|
||||
body="See my public projects over at Github"
|
||||
/>
|
||||
</ul>
|
||||
<Footer />
|
||||
</section>
|
||||
|
|
@ -110,7 +97,7 @@ import Footer from "../components/Footer.astro";
|
|||
|
||||
.highlighted-section__content {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
padding: 1em 0;
|
||||
max-width: var(--content-width);
|
||||
font-weight: normal;
|
||||
font-size: var(--font-size-lg);
|
||||
|
|
@ -120,7 +107,7 @@ import Footer from "../components/Footer.astro";
|
|||
.highlighted-section__content__profile-picture {
|
||||
float: right;
|
||||
width: 20%;
|
||||
margin: 20px 0 0;
|
||||
margin: 1em 1em 0 0;
|
||||
border: 1px solid var(--color-brand-blue-1);
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
|
|
@ -184,6 +171,9 @@ import Footer from "../components/Footer.astro";
|
|||
}
|
||||
|
||||
@media only screen and (min-device-width: 280px) and (max-device-width: 653px) {
|
||||
.highlighted-section__content {
|
||||
padding: 1em;
|
||||
}
|
||||
.highlighted-section__content__profile-picture {
|
||||
float: none;
|
||||
margin: 0;
|
||||
|
|
@ -195,6 +185,9 @@ import Footer from "../components/Footer.astro";
|
|||
}
|
||||
|
||||
@media only screen and (min-device-width: 360px) and (max-device-width: 812px) {
|
||||
.highlighted-section__content {
|
||||
padding: 1em;
|
||||
}
|
||||
.highlighted-section__content ul li {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
|
|
|||
71
src/pages/now.astro
Normal file
71
src/pages/now.astro
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import Posts from "../components/Posts.astro";
|
||||
|
||||
const posts = await Astro.glob("./now/and-then/posts/*.astro");
|
||||
---
|
||||
|
||||
<Layout title="Now" description="What is Ayo Ayco currently up to?">
|
||||
<main>
|
||||
<h1><span class="text-gradient">Now</span></h1>
|
||||
<em>What am I currently up to?</em>
|
||||
<p>
|
||||
Recently started a new project that aims to be a modern-day reading assistant, called <a href="https://ayco.io/gh/cozy">Cozy 🧸</a>.
|
||||
</p>
|
||||
<p>
|
||||
The full motivation as of the moment, I've written on <a href="https://ayos.blog/building-a-cozy-web/">my blog</a>.
|
||||
</p>
|
||||
<p>
|
||||
Also started exploring ways to interact on the web without being confined on a centralized solution that big tech companies have lured us into.
|
||||
</p>
|
||||
<p>
|
||||
I mean protocols that allow websites and people to exchange messages with each other without borders, like <a href="https://www.w3.org/TR/webmention/">webmention</a>, <a href="https://www.w3.org/TR/activitypub/">activitypub</a>, and the likes.
|
||||
</p>
|
||||
<Posts posts={posts} title="Previously..." />
|
||||
<hr />
|
||||
<em><a href="https://nownownow.com/about">About now pages</a></em>
|
||||
<Footer />
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
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 {
|
||||
margin: 1rem 0;
|
||||
background: #4f39fa;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.highlighted-content code {
|
||||
font-size: var(--font-size-base);
|
||||
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,18 +1,15 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Footer from "../../components/Footer.astro";
|
||||
import Posts from "../../components/Posts.astro";
|
||||
|
||||
const posts = await Astro.glob("./and-then/posts/*.astro");
|
||||
import Layout from "../../../../layouts/Layout.astro";
|
||||
import Footer from "../../../../components/Footer.astro";
|
||||
const title = "The Fediverse and Other Passion Projects";
|
||||
const description = "I have been living now in Amsterdam for a little over a year with my wife and son."
|
||||
---
|
||||
|
||||
<Layout title="Now" description="What is Ayo Ayco currently up to?">
|
||||
<Layout title={title} description={description}>
|
||||
<main>
|
||||
<h1><span class="text-gradient">Now</span></h1>
|
||||
<em>What am I currently up to?</em>
|
||||
<h1><span class="text-gradient">The Fediverse and Other Passion Projects</span></h1>
|
||||
<p>
|
||||
I have been living now in Amsterdam for a little over a year with my wife
|
||||
and son.
|
||||
I have been living now in Amsterdam for a little over a year with my wife and son.
|
||||
</p>
|
||||
<p>
|
||||
I am employed as a frontend web developer by <a
|
||||
|
|
@ -43,9 +40,6 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
|
|||
>Kaboom!</a
|
||||
>
|
||||
</p>
|
||||
<Posts posts={posts} title="Previously..." />
|
||||
<hr />
|
||||
<em><a href="https://nownownow.com/about">About now pages</a></em>
|
||||
<Footer />
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Footer from "../../components/Footer.astro";
|
||||
import Card from "../../components/Card.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
---
|
||||
|
||||
<Layout
|
||||
|
|
@ -10,7 +10,14 @@ import Card from "../../components/Card.astro";
|
|||
>
|
||||
<main>
|
||||
<h1>Fun <span class="text-gradient">Side Projects</span></h1>
|
||||
<p>See more of my previous projects at <a href="https://ayos.blog/projects">my blog</a>.</p>
|
||||
<ul role="list">
|
||||
<Card
|
||||
newTab
|
||||
href="https://cozy-reader.netlify.app"
|
||||
title="Cozy 🧸"
|
||||
body="Your modern-day reading assistant"
|
||||
/>
|
||||
<Card
|
||||
newTab
|
||||
href="https://kaboom.ayco.io"
|
||||
Loading…
Reference in a new issue