Los Precursores

En septiembre de ese año, había permitido que mi dominio original, CarlosEOrtega.com, expirara y compré el dominio que aún uso hoy, carlos.soy. Con un nuevo dominio, pensé que era hora de un nuevo sitio, y un intento de construirlo desde cero. Sabía que no sería tan bonito como cualquier cosa de HTML5 UP, pero quería la experiencia.

Por alguna razón, estaba obsesionado con la idea de que mi página de inicio emulara una tarjeta de presentación, lo que explica esas decisiones de diseño. Aparte de eso, no hay mucho que notar. El amarillo y el azul son algunos de mis colores favoritos, y era apropiado dado que el azul y el dorado eran los colores de mi universidad (¡Go Bears!).

Este sitio web fue de corta duración. Continué aprendiendo un poco más de HTML + CSS, y para diciembre estaba subiendo mi nueva página. Había estado leyendo sobre cuánta deserción de usuarios había en sitios web con múltiples páginas, así que decidí desarrollar todo lo que quería en una sola página web.

Como puedes ver en la parte inferior de la página, todavía estaba muy obsesionado con el diseño de tarjetas de presentación virtuales. Al igual que mi sitio anterior, no era tan bonito como una plantilla de HTML5 UP, pero estaba aprendiendo mucho, así que estaba satisfecho.

Ese diseño me sirvió bien y lo usé por más de un año. Cada vez que comenzaba/terminaba un nuevo rol, actualizaba el diseño. Honestamente, el diseño del sitio web era bastante feo, pero era el diseño que tenía cuando conseguí mi primera pasantía, así que me sentía orgulloso de él. No fue hasta la víspera de Año Nuevo de 2019 (no estoy seguro de por qué decidí hacerlo entonces) que decidí que era hora de volver a un diseño profesional. Esta vez, fue una plantilla llamada Civic que encontré en colorlib. Todavía es bastante popular y si haces una búsqueda en internet de “Civic - CV Resume” encontrarás muchos sitios usando el tema que no eliminaron el título de alguna etiqueta HTML.

El sitio web era hermoso, pero extremadamente grande. Como puedes ver, cada vez que te desplazas no hay mucha información en la pantalla en ningún momento. Fue genial durante los 2+ años que lo usé, me ayudó a conseguir trabajos, pero empecé a sentir la necesidad de un diseño diferente. También quería combinar mi sitio web y blog. Durante la mayor parte de este tiempo, tuve tres piezas diferentes del rompecabezas: Mi sitio web, mis publicaciones de blog en Medium, y un blog alojado en Github Pages con un tema de Gatsby para archivo.

La Fase de Ideación

Sabía que esta vez necesitaría construirlo desde cero nuevamente para obtener exactamente lo que quería. Pero, antes de poder hacer eso, necesitaba averiguar qué quería. Afortunadamente, me encanta navegar por los sitios web y blogs de otras personas de tecnología, así que había estado recopilando inspiración por un tiempo.

El sitio de Chip Huyen probablemente fue mi primera fuente de inspiración. Me encantó lo simple que eran su página de inicio y su página de blog, así como cómo el sitio no toma todo el ancho del navegador en páginas más grandes.

El sitio web Tiny Projects de Ben Stoke fue otra fuente de inspiración. Encontré Tiny Projects en el número 140 del boletín Hacker News Digest. Notarás que hay muchas similitudes de diseño entre la página de Tiny Projects y el sitio web de Huyen. También me atrajo el uso del color amarillo-anaranjado y cómo subrayan todas las piezas de texto que tienen enlaces.

Encontré el Tema Jekyll Bay de Elliot Vincent cuando estaba más cerca de terminar el diseño de mi nuevo sitio. En este caso, inspiró mi barra de navegación y el diseño entre la imagen principal de la página de inicio y su texto acompañante.

La última pieza de inspiración fue para mi página de currículum. Una vez más, esto fue algo que encontré hacia el final de mi fase de ideación. Me encantó la Plantilla de Currículum Jekyll de Joel Glovier, así que tomé algunas piezas de inspiración de ella. Aunque en mi caso, decidí tener menos divisores, así como la eliminación de algunas piezas de información que no quería incluir en mi propio currículum, como el rol o el resumen ejecutivo.

