Hugo Salazar Portfolio – Website

hugo-salazar-portafolio-logo

Mi portafolio fue desarrollado con WordPress, integrado con Html y Sass y maquetado con Figma y Photoshop.

  1. 1. Fase de maquetación
  2. 2. Intégration Web
  3. 3. Développement WordPress

1. Fase de maquetación

Realicé la maqueta de mi portafolio con Figma y Photoshop. Quería un diseño moderno y dinámico.

Basé el diseño de mi página alrededor del contenido textual. Reservé las imagenes para la presentación de los proyectos. De hecho, si miran en mi blog, pueden ver que en elegí no utilizar imagenes individuales para cada uno de mi artículos. (Acá les explico ¿por qué?)

Esa elección sobre las imagenes me trajo también estos beneficios:

  1. Focalizar la atención sobre la información útil
  2. Mejorar el UX (optimizando el tiempo de carga de cada página)

2. Integración Web Responsive

Esta página esta integrada así:

  1. HTML / SASS / jQuery
  2. Full Responsive
  3. Mobile First
  4. Adaptada a todos los navegadores modernos (Chrome, Firefox, Safari, Edge)

Mi organización SASS

  1. Metodología BEM (Para los nombres de las clases)
  2. Sass 7-1 Pattern (Para la organización de los archivos)
  3. Flexbox et Css Grid Layout

Domino suficientemente bien la Integración Web (maquetación web) para no tener aue sobrecargar mi css final con Frameworks tipo Bootstrap.

3. WordPress

No utilizo plantillas existentes (ni gratuitas ni de pago), ni constructores, se trata de una Plantilla a medida.

Hacer una página a medida (plantilla) me permite tener mucho mayor control sobre mi código, lo que me aporta:

  1. Una mejor gestión del SEO-onpage
  2. Mayor control para hacer evolucionar mi portafolio
  3. Una gestión mas fácil para el mantenimiento
  4. Una limitación de las fallas de seguridad
  5. Una mejora notable de la velocidad de varga de la página y su accessibilidad

(Resultados de LightHouse)

Esta página esta hecha con:

  1. El gestionador de dependencias Composer
  2. La arquitectura WordPress de johnpbloch
  3. Gestión de mis assets (css, javascript, imágenes estáticas) conParcelJS
  4. Gestión del versioning con Git

Esa organización me permite poder versionar facilmente mi código sin tener que versionar la totalidad del Core WordPress (lo que sería demasiado pesado). Me da también la facilidad de poder instalar en menos de 5 minutos una copia exacta de la versión en producción en cualquier PC. Me permite sobre todo poder desarrollar en local, lo cuál es mucho mas cómodo, y mucho menos arriesgado.

Para la gestión dinámica del contenido de la página (proyectos artículos), utiliso -sin necesidad de plugins-:

  1. Custom Post Type
  2. Custom Taxonomies

Para la gestión del contenido estático (editable desde el Dashboard) :

  1. ACF (con acf-json para una facilidad de puesta en producción).

Mi portafolio es multilingue (francés y español), que son mis 2 idiomas nativos. Para la gestión del multilinguem trabajo con Polylang (algunas traducciones menores están hechas directamente desde PHP)

Plugins utilizados en producción:

  1. Advanced Custom Fields (ACF)
  2. Polylang
  3. WebP Express
  4. YoastSEO
  5. iThemeSecure
  6. Enlighter – Customizable Syntax Highlighter

Plugins utilizados únicamente en desarrollo:

  1. Query Monitor
  2. Advanced Custom Fields: Theme Code