Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add eva.town badge! #473

Merged
merged 3 commits into from
Jun 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions src/components/BadgeBanner.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
import badge from "../content/badges/eva-town.png";
---

<div class="banner">
<div class="badge">
<img src={badge.src} width={88} alt="Eva Town badge" />
</div>
<div class="text">
Download my badge to link to this site, or check out the <a
href="/webrings#badges">badge collection</a
>. Let me know if you have a badge you want me to link to.
</div>
</div>

<style lang="scss">
.banner {
display: flex;
justify-content: center;
align-items: stretch;
margin-inline: auto;
border: 1px solid var(--gray-6);
border-radius: var(--radius-s);
margin-block-start: var(--space-xl);
font-size: var(--step--1);
color: var(--gray-11);
line-height: var(--line-height-snug);
overflow: hidden;

.badge {
flex-shrink: 0;
background: var(--gray-3);
padding: var(--space-s) var(--space-m);
display: flex;
align-items: center;
justify-content: center;
}

.text {
padding: var(--space-s) var(--space-m);
}
}
</style>
3 changes: 2 additions & 1 deletion src/components/Subscribe/Dialogue/Emote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ interface EmoteProps {
}

const color = {
outline: gray.gray1,
outline: gray.gray6,
highlight: gray.gray9,
dark: gray.gray12,
};
Expand Down Expand Up @@ -212,6 +212,7 @@ export const Emote = ({ emote, onEmoteClick }: EmoteProps) => {
viewBox="0 -0.5 48 48"
shapeRendering="crispEdges"
className="emote"
style={{ backgroundColor: color.outline }}
width="48"
height="48"
>
Expand Down
2 changes: 0 additions & 2 deletions src/components/Subscribe/Dialogue/dialogue.css
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,6 @@
aspect-ratio: 1;
user-select: none;
flex-shrink: 0;
box-shadow: 0 0 0 2px var(--gray-12);
background-color: var(--gray-12);
border-radius: var(--radius-xs);
transform: scale(-1, 1);
}
Expand Down
4 changes: 2 additions & 2 deletions src/content/badges/badges.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
- img: ./eva.gif
alt: EVA
- img: ./eva-town.png
alt: Eva Town
- img: ./queer-coded.gif
alt: Queer Coded
url: https://queercoded.dev/
Expand Down
Binary file added src/content/badges/eva-town.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/content/badges/eva.gif
Binary file not shown.
14 changes: 9 additions & 5 deletions src/content/pages/about/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@
title: About Eva
description: Pushing pixels (non-derogatory).
datePublished: 2023-10-03 01:03:55-04:00
dateModified: 2024-06-14 19:05:49
dateModified: 2024-06-26 02:08:14-04:00
ogImage: ./img1200.webp
---

import BadgeBanner from "../../../components/BadgeBanner.astro";

I began coding in the late 2000s, typing into a textarea of vBulletin for a Nintendo fan forum. Without syntax highlighting, `border-radius`, or `flexbox`, I'd spend hours exporting assets from Photoshop and laying out content in CSS.

Type a few characters, and suddenly every `button` changes colors on hover. (From blue to... a slightly different blue!) I thought this was the coolest thing in the world.
Expand All @@ -14,10 +16,12 @@ I still think coding is cool.

Most of my job titles have included the word "designer", but code is my medium and the browser is my favorite design tool. I believe that designing for the web means working _in the medium_ of the web—namely, HTML and CSS. Interactive mediums deserve interactive iteration.

I love the web, but when I need to think about gnarly problems, I take my sketchbook and my pen, I find a quiet place, and I write.
I love working digitally, but when I need to think about gnarly problems, I take my sketchbook and my pen, I find a quiet place to sit, and I write.

I currently work at [Scribe](https://scribehow.com) as a Senior Design Engineer. Previously, I spent time building things at [Cityblock](https://cityblock.com), [Dropbox](https://dropbox.com), and [Swiftype](https://swiftype.com). You can [download my resume here](/downloads/eva-decker-resume.pdf).

For the past three years, I've worked as a freelance designer and developer, embedding on teams to strengthen design systems. I try to help designers learn more about code, and I try to convince engineers they have better design instincts than they think. Sometimes I succeed.
In my free time I play piano and listen to city pop and noodle with synths. I like [reading](https://goodreads.com/evadecker) about urbanism, transit, and queer history. I'd like to have a non-digital garden one day—one with dirt.

Occasionally I play piano and listen to city pop and noodle with synths. I like [reading](https://goodreads.com/evadecker) about urbanism, transit, and queer history. I'd like to have a garden one day. I'm still a Nintendo fan.
Always open to chats and coffee in NYC. [Say hello!](mailto:hey@evadecker.com)

I'm **not** currently available for new freelance or full-time work, but you can still [download my resume](/downloads/eva-decker-resume.pdf). I'm always open to chats and coffee in NYC. Say hello!
<BadgeBanner />
2 changes: 1 addition & 1 deletion src/pages/webrings.astro
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const dateModified = new Date("2024-05-17 10:02:38-04:00");
</div>
</section>
</Center>
<section class="badge-section">
<section id="badges" class="badge-section">
<div class="badges">
{
badges.data.map((badge) => (
Expand Down
Loading