From a2a805a8b229fe6576122e354d34a3ab1ea9f99a Mon Sep 17 00:00:00 2001
From: juancmandev <juancmandev@protonmail.com>
Date: Fri, 14 Mar 2025 20:49:21 -0600
Subject: [PATCH] Update contact, add donate page

---
 public/monero-address.png                     | Bin 0 -> 7547 bytes
 ...e0fe0b452a2fb48511be1b9fb094f3c57bae57.asc |  14 ++++++++++
 src/components/footer.tsx                     |   2 +-
 src/components/header.astro                   |   4 +--
 src/components/navigation.tsx                 |   7 ++++-
 src/components/ui/button.tsx                  |   2 +-
 src/content/pages/en/contact.mdx              |  25 ++++++-----------
 src/content/pages/en/donate.mdx               |  14 ++++++++++
 src/content/pages/es/contacto.mdx             |  26 ++++++------------
 src/content/pages/es/donar.mdx                |  14 ++++++++++
 src/i18n/ui.ts                                |   4 +++
 src/layouts/Layout.astro                      |   2 +-
 src/pages/404.astro                           |   2 +-
 src/pages/[...slug].astro                     |   2 +-
 src/pages/blog/[...slug].astro                |   2 +-
 src/pages/blog/index.astro                    |   2 +-
 src/pages/es/[...slug].astro                  |   2 +-
 src/pages/es/blog/[...slug].astro             |   2 +-
 src/pages/es/blog/index.astro                 |   2 +-
 src/pages/es/index.astro                      |   2 +-
 src/pages/es/videos/[...slug].astro           |   2 +-
 src/pages/es/videos/index.astro               |   2 +-
 src/pages/index.astro                         |   2 +-
 src/pages/microblog.astro                     |   2 +-
 src/styles/globals.css                        |   7 +++--
 25 files changed, 89 insertions(+), 56 deletions(-)
 create mode 100644 public/monero-address.png
 create mode 100644 public/publickey.contact@juancman.dev-80e0fe0b452a2fb48511be1b9fb094f3c57bae57.asc
 create mode 100644 src/content/pages/en/donate.mdx
 create mode 100644 src/content/pages/es/donar.mdx