El Desarrollo

En mi propio caso, averiguar cómo quería que se viera el diseño fue la parte fácil. La parte difícil fue averiguar cómo quería desarrollarlo. Sabía que quería construir desde cero, aunque el proceso se sentía casi sádico a veces. Así que, hice lo que siempre hago. Abrí una nueva página en Notion y establecí mis deseos:

• CSS Fácil/Eficiente
• Fácil de actualizar o agregar nuevas publicaciones de blog
• Analíticas
• Un boletín informativo
• Comentarios para publicaciones de blog

CSS

Quería que el sitio fuera ligero, simple, pero aún bonito. Teniendo todo eso en mente, no quería pasar demasiado tiempo haciéndolo bonito. Después de todo, el sitio está destinado a mostrar mi trabajo en el futuro y no tiene sentido pasar más tiempo del necesario cuando puedo usar ese tiempo para trabajar en nuevos proyectos. Sería como el tiempo en la escuela secundaria que gasté mis únicos $20 en una nueva billetera, y luego no tenía dinero para poner dentro.

Así que, decidí usar Tailwind. Me había enterado de él un mes más o menos antes, y ya había comenzado a usarlo para otro proyecto (Open Patterson). Ya había encontrado que era rápido para desarrollar. Además, me encantó el soporte incorporado para purgar CSS no utilizado para enviar archivos CSS más pequeños (aunque aún no he configurado eso con este sitio).

Generador de Sitios Estáticos

Ha sido extremadamente popular durante mucho tiempo, en parte debido al soporte de Github Pages. Me encantan los archivos markdown, así que eso también lo hizo una gran opción. También sabía que en el futuro, quería que el sitio Open Patterson se integrara con Jekyll, así que usarlo primero en mi propio sitio personal sería un gran experimento. No estaba seguro de cómo integrar Tailwind con Jekyll al principio, pero afortunadamente encontré muchos repositorios iniciales geniales. Terminé usando el Repositorio Inicial Jekyll + Tailwind de Stef Coetzee.

Analíticas

Ahora que había decidido sobre un framework CSS y un Generador de Sitios Estáticos, tenía que decidir sobre los servicios de terceros que integraría. Curiosamente, encontré esta parte mucho más difícil que elegir frameworks. Dado que había decidido que ahora publicaría todas mis publicaciones de blog, exclusivamente después de esta, en mi propio sitio web. Sabía que tenía que integrar analíticas. Antes de esto, no sabía cuántas personas, si es que alguna, estaban visitando mi sitio.

Fue especialmente importante para mí encontrar un proveedor de analíticas construido y alojado en la UE debido a una decisión de un juez austriaco a principios de este año. En esa decisión, según mi entendimiento, dijeron que los sitios web que usan Google Analytics no son compatibles con GDPR porque Google transferiría los datos de los residentes de la UE a servidores de EE.UU., un país con regulaciones débiles de datos y privacidad. Hasta donde sé, esta decisión no ha tenido impacto con millones de sitios web en la UE que aún usan Google Analytics. Aunque no conozco a nadie de la UE, si llega el día en que Google Analytics sea bloqueado oficialmente, no quiero que mi sitio esté bloqueado geográficamente de la UE, solo porque sí.

Además, sabía desde el principio que quería evitar Google. No quiero los datos de las personas. Solo quiero saber cuántas personas están visitando mi sitio web, qué páginas y desde qué país. No sus direcciones IP o huellas digitales.

Boletines por Correo Electrónico

Mi decisión sobre el proveedor de boletines por correo electrónico fue mucho más fácil. Iba a usar MailerLite, pero requerían una dirección física (debido a leyes fuera de su control). Cuando me estaba registrando, descubrí que ConvertKit proporciona una dirección física que sus clientes pueden usar si no tienen una dirección física alternativa. Esta fue la única razón por la que cambié en el último minuto.

Comentarios

