From 074879205d809a942abbb09cde1c9307f392d365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?= <70479573+BernatBC@users.noreply.github.com> Date: Sun, 14 Jan 2024 18:35:43 +0100 Subject: [PATCH] Translate guides to spanish (#253) * Translate main page to spanish * Translate main page to spanish * Translate Quick Start to spanish * Translate Features to spanish * Translate Deploy to Github Pages to spanish * Translate Deploy to Netlify to spanish * Translate Prepare your Site to spanish * Translate Automate Theme Updates to spanish * Translate External Link to spanish * Translate Site Parameters to spanish * Translate Configure About in spanish * Translate Configure Achievements in spanish * Translate Configuring Education in spanish * Translate Configure Experiences in spanish * Translate Configure Projects in spanish * Translate Configure Recent Posts in spanish * Translate Configure Skills in spanish * Translate Traduction to spanish * Translate Shortcodes to spanish * Translate Support Links to spanish * Translate Analytics to spanish * Translate Comments to spanish * Translate Markdown Syntax to spanish * Translate Math to spanish * Translate Mermaid to spanish * Translate Organizing to spanish * Translate Rich Content to spanish * Translate Emoji to spanish * Translate Migration V3 to V4 to spanish * Translate Customizing CSS to spanish * Translate Customizing Layouts to spanish * Translate Enable Dark Theme to spanish * Translate New Section to spanish * Remove forgotten english lines and fix typos in spanish guides * Change author in translated posts to spanish --- assets/images/author/bernatbc.png | Bin 0 -> 1571 bytes assets/jsconfig.json | 2 +- config.yaml | 3 + content/posts/_index.es.md | 3 + content/posts/analytics/index.es.md | 97 ++++ content/posts/comments/index.es.md | 90 +++ content/posts/configuration/_index.es.md | 8 + .../posts/configuration/sections/_index.es.md | 9 + .../configuration/sections/about/index.es.md | 158 ++++++ .../sections/achievements/index.es.md | 57 ++ .../sections/education/index.es.md | 60 ++ .../sections/experiences/index.es.md | 83 +++ .../sections/projects/index.es.md | 87 +++ .../sections/recent-posts/index.es.md | 28 + .../configuration/sections/skills/index.es.md | 56 ++ .../configuration/site-parameters/index.es.md | 178 ++++++ content/posts/customizing/_index.es.md | 8 + .../customizing/customize-css/index.es.md | 102 ++++ .../customizing/customize-layout/index.es.md | 46 ++ .../posts/customizing/dark-theme/index.es.md | 25 + .../posts/customizing/new-section/index.es.md | 47 ++ content/posts/external-link/index.es.md | 14 + content/posts/features/index.es.md | 77 +++ content/posts/getting-started/_index.es.md | 8 + .../getting-started/github-pages/index.es.md | 132 +++++ .../posts/getting-started/netlify/index.es.md | 118 ++++ .../getting-started/prepare-site/index.es.md | 533 ++++++++++++++++++ .../getting-started/theme-update/index.es.md | 76 +++ content/posts/quickstart/index.es.md | 163 ++++++ content/posts/shortcodes/index.es.md | 267 +++++++++ content/posts/supports/index.es.md | 53 ++ content/posts/translation/_index.es.md | 8 + content/posts/translation/content/index.es.md | 12 + .../posts/translation/site-data/index.es.md | 12 + content/posts/update-v3-to-v4/index.es.md | 242 ++++++++ content/posts/writing-posts/_index.es.md | 8 + .../writing-posts/front-matter/index.es.md | 12 + .../writing-posts/markdown-syntax/index.es.md | 146 +++++ content/posts/writing-posts/math/index.es.md | 53 ++ .../posts/writing-posts/mermaid/index.es.md | 235 ++++++++ .../writing-posts/organizing/_index.es.md | 9 + .../organizing/category/index.es.md | 125 ++++ .../organizing/sub-category/_index.es.md | 9 + .../sub-category/example/index.es.md | 12 + .../writing-posts/rich-content/index.es.md | 44 ++ .../writing-posts/using-emoji/index.es.md | 52 ++ data/es/author.yaml | 18 + data/es/sections/about.yaml | 77 +++ data/es/sections/achievements.yaml | 25 + data/es/sections/experiences.yaml | 64 +++ data/es/sections/projects.yaml | 64 +++ data/es/sections/recent-posts.yaml | 11 + data/es/sections/skills.yaml | 49 ++ data/es/site.yaml | 11 + go.mod | 2 +- go.sum | 4 +- 56 files changed, 3888 insertions(+), 4 deletions(-) create mode 100644 assets/images/author/bernatbc.png create mode 100644 content/posts/_index.es.md create mode 100644 content/posts/analytics/index.es.md create mode 100644 content/posts/comments/index.es.md create mode 100644 content/posts/configuration/_index.es.md create mode 100644 content/posts/configuration/sections/_index.es.md create mode 100644 content/posts/configuration/sections/about/index.es.md create mode 100644 content/posts/configuration/sections/achievements/index.es.md create mode 100644 content/posts/configuration/sections/education/index.es.md create mode 100644 content/posts/configuration/sections/experiences/index.es.md create mode 100644 content/posts/configuration/sections/projects/index.es.md create mode 100644 content/posts/configuration/sections/recent-posts/index.es.md create mode 100644 content/posts/configuration/sections/skills/index.es.md create mode 100644 content/posts/configuration/site-parameters/index.es.md create mode 100644 content/posts/customizing/_index.es.md create mode 100644 content/posts/customizing/customize-css/index.es.md create mode 100644 content/posts/customizing/customize-layout/index.es.md create mode 100644 content/posts/customizing/dark-theme/index.es.md create mode 100644 content/posts/customizing/new-section/index.es.md create mode 100644 content/posts/external-link/index.es.md create mode 100644 content/posts/features/index.es.md create mode 100644 content/posts/getting-started/_index.es.md create mode 100644 content/posts/getting-started/github-pages/index.es.md create mode 100644 content/posts/getting-started/netlify/index.es.md create mode 100644 content/posts/getting-started/prepare-site/index.es.md create mode 100644 content/posts/getting-started/theme-update/index.es.md create mode 100644 content/posts/quickstart/index.es.md create mode 100644 content/posts/shortcodes/index.es.md create mode 100644 content/posts/supports/index.es.md create mode 100644 content/posts/translation/_index.es.md create mode 100644 content/posts/translation/content/index.es.md create mode 100644 content/posts/translation/site-data/index.es.md create mode 100644 content/posts/update-v3-to-v4/index.es.md create mode 100644 content/posts/writing-posts/_index.es.md create mode 100644 content/posts/writing-posts/front-matter/index.es.md create mode 100644 content/posts/writing-posts/markdown-syntax/index.es.md create mode 100644 content/posts/writing-posts/math/index.es.md create mode 100644 content/posts/writing-posts/mermaid/index.es.md create mode 100644 content/posts/writing-posts/organizing/_index.es.md create mode 100644 content/posts/writing-posts/organizing/category/index.es.md create mode 100644 content/posts/writing-posts/organizing/sub-category/_index.es.md create mode 100644 content/posts/writing-posts/organizing/sub-category/example/index.es.md create mode 100644 content/posts/writing-posts/rich-content/index.es.md create mode 100644 content/posts/writing-posts/using-emoji/index.es.md create mode 100644 data/es/author.yaml create mode 100644 data/es/sections/about.yaml create mode 100644 data/es/sections/achievements.yaml create mode 100644 data/es/sections/experiences.yaml create mode 100644 data/es/sections/projects.yaml create mode 100644 data/es/sections/recent-posts.yaml create mode 100644 data/es/sections/skills.yaml create mode 100644 data/es/site.yaml diff --git a/assets/images/author/bernatbc.png b/assets/images/author/bernatbc.png new file mode 100644 index 0000000000000000000000000000000000000000..df1174d12f38665a3bd505cff36be29b2b3f3e58 GIT binary patch literal 1571 zcmeAS@N?(olHy`uVBq!ia0y~yU|a&i985rwk9x9&H2?~`^mbU&m~UG=6uh0^WE=%tQ&UOZ)RtZaD3CivXNQn2%m?5 zwE}H9Ex9*5ukYly&Yp4o_Y7Mm-ES`p>&qOPZZL8tv8!~*PEZ(roI_^S4fEexeZQ$( zbK`aG8M%j(ukBWllNR57blV9f!_!r(P1@3RhNH)!v6^$(Z`Zln8<86}d<}c~)sAhB zkzSd%RI#VcwtK8=!*?axBsbD4_0iv+#M!nC@lU{!e-9M-jq45c%Jy0QC}} +Advertencia: Al añadir analíticas, debe considerar la legislación local para ver si se requiere un banner de privacidad para informar a los usuarios sobre el seguimiento de los datos personales. En general (no asesoramiento legal), los métodos anónimos y respetuosos de la privacidad, como [counter.dev](https://counter.dev) y [GoatCounter](https://www.goatcounter.com/), no necesitan un banner, ya que no recopilan datos de identificación personal. +{{< /alert >}} + +### Goat Counter + +[GoatCounter](https://www.goatcounter.com/) son las analíticas que soporta Toha más completas, simples y respetuosas con la privacidad. Su script rastrea las páginas más vistas, el número total de usuarios, dispositivos y mucho más, ¡todo mientras es de código abierto! + +Para habilitar las analíticas de GoatCounter en tu sitio, tienes dos opciones: acceder a [goatcounter.com](https://www.goatcounter.com) y obtener un código para tu sitio web, y el segundo es self-hostear una instancia de GoatCounter. Después, tienes que añadir la sección `analytics` debajo de la sección `params.features` de tu archivo `config.yaml`, como a continuación: + +```yaml +analytics: + enable: true + services: + # GoatCounter + goatCounter: + code: # Sin self-hostear (Primera opción) + instance: ## Para self-hosteat (Segunda opción). Sólo uses un método +``` + +### counter.dev + +[counter.dev](https://counter.dev) es un sitio web de análisis de código abierto, sencillo y respetuoso con la privacidad que le permite realizar un seguimiento del recuento total de usuarios, la primera página visitada y algunas otras métricas de su sitio web. Desafortunadamente, para simplificar las cosas (y gratis), no muestran una clasificación de las páginas más visitadas, sino de aquellas a las que se accede primero. + +Puedes habilitarlo añadiendo el email que te has registrado a la página de counter.dev debajo de la sección `params.features` de tu archivo `config.yaml`, como a continuación: + +```yaml +analytics: + enable: true + services: + counterDev: + id: +``` + +El código de seguimiento automáticamente será añadido a tu sitio web. + +Nota: En algunos sitios, aparece [an error has been detected](https://github.com/ihucos/counter.dev/issues/37), donde solo el directorio raíz ("/") se pasa a counter.dev, por lo que el seguimiento no mostrará nada en la sección "pages". Para solucionar este problema, se puede añadir `referrerPolicy: no-referrer-when-downgrade` como parámetro en la sección "counterDev", asegurando que las nuevas visitas a la página siempre se pasen correctamente a counter.dev. + +### Google Analytics + +{{< alert type="danger" >}} +Tenga en cuenta que, según la [jurisprudencia reciente](https://www.euractiv.com/section/politics/short_news/use-of-google-analytics-violates-eu-law-austrian-authority-rules/), Google Analytics podría ser ilegal en la Unión Europea +{{< /alert >}} + +Puedes habilitar Google Analytics en tu sitio añadiendo tu id de rastreo debajo de la sección `params.features` de tu archivo `config.yaml`, como a continuación: + +```yaml +analytics: + enable: true + services: + # Google Analytics + google: + id: +``` + +Puede utilizar el ID de seguimiento tanto V3 como V4. El tema detectará automáticamente la versión de seguimiento, y añadirá los scripts respectivos de acuerdo a tu sitio web. + +Para configuraciones de privacidad adicionales de Google Analytics, puedes proveer la sección `privacy.googleAnalytics` dentro del archivo `config.yaml` descrito [aquí](https://gohugo.io/about/hugo-and-gdpr/#all-privacy-settings). + +### Matomo + +Puedes habilitar Matomo (antes Piwik) en tu sitio añadiendo tu configuración de matomo debajo de la sección `params.features` de tu archivo `config.yaml`, como a continuación: + +```yaml +analytics: + enable: true + services: + # Matomo / Piwik + matomo: + instance: matomo.example.com + siteId: 1 # Número generado después de agregar tu sitio a tu instancia +``` diff --git a/content/posts/comments/index.es.md b/content/posts/comments/index.es.md new file mode 100644 index 00000000..a6497421 --- /dev/null +++ b/content/posts/comments/index.es.md @@ -0,0 +1,90 @@ +--- +title: "Comentarios" +date: 2022-03-14T06:00:23+06:00 +description: Añadiendo Comentarios en el tema de hugo Toha +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Comentarios + identifier: comments + weight: 650 +--- +## Comentarios + +Este tema tiene soporte para comentarios en las publicaciones. Actualmente, soporta las siguientes extensiones de comentarios: + +- [Disqus](https://disqus.com/) +- [Valine](https://valine.js.org/) +- [Utterances](https://utteranc.es/) +- [Giscus](https://giscus.app/) + +Para una lista completa de las extensiones de comentarios soportadas, puede consultar el archivo de ejemplo [config.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/config.yaml). + +### Disqus + +Disqus es una extensión de comentarios popular. Después de acceder a [Disqus](https://disqus.com/) necesitarás proveer tu shortname debajo de la sección `params.features` de tu archivo `config.yaml`, como a continuación: + +```yaml +comment: + enable: true + services: + disqus: + shortName: ejemplo-de-sitio-de-toha +``` + +### Valine + +[Valine](https://valine.js.org/) resulta ser una extensión de comentarios chino. Puedes habilitar la extensión de comentarios valine añadiendo la sección `valine` debajo de la sección `params.features` de tu archivo `config.yaml`, como a continuación: + +```yaml +comment: + enable: true + services: + valine: + appId: id-de-la-aplicación + appKey: clave-de-la-aplicación + avatar: retro + placeholder: Comparte tu pensamiento. + lang: en + recordIP: true + enableQQ: true +``` + +### Utterances + +Para habilitar la extensión de comentarios Utterances, necesitarás ir primero a [utteranc.es](https://utteranc.es/). En la sección de `Configuration`, provee la información necesaria. Te dará un script para incluir en tu sitio. Solo necesitarás extraer la información respectiva del script, y proveerla debajo de la sección `params.features` de tu archivo `config.yaml`, como a continuación: + +```yaml +comment: + enable: true + services: + utteranc: + repo: tu-repositorio/nombre + issueTerm: title + theme: github-light +``` + +### Giscus + +Giscus está basado en Utterances, pero usa [GitHub Discussions](https://docs.github.com/en/discussions) como backend. Esto requiere tener un repositorio público, y permitir que la aplicación Giscus use tu repositorio. Las instrucciones de configuración se pueden encontrar en [Giscus home page](https://giscus.app/). + +Para habilitar la extensión de comentarios Utterances, necesitarás ir primero a [giscus.app](https://giscus.app/). En la sección de `Configuration`, provee la información necesaria. Te dará un script para incluir en tu sitio. Solo necesitarás extraer la información respectiva del script, y proveerla debajo de la sección `params.features` de tu archivo `config.yaml`, como a continuación: + +```yaml +comment: + enable: true + services: + giscus: + repo: tu-repositorio/nombre + repoID: ide-de-tu-repositorio + category: tu-categoría + categoryID: tu-ide-de-categoría + theme: light + map: url + reaction: 1 + metadata: 0 + inputPosition: bottom + crossOrigin: anonymous +``` diff --git a/content/posts/configuration/_index.es.md b/content/posts/configuration/_index.es.md new file mode 100644 index 00000000..2f3689d3 --- /dev/null +++ b/content/posts/configuration/_index.es.md @@ -0,0 +1,8 @@ +--- +title: Configuración +menu: + sidebar: + name: Configuración + identifier: configuration + weight: 100 +--- diff --git a/content/posts/configuration/sections/_index.es.md b/content/posts/configuration/sections/_index.es.md new file mode 100644 index 00000000..f6faa87a --- /dev/null +++ b/content/posts/configuration/sections/_index.es.md @@ -0,0 +1,9 @@ +--- +title: Secciones +menu: + sidebar: + name: Secciones + identifier: sections + parent: configuration + weight: 110 +--- diff --git a/content/posts/configuration/sections/about/index.es.md b/content/posts/configuration/sections/about/index.es.md new file mode 100644 index 00000000..a07b1311 --- /dev/null +++ b/content/posts/configuration/sections/about/index.es.md @@ -0,0 +1,158 @@ +--- +title: "Configurando la sección Sobre mi" +date: 2020-06-08T06:20:50+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Sección Sobre mi + identifier: about-section + parent: sections + weight: 110 +--- + +El propósito de la sección `Sobre mi` es proveer una breve introducción sobre ti en tu sitio web. En esta publicación, te guiaré en cómo configurar la sección `Sobre mi`. Para obtener una referencia completa, consulte el archivo de ejemplo [about.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/about.yaml). + +Para empezar, crea un archivo `about.yaml` dentro del directorio `data/es/sections` de tu sitio web. Después sigue las instrucciones de abajo. + +### Añade la información de la sección + +```yaml +section: + name: Sobre mi # Título de la sección (predeterminado: "") + id: about # id del url de la sección *se requiere* + enable: true # Booleano que determina si la sección está activada (predeterminado: false) + weight: 1 # Orden de la sección (predeterminado: alfabeticamente seguida del peso) + showOnNavbar: true # Booleano que determina si el enlace de esta sección debe aparecer en la barra de navegación + template: sections/about.html # Permite apuntar a una plantilla específica +``` + +#### Configuración de la plantilla + +Tienes la opción de personalizar el "partial" usado para esta sección especificando la propiedad `template.` Simplemente, guarde la nueva plantilla en el directorio `layout/partials`. + +### Añade tu información de trabajo + +Para incluir detalles sobre tu trabajo actual, puedes añadir la siguiente sección en el archivo `about.yaml`: + +```yaml +# Tu designación +designation: Ingeniero de Software +# Información de tu empresa +company: + name: Example Co. + url: "https://www.example.com" +``` + +### Añade un resumen sobre ti + +Para proporcionar una descripción general concisa de su experiencia profesional, añadimos una sección de resumen. Esto les dará a los visitantes una idea rápida de lo que haces. Añade la siguiente sección al archivo `about.yaml`: + +```yaml +# Un resumen sobre ti +summary: 'Soy un ingeniero de software apsionado con x años de experiencia. He creado herramientas OSS para [Kubernetes](https://kubernetes.io/) utilizando Go. Mis herramientas ayudan a personas a desplegar sus workloads en Kubernetes. A veces trabajo en projectos divertidos como crear un tema, etc.' +``` + +Intenta que sea lo más breve posible. No lo hagas demasiado largo. Tenemos otras secciones que brindan más información sobre su experiencia. + +>Puedes usar la sintáctica de markdown en el campo `summary`. + +### Añade tus links de redes sociales + +Para añadir enlaces de tus perfiles de plataformas como LinkedIn, Twitter y Github, incluye esta sección `socialLinks` en tu archivo `about.yaml`. + +```yaml +# tus links de redes sociales +# da tantos como quieras. Utilitza font-awesome para los iconos. +socialLinks: +- name: Email + icon: "fas fa-envelope" + url: "example@gmail.com" + +- name: Github + icon: "fab fa-github" + url: "https://www.github.com/example" + +- name: Stackoverflow + icon: "fab fa-stack-overflow" + url: "#" + +- name: LinkedIn + icon: "fab fa-linkedin" + url: "#" + +- name: Twitter + icon: "fab fa-twitter" + url: "#" + +- name: Facebook + icon: "fab fa-facebook" + url: "#" +``` + +Puedes usar cualquier icono gratis de [Font Awesome](https://fontawesome.com/icons?d=gallery) en este campo. + +### Añade un Currículum + +Para añadir un currículum, pon tu archivo PDF dentro del directorio `files` localizado dentro del directorio `static`. Después incluye la siguiente sección en el archivo `about.yaml`: + +```yaml +# tu currículum. Este archivo debe ser relativo a tu directorio "static" +resourceLinks: +- title: "Mi Curríulum" + url: "files/curriculum.pdf" +``` + +### Añade tus competencias sociales + +Ahora, vamos a añadir tus competencias sociales y un indicador para diversas habilidades sociales como liderazgo, comunicación, trabajo en equipo, etc. Incluye la siguiente sección dentro del archivo `about.yaml`: + +```yaml +# Muestra tus certificaciones +# Puedes mostrar tus certificaciones verificables de https://www.credly.com. +# También puedes mostrar una barra circular indicando el nivel de experiencia en una habilidad determinada +badges: +- type: certification + name: Especialista Certificado de Seguridad de Kubernetes + url: "https://www.credly.com/org/the-linux-foundation/badge/exam-developer-certified-kubernetes-security-specialist" + badge: "https://images.credly.com/size/680x680/images/f4bf92ed-8985-40b2-bc07-2f9308780854/kubernetes-security-specialist-logo-examdev.png" + +- type: certification + name: Istio and IBM Cloud Kubernetes Service + url: "https://www.credly.com/org/the-linux-foundation/badge/exam-developer-certified-kubernetes-security-specialist" + badge: "https://images.credly.com/size/680x680/images/8d34d489-84bf-4861-a4a0-9e9d68318c5c/Beyond_basics_of_Istio_on_Cloud_v2.png" + +- type: certification + name: Inteligencia Artificial y Aprendizaje Automático + url: "https://www.credly.com/org/grupo-bancolombia/badge/artificial-intelligence-and-machine-learning" + badge: "https://images.credly.com/size/680x680/images/e027514f-9d07-4b29-862f-fe21a8aaebf1/ae.png" + + +- name: Liderazgo + percentage: 85 + color: blue +- name: Trabajo en equipo + percentage: 90 + color: yellow +- name: Comunicación + percentage: 85 + color: pink +``` + +Actualmente, el porcentaje de habilidades debe estar entre 0 y 100 y debe ser divisible por 5. Los siguientes colores están disponibles para el indicador de porcentaje de habilidades, + +- blue +- yellow +- pink +- green +- sky +- orange + +>También puedes usar cualquier código de color HEX en el campo `color`. + +{{< vs 2 >}} + +La siguiente imagen muestra cómo el contenido de `about.yaml` está distribuido en la sección `Sobre mi`. (La porción de configuración de la imagen está obsoleta y la sección de habilidades sociales han sido reemplazadas por certificaciones) + +{{< img src="images/about.png" >}} diff --git a/content/posts/configuration/sections/achievements/index.es.md b/content/posts/configuration/sections/achievements/index.es.md new file mode 100644 index 00000000..de972e8d --- /dev/null +++ b/content/posts/configuration/sections/achievements/index.es.md @@ -0,0 +1,57 @@ +--- +title: "Configurando la sección de Logros" +date: 2020-06-08T06:20:30+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Sección de Logros + identifier: achievements-section + parent: sections + weight: 160 +--- + +La sección de `Logros` ha sido diseñada para mostrar sus logros en un formato de galería visualmente atractivo. Esta guía lo guiará a través del proceso de configuración de la sección de `Logros` en su sitio web. Para obtener una referencia completa, puede consultar el archivo de ejemplo [achievements.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/achievements.yaml). + +Para empezar, crea un nuevo archivo llamado `achievements.yaml` dentro del directorio `data/es/sections` de tu sitio web. Después, sigue las instrucciones de abajo. + +### Añade la información de la sección + +Añade la siguiente sección de metadatos en el archivo `achievements.yaml`: + +```yaml +section: + name: Logros # Título de la sección (predeterminado: "") + id: achievements # id del url de la sección *se requiere* + enable: true # Booleano que determina si la sección está activada (predeterminado: false) + weight: 9 # Orden de la sección (predeterminado: alfabeticamente seguida del peso) + showOnNavbar: true # Booleano que determina si el enlace de esta sección debe aparecer en la barra de navegación + # Opcionalmente puede ocultar el título del menú + # hideTitle: true +``` + +### Añade tus logros + +Para añadir tus logros, abre el archivo `achievements.yaml` e incluye las siguientes entradas debajo de la sección `achievements`: + +```yaml +achievements: +- title: Mejor presentador + image: images/sections/achievements/presenter.jpg + summary: Mejor presentador en la conferencia XYZ 2020. +``` + +Cada entrada de logro, debe tener los siguientes campos, + +- **title**: El título del logro. +- **image**: La imagen del logro. +- **summary**: Un resumen del logro. + +>Puedes usar la sintáctica de markdown en el campo `summary`. + +{{< vs 2 >}} + +La siguiente imagen muestra cómo el contenido de `achievements.yaml` está distribuido en la sección de `Logros`. + +{{< img src="images/achievements.png" >}} diff --git a/content/posts/configuration/sections/education/index.es.md b/content/posts/configuration/sections/education/index.es.md new file mode 100644 index 00000000..6c37ebd6 --- /dev/null +++ b/content/posts/configuration/sections/education/index.es.md @@ -0,0 +1,60 @@ +--- +title: "Configurando la sección de Educación" +date: 2020-06-08T06:20:40+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Sección de Educación + identifier: Education-section + parent: sections + weight: 135 +--- + +La sección de `Educación` ha sido diseñada para mostrar su formación académica. En esta publicación, le guiaré a través del proceso de configuración de la sección de `Educación` en su sitio web. Para obtener una referencia completa, puede consultar el archivo de ejemplo [education.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/education.yaml). + +Para empezar, crea un nuevo archivo llamado `education.yaml` dentro del directorio `data/es/sections` de tu sitio web. Después, sigue las instrucciones de abajo. + +### Añade la información de la sección + +Añade la siguiente sección de metadatos en el archivo `education.yaml`: + +```yaml +section: + name: Educación # Título de la sección (predeterminado: "") + id: education # id del url de la sección *se requiere* + template: sections/education.html # Usa "sections/education-alt.html" para una plantilla alterna + enable: true # Booleano que determina si la sección está activada (predeterminado: false) + weight: 4 # Orden de la sección (predeterminado: alfabeticamente seguida del peso) + showOnNavbar: true # Booleano que determina si el enlace de esta sección debe aparecer en la barra de navegación + # Opcionalmente puede ocultar el título del menú + # hideTitle: true +``` + +### Añade sus grados académicos + +Para añadir una educación, incluya la información respectiva en la sección `degrees` en el archivo `education.yaml` como se muestra a continuación: + +```yaml +degrees: +- name: Doctorado en Criptografía Cuántica + icon: fa-microscope + timeframe: 2016-2020 + institution: + name: Universidad de Teconología ABC + url: "#" + grade: #(opcional) + scale: CGPA + achieved: 3.6 + outOf: 4 + publications: #(opcional) + - title: Lorem ipsum dolor sit amet, consectetur adipiscing elit. + url: "#" + - title: Fusce eu augue ut odio porttitor pulvinar. + url: "#" + - title: Nullam vitae orci tincidunt purus viverra pulvinar. + url: "#" +``` + +Asegúrese que el icono que utilices esté disponible en [Font Awesome](https://fontawesome.com/icons?d=gallery&m=free). diff --git a/content/posts/configuration/sections/experiences/index.es.md b/content/posts/configuration/sections/experiences/index.es.md new file mode 100644 index 00000000..2d568f94 --- /dev/null +++ b/content/posts/configuration/sections/experiences/index.es.md @@ -0,0 +1,83 @@ +--- +title: "Configurando la sección de Experiencia" +date: 2020-06-08T06:20:40+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Sección de Experiencia + identifier: experiences-section + parent: sections + weight: 130 +--- + +La sección de `Experiencia` ha sido diseñada para mostrar su trayectoria profesional y resalte las responsabilidades que ha asumido a lo largo de su trayectoria profesional. En esta publicación, le guiaré a través del proceso de configuración de la sección de `Experiencia` en su sitio web. Para obtener una referencia completa, puede consultar el archivo de ejemplo [experiences.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/experiences.yaml). + +Para empezar, crea un nuevo archivo llamado `experiences.yaml` dentro del directorio `data/es/sections` de tu sitio web. Después, sigue las instrucciones de abajo. + +### Añade la información de la sección + +Añade la siguiente sección de metadatos en el archivo `experiences.yaml`: + +```yaml +section: + name: Experiencia # Título de la sección (predeterminado: "") + id: experiences # id del url de la sección *se requiere* + enable: true # Booleano que determina si la sección está activada (predeterminado: false) + weight: 3 # Orden de la sección (predeterminado: alfabeticamente seguida del peso) + showOnNavbar: true # Booleano que determina si el enlace de esta sección debe aparecer en la barra de navegación + # Opcionalmente puede ocultar el título del menú + # hideTitle: true +``` + + +### Añade tu experiencia + +Para añadir una experiencia, añade la respectiva información debajo de la sección `experiences` dentro del archivo `experiences.yaml`, como a continuación: + +```yaml +# Tu experiencia +experiences: +- company: + name: Example Co. + url: "https://www.example.com" + location: Dhaka Branch + # resumen de la empresa + overview: Example Co. es una empresa ampliamente reconocida de cloud-native development. Crea herramientas para Kubernetes. + positions: + - designation: Ingeniero de Software Sénior + start: Nov 2019 + # No des una fecha de finalización si aún trabajas ahí. Será sustituida "Presente" + # end: Dec 2020 + # Da unos puntos sobre tus responsablildades en la empresa. + responsibilities: + - Diseñar y desarollar la herramienta XYZ para la tarea ABC + - Diseñar, desarollar y administrar herramienta de recuperación de desastres [Xtool](https://www.example.com) que hace copias de seguridad de volúmenes de Kubernetes, Bases de Datos y definición de recursos del clúster. + - Líder del equipo de backend. + + - designation: Ingeniero de Software Júnior + start: Nov 2017 + end: Oct 2019 + responsibilities: + - Implementar y testear la funcionalidad xyz de la herramienta abc. + - Dar soporte al cliente de la herramienta abc. + - Aprender tecnología k,d,w de xyz. +``` + +Cada entrada de la sección `experiences` debería tener la siguiente información, + +- **company**: Información sobre tu empresa. Deberías proveer `name`, `url`, `location`, y un breve `overview` de la empresa. +- **positions**: Lista de posiciones que has tenido en la empresa. Puedes proveer múltiples posiciones si has cambiado de posición en la empresa. +- **designation**: Representa los roles que has tenido en la posición correspondiente. +- **start**: Fecha en que te uniste en la respectiva posición. +- **end**: Fecha en que dejaste la posición. Si aún está trabajando en esa posición, no llenes este campo. +- **responsibilities**: Lista de responsabilidades que tuviste en esa posición. Esta sección es muy importante, ya que el visitante podrá tener una idea sobre las responsabilidades profesionales que eres capaz de manejar. + +> Puedes usar la sintáctica de markdown en el campo `overview` de la sección `company` y el campo de `responsibilities`. + + diff --git a/content/posts/configuration/sections/projects/index.es.md b/content/posts/configuration/sections/projects/index.es.md new file mode 100644 index 00000000..e8fd5375 --- /dev/null +++ b/content/posts/configuration/sections/projects/index.es.md @@ -0,0 +1,87 @@ +--- +title: "Configurando la sección de Proyectos" +date: 2020-06-08T06:20:35+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Sección de Proyectos + identifier: projects-section + parent: sections + weight: 140 +--- + +El propósito de la sección `Proyectos` es mostrar eficazmente sus proyectos. En esta publicación, le guiaré a través del proceso de configuración de la sección de `Proyectos` en su sitio web. Para obtener una referencia completa, puede consultar el archivo de ejemplo [projects.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/projects.yaml). + +Para empezar, crea un nuevo archivo llamado `projects.yaml` dentro del directorio `data/es/sections` de tu sitio web. Después, sigue las instrucciones de abajo. + +### Añade la información de la sección + +Añade la siguiente sección de metadatos en el archivo `projects.yaml`: + +```yaml +section: + name: Proyectos # Título de la sección (predeterminado: "") + id: projects # id del url de la sección *se requiere* + enable: true # Booleano que determina si la sección está activada (predeterminado: false) + weight: 5 # Orden de la sección (predeterminado: alfabeticamente seguida del peso) + showOnNavbar: true # Booleano que determina si el enlace de esta sección debe aparecer en la barra de navegación + # Opcionalmente puede ocultar el título del menú + # hideTitle: true +``` + +### Añade los botones de filtrado de proyectos + +Ahora, añade una sección `buttons` dentro del archivo `projects.yaml`, como a continuación, + +```yaml +buttons: +- name: Todos + filter: "all" +- name: Professional + filter: "professional" +- name: Académico + filter: "academic" +- name: Hobby + filter: "hobby" +``` + +Cada botón tiene dos propiedades. La primera propiedad es `name`, que es el texto que se mostrará en el botón, y la otra es `filter` que especifica la categoría de los proyectos que el botón debe seleccionar. + +Un botón solo mostrará los proyectos que tengan una etiqueta que coincida con el texto especificado en el campo `filter`. El filtro del valor `all` es tratado especialmente. Selecciona todos los proyectos aunque no tengan la etiqueta `all` en su campo `tags`. + +### Añade tus proyectos + +Ahora, añade tus proyectos debajo de la sección `projects` del archivo, `projects.yaml` como a continuación, + +```yaml +projects: +- name: Kubernetes + logo: images/sections/projects/kubernetes.png + role: Contribuidor + timeline: "Marzo 2018 - Presente" + repo: https://github.com/kubernetes/kubernetes + #url: "" + summary: Programación y gestión de contenedores de nivel de producción. + tags: ["professional", "kubernetes", "cloud"] +``` + +Puedes especificar los siguientes campos en cada proyecto, + +- **name**: Nombre del proyecto. +- **logo**: Logo del proyecto. Si el proyecto no tiene logo, el tema automáticamente añadirá un marcador de posición allí. +- **role**: Tu rol en el proyecto. +- **timeline**: Intervalo de tiempo que has trabajado en el proyecto. +- **repo**: Si tu proyecto tiene un repositorio público de Github, entonces provee el enlace. Mostrará el contador de estrellas. +- **url**: Si tu proyecto no tiene un repositorio público, pero tiene una página web u otra url de detalles externos, proveelo aquí. No provees "repo" y "url" a la vez. Esto creará un botón con un enlace en la tarjeta del proyecto. +- **summary**: Breve descripción del proyecto. +- **tags**: Lista de etiquetas de tu proyecto. Se usarán para seleccionar el proyecto debajo de una categoría con los botones de filtrado. + +>Puedes usar la sintáctica de markdown en el campo `summary`. + +{{< vs 2 >}} + +La siguiente imagen muestra cómo el contenido de `projects.yaml` está distribuido en la sección de `Proyectos`. + +{{< img src="images/projects.png" >}} diff --git a/content/posts/configuration/sections/recent-posts/index.es.md b/content/posts/configuration/sections/recent-posts/index.es.md new file mode 100644 index 00000000..ba2af1f2 --- /dev/null +++ b/content/posts/configuration/sections/recent-posts/index.es.md @@ -0,0 +1,28 @@ +--- +title: "Configurando la sección de Publicaciones Recientes" +date: 2020-06-08T06:20:34+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Sección de Publicaciones Recientes + identifier: recent-posts-section + parent: sections + weight: 150 +--- + +La sección de `Publicaciones Recientes` sirve para mostrar las últimas publicaciones de tu contenido. Para habilitar esta sección, crea un archivo `recent-posts.yaml` dentro del directorio `data/en/sections` e incluye el siguiente contenido: + +```yaml +# Información de la sección +section: + name: Publicaciones Recientes # Título de la sección + id: recent-posts # id del url de la sección *se requiere* + enable: true # Booleano que determina si la sección está activada (predeterminado: false) + weight: 6 # Orden de la sección (predeterminado: alfabeticamente seguida del peso) + showOnNavbar: true # Booleano que determina si el enlace de esta sección debe aparecer en la barra de navegación + hideTitle: true # Opcionalmente puede ocultar el título del menú (predeterminado: false) + numShow: 4 # Opcionalmente puede incrementar el número de publicaciones para mostrar (predeterminado: 3) + showMoreButton: false # Opcionalmente puede mostrar el botón `Más publicaciones` (predeterminado: false) +``` diff --git a/content/posts/configuration/sections/skills/index.es.md b/content/posts/configuration/sections/skills/index.es.md new file mode 100644 index 00000000..3a91ea8e --- /dev/null +++ b/content/posts/configuration/sections/skills/index.es.md @@ -0,0 +1,56 @@ +--- +title: "Configurando la sección de Habilidades" +date: 2020-06-08T06:20:45+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Sección de Habilidades + identifier: skills-sections + parent: sections + weight: 120 +--- + +La sección de `Habilidades` ha sido diseñada para mostrar sus habilidades y proporcionar información sobre su experiencia en cada habilidad. Esta guía lo guiará a través del proceso de configuración de la sección de `Habilidades` en su sitio web. Para obtener una referencia completa, puede consultar el archivo de ejemplo [skills.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/skills.yaml). + +Para empezar, crea un nuevo archivo llamado `skills.yaml` dentro del directorio `data/es/sections` de tu sitio web. Después, sigue las instrucciones de abajo. + +### Añade la información de la sección + +Añade la siguiente sección de metadatos en el archivo `skills.yaml`: + +```yaml +section: + name: Habilidades # Título de la sección (predeterminado: "") + id: skills # id del url de la sección *se requiere* + enable: true # Booleano que determina si la sección está activada (predeterminado: false) + weight: 2 # Orden de la sección (predeterminado: alfabeticamente seguida del peso) + showOnNavbar: true # Booleano que determina si el enlace de esta sección debe aparecer en la barra de navegación + # Opcionalmente puede ocultar el título del menú + # hideTitle: true +``` + +### Añade tus habilidades + +Para añadir una `habilidad` añada su información debajo de la sección `skills` dentro del archivo `skills.yaml`, como a continuación: + +```yaml +# Tus habilidades +# Haz un resumen de cada habilidad. +skills: +- name: Kubernetes + icon: "images/sections/skills/kubernetes.png" + summary: "Capaz de implementar y administrar aplicaciones en Kubernetes. Con experiencia en escribir controladores de Kubernetes para CRD." + url: https://kubernetes.io/ +``` + +Aquí, debes proveer los campos `name`, `log`, y `summary` para cada habilidad. El campo `summary` debe proveer una idea sobre su profundo conocimiento de esta habilidad en particular. + +>Puedes usar la sintáctica de markdown en el campo `summary`. + +{{< vs 2 >}} + +La siguiente imagen muestra cómo el contenido de `skills.yaml` está distribuido en la sección de `Habilidades`. + +{{< img src="images/skills.png">}} diff --git a/content/posts/configuration/site-parameters/index.es.md b/content/posts/configuration/site-parameters/index.es.md new file mode 100644 index 00000000..2a1325f6 --- /dev/null +++ b/content/posts/configuration/site-parameters/index.es.md @@ -0,0 +1,178 @@ +--- +title: "Configurando parámetros del sitio web" +date: 2020-06-08T06:20:55+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Parámetros del sitio + identifier: configuration-site-parameters + parent: configuration + weight: 105 +--- + +Después de instalar este tema, cuando ejecutas tu sitio web por primera vez, se iniciará con los parámetros predeterminados. Debería parecerse a este sitio de ejemplo, pero sin secciones en la página de inicio. No te preocupes, puede añadir estas secciones proporcionando los archivos de datos necesarios. + +En las próximas publicaciones, le guiaré sobre cómo añadir estas secciones y personalizar tu sitio web. Pero primero, empezaremos cambiando los parámetros del sitio. Puedes modificar el fondo, el logo, la información del autor y habilitar/deshabilitar varias funcionalidades. + +Para obtener una lista completa de los parámetros de configuración disponibles, consulte el [sitio de ejemplo](https://github.com/hugo-toha/hugo-toha.github.io/tree/main). + +### Añade un Fondo + +Para empezar, vamos a establecer un fondo para tu sitio web. Pon la imagen de fondo que desee en el directorio `assets/images`. Después, añade lo siguiente en la sección `params` del archivo `config.yaml`. + +```yaml +background: "images/nombre_de_tu_imagen_de_fondo.jpg" +``` + +### Añade un Logo + +Para añadir logos para tu sitio, necesitas dos logos diferentes: uno para la barra de navegación transparente, y otro para la barra de navegación no-transparente. Pon tus logos dentro del directorio `assets/images` y añade las siguientes líneas debajo de la sección `params` del archivo `config.yaml`. + +```yaml +# El logo invertido será usado para la barra de navegación transparente. +# El logo principal será usado para la barra de navegación no-transparente. +logo: + main: images/logo-principal.png + inverted: images/logo-invertido.png + favicon: images/favicon.png +``` + +### Habilita publicaciones del Blog + +Para habilitar publicaciones de blog en tu sitio web, necesitarás aplicar unos cambios en el archivo `config.yaml`. Localiza la sección `params.features` y añada el siguiente código. + +```yaml +# Habilita y configura publicaciones de Blog +blog: + enable: true +``` + +### Habilita `Tabla de Contenido` + +Ahora, si quiere mostrar la sección `Tabla de Contenido` en tu publicación de blog, tienes que habilitarlo en la sección `params.features` del archivo `config.yaml`. + +```yaml +toc: + enable: true +``` + +También puedes controlar los niveles de tu Tabla de Contenido añadiendo la siguiente configuración en la sección de `markup` de tu archivo `config.yaml`. + +```yaml +markup: + tableOfContents: + startLevel: 2 + endLevel: 6 + ordered: false +``` + +Aquí, hemos configurado nuestra Tabla de Contenido para mostrar todos los encabezados desde `h2` hasta `h6`. + +### Habilita el botón `` + +Si quieres permitir que los lectores mejoren fácilmente una publicación haciendo correcciones como faltas de ortografía o identación, puedes habilitar el botón ``. Para hacerlo, añada su URL del repositorio de git en la sección `params` del archivo `config.yaml`. + +```yaml +gitRepo: +``` + +Esto añadirá un botón con la etiqueta `Mejorar esta página` al final de cada publicación de blog. El botón dirigirá al usuario directamente a la página de edición respectiva en Github. + +Si tu rama por defecto no tiene el nombre de `main`, necesitarás especificar tu rama por defecto de git en la sección `params` en el archivo `config.yaml`. + +```yaml +gitBranch: +``` + +### Habilita Boletín Informativo + +Para habilitar la funcionalidad de boletín informativo, necesitarás proveer los parámetros necesarios debajo de la sección `params.footer` en el archivo `config.yaml`. Ahora mismo, el boletín informativo solo es soportado por el proveedor Mailchimp. Aquí hay un ejemplo de cómo debería ser: + +```yaml +newsletter: + enable: true + provider: mailchimp + mailchimpURL: https://github.us1.list-manage.com/subscribe/post?u=19de52a4603135aae97163fd8&id=094a24c76e +``` + +Para deshabilitar la funcionalidad del boletín informativo, puedes establecerlo con la siguiente configuración. + +```yaml +newsletter: + enable: false +``` + +### Habilita RAW HTML en los archivos de Markdown + +Si quiere incluir RAW HTML en tus archivos de markdown, necesitarás habilitar el rendering inseguro. Sin habilitarlo, Hugo no podrá renderizar HTML. Para habilitar rendering inseguro de markdown, añade la siguiente configuración de `goldmark` en la sección `markup` del archivo `config.yaml`. + +```yaml +markup: + goldmark: + renderer: + unsafe: true +``` + +### Añade información del autor + +Ahora, crea un archivo `author.yaml` dentro del directorio `/data/es/` y añade tu información como a continuación: + +```yaml +# Alguna información sobre ti +name: "Jane Doe" +nickname: "Jane" +image: "images/avatar.png" + +# mensaje de saludo antes de tu nombre. El valor predeterminado será "Hi!, I am" si no se proporciona. +greeting: "Hola, soy" + +# da tu información de contacto. Se utilizará en el pie de página +contactInfo: + email: "janedoe@example.com" + phone: "+0123456789" + stack-overflow: + icon: stack-overflow + url: "https://stackoverflow.com/users/1/exampleUser" + text: "ExampleUser" + +# Un pequeño resumen de lo que haces +summary: + - Soy un desarrollador + - Trabajo con Go + - Me gusta trabajar en proyectos divertidos +``` + +> Nota: Los parámetros de `contactInfo` usarán el campo `icon` para buscar el respectivo icono. Asegúrese que el campo `icon` coincide con los nombres de la fuente awesome. Puedes encontrar ejemplos [aquí](https://fontawesome.com/search?o=r&f=brands). + +### Añade un aviso de derechos de autor + +Para añadir un aviso de derechos de autor en tu sitio, crea un archivo `site.yaml` dentro del directorio `/data/es`. Añada la siguiente sección al archivo: + +```yaml +copyright: © 2024 Copyright. +``` + +### Descripción del sitio + +Para añadir una descripción de tu sitio web que ayudará a los motores de búsqueda a encontrar tu sitio, necesitarás añadir una sección de `description` en tu archivo `site.yaml`. + +```yaml +# Meta descripción de su sitio. Esto ayudará a los motores de búsqueda a encontrar su sitio. +description: Página de ejemplo del tema de hugo Toha. +``` + +### Añade Menús personalizados + +Para añadir menús personalizados en la barra de navegación, puedes modificar el archivo `site.yaml`. Por defecto, los menús personalizados son visibles en la barra de navegación. Para esconder un menú personalizado, establece la propiedad `hideFromNavbar` a `true`. Por defecto, los menús personalizados están ocultos del área del pie de página. Para mostrar un elemento de menú personalizado en el pie de página, establece la propiedad `showOnFooter` a `true`. Esto es particularmente útil cuando desea añadir un enlace a otro sitio en la barra de navegación. + +```yaml +customMenus: +- name: Notes + url: https://hossainemruz.gitbook.io/notes/ + hideFromNavbar: false + showOnFooter: true +``` + +Ahora, puedes ejecutar tu sitio y ver los cambios. En las siguientes publicaciones, te guiaré en cómo añadir secciones a tu página de inicio y personalizar aún más su sitio. \ No newline at end of file diff --git a/content/posts/customizing/_index.es.md b/content/posts/customizing/_index.es.md new file mode 100644 index 00000000..9fce7f5c --- /dev/null +++ b/content/posts/customizing/_index.es.md @@ -0,0 +1,8 @@ +--- +title: Personalización +menu: + sidebar: + name: Personalización + identifier: customizing + weight: 400 +--- diff --git a/content/posts/customizing/customize-css/index.es.md b/content/posts/customizing/customize-css/index.es.md new file mode 100644 index 00000000..3435ea03 --- /dev/null +++ b/content/posts/customizing/customize-css/index.es.md @@ -0,0 +1,102 @@ +--- +title: "Personalización del CSS" +date: 2024-01-13T22:00:50+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Personalización CSS + identifier: customize-css + parent: customizing + weight: 407 +--- + +Este tema te permite personalizar la apariencia de tu sitio y sus componentes sobrescribiendo el CSS predeterminado. Esta guía te enseñará cómo sobrescribir el esquema de colores del tema y la personalización de CSS de componentes individuales. + +Este tema usa [Sass](https://sass-lang.com/) para generar el CSS. Si no está familiarizado con Sass, puedes aprender más sobre él [aquí](https://sass-lang.com/guide). + +## Sobrescribe las variables de los colores + +Si quieres cambiar los colores por defecto del tema, pueds sobrescribir las variables de los colores. Para sobrescribir las variables de los colores del tema, necesitarás crear un archivo nombrado `variables.scss` dentro del directorio `assets/styles` de tu sitio. Después copia el contenido predeterminado del archivo [variables.scss](https://github.com/hugo-toha/toha/blob/main/assets/styles/variables.scss), y ponlo en tu archivo `variables.scss`. Aquí, solo la sección de `$theme` predeterminada de `variables.scss` es mostrada: + +```scss +// themes +$themes: ( + 'light': ( + // cyan 600 + 'accent-color': #0891b2, + // cyan 500 + 'hover-over-accent-color': #06b6d4, + // zinc 200 + 'text-over-accent-color': #e4e4e7, + // slate 50 + 'bg-primary': #f8fafc, + // slate 900 + 'bg-primary-inverse': #0f172a, + // slate 200 + 'bg-secondary': #e2e8f0, + 'bg-card': #fff, + // slate 800 + 'heading-color': #1e293b, + // slate 700 + 'text-color': #334155, + // slate 300 + 'inverse-text-color': #cbd5e1, + // slate 500 + 'muted-text-color': #64748b, + // red 600 + 'inline-code-color': #dc2626, + // amber 200 + 'highlight-color': #fde68a, + // slate 900 + 'footer-color': #0f172a, + ), + 'dark': ( + // cyan 600 + 'accent-color': #0891b2, + // cyan 500 + 'hover-over-accent-color': #06b6d4, + // zinc 200 + 'text-over-accent-color': #e4e4e7, + // gray-800 + 'bg-primary': #1f2937, + // slate 900 + 'bg-primary-inverse': #0f172a, + // gray 900 + 'bg-secondary': #111827, + // slate 800 + 'bg-card': #1e293b, + // slate 100 + 'heading-color': #f1f5f9, + // slate 300 + 'text-color': #cbd5e1, + // slate 900 + 'inverse-text-color': #0f172a, + // slate 500 + 'muted-text-color': #64748b, + // red 600 + 'inline-code-color': #dc2626, + // amber 200 + 'highlight-color': #fde68a, + // slate 900 + 'footer-color': #0f172a, + ), +); +``` + +Los campos `light` y `dark` representan los esquemas de color para el modo claro y el modo oscuro, respectivamente. Modificando los códigos de color en estos campos, puedes personalizar la apariencia de su sitio. + +## Override Component CSS + +Para sobrescribir el CSS de un componente, crea un archivo `override.scss` dentro del directorio `assets/styles`. Después, allí pon el nuevo código CSS. No necesitarás reescribir toda la componente de CSS. Puedes poner solo los campos que quieras cambiar. + +Por ejemplo, para deshabilitar el efector de difuminado de la imagen de fondo de la página de inicio, puedes añadir el siguiente código SCSS en el archivo `override.scss`: + +```scss +.home{ + .background{ + filter: none; + } +} +``` diff --git a/content/posts/customizing/customize-layout/index.es.md b/content/posts/customizing/customize-layout/index.es.md new file mode 100644 index 00000000..b309c9da --- /dev/null +++ b/content/posts/customizing/customize-layout/index.es.md @@ -0,0 +1,46 @@ +--- +title: "Personalización de la Disposición" +date: 2021-08-07T06:20:50+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Personalizacion Disposición + identifier: customizing-layout + parent: customizing + weight: 410 +--- + +{{< alert type="warning" >}} +Si personalizas la disposición de un componente existente, no recibirás actualizaciones futuras para ese componente una vez el tema sea actualizado. Necesitarás actualizar ese componente en tu repositorio. +{{< /alert >}} + +En este tutorial, te guiaré en cómo personalizar la disposición de un tema. Yo personalmente he pasado por el proceso y compartiré mis ideas para ponértelo más fácil. + +### Paso 1: Cambia el archivo de Disposición + +Para personalizar la disposición de una sección, página o componente existente, necesitarás localizar el archivo correspondiente en el [directorio layout](https://github.com/hugo-toha/toha/tree/main/layouts) del tema. Una vez encuentre el archivo, cópialo y ponlo en la misma estructura de directorio dentro del directorio `layouts` de tu sitio. + +Por ejemplo, para personalizar la disposición de la sección `sobre mi`, sigue estos pasos: + +1. Copia el archivo `about.html` del directorio `layouts/partials/sections` del tema. +2. Pega el archivo en el directorio `layouts/partials/sections` de tu repositorio. +3. Modifica el archivo `about.html` para realizar los cambios de diseño deseados para la sección `sobre mi`. + +### Paso 2: Añade estilo CSS + +Si necesitas añadir CSS adicional en tu archivo layout modificado, lo puedes hacer añadiendo código CSS al archivo `assets/styles/override.scss` de tu sitio web. Este archivo es automáticamente cargado por el tema, y aplicará tus estilos personalizados. Si quieres añadir CSS en un archivo separado, pon el CSS dentro de un archivo SCSS en el directorio `assets/styles`, e incluye en el archivo `assets/styles/override.scss` la siguiente línea: + +```scss +@import "nombre-de-tu-archivo-scss"; +``` + +### Paso 3: Añade JavaScript + +Si tu archivo de disposición modificado requiere de JavaScript adicional, la manera recomendada es añadir el código de JavaScript en el mismo archivo de disposición con la etiqueta ` +``` diff --git a/content/posts/customizing/dark-theme/index.es.md b/content/posts/customizing/dark-theme/index.es.md new file mode 100644 index 00000000..111bd444 --- /dev/null +++ b/content/posts/customizing/dark-theme/index.es.md @@ -0,0 +1,25 @@ +--- +title: "Habilitar Tema Oscuro" +date: 2022-06-12T01:30:50+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Habilitar Tema Oscuro + identifier: enable-dark-theme + parent: customizing + weight: 405 +--- + +Para habilitar el modo oscuro en Toha `v4.0.0`, simplemente establece el campo `darkMode.enable` a `true` debajo de la sección `params.features` dentro del archivo `config.yaml`. Por ejemplo: + +```yaml +params: + features: + darkMode: + enable: true +``` + +¡Felicidades! Estas listo. Ahora puedes disfrutar del modo oscuro en tu sitio. El modo oscuro obedecerá a las preferencias del sistema del usuario. + diff --git a/content/posts/customizing/new-section/index.es.md b/content/posts/customizing/new-section/index.es.md new file mode 100644 index 00000000..e23c3361 --- /dev/null +++ b/content/posts/customizing/new-section/index.es.md @@ -0,0 +1,47 @@ +--- +title: "Añadiendo una nueva Sección" +date: 2024-01-13T22:30:50+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Añadiendo nueva Sección + identifier: customizing-add-new-section + parent: customizing + weight: 415 +--- + +Si las secciones, plantillas y componentes existentes no cumplen con tus necesidades, puedes añadir nuevas secciones, plantillas y componentes a tu sitio web. Esta guía te enseñará cómo añadir una nueva sección a tu sitio. + +### Paso 1: Cambia el archivo de Disposición + +Para añadir una nueva sección a tu sitio, necesitarás crear un archivo de disposicion en el directorio `layouts/partials/sections`. El archivo debería tener el nombre de la sección. Por ejemplo, si quieres añadir una sección `contact` con un formulario de contacto, crea un archivo llamado `contact.html`. Usa la siguiente plantilla para el archivo `contact.html`: + +```html +{{ $sectionID := replace (lower .section.name) " " "-" }} +{{ if .section.id }} + {{ $sectionID = .section.id }} +{{ end }} + +
+ // Tu código de HTML personalizado +
+``` + +### Paso 2: Añade estilo CSS + +Si necesitas añadir CSS adicional en tu archivo layout modificado, lo puedes hacer añadiendo código CSS al archivo `assets/styles/override.scss` de tu sitio web. Este archivo es automaticamente cargado por el tema, y aplicará tus estilos personalizados. Si quieres añadir CSS en un archivo separado, pon el CSS dentro de un archivo SCSS en el directorio `assets/styles`, e incluye en el archivo `assets/styles/override.scss` la siguiente línea: + +```scss +@import "nombre-de-tu-archivo-scss"; +``` + +### Paso 3: Añade JavaScript + +Si tu archivo de disposición modificado requiere de JavaScript adicional, la manera recomendada es añadir el código de JavaScript en el mismo archivo de disposición con la etiqueta ` +``` diff --git a/content/posts/external-link/index.es.md b/content/posts/external-link/index.es.md new file mode 100644 index 00000000..d051a046 --- /dev/null +++ b/content/posts/external-link/index.es.md @@ -0,0 +1,14 @@ +--- +title: "Link externo en la barra lateral" +date: 2022-03-14T06:00:23+06:00 +description: Añadir link externo en la barra lateral +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Ejemplo de link externo + identifier: external-link + pageRef: https://example.com/ + weight: 850 +--- diff --git a/content/posts/features/index.es.md b/content/posts/features/index.es.md new file mode 100644 index 00000000..59030101 --- /dev/null +++ b/content/posts/features/index.es.md @@ -0,0 +1,77 @@ +--- +title: "Características" +date: 2020-06-08T08:59:13+06:00 +description: Características del tema de Hugo Toha +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Características + identifier: features + weight: 1 +--- + +[Enlace de prueba](/es/posts/getting-started/prepare-site/index.md) + +Este tema ha sido diseñado desde un punto de preferencia personal. Como desarrollador, quiero organizar mi portfolio de manera que refleje de la mejor manera mis habilidades. Entonces, este tema puede o no satisfacer sus necesidades, pero estaré encantado de tener tu feedback. + +Esta publicación daré una descripción general de las características que este tema incorpora. + +### Diseño minimalista + +Este tema ha sido diseñado con la intención de ser minimalista y hermoso. El esquema de colores ha sido escogido para ser simple pero potente. Esta página de publicación ha sido diseñada para tener las menos distracciones posibles. Gracias a [Anup Deb](https://dribbble.com/anupdeb) por su guía en el diseño. + +{{< img src="images/minimalist.png" width="900" align="center">}} + +{{< vs 3 >}} + +### Receptivo + +El tema es completamente receptivo. Tiene una estética hermosa, y consistente en los dispositivos de Sobremesa, Portátiles, Tablet y Móviles. + +{{< img src="images/responsive.png" align="center" >}} + +{{< vs 3 >}} + +### Tarjetas diseñadas cuidadosamente + +Las tarjetas de habilidades y proyectos han sido diseñadas cuidadosamente para dar información significativa. Las tarjetas de habilidades no solo enumeran las habilidades. También dan al visitante una idea sobre el conocimiento de una habilidad particular. Las tarjetas de proyectos dan una idea sobre la popularidad de su proyecto si es un proyecto de código abierto en Github. + +{{< img src="images/cards.png" align="center" >}} + +{{< vs 3 >}} + +### Una cronología de experiencias que realmente representa tus experiencias + +La cronología de experiencias ha sido diseñada para reflejar su experiencia profesional. Muestra las responsabilidades que ha manejado en las distintas etapas de su carrera. + +{{< img src="images/experience-timeline.png" width="900" align="center" >}} + +{{< vs 3 >}} + +### Una galería para mostrar sus logros + +La sección de galería te permite mostrar tus logros al público. + +{{< img src="images/gallery.png" width="900" align="center" >}} + +{{< vs 3 >}} + +### Una barra lateral con sentido + +¿Alguna vez pasaste mucho tiempo buscando una publicación en particular en un blog? Yo también lo hice. Este tema incorpora un menú de barra lateral que clasifica sus publicaciones en varias categorías y subcategorías. + +{{< img src="images/sidebar.png" width="900" align="center" >}} + +{{< vs 3 >}} + +### Personalización & Extensibilidad + +Es fácil customizar el tema sin cambiar el código del tema. Ha sido diseñado para ser extensible y personalizado. Puedes añadir fácilmente una nueva sección o sobrescribir el CSS de cualquier sección existente si alterar el tema. + +¿Aún no cumples con tus requisitos? Presenta una solicitud de función [aquí](https://github.com/hossainemruz/toha). + +### Soporte de múltiples idiomas + +Este tema tiene soporte integrado para varios idiomas. Puede traducir su contenido a varios idiomas fácilmente para una mejor accesibilidad. diff --git a/content/posts/getting-started/_index.es.md b/content/posts/getting-started/_index.es.md new file mode 100644 index 00000000..d46c42be --- /dev/null +++ b/content/posts/getting-started/_index.es.md @@ -0,0 +1,8 @@ +--- +title: Primeros Pasos +menu: + sidebar: + name: Primeros Pasos + identifier: getting-started + weight: 10 +--- diff --git a/content/posts/getting-started/github-pages/index.es.md b/content/posts/getting-started/github-pages/index.es.md new file mode 100644 index 00000000..08d6fc70 --- /dev/null +++ b/content/posts/getting-started/github-pages/index.es.md @@ -0,0 +1,132 @@ +--- +title: "Despliegue el sitio en Github Pages" +date: 2020-06-08T22:00:20+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Despliegue en Github Pages + identifier: getting-started-github + parent: getting-started + weight: 20 +--- + +En esta publicación, vamos a desplegar el sitio que hemos creado en la pasada publicación en [Github Pages](https://pages.github.com/). Para empezar, debemos asegurarnos que el nombre de su repositorio es `.github.io`. Después, haz commit de todos los cambios no publicados y haz push a Github. + +#### Crea una rama `gh-pages` + +Para empezar, crea una nueva rama llamada `gh-pages`. Github automáticamente establecerá las respectivas configuraciones para Github pages cuando vea la rama con este nombre. + +```bash +# crea la rama gh-pages +$ git checkout -b gh-pages +# hace push de la rama source a Github +$ git push gh-pages gh-pages +``` + +#### Habilite Github Action + +Vamos a automatizar el proceso de despliegue usando [Github Actions](https://github.com/features/actions). En un principio, asegúrese de que Github Action esté habilitado en su repositorio. Vaya a `Settings > Actions` de su repositorio y asegúrese de que `Action permissions` esté en modo `Allow all actions`. Aquí hay una captura de pantalla de la configuración respectiva: + +{{< img src="images/enable_action.png" align="center" >}} + +#### Añade un Workflow + +Usaremos la acción [peaceiris/actions-hugo](https://github.com/peaceiris/actions-hugo) para inicializar hugo y [peaceiris/actions-gh-pages](https://github.com/peaceiris/actions-gh-pages) para desplegar el sitio web. Crea un directorio `.github` en la raíz de tu repositorio. Después, crea un directorio `workflows` dentro del directorio `.github`. Finalmente, crea un archivo `deploy-site.yaml` dentro del directorio `workflows` y añade el siguiente contenido: + +```yaml +name: Deploy to Github Pages + +# se ejecuta cuando un commit es pusheado a la rama "source" +on: + push: + branches: + - main + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + # checkout del commit que ha sido pusheado + - uses: actions/checkout@v3 + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2.6.0 + with: + hugo-version: 'latest' + extended: true + + - name: Update Hugo Modules + run: hugo mod tidy + + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: 18 + + - name: Install node modules + run: | + hugo mod npm pack + npm install + + - name: Build + run: hugo --minify + + # hace push del contenido generado a la rama `gh-pages`. + - name: Deploy + uses: peaceiris/actions-gh-pages@v3.9.0 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_branch: gh-pages + publish_dir: ./public +``` + +Esta acción se ejecutará en cada push de la rama `main`. Se creará el sitio web y hará un commit a la rama `gh-pages` con el contenido generado. + +#### Despliegue + +Si ha seguido la guía adecuadamente, su sitio debería estar listo para el despliegue en Github Pages. Ahora, si haces un push de cualquier commit a tu rama `main`, se empezará una Github Action y se desplegará su sitio web automáticamente. + +Haz push de un commit a la rama `main` y vaya a la pestaña `Actions` de su repositorio para verificar que la acción ha empezado. + +{{< img src="images/action_running.png" align="center" >}} + +{{< vs 2 >}} + +Ahora, espere que las acciones se completen. Si se han completado correctamente, debería ver un tick verde indicado que se han ejecutado correctamente. + +{{< img src="images/action_completed.png" align="center" >}} + +{{< vs 2 >}} + +Una vez la Github Action se ha completado correctamente, puede navegar a su sitio web en `https://.github.io`. + +{{< img src="images/site_deployed.png" align="center" >}} + +#### Añade un dominio personalizado + +Si posee un dominio y desea utilizarlo en este sitio web, vaya al sitio web de su proveedor del dominio. Ahí, añade los siguientes Resource Records: +``` +@ 3600 IN A 185.199.108.153 +@ 3600 IN A 185.199.109.153 +@ 3600 IN A 185.199.110.153 +@ 3600 IN A 185.199.111.153 + +WWW 3600 IN A 185.199.108.153 +WWW 3600 IN A 185.199.109.153 +WWW 3600 IN A 185.199.110.153 +WWW 3600 IN A 185.199.111.153 +``` + +Para verificar que su dominio y asegurarse que nadie de Github pueda usarlo excepto tu, puedes seguir los pasos en [esta guía](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/verifying-your-custom-domain-for-github-pages). + +Finalemente, crea un archivo `CNAME` dentro del directorio `/static` de tu repositorio. Ahí añade tu dominio: + +``` +example.com +``` + +Una vez que la Github Action se haya completado correctamente, puede navegar a su sitio web en `https://`. + +Ten en cuenta que navegando a `https://.github.io` será redirigido automáticamente a `https://`. diff --git a/content/posts/getting-started/netlify/index.es.md b/content/posts/getting-started/netlify/index.es.md new file mode 100644 index 00000000..ef1470cc --- /dev/null +++ b/content/posts/getting-started/netlify/index.es.md @@ -0,0 +1,118 @@ +--- +title: "Despliegue el sitio en Netlify" +date: 2020-06-08T21:00:15+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Despliegue en Netlify + identifier: getting-started-netlify + parent: getting-started + weight: 30 +--- + +[Netlify](https://www.netlify.com/) ofrece un excelente y fácil proceso para desplegar un sitio de hugo estático. Puedes desplegar su sitio web en cuestión de unos solos clics. A diferencia de Github Pages, puedes nombrar su repositorio como quieras. También puede personalizar el URL del sitio. + +En esta publicación, mostraremos paso a paso el proceso de despliegue de un sitio hugo con netlify. + +### Añade configuración de Netlify + +Para empezar, cree un archivo `netlify.toml` a la raíz de su repositorio y añade las siguientes configuraciones: + +```toml +[build] +command = "hugo --gc --minify" +publish = "public" + +[context.production.environment] +HUGO_ENABLEGITINFO = "true" +HUGO_ENV = "production" +HUGO_VERSION = "0.120.1" +NODE_VERSION = "v18.12.1" +NPM_VERSION = "8.19.2" + +[context.split1] +command = "hugo mod tidy && hugo mod npm pack && npm install && hugo --gc --minify --enableGitInfo" + + [context.split1.environment] + HUGO_ENV = "production" + HUGO_VERSION = "0.120.1" + NODE_VERSION = "v18.12.1" + NPM_VERSION = "8.19.2" + +[context.deploy-preview] +command = "hugo mod tidy && hugo mod npm pack && npm install && hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL" + + [context.deploy-preview.environment] + HUGO_VERSION = "0.120.1" + NODE_VERSION = "v18.12.1" + NPM_VERSION = "8.19.2" + +[context.branch-deploy] +command = "hugo mod tidy && hugo mod npm pack && npm install && hugo --gc --minify -b $DEPLOY_PRIME_URL" + + [context.branch-deploy.environment] + HUGO_VERSION = "0.120.1" + NODE_VERSION = "v18.12.1" + NPM_VERSION = "8.19.2" + +[context.next.environment] +HUGO_ENABLEGITINFO = "true" +``` + +Haz commit y haz push del archivo `netlify.toml` en Github. Ahora, está listo para desplegar su sitio con netlify. + +### Despliegue el sitio + +Ahora, accede a [netlify](https://www.netlify.com/). Después, vaya a la pestaña `Sites` del panel de netlify y pulsa el botón `New site from Git`. + +{{< img src="images/2.png" align="center" >}} + +{{< vs 2 >}} + +Aparecerá una nueva ventana. Seleccione `Github` y autentificate con tu cuenta de Github. + +{{< img src="images/3.png" align="center" >}} + +{{< vs 2 >}} + +Después de la autentificación, le pedirá que seleccione el repositorio deseado. Seleccione el repositorio que está usando para su sitio web. + +{{< img src="images/4.png" align="center" >}} + +{{< vs 2 >}} + +Ahora, netlify te llevará a la página de despliegue. Seleccione la rama que quieres desplegar. Netlify debería completar automáticamente los campos obligatorios del archivo `netlify.toml` que creó anteriormente en esta publicación. Cuando estés satisfecho con las configuraciones, pulse el botón `Deploy`. + +{{< img src="images/5.png" align="center" >}} + +{{< vs 2 >}} + +Ahora, netlify empezará a publicar su sitio web inmediatamente. Espera que el proceso de publicación se complete. Una vez el sitio se halla publicado, puede navegar a su sitio en el URL generado automáticamente por netlify. Este URL autogenerado ha sido apuntado por un rectángulo rojo en la captura de pantalla de abajo. + +{{< img src="images/6.png" align="center" >}} + +### Personaliza la URL + +Puede personalizar fácilmente la URL de tu sitio con unos pocos clics mostrados a continuación. + +1. Pulsa el botón `Domain Setting` debajo de la pestaña `Site Overview`. + +{{< img src="images/7.png" align="center" >}} + +2. Ahora, puede añadir tu dominio personal pulsando el botón `Add custom domain`, o puede usar el dominio `.netlify.app`. Aquí vamos con lo último. Haga clic en `options` y seleccione `Edit site name`. + +{{< img src="images/8.png" align="center" >}} + +{{< vs 2 >}} + +3. Después, da el nombre que quieras a tu sitio web. + +{{< img src="images/9.png" align="center" >}} + +{{< vs 2 >}} + +4. Una vez haya guardado el nombre nuevo, verá que el URL de su sitio web se ha actualizado instantáneamente. Ahora, puede navegar a su sitio web con la nueva URL. + +{{< img src="images/10.png" align="center" >}} diff --git a/content/posts/getting-started/prepare-site/index.es.md b/content/posts/getting-started/prepare-site/index.es.md new file mode 100644 index 00000000..0e1c88e2 --- /dev/null +++ b/content/posts/getting-started/prepare-site/index.es.md @@ -0,0 +1,533 @@ +--- +title: "Prepare su sitio web" +date: 2020-06-08T23:00:20+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Prepare su sitio web + identifier: getting-started-prepare-site + parent: getting-started + weight: 10 +--- + +En esta publicación, vamos a crear un sitio de hugo desde cero. Después, lo configuraremos con el tema `Toha`, lo haremos plurilingüe, y añadiremos publicaciones de ejemplo. Al final de esta publicación, deberías poder ejecutar un sitio hugo con el tema `Toha` totalmente funcional localmente. + +Si quieres un atajo, puedes simplemente hacer un fork del repositorio [hugo-toha/hugo-toha.github.io](https://github.com/hugo-toha/hugo-toha.github.io), renombrarlo y actualizarlo con tus datos. Este repositorio ya está configurado para el despliegue en [Github Pages](https://pages.github.com/) y [Netlify](https://www.netlify.com/). + +### Crea el Repositorio + +Para empezar, crea un repositorio en Github. Si quieres desplegar este sitio en Github Pages, el nombre de tu repositorio debería ser `.github.io`. Clona el repositorio en tu máquina local y dirígete hacia él. + +### Crea el sitio + +Ahora, asegúrese que tiene [Hugo](https://gohugo.io/getting-started/installing/) instalado. Este tema debería funcionar con la versión de hugo `v0.118.0` o posterior. Ahora, ejecuta el siguiente comando en la raíz de su repositorio para inicializar un sitio web de hugo. + +```console +hugo new site ./ --format=yaml --force +``` + +Este comando creará una estructura básica de un sitio de hugo. Aquí, el parámetro `-f=yaml` indica a hugo que cree el archivo de configuración en el formato YAML, y el parámetro `--force` fuerza a hugo que cree el sitio aunque el directorio destino no esté vacío. Creará un archivo `hugo.yaml` que contendrá todas las configuraciones necesarias para su sitio. + +### Añade el tema + +Vamos a usar el módulo de hugo para añadir el tema `Toha` a nuestro sitio web. Para empezar, inicializa los módulos de hugo usando el siguiente comando: + +```bash +hugo mod init github.com// +``` + +Este comando creará un archivo `go.mod` a la raíz de su repositorio. + +Después, añade la siguiente sección de módulo en el archivo `hugo.yaml`: + +```yaml +module: + imports: + - path: github.com/hugo-toha/toha/v4 + mounts: + - source: ./node_modules/flag-icon-css/flags + target: static/flags + - source: ./node_modules/@fontsource/mulish/files + target: static/files + - source: ./node_modules/katex/dist/fonts + target: static/fonts +``` + +Finalmente, ejecuta los siguientes comandos para descargar el tema y sus dependencias: + +```bash +# descargar el tema +hugo mod get -u +# descargar las dependencias del tema +hugo mod tidy +# genera dependencias de node +hugo mod npm pack +# instala dependencias +npm install +``` + +### Ejecuta el sitio web localmente + +Ahora, ya puedes ejecutar tu sitio web localmente. Lo ejecutaremos en modo observador con el siguiente comando: + +```console +hugo server -w +``` + +Si navega hacia `http://localhost:1313`, debería ver un sitio web básico con el tema Toha. En la siguiente sección, configuraremos el sitio para que se parezca a [hugo-toha.github.io](https://hugo-toha.github.io/). Como hemos ejecutado el server en modo observador, cualquier cambio que hagamos al sitio, será visible instantáneamente en el navegador. + +### Configura el sitio + +Ahora, ya estamos preparados para configurar nuestro sitio web. En esta sección, añadiremos la información de autor, diferentes secciones, publicaciones de ejemplo, etc. + +#### Actualiza `hugo.yaml` + +Cuando ha creado el sitio usando el comando `hugo new site`, ha creado un archivo `hugo.yaml` en la raíz de su repositorio. Substituye el contenido por defecto del archivo `hugo.yaml` por el siguiente: + +```yaml +baseURL: https://hugo-toha.github.io + +languageCode: en-us +title: "John's Blog" + +# Utiliza Hugo modules para añadir el tema + +module: + imports: + - path: github.com/hugo-toha/toha/v4 + mounts: + - source: static/files + target: static/files + - source: ./node_modules/flag-icon-css/flags + target: static/flags + - source: ./node_modules/@fontsource/mulish/files + target: static/files + - source: ./node_modules/katex/dist/fonts + target: static/fonts + +# Administrar idiomas +# Para más detalles, puedes visitar la documentación oficial de hugo: https://gohugo.io/content-management/multilingual/ +languages: + es: + languageName: Español + weight: 1 + en: + languageName: English + weight: 2 + +# Forzar el uso de una configuración regional, ¡realmente útil para desarrollar la aplicación! +# DefaultContentLanguage: bn + +# Autorizar raw html en markdown +markup: + goldmark: + renderer: + unsafe: true + tableOfContents: + startLevel: 2 + endLevel: 6 + ordered: false + +# Al menos HTML y JSON son requeridos por el contenido principal de HTML y búsqueda de Javascript en el lado del cliente. +outputs: + home: + - HTML + - RSS + - JSON + +# Habilitar soporte global de emojis +enableEmoji: true + +# Parámetros del sitio +params: + # URL del repositorio de Github de tu sitio web + gitRepo: https://github.com/hugo-toha/hugo-toha.github.io + + features: + # Habilitar sección de portfolio + portfolio: + enable: true + + # Habilitar publicaciones de Blog + blog: + enable: true + + # Habilitar tabla de contenido en la página de lectura + toc: + enable: true + + # Configurar pie de págna + footer: + enable: true +``` + +Aquí, está viendo la configuración básica del tema de Toha. Puede ver el archivo de configuración usado en el sitio web de ejemplo [aquí](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/hugo.yaml). Para más detalles en las opciones de configuración, por favor visite [esta publicación](/es/posts/configuration/site-parameters/). + +#### Añade datos + +La mayoría del contenido de este tema es manejado por algún archivo YAML dentro del directorio `data`. En esta sección, vamos a añadir datos de ejemplo. Ya que estamos construyendo un sitio plurilingüe, vamos a mantener los datos de cada idioma separados en su propio directorio de idioma. + +Para empezar, crea el directorio `es` dentro del directorio `data`. Aquí vamos a añadir los datos en el idioma `Español`. + +##### Información del sitio + +Ahora, crea un sitio `site.yaml` dentro del directorio `/data/es/` de tu repositorio. Añade el siguiente contenido: + +```yaml +# Aviso de copyright +copyright: © 2024 Copyright. + +# Meta descripción de su sitio. Esto ayudará a los motores de búsqueda a encontrar su sitio. +description: Página de ejemplo del tema de hugo Toha. +``` + +Para ver todas las opciones disponibles para la información del sitio, visite [este archivo de ejemplo](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/site.yaml). + +##### Información del Autor + +Ahora, crea un archivo `author.yaml` dentro del directorio `/data/es/` y añade tu información como a continuación: + +```yaml +# Alguna información sobre ti +name: "John Doe" +nickname: "John" +# mensaje de saludo antes de tu nombre. El valor predeterminado será "Hi!, I am" si no se proporciona. +greeting: "Hola, soy" +image: "images/author/john.png" +# da tu información de contacto. Se utilizará en el pie de página +contactInfo: + email: "johndoe@example.com" + phone: "+0123456789" + github: johndoe + linkedin: johndoe + +# Un pequeño resumen de lo que haces +summary: + - Soy un desarrollador + - Soy un Devops + - Me gustan los servers + - Trabajo en proyectos de código abierto + - Me gusta trabajar en proyectos divertidos +``` + +##### Añade secciones + +Ahora, vamos a añadir distintas secciones en nuestra página de inicio. Al principio, crea un directorio `sections` dentro de tu directorio `/data/es`. Aquí añadiremos algunas secciones con configuraciones mínimas. Para ver opciones de configuraciones detalladas para las secciones, por favor, visite [aquí](/es/posts/configuration/sections/). + +###### Sección Sobre mi + +Crea un archivo `about.yaml` dentro del directorio `/data/es/sections/`. Después añade el siguiente contenido: + +```yaml +# Información de la sección +section: + name: Sobre mi + id: about + enable: true + weight: 1 + showOnNavbar: true + +# Tu designación +designation: Ingeniero de Software +# Información de tu empresa +company: + name: Example Co. + url: "https://www.example.com" + +# tu currículum. Este archivo debe ser relativo a tu directorio "static" +resume: "files/resume.pdf" + +# Un resumen sobre ti +summary: 'Soy un ingeniero de software apsionado con x años de experiencia. He creado herramientas OSS para [Kubernetes](https://kubernetes.io/) utilizando Go. Mis herramientas ayudan a personas a desplegar sus workloads en Kubernetes. A veces trabajo en projectos divertidos como crear un tema, etc.' + +# tus links de redes sociales +# da tantos como quieras. Utilitza font-awesome para los iconos. +socialLinks: +- name: Email + icon: "fas fa-envelope" + url: "example@gmail.com" + +- name: Github + icon: "fab fa-github" + url: "https://www.github.com/example" + +- name: Stackoverflow + icon: "fab fa-stack-overflow" + url: "#" + +- name: LinkedIn + icon: "fab fa-linkedin" + url: "#" + +- name: Twitter + icon: "fab fa-twitter" + url: "#" + +- name: Facebook + icon: "fab fa-facebook" + url: "#" + +# competencias sociales +# Da un percentaje entre 50 y 100, en intervalos de 5 unidades. +# colores soportados: blue, yellow, pink, green, sky, orange. +softSkills: +- name: Liderazgo + percentage: 85 + color: blue +- name: Trabajo en equipo + percentage: 90 + color: yellow +- name: Comunicación + percentage: 85 + color: pink +- name: Trabajo duro + percentage: 85 + color: green +- name: Aprendizaje rápido + percentage: 85 + color: sky +- name: Solucionador de problemas + percentage: 85 + color: orange +# también puede dar códigos de colores en vez de un nombre de color predeterminado +# - name: Example 1 +# percentage: 75 +# color: "#00adb5" +# - name: Example 2 +# percentage: 65 +# color: "#8b8383" +``` + +pon el archivo `resume.pdf` dentro del directorio `/static/files` de tu repositorio. Puedes encontrar el archivo `about.yaml` usado en el sitio web de ejemplo [aquí](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/about.yaml). + +###### Sección de Habilidades + +Crea un archivo `skills.yaml` dentro del directorio `/data/es/sections/`. Después añade el siguiente contenido: + +```yaml +# Infomración de la sección +section: + name: Habilidades + id: skills + enable: true + weight: 2 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# Tus habilidades +# Haz un resumen de cada habilidad. +skills: +- name: Kubernetes + icon: "images/sections/skills/kubernetes.png" + summary: "Capaz de implementar y administrar aplicaciones en Kubernetes. Con experiencia en escribir controladores de Kubernetes para CRD." + url: https://kubernetes.io/ + +- name: Go Development + icon: "images/sections/skills/go.png" + summary: "Utilizando como lenguaje principal para el desarrollo profesional. Capaz de escribir programas escalables, comprobables y mantenibles." + url: "https://golang.org/" + +- name: Cloud Computing + icon: "images/sections/skills/cloud.png" + summary: "He trabajado con la mayoría de los principales plataformas de computación en la nube, como GCP, AWS, Azure, etc." +``` + +Pon las imágenes de habilidades dentro del directorio `images/sections/skills/` de tu repositorio. Puede encontrar las imágenes [aquí](https://github.com/hugo-toha/hugo-toha.github.io/tree/source/assets/images/sections/skills). También, puede encontrar el archivo `skills.yaml` usado en este sitio de ejemplo [aquí](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/skills.yaml). + +###### Sección de Experiencia + +Crea un archivo `experiences.yaml` dentro del directorio `/data/es/sections/`. Después añade el siguiente contenido: + +```yaml +# Información de la sección +section: + name: Experiencia + id: experiences + enable: true + weight: 3 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# Tu experiencia +experiences: +- company: + name: Example Co. + url: "https://www.example.com" + location: Dhaka Branch + # resumen de la empresa + overview: Example Co. es una empresa ampliamente reconocida de cloud-native development. Crea herramientas para Kubernetes. + positions: + - designation: Ingeniero de Software Sénior + start: Nov 2019 + # No des una fecha de finalización si aún trabajas ahí. Será sustituida "Presente" + # end: Dec 2020 + # Da unos puntos sobre tus responsablildades en la empresa. + responsibilities: + - Diseñar y desarollar la herramienta XYZ para la tarea ABC + - Diseñar, desarollar y administrar herramienta de recuperación de desastres [Xtool](https://www.example.com) que hace copias de seguridad de volúmenes de Kubernetes, Bases de Datos y definición de recursos del clúster. + - Líder del equipo de backend. + + - designation: Ingeniero de Software Júnior + start: Nov 2017 + end: Oct 2019 + responsibilities: + - Implementar y testear la funcionalidad xyz de la herramienta abc. + - Dar soporte al cliente de la herramienta abc. + - Aprender tecnología k,d,w de xyz. + +- company: + name: PreExample Co. + url: "https://example.com" + location: Ninguna parte + overview: PreExample Co. es una empresa de entrada para Example co. Entonces, nada especial aquí. + positions: + - designation: Ingeniero de Software + start: Marzo 2016 + end: Mayo 2017 + responsibilities: + - Escribir un puñado de código de ejemplo. + - Leer muchos ejemplos. + - Ver muchos vídeos de ejemplo. +``` + +Puede encontrar el archivo `experiences.yaml` usado en este sitio de ejemplo [aquí](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/experiences.yaml). + +###### Sección de Proyectos + +Crea un archivo `projects.yaml` dentro del directorio `/data/es/sections/`. Después añade el siguiente contenido: + +```yaml +# Información de la sección +section: + name: Proyectos + id: projects + enable: true + weight: 4 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# Botones de filtrado +buttons: +- name: Todos + filter: "all" +- name: Professional + filter: "professional" +- name: Académico + filter: "academic" +- name: Hobby + filter: "hobby" + +# Tus proyectos +projects: +- name: Kubernetes + logo: images/sections/projects/kubernetes.png + role: Contribuidor + timeline: "Marzo 2018 - Presente" + repo: https://github.com/kubernetes/kubernetes # Si tu proyecto tiene un repositorio público de Github, entonces provee el link. Mostrará el contador de estrellas. + #url: "" # Si tu proyecto no tiene un repositorio público pero tiene una página web o otro url de detalles externos, proveelo aquí. No provees "repo" y "url" a la vez. + summary: Programación y gestión de contenedores de nivel de producción. + tags: ["professional", "kubernetes", "cloud"] + +- name: Tensorflow + logo: images/sections/projects/tensorflow.png + role: Desarrollador + timeline: "Jun 2018 - Presente" + repo: https://github.com/tensorflow/tensorflow + #url: "" + summary: Un framework de aprendizaje automático de código abierto para todos. + tags: ["professional", "machine-learning","academic"] + +- name: Toha + logo: images/sections/projects/toha.png + role: Propietario + timeline: "Jun 2019 - Presente" + repo: https://github.com/hossainemruz/toha + summary: Un tema de Hugo para portafolio personal. + tags: ["hobby","hugo","theme","professional"] +``` + +Pon las imágenes de proyectos dentro del directorio `images/sections/projects/` de tu repositorio. Puede encontrar las imágenes [aquí](https://github.com/hugo-toha/hugo-toha.github.io/tree/source/assets/images/sections/projects). También, puede encontrar el archivo `projects.yaml` usado en este sitio de ejemplo [aquí](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/projects.yaml). + +###### Sección de Publicaciones Recientes + +Crea un archivo `recent-posts.yaml` dentro del directorio `/data/es/sections/`. Después añade el siguiente contenido: + +```yaml +# Información de la sección +section: + name: Publicaciones Recientes + id: recent-posts + enable: true + weight: 6 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# No se requiere de configuración adicional +``` + +Puede encontrar el archivo `recent-posts.yaml` usado en este sitio de ejemplo [aquí](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/recent-posts.yaml). + +> Esta sección estará vacía hasta que añadas alguna publicación en tu sitio web. + +###### Sección de Logros + +Crea un archivo `achievements.yaml` dentro del directorio `/data/es/sections/`. Después añade el siguiente contenido: + +```yaml +# Información de la sección +section: + name: Logros + id: achievements + enable: true + weight: 8 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# Tus logros +achievements: +- title: Mejor presentador + image: images/sections/achievements/presenter.jpg + summary: Mejor presentador en la conferencia XYZ 2020. +- title: Campeón + image: images/sections/achievements/sport.jpg + summary: Campeón en el campeonato de ciclismo interurbano 2020. +- title: Graduación + image: images/sections/achievements/graduation-cap.jpg + summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University. + summary: Graduado en Ingeniería Informática en la Universidad (XYZ). +- title: Ganador del premio + image: images/sections/achievements/woman-winner.jpg + summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero? +``` + +Pon las imágenes de habilidades dentro del directorio `images/sections/projects/` de tu repositorio. Puede encontrar las imágenes [aquí](https://github.com/hugo-toha/hugo-toha.github.io/tree/source/assets/images/sections/projects). También, puede encontrar el archivo `projects.yaml` usado en este sitio de ejemplo [aquí](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/projects.yaml). + + +#### Añade Publicaciones + +Ahora, ya estamos listos para añadir nuestra primera publicación a nuestro sitio. Aquí, añadiremos [esta publicación](https://hugo-toha.github.io/posts/introduction/). + +- Para empezar, crea un directorio `posts` dentro del directorio `content` de tu sitio. +- Después, crea un archivo `_index.md` dentro del directorio `posts`. Copia el contenido de [este archivo](https://raw.githubusercontent.com/hugo-toha/hugo-toha.github.io/source/content/posts/_index.md) y pégalo dentro del archivo `_index.md` creado recientemente. +- Crea un directorio `introduction` dentro del directorio `posts`. +- Añade el siguiente [hero.svg](https://raw.githubusercontent.com/hugo-toha/hugo-toha.github.io/source/content/posts/introduction/hero.svg) dentro de tu directorio `introduction`. +- Ahora, crea un archivo `index.md` dentro del directorio `introduction`. Este `index.md` tendrá el contenido de la publicación. +- Añade el siguiente [contenido de ejemplo](https://raw.githubusercontent.com/hugo-toha/hugo-toha.github.io/source/content/posts/introduction/index.md) dentro del archivo `index.md` creado recientemente. + +Ahora, tu publicación debería aparecer en `http://localhost:1313/posts` y tu sección `Publicaciones Recientes` también mostrarán esta tarjeta. Para traducir una publicación, simplemente crea un archivo con el nombre `index..md` en el mismo directorio. Después, añade el contenido traducido ahí. + +Para más publicaciones de ejemplo, por favor, visite [aquí](https://github.com/hugo-toha/hugo-toha.github.io/tree/source/content/posts). + +### Siguientes pasos + +En este punto, tu sitio debería ser similar al de [ejemplo](https://hugo-toha.github.io/). Ahora, es hora de desplegar tu sitio web. Puedes seguir las siguientes guías de despliegue: + +- [Despliegue en Github Pages](/es/posts/getting-started/github-pages/) +- [Despliegue en Netlify](/es/posts/getting-started/netlify/) diff --git a/content/posts/getting-started/theme-update/index.es.md b/content/posts/getting-started/theme-update/index.es.md new file mode 100644 index 00000000..5e4557d6 --- /dev/null +++ b/content/posts/getting-started/theme-update/index.es.md @@ -0,0 +1,76 @@ +--- +title: "Automatiza las actualizaciones del tema" +date: 2020-06-08T20:00:15+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Automatiza actualizaciones + identifier: getting-started-theme-update + parent: getting-started + weight: 40 +--- + +Para garantizar que su sitio se beneficie de las funciones y correcciones más recientes, es fundamental mantenerlo actualizado con la última versión del tema. Este artículo te guiará a través del proceso de establecimiento de un GitHub workflow que actualizará automáticamente la versión del tema. Esta acción realizará comprobaciones diarias de cualquier actualización del tema. Si se detecta una actualización, se generará un Pull Request para actualizar su sitio a la versión más reciente del tema. + +### Configurando Github Workflow + +Ahora, crea un archivo `theme-update.yml` dentro del directorio `.github/workflows` de tu repositorio con el siguiente contenido: + +```yaml +name: "Theme Update" + +on: + schedule: + - cron: "0 0 * * *" + +jobs: + update-theme: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4.1.1 + with: + ref: main + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 18 + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2.6.0 + with: + hugo-version: "latest" + extended: true + + - name: Update hugo modules + run: | + # update to latest version of all modules + hugo mod get -u + + # update the npm dependencies + hugo mod npm pack + + # cleanup go.sum file + hugo mod tidy + + - name: Install node modules + run: npm install + + - name: Build + run: | + # build the site + hugo --minify + # remove file generated by the build + rm -rf public/ + + - name: Create Pull Request + uses: peter-evans/create-pull-request@v5 + with: + base: main + title: Update theme + labels: automerge +``` + +Ahora está listo. De hora en adelante, esta acción se ejecutará diariamente y generará un Pull Request si se detecta alguna actualización del tema. diff --git a/content/posts/quickstart/index.es.md b/content/posts/quickstart/index.es.md new file mode 100644 index 00000000..2955c9ed --- /dev/null +++ b/content/posts/quickstart/index.es.md @@ -0,0 +1,163 @@ +--- +title: "Inicio Rápido" +date: 2022-08-09T00:00:00+06:00 +description: Guía de inicio rápido para el tema Toha +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Inicio Rápido + identifier: quickstart + weight: 2 +--- + +**¡Saludos!** Gracias por decidirte utilizar este tema. En esta guía, te enseñaré cómo puedes empezar con este tema rápidamente. + +Aquí asumiré que quieres empezar de cero una página de Hugo utilizando este tema. Si ya estás usando Hugo para tu sitio, entonces ya sabes cómo utilizar un tema. En este caso, por favor, sigue este [repositorio de ejemplo](https://github.com/hugo-toha/hugo-toha.github.io) para más información. + +### Requisitos + +Para ejecutar el tema localmente, debes tener las siguientes herramientas instaladas. + +1. Versión Hugo `v0.118.x` (extended) o posterior. +2. [Go](https://go.dev/doc/install) language versión `v1.18.x` o posterior. +3. Versión Node `v18.x` y versión npm `8.x` o posterior. + +Asegúrate de que tienes las herramientas requeridas instaladas con la versión adecuada usando los siguientes comandos. + +```bash +# Comprobar versión de Hugo +➜ hugo version +hugo v0.118.2+extended linux/amd64 BuildDate=unknown + +# Comprobar versión de Go +➜ go version +go version go1.19.4 linux/amd64 + +# Comprobar versión de Node +➜ node -v +v18.12.1 + +# Comprobar versión de npm +➜ npm -v +8.19.2 +``` + +### Empezando + +Ahora, volvamos a nuestra misión. Simplemente, siga estos 6 pasos para empezar con tu página. + +#### Paso 1: Haz un fork del repositorio de ejemplo y renómbralo + +Al principio, haz **fork** del [repositorio de ejemplo](https://github.com/hugo-toha/hugo-toha.github.io) en su cuenta. Después, renombra el repositorio al nombre que desee. Si deseas utilizar [Github Pages](https://pages.github.com/) para desplegar su sitio, entonces renómbralo a `.github.io`. El repositorio de ejemplo viene con Github Actions preconfiguradas para publicar el sitio en Github Pages y Netlify. + +#### Paso 2: Clone su repositorio localmente + +Una vez haya hecho el fork y cambiado el nombre del repositorio, ahora puede clonar su repositorio en su máquina local para realizar vuestros cambios. + +```bash +git clone git@github.com:/ +``` + +#### Paso 3: Actualiza el archivo del módulo + +Deberías ver los archivos `go.mod` y `go.sum` en la raíz de su repositorio. Actualice la primera línea del archivo `go.mod` como a continuación: + +```bash +module github.com// +``` + +#### Paso 4: Cambie el archivo `config.yaml` + +Ahora, abre el repositorio en un editor y, cambie las siguientes configuraciones en tu archivo `config.yaml` localizado en la raíz de su repositorio. + +##### Cambia la `baseURL` + +Primero, cambia la `baseURL` a la URL de su sitio web. Si quieres utilizar Github Pages para hostear su sitio, entonces establézcalo como a continuación: + +```yaml +baseURL: https://.github.io +``` + +##### Cambia el `gitRepo` + +Ahora, cambia el campo `gitRepo` debajo de la sección `params` para apuntar a su repositorio. Por ejemplo, + +```yaml +gitRepo: https://github.com// +``` + +##### Deshabilite analíticas o configúralas adecuadamente + +El repositorio de ejemplo viene con Google Analytics preconfigurado. El id de las analíticas apunta al sitio original. Entonces, deshabilita las analíticas o configúralas adecuadamente de acuerdo a [esta guía](/es/posts/analytics/). + +Puede deshabilitar las analíticas estableciendo el siguiente campo debajo de la sección `params.features`: + +```yaml +analytics: + enabled: false +``` + +##### Deshabilite la funcionalidad del boletín informativo + +El repositorio de ejemplo viene con un servicio de boletín informativo [mailchimp](https://mailchimp.com/) preconfigurado. Deshabilítelo estableciendo el siguiente campo debajo de la sección `params.footer`. + +```yaml +newsletter: + enable: false +``` + +#### Paso 5: Ejecuta el sitio localmente + +Ahora, ejecuta el siguiente comando para ejecutar su sitio web localmente: + +a. Cargar módulos de Hugo + +```bash +hugo mod tidy +``` + +b. Instalar módulos de Node + +```bash +hugo mod npm pack +npm install +``` + +c. Ejecutar el sitio web + +```bash +hugo server -w +``` + +
+ +Si todo ha ido bien, deberías ver un output similar a este. +{{< img src="images/local_site.png" align="center" alt="Command to run site locally">}} + +Ahora, dirígete a [localhost:1313](http://localhost:1313/) en tu navegador y deberías ver su sitio web ejecutándose. + +#### Paso 6: Haz un push de tus cambios a Github + +Si has llegado hasta aquí, significa que su sitio está ejecutándose localmente sin ningún fallo. Vamos a hacer un push de estos cambios a Github. + +```bash +# añade todos sus cambios +git add . + +# haz commit de los cambios +git commit -m "Initial site setup" -s + +# haz push de los cambios a Github +git push origin HEAD +``` + +### Siguientes pasos + +- Customiza el fondo, logo, y algunas otras cosas de su sitio siguiendo [esta guía](/posts/configuration/site-parameters/). +- Añade su información personal siguiendo [esta guía](/es/posts/configuration/sections/about/). +- Añade su información sobre habilidades siguiendo [esta guía](/es/posts/configuration/sections/skills/). +- Añade su información sobre experiencia siguiendo [esta guía](/es/posts/configuration/sections/experiences). +- Despliega su sitio web en Github Pages siguiendo [esta guía](/es/posts/getting-started/github-pages/). +- Despliega su sitio web en Netlify siguiendo [esta guía](/es/posts/getting-started/netlify/). \ No newline at end of file diff --git a/content/posts/shortcodes/index.es.md b/content/posts/shortcodes/index.es.md new file mode 100644 index 00000000..657f0fab --- /dev/null +++ b/content/posts/shortcodes/index.es.md @@ -0,0 +1,267 @@ +--- +title: "Los Shortcodes" +date: 2020-06-08T08:06:25+06:00 +description: Los Shortcodes +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Los Shortcodes + identifier: shortcodes + weight: 700 +hero: boat.jpg +--- + +Esta es una publicación de ejemplo con el objetivo de testear lo siguiente: + +- Imagen de hero determinada. +- Los distintos shortcodes. + +## Alerta + +Las siguientes alertas están disponibles en este tema. + +#### Éxito + +**Código:** + +```markdown +{{}} +Esto es un ejemplo de alerta con `type="success"`. +{{}} +``` + +**Resultado:** + +{{< alert type="success" >}} +Esto es un ejemplo de alerta con `type="success"`. +{{< /alert >}} + +#### Peligro + +**Código:** + +```markdown +{{}} +Esto es un ejemplo de alerta con `type="danger"`. +{{}} +``` + +**Resultado:** + +{{< alert type="danger" >}} +Esto es un ejemplo de alerta con `type="danger"`. +{{< /alert >}} + +#### Advertencia + +**Código:** + +```markdown +{{}} +Esto es un ejemplo de alerta con `type="warning"`. +{{}} +``` + +**Resultado:** + +{{< alert type="warning" >}} +Esto es un ejemplo de alerta con `type="warning"`. +{{< /alert >}} + +#### Inforamación + +**Código:** + +```markdown +{{}} +Esto es un ejemplo de alerta con `type="info"`. +{{}} +``` + +**Resultado:** + +{{< alert type="info" >}} +Esto es un ejemplo de alerta con `type="info"`. +{{< /alert >}} + +## Imagen + +#### Una imagen de ejemplo sin ningún atributo. + +**Código:** + +```markdown +{{}} +``` + +**Resultado:** + +{{< img src="/posts/shortcodes/boat.jpg" title="Una barca en el mar" >}} + +{{< vs 3 >}} + +#### Una imagen de ejemplo con los atributos `height` y `width`. + +**Código:** + +```markdown +{{}} +``` + +**Resultado:** + +{{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" title="Una barca en el mar" >}} + +{{< vs 3 >}} + +#### Una imagen de ejemplo centrada con los atributos `height` y `width`. + +**Código:** + +```markdown +{{}} +``` + +**Resultado:** + +{{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" align="center" title="Una barca en el mar" >}} + +{{< vs 3 >}} + +#### Una imagen de ejemplo con el atributo `float`. + +**Código:** + +```markdown +{{}} +``` + +**Resultado:** + +{{< img src="/posts/shortcodes/boat.jpg" height="200" width="500" float="right" title="Una barca en el mar" >}} + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. Praesent tellus risus, eleifend vel efficitur ac, venenatis sit amet sem. Ut ut egestas erat. Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. Suspendisse nec ipsum eu erat finibus dictum. Morbi volutpat nulla purus, vel maximus ex molestie id. Nullam posuere est urna, at fringilla eros venenatis quis. + +Fusce vulputate dolor augue, ut porta sapien fringilla nec. Vivamus commodo erat felis, a sodales lectus finibus nec. In a pulvinar orci. Maecenas suscipit eget lorem non pretium. Nulla aliquam a augue nec blandit. Curabitur ac urna iaculis, ornare ligula nec, placerat nulla. Maecenas aliquam nisi vitae tempus vulputate. + +## División + +Este tema soporta dividir la página en tantas columnas como desee. + +#### División en dos columnas + +**Código:** + +```markdown +{{}} +##### Columna Izquierda + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. + +--- + +##### Columna Derecha + +Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. + +{{}} +``` + +**Resultado:** + +{{< split 6 6>}} + +##### Columna Izquierda + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. + +--- + +##### Columna Derecha + +Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. + +{{< /split >}} + +#### División en tres columnas + +**Código:** + +```markdown +{{}} +##### Columna Izquierda + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. + +--- + +##### Columna Central + +Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum. + +--- + +##### Columna Derecha + +Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. + +{{}} +``` + +**Resultado:** + +{{< split 4 4 4 >}} + +##### Columna Izquierda + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. + +--- + +##### Columna Central + +Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum. + +--- + +##### Columna Derecha + +Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. + +{{< /split >}} + +## Espacio Vertical + +Da espacio vertical entre dos líneas. + +**Código:** + +```markdown +Esta es la primera línea. +{{}} +This is line two. It should have `4rem` vertical space with previous line. +Esta es la segunda línea. Debería tener un espacio vertical `4rem` con la línea previa. +``` + +**Resultado:** + +Esta es la primera línea. +{{< vs 4>}} +Esta es la segunda línea. Debería tener un espacio vertical `4rem` con la línea previa. + +## Vídeo + +**Código:** + +```markdown +{{}} +``` + +**Resultado:** + +{{< video src="/videos/sample.mp4" >}} + + +Video por [Rahul Sharma](https://www.pexels.com/@rahul-sharma-493988) de [Pexels](https://www.pexels.com). diff --git a/content/posts/supports/index.es.md b/content/posts/supports/index.es.md new file mode 100644 index 00000000..bca3febc --- /dev/null +++ b/content/posts/supports/index.es.md @@ -0,0 +1,53 @@ +--- +title: "Enlaces de Soporte" +date: 2022-03-14T06:00:23+06:00 +description: Añade enlaces de soporte en el tema de hugo Toha +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Enlaces de Soporte + identifier: supports + weight: 660 +--- + +Este tema soporta la adición de varios enlaces de soporte/donación en su sitio. Actualmente, los enlaces de soporte admitidos son: + +- [Ko-fi](https://ko-fi.com/) +- [Buy Me a Coffee](https://www.buymeacoffee.com/zicklam) + +Para una lista completa de los enlaces de soporte admitidos, puede consultar el archivo de ejemplo [config.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/config.yaml). + +## Ko-fi + +Puedes añadir tu botón flotante Ko-fi en tu sitio web. Para añadir el botón flotante, añade la sección `support` debajo de la sección `params.features` del archivo `config.yaml`. + +```yaml +support: + enable: true + services: + kofi: + user: + text: Tip Me + textColor: '#f9fafc' + backgroundColor: '#248aaa' +``` + +## Buy Me a Coffee + +Puedes añadir tu botón flotante "Buy Me a Coffee" en tu sitio web. Para añadir el botón flotante, añade la sección `support` debajo de la sección `params.features` del archivo `config.yaml`. + +![bmacbutton](https://git-doc-files.s3.eu-central-1.amazonaws.com/github.com/hugo-toha/guides/buymeacoffe-button.png) +![bmacwidget](https://git-doc-files.s3.eu-central-1.amazonaws.com/github.com/hugo-toha/guides/buymeacoffe-widget.png) + +```yaml +support: + enable: true + services: + buymeacoffee: + user: + text: Support me on Buy me a coffee! + info: Buy me a coffee! + color: '#FFDD00' +``` diff --git a/content/posts/translation/_index.es.md b/content/posts/translation/_index.es.md new file mode 100644 index 00000000..c46781e9 --- /dev/null +++ b/content/posts/translation/_index.es.md @@ -0,0 +1,8 @@ +--- +title: Traducción +menu: + sidebar: + name: Traducción + identifier: translation + weight: 500 +--- diff --git a/content/posts/translation/content/index.es.md b/content/posts/translation/content/index.es.md new file mode 100644 index 00000000..821e9a5b --- /dev/null +++ b/content/posts/translation/content/index.es.md @@ -0,0 +1,12 @@ +--- +title: "Como traducir las publicaciones" +date: 2020-06-07T06:20:50+06:00 +menu: + sidebar: + name: Traduciendo Publicaciones + identifier: translation-posts + parent: translation + weight: 520 +--- + +## Próximamente....... diff --git a/content/posts/translation/site-data/index.es.md b/content/posts/translation/site-data/index.es.md new file mode 100644 index 00000000..05304219 --- /dev/null +++ b/content/posts/translation/site-data/index.es.md @@ -0,0 +1,12 @@ +--- +title: "Como traducir los datos de la página de inicio" +date: 2020-06-07T06:20:50+06:00 +menu: + sidebar: + name: Traduciendo la página de inicio + identifier: translation-homepage + parent: translation + weight: 510 +--- + +## Próximamente....... diff --git a/content/posts/update-v3-to-v4/index.es.md b/content/posts/update-v3-to-v4/index.es.md new file mode 100644 index 00000000..ce73f538 --- /dev/null +++ b/content/posts/update-v3-to-v4/index.es.md @@ -0,0 +1,242 @@ +--- +title: "Migrar de la versión V3 a V4" +date: 2024-01-05T02:30:00+06:00 +description: Guía de migración de la versión V3 a V4 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Migración de V3 a V4 + identifier: v3-to-v4-migration + weight: 900 +--- + +Toha V4 ha introducido muchos cambios que pueden romper el tema, es decir, cambian cómo se usa y configura el tema. Esta guía ta ayudará a migrar de la versión del tema v3 a v4. Por favor, compruebe estas [release notes](https://github.com/hugo-toha/toha/releases/tag/v4.0.0) para el registro de cambios completo. + +En esta guía, lo guiaré por los pasos para migrar de la versión 3 a la versión 4 del tema Toha. Esta guía se basa en la guía de migración escrita por [Alexandre Neto](https://github.com/SrNetoChan) en [este issue](https://github.com/hugo-toha/toha/issues/852). ¡Empecemos! + +### 1. Borra el submódulo de git `toha` + +Toha V4 ha introducido unos cambios en el proceso de instalación. Uno de los cambios es que el tema ya no usa los submódulos de git. Por lo tanto, necesitamos eliminar el submódulo git `toha`. No te preocupes, este paso no eliminará nada de tu contenido. + +```bash +git rm themes/toha/ +git commit -m "Remove v3 theme" +``` + +### 2. Borra `theme` de `config.yaml` + +En la nueva versión, ya no necesitamos especificar `theme` en el archivo `config.yaml`. En cambio, necesitaremos añadir el tema como módulo. Por lo tanto, borra la siguiente línea del archivo `config.yaml`. + +```yaml +theme: toha +``` + +### 3. Cumple los requerimentos + +Para ejecutar el tema localmente, debes tener las siguientes herramientas instaladas. + +1. Versión Hugo `v0.118.x` (extended) o posterior. +2. [Go](https://go.dev/doc/install) language versión `v1.18.x` o posterior. +3. Versión Node `v18.x` y versión npm `8.x` o posterior. + +Asegérate de que tienes las herramientas requeridas instaladas con la versión adecuada usando los siguientes comandos. + +### 4. Initialize Hugo Module + +Toha V4 usa [Hugo Module](https://gohugo.io/hugo-modules/) para manejar el tema. Vamos a usar el módulo de hugo para añadir el tema `Toha` a nuestro sitio web. Inicializa los módulos de hugo usando el siguiente comando: + +```bash +hugo mod init github.com// +``` + +Este comando creará un archivo `go.mod` a la raíz de su repositorio. Compruebe que el archivo se haya creado correctamente. + +### 5. Añade el tema como módulo + +Ahora, añade la siguiente sección `module` en el archivo `config.yaml`. Esto añadirá el tema como módulo y lo montará en los archivos estáticos del tema. + +```yaml +# Usa los modules de Hugo para añadir el tema +module: + imports: + - path: github.com/hugo-toha/toha/v4 + mounts: + - source: static/files + target: static/files + - source: ./node_modules/flag-icon-css/flags + target: static/flags + - source: ./node_modules/@fontsource/mulish/files + target: static/files + - source: ./node_modules/katex/dist/fonts + target: static/fonts +``` + +### 6. Actualiza el archivo `config.yaml` + +En la nueva versión, la estructura de configuración de las funcionalidades ha sido restructurada. Asimismo, será necesario actualizar el archivo `config.yaml`. Como referencia, puede consultar el ejemplo del archivo [config.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/config.yaml). Aquí resaltaremos las configuraciones más comunes que necesitan cambiarse. + +**Modo oscuro:** + +Hemos introducido soporte para un nuevo modo oscuro. Como resultado, ya no necesitamos usar servicios de terceros como `darkreader`. Para habilitar el nuevo modo oscuro, por favor borra las siguientes líneas de tu archivo `config.yaml`: + +```yaml + darkMode: + provider: darkreader + enable: true + default: system +``` + +Después, añade las siguientes líneas debajo de la sección `params.features`: + +```yaml +darkMode: + enable: true +``` + +**Analíticas:** + +Hemos reestructurado la configuración de las analíticas, comentarios y proveedores de servicio de soporte. Ahora están puestos debajo del campo `services` de la sección respectiva. + +Asimismo, tus configuraciones previas de analíticas serán actualizadas de: + +```yaml +analytics: + enabled: true + google: + id: UA-XXXXXXXXX-X +``` + +a: + +```yaml +analytics: + enable: true + services: + google: + id: UA-XXXXXXXXX-X +``` + +**Comentarios:** + +De la misma forma, tus configuraciones de comentarios se transformarán de: + +```yaml +comment: + enable: true + disqus: + shortName: +``` + +a: + +```yaml +comment: + enable: true + services: + disqus: + shortName: +``` + +**Soporte:** + +Y, las siguientes configuraciones de soporte pasarán de: + +```yaml +support: + enabled: true + kofi: + user: + text: Tip Me + textColor: '#f9fafc' + backgroundColor: '#248aaa' +``` + +a: + +```yaml +support: + enable: false + services: + kofi: + user: hossainemruz + text: Tip Me + textColor: '#f9fafc' + backgroundColor: '#248aaa' +``` + +**Otros Cambios:** + +Hay otras opciones que han cambiado. Por ejemplo: + +```yaml +enableToc: true +``` + +remplazado por: + +```yaml +toc: + enable: true +``` + +Similarmente: + +```yaml +enableTags: true +``` + +remplazado por: + +```yaml +tags: + enable: true + on_card: true +``` + +Finalmente, + +```yaml +showFlags: true +``` + +remplazado por: + +```yaml +# Specify whether to show flag in the language selector. Default is true. +flags: + enable: true + # # If you want to use different country flag for a language, specify them here. + # flagOverwrites: + # - languageCode: en + # countryCode: us + +``` + +Ha habido algunos otros cambios. Consulte el archivo de configuración de muestra [config.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/config.yaml) para obtener más detalles. + +### 7. Ejecuta el sitio + +Finalmente, estás listo para ejecutar el tema. Por favor, ejecute los siguientes pasos para crear el sitio: + +a. Cargar módulos de Hugo + +```bash +hugo mod tidy +``` + +b. Instalar módulos de Node + +```bash +hugo mod npm pack +npm install +``` + +c. Ejecuta el sitio + +```bash +hugo server -w +``` + +Espero que esta guía te haya servido de ayuda con la migración del tema de la versión V3 a V4. Si encuentras algun problema, por favor abre una issue en el [repositorio en Github](https://github.com/hugo-toha/toha). diff --git a/content/posts/writing-posts/_index.es.md b/content/posts/writing-posts/_index.es.md new file mode 100644 index 00000000..35bd78ef --- /dev/null +++ b/content/posts/writing-posts/_index.es.md @@ -0,0 +1,8 @@ +--- +title: Escribiendo Publicaciones +menu: + sidebar: + name: Escribiendo Publicaciones + identifier: writing-post + weight: 200 +--- diff --git a/content/posts/writing-posts/front-matter/index.es.md b/content/posts/writing-posts/front-matter/index.es.md new file mode 100644 index 00000000..b068e152 --- /dev/null +++ b/content/posts/writing-posts/front-matter/index.es.md @@ -0,0 +1,12 @@ +--- +title: "Front-matter" +date: 2020-06-08T06:15:45+06:00 +menu: + sidebar: + name: Front-matter + identifier: writing-post-front-matter + parent: writing-post + weight: 20 +--- + +### Próximamente... diff --git a/content/posts/writing-posts/markdown-syntax/index.es.md b/content/posts/writing-posts/markdown-syntax/index.es.md new file mode 100644 index 00000000..d66caa90 --- /dev/null +++ b/content/posts/writing-posts/markdown-syntax/index.es.md @@ -0,0 +1,146 @@ +--- +title: "Guía de Sintxis de Markdown" +date: 2020-06-08T06:15:40+06:00 +hero: /images/posts/writing-posts/code.svg +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Guía de Markdown + identifier: writing-post-md-guide + parent: writing-post + weight: 30 +--- + +Este artículo ofrece un ejemplo de las bases de la sintaxis de Markdown que se pueden usar en los archivos de contenido de Hugo. También muestra cómo los elementos básicos de HTML están decorados con CSS en un tema Hugo. + + +## Encabezados + +Los siguientes elementos de HTML `

`—`

` representan seis niveles de encabezados de secciones. `

` es el mayor nivel, mientras `

` es el menor. + +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 + +## Parágrafo + +Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. + +Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. + +## Citas en bloque + +El elemento de citas en bloque representa contenido citado de otra fuente, opcionalmente con una cita que debe estar dentro de un elemento `pie de página` o `cita`, y opcionalmente con cambios en línea, como anotaciones y abreviaturas. + +#### Citas en bloque sin atribución + +> Tiam, ad mint andaepu dandae nostion secatur sequo quae. +> **Nota** puede usar *sintaxis de markdown* dentro de una cita en bloque. + +#### Citas en bloque con atribución + +> Don't communicate by sharing memory, share memory by communicating.

+> — Rob Pike[^1] + + +[^1]: La cita anterior está extraída de la [charla](https://www.youtube.com/watch?v=PAAkCSZUG1c) de Rob Pike durante el Gopherfest, el 18 de noviembre de 2015. + +## Tablas + +Las tablas no son parte de la especificación principal de Markdown, pero Hugo las admite. + + | Nombre | Edad | + | ------ | ---- | + | Bob | 27 | + | Alice | 23 | + +#### Markdown en línea dentro de tablas + +| Markdown    | en línea    | dentro de    | tablas | +| -------------------------- | -------------------------- | ----------------------------------- | --------- | +| *cursiva* | **negrita** | ~~tachado~~    | `código` | + +## Bloques de código + +#### Bloques de código con comillas inveridas + +``` +html + + + + + Ejemplo de documento de HTML5 + + +

Prueba

+ + +``` +#### Bloques de código identado con cuatro espacios + + + + + + Ejemplo de documento de HTML5 + + +

Prueba

+ + + +#### Bloques de código con el shortcode de resalto interno de Hugo +{{< highlight html >}} + + + + + Ejemplo de documento de HTML5 + + +

Prueba

+ + +{{< /highlight >}} + +## Tipos de Lista + +#### Lista Ordenada + +1. Primer elemento +2. Segundo elemento +3. Tercer elemento + +#### Lista Desordenada + +* Elemento de la lista +* Otro elemento +* Y otro elemento + +#### Lista Anidada + +* Fruta + * Manzana + * Naranja + * Plátano +* Lácteos + * Leche + * Queso + +## Otros Elementos — abbr, sub, sup, kbd, mark + +GIF es un formato de imagen de mapa de bits. + +H2O + +Xn + Yn = Zn + +Presione CTRL+ALT+Delete para finalizar la sesión. + +La mayoría de las salamandras son nocturnas y cazan insectos, gusanos y otras criaturas pequeñas. diff --git a/content/posts/writing-posts/math/index.es.md b/content/posts/writing-posts/math/index.es.md new file mode 100644 index 00000000..31e2b12a --- /dev/null +++ b/content/posts/writing-posts/math/index.es.md @@ -0,0 +1,53 @@ +--- +title: "Configuración del tipado de Matemáticas" +date: 2020-06-08T06:15:35+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Guía de Matemáticas + identifier: writing-post-math-guide + parent: writing-post + weight: 40 +math: true +--- + +La notación matemática en un proyecto Hugo se puede habilitar mediante el uso de librerías JavaScript de terceros. + + +En este ejemplo usaremos [KaTeX](https://katex.org/) + +- Crea un partial debajo de `/layouts/partials/math.html` +- Dentro de esta referencia del partial, se hace referencia a la [Auto-render Extension](https://katex.org/docs/autorender.html) o al host de estos scripts localmente. +- Incluye el partial en tus plantillas de la siguiente forma: + +``` +{{ if or .Params.math .Site.Params.math }} +{{ partial "math.html" . }} +{{ end }} +``` +- Para habilitar Katex globalmente establece el parámetro `math` a `true` en la configuración del proyecto en el archivo `config.yaml`. +- Para habilitar Katex en publicaciones concretas, incluye el parámetro `math: true` en los archivos de contenido correspondientes. + +**Nota:** Usa la referencia online de [Supported TeX Functions](https://katex.org/docs/supported.html) +{{< math.inline >}} +{{ if or .Page.Params.math .Site.Params.math }} + + + + +{{ end }} +{{}} + +### Ejemplos +{{< math.inline >}} +

+Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\) +

+{{}} + +Bloque matemático: +$$ + \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } +$$ diff --git a/content/posts/writing-posts/mermaid/index.es.md b/content/posts/writing-posts/mermaid/index.es.md new file mode 100644 index 00000000..f41ee1bf --- /dev/null +++ b/content/posts/writing-posts/mermaid/index.es.md @@ -0,0 +1,235 @@ +--- +title: "Soporte Mermaid" +date: 2022-03-14T06:15:35+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Mermaid + identifier: writing-post-mermaid + parent: writing-post + weight: 60 +mermaid: true +--- + +Este tema soporta mermaid, desarrollado por [mermaid-js](https://mermaid-js.github.io/mermaid). Para habilitar mermaid para una página, tienes que poner `mermaid: true` en tu página de front-matter. Por ejemplo, esta página tiene el siguiente front-matter: + +```yaml +title: "Soporte Mermaid" +date: 2022-03-14T06:15:35+06:00 +menu: + sidebar: + name: Mermaid + identifier: writing-post-mermaid + parent: writing-post + weight: 60 +mermaid: true +``` + +Después, puede usar el shortcode `mermaid` para añadir contenido de mermaid. Por ejemplo: + +```bash +{{}} + # su contenido de mermaid aquí +{{}} +``` + +El shortcode de `mermaid` acepta los siguientes parámetros: + +- **align**: Permite alinear el diagrama a la izquierda, derecha o centro. La alineación predeterminada es el centro. +- **background:** Permite cambiar el color de fondo del diagrama. + +## Ejemplos + +Aquí hay algunos ejemplos de distintos diagramas usando mermaid. + +#### Grafo + +```bash +{{}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{}} +``` + +{{< mermaid align="left" >}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{< /mermaid >}} + +
+ +#### Diagrama de secuencia + +```bash +{{}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +{{}} +``` + +{{< mermaid >}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +{{< /mermaid >}} + +
+ +#### Diagrama de Gantt + +```bash +{{}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram to mermaid + excludes weekdays 2014-01-10 + +section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d +{{}} +``` + +{{< mermaid >}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram to mermaid + excludes weekdays 2014-01-10 + +section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d +{{< /mermaid >}} + +
+ +#### Diagrama de Clases + +```bash +{{}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{}} +``` + +{{< mermaid >}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{< /mermaid >}} + +
+ +#### Grafo de Git + +```bash +{{}} +gitGraph: +options +{ + "nodeSpacing": 150, + "nodeRadius": 10 +} +end +commit +branch newbranch +checkout newbranch +commit +commit +checkout master +commit +commit +merge newbranch +{{}} +``` + +{{< mermaid background="black" align="right" >}} +gitGraph: +options +{ + "nodeSpacing": 150, + "nodeRadius": 10 +} +end +commit +branch newbranch +checkout newbranch +commit +commit +checkout master +commit +commit +merge newbranch +{{< /mermaid >}} + +
+ +#### Diagrama Entidad-Relación + +```bash +{{}} +erDiagram + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses +{{}} +``` + +{{< mermaid >}} +erDiagram + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses +{{< /mermaid >}} diff --git a/content/posts/writing-posts/organizing/_index.es.md b/content/posts/writing-posts/organizing/_index.es.md new file mode 100644 index 00000000..562b3bfd --- /dev/null +++ b/content/posts/writing-posts/organizing/_index.es.md @@ -0,0 +1,9 @@ +--- +title: Categoría +menu: + sidebar: + name: Organizando Publicaciones + identifier: writing-post-category + parent: writing-post + weight: 10 +--- diff --git a/content/posts/writing-posts/organizing/category/index.es.md b/content/posts/writing-posts/organizing/category/index.es.md new file mode 100644 index 00000000..dd70e0cd --- /dev/null +++ b/content/posts/writing-posts/organizing/category/index.es.md @@ -0,0 +1,125 @@ +--- +title: "Creando una Categoría" +date: 2020-06-08T06:15:55+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Creando una Categoría + identifier: writing-post-category-create + parent: writing-post-category + weight: 10 +--- + +Primero, necesitamos entender cómo crear una publicación para poder crear categorías. + +## Crear una Publicación + +Para crear una publicación en tu primer blog, primero necesitas ir al directorio `posts`. Ahí crea un archivo `_index.md` (el nombre tiene que ser exactamente el mismo). Después, abre el archivo y añade las siguientes líneas:
+ + --- + title: Posts + --- + +Ahora, guarda y cierra el archivo. Ahora, supone que quieres escribir una publicación. Primero, crea un archivo y nómbralo con la extensión de markdown al final. Por ejemplo: hemos creado el archivo nombrado `analytics-and-comments.md` y hemos añadido las siguientes líneas:
+ + --- + title: "Analytics and Comments" + date: 2020-06-08T06:00:23+06:00 + hero: /images/posts/writing-posts/analytics.svg + description: Adding analytics and disquss comment in hugo + theme: Toha + menu: + sidebar: + name: Analytics & Comments + identifier: analytics-and-comments + weight: 500 + --- + + ### Complete Post Coming Soon... + +Como sabemos, el encabezado de este archivo empieza y acaba con tres guiones horizontales (`---`) es nombrado front-matter, y todos los posts que escribamos necesitan tener el front-matter incluido ahí. Vamos a entender cuáles son los parámetros, y para qué sirven:
+ +**title:** Este es el título de tu publicación.
+**date:** Esta es la fecha y hora que muestra la fecha y hora de publicación de tu blog. La primera porción está en el formato `year-month-date`. Puedes editar la fecha y hora como quieras.
+**hero:** Aquí, necesitarás incluir la ruta de la imagen de portada de tu publicación. Vaya al directorio `static` y crea un directorio nombrado `images` (únicamente si no lo tienes). Después, dentro de este directorio crea un nuevo directorio nombrado `posts`, y dentro de este, hemos creado un directorio nombrado `writing-posts`, donde hemos puesto el archivo de imagen `analytics.svg`. Ahora copia la ruta, y añádalo al parámetro `hero`.
+**description:** Añade la descripción que te convenga.
+**menu:** Esta sección contiene otros parámetros nombrados `sidebar` que configurarán cómo se mostrará la estructura del archivo en la barra lateral. Debajo de este, tenemos:
+**name:** Este define cual será el nombre del documento en la barra lateral.
+**identifier:** Este ayuda a identificar el archivo con otros archivos en términos de la categoría.
+**weight:** Se asigna un valor a este parámetro como valor de peso y, para varios archivos, los documentos aparecerán en la jerarquía de archivos según este valor de peso en orden ascendente. + +Después del front-matter, puedes escribir cualquier contenido siguiendo la sintaxis de markdown. + + +La siguiente imagen muestra cómo el contenido de `analytics-and-comments.md` está distribuido en la sección de la barra lateral. + +![Image1](https://dev-to-uploads.s3.amazonaws.com/i/5klx1docgxewhxeo9sgi.png) + +> En la figura de arriba, Features, Installation, Configuration, Writing Posts, Customizing, Short Codes, etc., son directorios creados para otras publicaciones. + +## Crear una Categoría + +Como hemos creado un archivo `_index.md` y una publicación anteriormente, ahora, para crear una categoría, necesitamos crear un directorio. Hemos creado un directorio nombrado `getting-started`, y dentro de este, hemos creado otro archivo `_index.md`, que tendrá el siguiente contenido front-matter: + +``` +--- +title: Deploy Site +menu: + sidebar: + name: Deploy Site + identifier: getting-started + weight: 300 +--- +``` + +El significado de cada parámetro ha sido explicado anteriormente. Ahora, ten en cuenta que vamos a crear el nombre de la categoría como `getting-started`, por eso lo incluimos como identificador en este archivo "_index.md", pero puede darle el nombre que desee. Después, vamos a crear un archivo markdown nombrado `github-pages.md` que será nuestra publicación en este directorio. Nuestro archivo `github-pages.md` tiene las siguientes líneas: + +``` +--- +title: "Deploy site in Github Pages" +date: 2020-06-08T06:00:20+06:00 +hero: /images/posts/writing-posts/git.svg +menu: + sidebar: + name: Github Pages + identifier: getting-started-github + parent: getting-started + weight: 10 +--- +### Próximamente... +``` + +Ya conocemos los parámetros usados aquí, pero tenemos uno nuevo incluido, que es `parent`. Si nos damos cuenta, entenderemos que el valor de este parámetro y el valor del parámetro `identifier` en el archivo `_index.md` dentro de este directorio son ambos iguales. Debemos tener cuidado de que el valor de ambos parámetros coincida. Ahora puedes agregar tantas publicaciones y categorías como quieras siguiendo el procedimiento mencionado anteriormente. Así es como creamos las categorías. + +La siguiente imagen muestra cómo el contenido está distribuido en la sección de la barra lateral. + +![Image2](https://dev-to-uploads.s3.amazonaws.com/i/cso16yy6wf89eywgbufb.png) + +## Personalizando la información del auto de la publicación + +Por defecto, la publicación usa la información de autor del archivo `config.yaml`. Si quieres sobrescribir la información predeterminada, simplemente añade la siguiente sección en el front-matter: + +```yaml +author: + name: Md.Habibur Rahman + image: /images/authors/habib.jpg +``` + +El front-matter debería parecerse a: + +```yaml +title: "Creando una Categoría" +date: 2020-06-08T06:15:55+06:00 +# hero: images/background/flower.jpg +author: + name: Md.Habibur Rahman + image: /images/authors/habib.jpg +menu: + sidebar: + name: Creando una Categoría + identifier: writing-post-category-create + parent: writing-post-category + weight: 10 +``` diff --git a/content/posts/writing-posts/organizing/sub-category/_index.es.md b/content/posts/writing-posts/organizing/sub-category/_index.es.md new file mode 100644 index 00000000..eb17c3dc --- /dev/null +++ b/content/posts/writing-posts/organizing/sub-category/_index.es.md @@ -0,0 +1,9 @@ +--- +title: Sub-Categoría +menu: + sidebar: + name: Sub-Categoría + identifier: writing-post-category-sub-category + parent: writing-post-category + weight: 20 +--- diff --git a/content/posts/writing-posts/organizing/sub-category/example/index.es.md b/content/posts/writing-posts/organizing/sub-category/example/index.es.md new file mode 100644 index 00000000..c444cca3 --- /dev/null +++ b/content/posts/writing-posts/organizing/sub-category/example/index.es.md @@ -0,0 +1,12 @@ +--- +title: "Creando una Sub-Categoría" +date: 2020-06-08T06:15:50+06:00 +menu: + sidebar: + name: Creando una Sub-Categoría + identifier: writing-post-category-sub-category-create + parent: writing-post-category-sub-category + weight: 10 +--- + +### Próximamente... diff --git a/content/posts/writing-posts/rich-content/index.es.md b/content/posts/writing-posts/rich-content/index.es.md new file mode 100644 index 00000000..4a28d64a --- /dev/null +++ b/content/posts/writing-posts/rich-content/index.es.md @@ -0,0 +1,44 @@ +--- +title: "Contenido Enriquecido" +date: 2020-06-08T06:15:30+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Contenido Enriquecido + identifier: writing-post-rich-content + parent: writing-post + weight: 50 +--- + +Hugo viene con unos cuantos [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) para el contenido enriquecido, junto con una [configuración de privacidad](https://gohugo.io/about/hugo-and-gdpr/) y un conjunto de shortcodes simples que permiten versiones estáticas y sin varios embeds de redes sociales de JavaSrcipt. + +--- + +## Shortcode simple de Instagram + + +
+ +--- + +## Shortcode de privacidad mejorada de Youtube + +{{< youtube ZJthWmvUzzc >}} + +
+ +--- + +## Shortcode simple de Twitter + +{{< tweet user="SanDiegoZoo" id="1453110110599868418" >}} + +
+ +--- + +## Shortcode simple de Vimeo + +{{< vimeo_simple 48912912 >}} diff --git a/content/posts/writing-posts/using-emoji/index.es.md b/content/posts/writing-posts/using-emoji/index.es.md new file mode 100644 index 00000000..8f941ed5 --- /dev/null +++ b/content/posts/writing-posts/using-emoji/index.es.md @@ -0,0 +1,52 @@ +--- +title: "Usando Emojis" +date: 2020-06-08T06:15:25+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Usando Emojis + identifier: writing-post-using-emoji + parent: writing-post + weight: 60 +--- + +Los emojis se pueden habilitar a un proyecto de Hugo de distintas formas. + +La función [`emojify`](https://gohugo.io/functions/emojify/) se puede llamar directamente a las plantillas o a los [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). + +Para habilitar los emojis globalmente, establece `enableEmoji` a `true` en el archivo `config.yaml` y después puedes escribir los códigos de los emojis directamente en archivos de contenido; por ejemplo. Más información [aquí](https://gohugo.io/getting-started/configuration/). + + +

🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:

+
+ +El [Emoji cheat sheet](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) es una referencia útil para códigos de emojis. + +*** + +**NÓTESE BIEN.** Los pasos anteriores habilitan secuencias y caracteres emoji estándar Unicode en Hugo; sin embargo, la representación de estos glifos depende del navegador y la plataforma. Para darle estilo al emoji, puedes usar una fuente de emoji de terceros o una pila de fuentes; por ejemplo. + +{{< highlight html >}} +.emoji { +font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols; +} +{{< /highlight >}} + +{{< css.inline >}} + +{{< /css.inline >}} + diff --git a/data/es/author.yaml b/data/es/author.yaml new file mode 100644 index 00000000..180e6709 --- /dev/null +++ b/data/es/author.yaml @@ -0,0 +1,18 @@ +# some information about you +name: "Jane Doe" +nickname: "Jane" +image: "images/author/jessica.png" + +# greeting message before your name. it will default to "Hi! I am" if not provided +greeting: "Hola, soy" + +# give your contact information. they will be used in the footer +contactInfo: + email: "janedoe@example.com" + phone: "+0123456789" + +# a summary of what you do +summary: +- Soy Developer +- Trabajo con Go +- Me gusta trabajar con projectos divertidos diff --git a/data/es/sections/about.yaml b/data/es/sections/about.yaml new file mode 100644 index 00000000..a796a17c --- /dev/null +++ b/data/es/sections/about.yaml @@ -0,0 +1,77 @@ +# Información de la sección +section: + name: Sobre mi + id: about + enable: true + weight: 1 + showOnNavbar: true + +# Tu designación +designation: Ingeniero de Software +# Información de tu empresa +company: + name: Example Co. + url: "https://www.example.com" + +# tu currículum. Este archivo debe ser relativo a tu directorio "static" +resume: "files/resume.pdf" + +# Un resumen sobre ti +summary: 'Soy un ingeniero de software apsionado con x años de experiencia. He creado herramientas OSS para [Kubernetes](https://kubernetes.io/) utilizando Go. Mis herramientas ayudan a personas a desplegar sus workloads en Kubernetes. A veces trabajo en projectos divertidos como crear un tema, etc.' + +# tus links de redes sociales +# da tantos como quieras. Utilitza font-awesome para los iconos. +socialLinks: +- name: Email + icon: "fas fa-envelope" + url: "example@gmail.com" + +- name: Github + icon: "fab fa-github" + url: "https://www.github.com/example" + +- name: Stackoverflow + icon: "fab fa-stack-overflow" + url: "#" + +- name: LinkedIn + icon: "fab fa-linkedin" + url: "#" + +- name: Twitter + icon: "fab fa-twitter" + url: "#" + +- name: Facebook + icon: "fab fa-facebook" + url: "#" + +# competencias sociales +# Da un percentaje entre 50 y 100, en intervalos de 5 unidades. +# colores soportados: blue, yellow, pink, green, sky, orange. +softSkills: +- name: Liderazgo + percentage: 85 + color: blue +- name: Trabajo en equipo + percentage: 90 + color: yellow +- name: Comunicación + percentage: 85 + color: pink +- name: Trabajo duro + percentage: 85 + color: green +- name: Aprendizaje rápido + percentage: 85 + color: sky +- name: Solucionador de problemas + percentage: 85 + color: orange +# también puede dar códigos de colores en vez de un nombre de color predeterminado +# - name: Example 1 +# percentage: 75 +# color: "#00adb5" +# - name: Example 2 +# percentage: 65 +# color: "#8b8383" \ No newline at end of file diff --git a/data/es/sections/achievements.yaml b/data/es/sections/achievements.yaml new file mode 100644 index 00000000..59d00acc --- /dev/null +++ b/data/es/sections/achievements.yaml @@ -0,0 +1,25 @@ +# Información de la sección +section: + name: Logros + id: achievements + enable: true + weight: 8 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# Tus logros +achievements: +- title: Mejor presentador + image: images/sections/achievements/presenter.jpg + summary: Mejor presentador en la conferencia XYZ 2020. +- title: Campeón + image: images/sections/achievements/sport.jpg + summary: Campeón en el campeonato de ciclismo interurbano 2020. +- title: Graduación + image: images/sections/achievements/graduation-cap.jpg + summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University. + summary: Graduado en Ingeniería Informática en la Universidad (XYZ). +- title: Ganador del premio + image: images/sections/achievements/woman-winner.jpg + summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero? diff --git a/data/es/sections/experiences.yaml b/data/es/sections/experiences.yaml new file mode 100644 index 00000000..b0522f19 --- /dev/null +++ b/data/es/sections/experiences.yaml @@ -0,0 +1,64 @@ +# Información de la sección +section: + name: Experiencia + id: experiences + enable: true + weight: 3 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# Tu experiencia +experiences: +- company: + name: Example Co. + url: "https://www.example.com" + location: Dhaka Branch + # resumen de la empresa + overview: Example Co. es una empresa ampliamente reconocida de cloud-native development. Crea herramientas para Kubernetes. + positions: + - designation: Ingeniero de Software Sénior + start: Nov 2019 + # No des una fecha de finalización si aún trabajas ahí. Será sustituida "Presente" + # end: Dec 2020 + # Da unos puntos sobre tus responsablildades en la empresa. + responsibilities: + - Diseñar y desarollar la herramienta XYZ para la tarea ABC + - Diseñar, desarollar y administrar herramienta de recuperación de desastres [Xtool](https://www.example.com) que hace copias de seguridad de volúmenes de Kubernetes, Bases de Datos y definición de recursos del clúster. + - Líder del equipo de backend. + + - designation: Ingeniero de Software Júnior + start: Nov 2017 + end: Oct 2019 + responsibilities: + - Implementar y testear la funcionalidad xyz de la herramienta abc. + - Dar soporte al cliente de la herramienta abc. + - Aprender tecnología k,d,w de xyz. + +- company: + name: PreExample Co. + url: "https://example.com" + location: Ninguna parte + overview: PreExample Co. es una empresa de entrada para Example co. Entonces, nada especial aquí. + positions: + - designation: Ingeniero de Software + start: Marzo 2016 + end: Mayo 2017 + responsibilities: + - Escribir un puñado de código de ejemplo. + - Leer muchos ejemplos. + - Ver muchos vídeos de ejemplo. + +- company: + name: Intern Counting Company (ICC). + url: "https://example.com" + location: Territorio de becarios + overview: Intern counting Company (ICC) es responsable de contar los becarios ingenieros a nivel mundial. + positions: + - designation: Becario + start: Junio 2015 + end: Enero 2016 + responsibilities: + - Contar muchos becarios. + - Contar más becarios. + - Contarme como becario. diff --git a/data/es/sections/projects.yaml b/data/es/sections/projects.yaml new file mode 100644 index 00000000..4d3a3b40 --- /dev/null +++ b/data/es/sections/projects.yaml @@ -0,0 +1,64 @@ +# Información de la sección +section: + name: Proyectos + id: projects + enable: true + weight: 4 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# Botones de filtrado +buttons: +- name: Todos + filter: "all" +- name: Professional + filter: "professional" +- name: Académico + filter: "academic" +- name: Hobby + filter: "hobby" + +# Tus proyectos +projects: +- name: Kubernetes + logo: images/sections/projects/kubernetes.png + role: Contribuidor + timeline: "Marzo 2018 - Presente" + repo: https://github.com/kubernetes/kubernetes # Si tu proyecto tiene un repositorio público de Github, entonces provee el link. Mostrará el contador de estrellas. + #url: "" # Si tu proyecto no tiene un repositorio público pero tiene una página web o otro url de detalles externos, proveelo aquí. No provees "repo" y "url" a la vez. + summary: Programación y gestión de contenedores de nivel de producción. + tags: ["professional", "kubernetes", "cloud"] + +- name: Tensorflow + logo: images/sections/projects/tensorflow.png + role: Desarrollador + timeline: "Jun 2018 - Presente" + repo: https://github.com/tensorflow/tensorflow + #url: "" + summary: Un framework de aprendizaje automático de código abierto para todos. + tags: ["professional", "machine-learning","academic"] + +- name: Muestra de trabajo académico + role: Jefe de equipo + timeline: "Enero 2017 - Noviembre 2017" + url: "https://www.example.com" + summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi. + tags: ["academic","iot"] + +- name: Nocode + logo: images/sections/projects/no-code.png + role: Ningún + timeline: "Oct 2019 - Dec 2019" + repo: https://github.com/kelseyhightower/nocode + #url: "" + summary: La mejor manera de escribir aplicaciones seguras y confiables. No escribas nada; desplegar en ninguna parte. + tags: ["hobby", "fun"] + +- name: Toha + logo: images/sections/projects/toha.png + role: Propietario + timeline: "Jun 2019 - Presente" + repo: https://github.com/hossainemruz/toha + summary: Un tema de Hugo para portafolio personal. + tags: ["hobby","hugo","theme","professional"] diff --git a/data/es/sections/recent-posts.yaml b/data/es/sections/recent-posts.yaml new file mode 100644 index 00000000..c2041f13 --- /dev/null +++ b/data/es/sections/recent-posts.yaml @@ -0,0 +1,11 @@ +# Información de la sección +section: + name: Publicaciones Recientes + id: recent-posts + enable: true + weight: 6 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# No se requiere de configuración adicional diff --git a/data/es/sections/skills.yaml b/data/es/sections/skills.yaml new file mode 100644 index 00000000..5f266c69 --- /dev/null +++ b/data/es/sections/skills.yaml @@ -0,0 +1,49 @@ +# Infomración de la sección +section: + name: Habilidades + id: skills + enable: true + weight: 2 + showOnNavbar: true + # Opcionalmente puede ocultar el título del menú + # hideTitle: true + +# Tus habilidades +# Haz un resumen de cada habilidad. +skills: +- name: Kubernetes + icon: "images/sections/skills/kubernetes.png" + summary: "Capaz de implementar y administrar aplicaciones en Kubernetes. Con experiencia en escribir controladores de Kubernetes para CRD." + url: https://kubernetes.io/ + +- name: Desarrollo con Go + icon: "images/sections/skills/go.png" + summary: "Utilizando como lenguaje principal para el desarrollo profesional. Capaz de escribir programas escalables, comprobables y mantenibles." + url: "https://golang.org/" + +- name: Computación en la Nube + icon: "images/sections/skills/cloud.png" + summary: "He trabajado con la mayoría de los principales plataformas de computación en la nube, como GCP, AWS, Azure, etc." + +- name: Docker + icon: "images/sections/skills/docker.svg" + summary: "Escribo la mayoría de los programas como contenedores dockerizados. Experimentado con los procesos de construcción multi-stage y multi-arch." + url: "https://www.docker.com/" + +- name: Prometheus + icon: "images/sections/skills/prometheus.png" + summary: "Capaz de configurar y configurar métricas de Prometheus. Experimentado con PromQL, AlertManager. Además, tengo experiencia en la redacción de exportadores de métricas." + url: "https://prometheus.io/" + +- name: Linux + icon: "images/sections/skills/linux.png" + summary: "Utilizando como sistema operativo principal. Capaz de escribir scripts bash/shell." + +- name: Git + icon: "images/sections/skills/git.png" + summary: "Experimentado con desarrollo basado en git. Principalmente, uso Github. Además, tengo experiencia trabajando con GitLab." + url: "https://git-scm.com/" + +- name: C++ + icon: "images/sections/skills/c++.png" + summary: "Programación básica en C/C++. Utilizada para competiciones de programación y resolución de problemas." diff --git a/data/es/site.yaml b/data/es/site.yaml new file mode 100644 index 00000000..993ab272 --- /dev/null +++ b/data/es/site.yaml @@ -0,0 +1,11 @@ +# Copyright Notice +copyright: © 2024 Copyright. + +# Meta description for your site. This will help the search engines to find your site. +description: Página de ejemplo del tema de hugo Toha. + +# specify the list of custom menus that you want to show in the top navbar. +# they will be separated by a divider from the main menus. +customMenus: +- name: Notas + url: https://hossainemruz.gitbook.io/notes/ diff --git a/go.mod b/go.mod index ec89b7b4..aec59986 100644 --- a/go.mod +++ b/go.mod @@ -5,4 +5,4 @@ go 1.19 // Uncomment for local development // replace github.com/hugo-toha/toha/v4 => ../toha -require github.com/hugo-toha/toha/v4 v4.1.0 // indirect +require github.com/hugo-toha/toha/v4 v4.1.1 // indirect diff --git a/go.sum b/go.sum index 0eac5960..b04a5f59 100644 --- a/go.sum +++ b/go.sum @@ -1,2 +1,2 @@ -github.com/hugo-toha/toha/v4 v4.1.0 h1:bqaL5BgFNtGIPst0IRACH/Yj5CG3+QFLNOAdciZL640= -github.com/hugo-toha/toha/v4 v4.1.0/go.mod h1:p/K34lqlqmhzfPd4cx66od7sjlROBqhMxG30mJz+aKQ= +github.com/hugo-toha/toha/v4 v4.1.1 h1:KbCWZRkHewaO6hsKxnlkyO9RjmBwIUbVh7KY+VfiNaU= +github.com/hugo-toha/toha/v4 v4.1.1/go.mod h1:p/K34lqlqmhzfPd4cx66od7sjlROBqhMxG30mJz+aKQ=