Update contact, add donate page

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-----

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}

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'}

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) => (

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',
       },
     },

src/content/pages/en/contact.mdx

@@ -7,22 +7,7 @@ description:
 
 # Contact
 
-You can contact me if:
+## Email
-
-- 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
 
 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)

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)

src/content/pages/es/contacto.mdx

@@ -7,23 +7,7 @@ description:
 
 # Contacto
 
-Puedes contactarme si:
+## Email
-
-- 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
 
 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)

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)

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;

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} />

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>

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>

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 />

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

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>

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 />

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>

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

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 />

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

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>

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>

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;
-  }
 }