Ahora que me estoy alejando de Medium, estaba tratando de decidir si quería integrar una sección de comentarios. Inicialmente planeé usar Disqus, que es extremadamente popular, pero después de un poco de lectura encontré que tiene un historial pobre cuando se trata de privacidad. Además de esto, la versión gratuita integraría rastreadores y anuncios en mi sitio. Esto se sentía antitético a todo el proceso de pensamiento que tuve cuando decidí usar Microanalytics como mi proveedor de analíticas de sitio web.

Así que, volví a la mesa de dibujo. Encontré muchos sistemas de comentarios de código abierto geniales (Just Comments, Schnack, Talk, Discourse, Isso, Mouthful, etc). Discourse es una gran herramienta que uso en otras comunidades, pero proporciona un sistema más parecido a un foro, que no es lo que estoy buscando. Algunas de las otras opciones no parecían estar activamente mantenidas, y el resto requeriría autoalojamiento. Toda la razón por la que elegí Jekyll era para hacer el sitio fácil de mantener, y autoalojar un sistema de comentarios está agregando más puntos de dolor.

Finalmente, estaba decidiendo entre dos plataformas: Commento y Lyket. Commento presume la privacidad como una característica e implica que es compatible con GDPR al señalar que Disqus aún no es compatible con GDPR. Lyket establece explícitamente que es compatible con la privacidad. También cobra sus niveles pagos en euros, así que asumí que estaba construido en la UE, muy probablemente compatible con GDPR, y muy probablemente compatible con CCPA.

Sin embargo, leyendo a través de ambas políticas de privacidad, encontré que ambos servicios almacenan datos en servidores ubicados en los Estados Unidos. Lo cual, si entendí correctamente la decisión anterior, era uno de los principales problemas que el juez tenía con el uso de Google Analytics. Por desgracia, no soy un experto legal, y dado que las empresas de la UE no han abandonado Google Analytics en masa, supuse que estaba seguro con cualquiera de estos servicios.

Terminé eligiendo Lyket. No porque fuera más barato (por 5k vistas mensuales) o por su nivel gratuito (500 vistas mensuales). Lo elegí por sus botones estilo Medium. Tienen Aplausos, Me gusta y No me gusta. Consideré usar Me gusta, para que cada individuo solo pudiera reaccionar una vez, pero realmente me encantan los botones de aplausos. Me imagino que cada uno es una persona real aplaudiendo por mí.

En realidad, ignora ese último párrafo. Malinterpreté todo el sitio de Lyket. Resulta que el servicio de Lyket es SOLO botones, así que estoy usando, tanto, Lyket como Commento. Veremos a largo plazo cómo termina yendo.

Lyket también tenía la opción de integrar Google reCAPTCHA V3, pero creo que ya establecimos mi paranoia sobre la integración de servicios de Google. También he leído algunos artículos preocupantes sobre reCAPTCHA V3 en comparación con V2. Con muchos comparando V3 con un píxel de seguimiento ya que pide estar en todas las páginas web de un sitio para funcionar mejor, y solo opera en segundo plano. Así que, por supuesto, no activé esta integración. También desactivé el ID de sesión de Lyket, para que no almacenara un ID de sesión de navegador único, dado que no quería que mi sitio web almacenara cookies en los dispositivos de los visitantes.

Dadas estas decisiones, tengo una detección de bots muy limitada, o ninguna realmente, para comentarios y aplausos. Con suerte, esto no se convertirá en un problema. Si lo hace, bueno, será responsabilidad del Carlos futuro arreglarlo.

Y Vivieron Felices Para Siempre

Si incluso llegaste al final de esta publicación, asumo que fue desplazándote más allá de todo, gracias por llegar aquí. No me di cuenta de lo largo que terminaría siendo esto, pero realmente quería documentar mi proceso de pensamiento para mí mismo, y pensé que tal vez alguien más lo disfrutaría. Asegúrate de probar la integración de comentarios y aplausos a continuación, ya sabes, solo para propósitos de prueba. El sitio continuará evolucionando conmigo, pero espero que las decisiones que tomé al desarrollarlo lo hagan fácil de hacer.

También, gracias a mi amigo Ryan Salmasi por proporcionar comentarios.