diff --git a/public/monero-address.png b/public/monero-address.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d5bfb0e2790fc0f075b612249f5da5a94450299
GIT binary patch
literal 7547
zcmeI0!D`fC6oqdXF|^RebxX-!-yuP1u>~nb3hK^B5L~!0FoRk30bIFo<<_;!4EO>r
zT?oM!Fe}L-<oew|Nk?q$LKyF6!c0?g3OPOZ{O8{Pzc@R6xU;>tEh0N7$A^!(H};KY
z{Jiz<^%rip&mNs0aaYw3U*CV@x2+e)&t8h`eztG)_TKKk$ie=};r;WcThX0^AK&e7
zZ@4z_wc>1K`A1pIvNP3%30U?bX)6*}JWN!1wqDrY$*0z3Q)J0P;y%?S565?V!mT9m
zTBI@BL=6h{X}oMC9jUp)t)vn)^D2SjQm;_+gejXuy2xZ+OD0#SIl*S8T08hC9$ScH
zSG?v0+Y+qX!VJbTDC;&$|6GDjFrul}?F@sdR!ONW2R`ANBG(CS2&y5tSOb|9spPd1
zTq)!%xLn~#yEHDf&6^pSDs8T;gfIpKYK}0$j=?BsPm;lM5R4R_;(mRwV(LP8H^Eg%
zNQbn|tcc;=-Y~6i&eBV?M}l}+qfj??L8ImelL``dqCM&jnM%K$jZM;`-wie%p-FPD
zP)l+}Kw@?%s3%NdVQ!Qe`!_~w>6a5VN4SBCnJEOSd5v_yYl~^(@`OpLxe`>|i=1Z3
zMUEEJ)Z+=8u@o}2p)O)<q=In|+revy>IU1iqjk*3vflEHS+QE>nkPJjnQBYRA!=)h
zY93wY+FD`B5|&_ydmB|L9zB}C7)EG1q8r>W0op86o4LhkFmZ*3ICMczn4N{zHqKzG
zr3Dsd>Z#mn<KYIIEOlIBBBFu78iK1!$0g_t!(%~k!HZOABdhJ@b`5G?Fli9xW;#zZ
zHv#b)ooE^cec{lwS)sW}XU)<2V>zu*i(1Pw2e=8UvHzx^CY({Dl`{p6E7U}Ff&(RZ
zAP*Z3c5XQ}U3DT)m=#HrWG4wVQ;5oi(REa9t+2Tz4NDI*Q8W&7tP7f>s9NI*hvC2)
zG+c;z>(zvVnQGW7+U(#1!vJRwDs?$Nx4plvnxrE<9Q_5Anz_xVY_P*&4xFr@C`dGz
zi2omk0-Y!nw5;$P9nw_${ov3G4kv@wBpG!EmNrlqC^jBT*zVF1W(tD}{ks#q7NUJM
zTCf>$ghO~RD3Tvm+lna&s^+yIsuK(aGS#|Zusl;f2X)wQq~;0R5)Auqq$2sDWCs|R
s1KB!Z{_VeB=Jgw{4ScOQ8(FTE<<pb--JchGuQ0Qm9GxD1eDM6uFW_UFmjD0&

literal 0
HcmV?d00001

diff --git a/public/publickey.contact@juancman.dev-80e0fe0b452a2fb48511be1b9fb094f3c57bae57.asc b/public/publickey.contact@juancman.dev-80e0fe0b452a2fb48511be1b9fb094f3c57bae57.asc
new file mode 100644
index 0000000..6bf1dd9
--- /dev/null
+++ b/public/publickey.contact@juancman.dev-80e0fe0b452a2fb48511be1b9fb094f3c57bae57.asc
@@ -0,0 +1,14 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+xjMEZQiCxhYJKwYBBAHaRw8BAQdAKsyJoNrC9MIIih/2f+x2jFXe2EW+ufeN
+lIOE0wUbcFbNK2NvbnRhY3RAanVhbmNtYW4uZGV2IDxjb250YWN0QGp1YW5j
+bWFuLmRldj7CjAQQFgoAPgWCZQiCxgQLCQcICZCfsJTzxXuuVwMVCAoEFgAC
+AQIZAQKbAwIeARYhBIDg/gtFKi+0hRG+G5+wlPPFe65XAAAnYAD/conTgzwr
+wtm67uDfpSqauckqEEbiS3kCpVAMDptlc5kBAMp5qzA0RrHWwAtliwjckGta
+Je8cmSNneuO2CmwF0yoHzjgEZQiCxhIKKwYBBAGXVQEFAQEHQM2jOtm0nD9e
+Gj88A9FDxXir8tCxpM+g9FlxeTKrJuJ5AwEIB8J4BBgWCAAqBYJlCILGCZCf
+sJTzxXuuVwKbDBYhBIDg/gtFKi+0hRG+G5+wlPPFe65XAABRXQEA56u9jKY5
+ut2tlCJyauN9llxYwp45cyJNvUdoV/QaKhsBALN7snvKxUGqDoxyQi3LpEKE
+uNjlRcRwNYo3k71qw3YK
+=mkZ4
+-----END PGP PUBLIC KEY BLOCK-----
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index b2a9067..0168988 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 export default function Footer({ lang }: Props) {
   return (
-    <footer className='px-2 pt-14 pb-28 text-center lg:px-0 prose prose-invert min-w-full'>
+    <footer className='px-2 pt-14 pb-28 text-center md:px-0 prose prose-invert min-w-full'>
       <section>
         <p>
           {footerLocales[lang].built_with}
diff --git a/src/components/header.astro b/src/components/header.astro
index 946c800..8291aa4 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -28,9 +28,9 @@ const { lang } = Astro.props;
 ---
 
 <header
-  class='py-2 px-2 lg:px-0 fixed top-0 z-50 flex w-full items-center justify-between border-b border-secondary backdrop-blur-lg'
+  class='py-2 px-2 md:px-0 fixed top-0 z-50 flex w-full items-center justify-between border-b border-secondary backdrop-blur-lg'
 >
-  <div class='w-full max-w-[800px] mx-auto flex items-center justify-between'>
+  <div class='w-full max-w-3xl mx-auto flex items-center justify-between'>
     <section class='flex max-w-max'>
       <LinkButton
         href={lang === 'en' ? '/' : '/es'}
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index d4f35e8..b18908a 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -6,6 +6,7 @@ import {
   PocketKnife,
   Info,
   Mail,
+  CircleDollarSign,
 } from 'lucide-react';
 import { useTranslations, type lang } from '@/i18n/utils';
 
@@ -39,6 +40,10 @@ export const navItems: TNavItem[] = [
     type: 'contact',
     icon: <Mail />,
   },
+  {
+    type: 'donate',
+    icon: <CircleDollarSign />
+  }
 ];
 
 type Props = {
@@ -49,7 +54,7 @@ export default function Navigation(props: Props) {
   const t = useTranslations(props.lang as any);
 
   return (
-    <nav className='prose prose-invert max-w-[800px] mx-auto px-2 lg:px-0 py-16'>
+    <nav className='prose prose-invert max-w-3xl mx-auto px-2 md:px-0 py-16'>
       <h2 id='navigation'>{t('navigation')}</h2>
       <ul className='list-none p-0 flex flex-wrap gap-4'>
         {navItems.map((navItem, index) => (
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8deeeb1..e2f2153 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -21,7 +21,7 @@ const buttonVariants = cva(
       size: {
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
+        md: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
       },
     },
diff --git a/src/content/pages/en/contact.mdx b/src/content/pages/en/contact.mdx
index 125bec3..7a8caed 100644
--- a/src/content/pages/en/contact.mdx
+++ b/src/content/pages/en/contact.mdx
@@ -7,22 +7,7 @@ description:
 
 # Contact
 
-You can contact me if:
-
-- Just say hi
-- You want to contract me
-- Ask me about a tool that I use or some topic
-
-Please, consider that:
-
-- I won't work for free
-- I won't work on your startup idea, and I'll just get equity in return (I can't
-  pay my bills with lottery tickets)
-- I won't work for you and get "exposure" (I can't pay my bills with exposure)
-- I won't communicate via phone number; all communication must be via email (we
-  can use Discord, Slack, etc. once you hire me).
-
-## My email
+## Email
 
 Just change `[at]` for `@` and `[dot]` for `.`. This is for preventing web
 crawlers from getting my email:
@@ -31,9 +16,15 @@ crawlers from getting my email:
 contact[at]juancman[dot]dev
 ```
 
+You may [download my PGP key](/publickey.contact@juancman.dev-80e0fe0b452a2fb48511be1b9fb094f3c57bae57.asc) to validate my emails.
+
 ## Social media
 
-You can send me a direct message:
+If you want to talk about contracting me, you may check my career:
 
 - [LinkedIn](https://www.linkedin.com/in/juancmandev)
+
+You may check my GitHub, but I have also my own Gitea instance:
+
 - [GitHub](https://github.com/juancmandev)
+- [Gitea](https://git.juancman.dev/juancmandev)
diff --git a/src/content/pages/en/donate.mdx b/src/content/pages/en/donate.mdx
new file mode 100644
index 0000000..a04587c
--- /dev/null
+++ b/src/content/pages/en/donate.mdx
@@ -0,0 +1,14 @@
+---
+title: Donate
+description: Support me if you like my stuff!
+---
+
+# Donate
+
+Support me if you like my stuff!
+
+## Crypto
+
+Decentralized money!
+
+- **Monero**: `8AXTKuv3oNg9tS6t5cSiu3Ec7LeLriXkqKURGhkq6AxfipX8ghvEnm4dDAbRfPVzB4gjGG9oR9Dng4yMr8ndAoN8FT3nYo6` [QR Code](/monero-address.png)
diff --git a/src/content/pages/es/contacto.mdx b/src/content/pages/es/contacto.mdx
index 83b227b..9b6e88b 100644
--- a/src/content/pages/es/contacto.mdx
+++ b/src/content/pages/es/contacto.mdx
@@ -7,23 +7,7 @@ description:
 
 # Contacto
 
-Puedes contactarme si:
-
-- Solo quieres decirme "hola"
-- Quieres contratarme
-- Preguntarme sobre alguna herramienta que utilizo o sobre algún tema
-
-Por favor, considera que:
-
-- No trabajo gratis
-- No trabajaré en tu idea de startup a cambio de equity (no puedo pagar mis
-  facturas con tickets de lotería)
-- No trabajaré a cambio de "exposición" (no puedo pagar mis facturas con
-  exposición)
-- No me comunicaré via número telefónico, toda comunicación debe ser via email
-  (podemos usar Discord, Slack, etc. una vez me contrates)
-
-## Mi email
+## Email
 
 Solo cambia `[at]` por `@` y `[dot]` por `.`. Esto es para evitar que web
 crawlers obtengan mi email.
@@ -32,9 +16,15 @@ crawlers obtengan mi email.
 contact[at]juancman[dot]dev
 ```
 
+Puedes [descargar mi PGP key](/publickey.contact@juancman.dev-80e0fe0b452a2fb48511be1b9fb094f3c57bae57.asc) para validar mis emails.
+
 ## Redes sociales
 
-Puedes enviarme un mensaje en:
+Si quieres hablar sobre contratarme, puedes revisar mi carrera:
 
 - [LinkedIn](https://www.linkedin.com/in/juancmandev)
+
+Puedes revisar mi GitHub, aunque igual tengo mi propia instancia de Gitea:
+
 - [GitHub](https://github.com/juancmandev)
+- [Gitea](https://git.juancman.dev/juancmandev)
diff --git a/src/content/pages/es/donar.mdx b/src/content/pages/es/donar.mdx
new file mode 100644
index 0000000..fb5ee92
--- /dev/null
+++ b/src/content/pages/es/donar.mdx
@@ -0,0 +1,14 @@
+---
+title: Donar
+description: ¡Apóyame si te gusta lo que hago!
+---
+
+# Donar
+
+¡Apóyame si te gusta lo que hago!
+
+## Cripto
+
+¡Dinero decentralizado!
+
+- **Monero**: `8AXTKuv3oNg9tS6t5cSiu3Ec7LeLriXkqKURGhkq6AxfipX8ghvEnm4dDAbRfPVzB4gjGG9oR9Dng4yMr8ndAoN8FT3nYo6` [Código QR](/monero-address.png)
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 325edd6..abd3a3d 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -23,6 +23,8 @@ export const ui = {
     'about.to': '/about',
     'contact.label': 'Contact',
     'contact.to': '/contact',
+    'donate.label': 'Donate',
+    'donate.to': '/donate',
   },
   es: {
     navigation: 'Navegación',
@@ -40,5 +42,7 @@ export const ui = {
     'about.to': '/es/acerca-de',
     'contact.label': 'Contacto',
     'contact.to': '/es/contacto',
+    'donate.label': 'Donar',
+    'donate.to': '/es/donar',
   },
 } as const;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 112abf7..392e5ac 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -63,7 +63,7 @@ const { title, description } = Astro.props;
   </head>
   <body>
     <Header lang={lang} />
-    <main class='width-global px-2 lg:px-0 pt-32'>
+    <main class='max-w-3xl mx-auto px-2 md:px-0 pt-20 md:pt-32'>
       <slot />
     </main>
     <Navigation lang={lang} />
diff --git a/src/pages/404.astro b/src/pages/404.astro
index e614a12..43d6d1a 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -6,7 +6,7 @@ import Layout from '@/layouts/Layout.astro';
   title='Not found'
   description='Error 404: Not found.'
 >
-  <div class='prose prose-invert max-w-[800px] mx-auto'>
+  <div class='prose prose-invert max-w-3xl mx-auto'>
     <h1 class=''>Error 404: Not found</h1>
   </div>
 </Layout>
diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro
index ca9e3b3..be4e164 100644
--- a/src/pages/[...slug].astro
+++ b/src/pages/[...slug].astro
@@ -32,7 +32,7 @@ const { Content, remarkPluginFrontmatter: data } = await render(project);
   title={data.title}
   description={data.description}
 >
-  <article class='prose prose-invert max-w-[800px] mx-auto'>
+  <article class='prose prose-invert max-w-3xl mx-auto'>
     <Content components={{ ...components }} />
   </article>
 </Layout>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 36106b2..3ead2e8 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -36,7 +36,7 @@ const { Content, remarkPluginFrontmatter: data } = await render(post);
   title={data.title}
   description={data.description}
 >
-  <article class='prose prose-invert max-w-[800px] mx-auto'>
+  <article class='prose prose-invert max-w-3xl mx-auto'>
     <h1>{data.title}</h1>
     <Content components={{ ...components }} />
     <hr />
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 1037c95..b45f0b7 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -27,7 +27,7 @@ const lang = getLangFromUrl(Astro.url);
 ---
 
 <Layout {...pageData}>
-  <div class='prose prose-invert max-w-[800px] mx-auto'>
+  <div class='prose prose-invert max-w-3xl mx-auto'>
     <h1>{pageData.title}</h1>
     <p>{pageData.description}</p>
     <PostItemList
diff --git a/src/pages/es/[...slug].astro b/src/pages/es/[...slug].astro
index 83241bb..ccaffb2 100644
--- a/src/pages/es/[...slug].astro
+++ b/src/pages/es/[...slug].astro
@@ -32,7 +32,7 @@ const { Content, remarkPluginFrontmatter: data } = await render(page);
   title={data.title}
   description={data.description}
 >
-  <article class='prose prose-invert max-w-[800px] mx-auto'>
+  <article class='prose prose-invert max-w-3xl mx-auto'>
     <Content components={{ ...components }} />
   </article>
 </Layout>
diff --git a/src/pages/es/blog/[...slug].astro b/src/pages/es/blog/[...slug].astro
index d11902e..aa9aba2 100644
--- a/src/pages/es/blog/[...slug].astro
+++ b/src/pages/es/blog/[...slug].astro
@@ -36,7 +36,7 @@ const { Content, remarkPluginFrontmatter: data } = await render(blog);
   title={data.title}
   description={data.description}
 >
-  <article class='prose prose-invert max-w-[800px] mx-auto'>
+  <article class='prose prose-invert max-w-3xl mx-auto'>
     <h1>{data.title}</h1>
     <Content components={{ ...components }} />
     <hr />
diff --git a/src/pages/es/blog/index.astro b/src/pages/es/blog/index.astro
index fc3dc26..ffce855 100644
--- a/src/pages/es/blog/index.astro
+++ b/src/pages/es/blog/index.astro
@@ -27,7 +27,7 @@ const lang = getLangFromUrl(Astro.url);
 ---
 
 <Layout {...pageData}>
-  <section class='prose prose-invert max-w-[800px] mx-auto'>
+  <section class='prose prose-invert max-w-3xl mx-auto'>
     <h1>{pageData.title}</h1>
     <p>{pageData.description}</p>
   </section>
diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
index e43ab9f..1b84328 100644
--- a/src/pages/es/index.astro
+++ b/src/pages/es/index.astro
@@ -30,7 +30,7 @@ const lang = getLangFromUrl(Astro.url);
 ---
 
 <Layout {...pageData}>
-  <div class='prose prose-invert max-w-[800px] mx-auto'>
+  <div class='prose prose-invert max-w-3xl mx-auto'>
     <h1 class='text-primary'>Bienvenido a mi dominio, extraño.</h1>
     <p>
       Soy <strong class='text-primary'>juancmandev</strong>; <strong
diff --git a/src/pages/es/videos/[...slug].astro b/src/pages/es/videos/[...slug].astro
index 54c4188..c0d30d9 100644
--- a/src/pages/es/videos/[...slug].astro
+++ b/src/pages/es/videos/[...slug].astro
@@ -34,7 +34,7 @@ const { Content, remarkPluginFrontmatter: data } = await render(video);
   title={data.title}
   description={data.description}
 >
-  <article class='prose prose-invert max-w-[800px] mx-auto'>
+  <article class='prose prose-invert max-w-3xl mx-auto'>
     <h1>{data.title}</h1>
     <Content components={{ ...components }} />
     <hr />
diff --git a/src/pages/es/videos/index.astro b/src/pages/es/videos/index.astro
index cfab839..b466a49 100644
--- a/src/pages/es/videos/index.astro
+++ b/src/pages/es/videos/index.astro
@@ -20,7 +20,7 @@ const lang = getLangFromUrl(Astro.url);
 ---
 
 <Layout {...pageData}>
-  <div class='prose prose-invert max-w-[800px] mx-auto'>
+  <div class='prose prose-invert max-w-3xl mx-auto'>
     <h1>{pageData.title}</h1>
     <p>{pageData.description}</p>
     <PostItemList
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d888047..7e0f50a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -31,7 +31,7 @@ const lang = getLangFromUrl(Astro.url);
 ---
 
 <Layout {...pageData}>
-  <div class='prose prose-invert max-w-[800px] mx-auto'>
+  <div class='prose prose-invert max-w-3xl mx-auto'>
     <h1 class='text-primary'>Welcome to my domain, stranger.</h1>
     <!-- <Random /> -->
     <p>
diff --git a/src/pages/microblog.astro b/src/pages/microblog.astro
index fbc0a11..6d7aaf9 100644
--- a/src/pages/microblog.astro
+++ b/src/pages/microblog.astro
@@ -14,7 +14,7 @@ const data = await pb.collection('microblogs').getFullList({
   title='Microblog'
   description='Short-format writing. Instead of using shitty social media.'
 >
-  <div class='prose prose-invert max-w-[800px] mx-auto'>
+  <div class='prose prose-invert max-w-3xl mx-auto'>
     <h1>Microblog</h1>
     <p>Short-format writing.</p>
     <p>Instead of using shitty social media.</p>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0ccdbfc..8d3c458 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -5,6 +5,7 @@
 @layer base {
   * {
     @apply border-border;
+    scroll-margin-top: 60px;
   }
   body {
     @apply bg-background text-foreground;
@@ -12,6 +13,9 @@
   .prose {
     @apply max-w-none;
   }
+  li {
+    overflow-wrap: break-word
+  }
   [data-rehype-pretty-code-figure] {
     @apply bg-[#1e1e2e] rounded-md pt-4;
   }
@@ -33,7 +37,4 @@
   .prose pre > code {
     @apply bg-transparent border-none;
   }
-  * {
-    scroll-margin-top: 72px;
-  }
 }