🖐️, soy Diego Fernández

Desarrollador web full stack y automatización

Las Palmas de Gran Canaria

Correo copiado

Corporativos

Notas Guía En desarrollo

Notas Guía es una plataforma educativa que enseña contenido musical como un viaje visual por un universo de núcleos y órbitas que el alumno recorre de forma progresiva completando lecciones que incluyen:

- Una parte teórica llamada información con texto, imágenes con o sin animación, ejemplos con canciones, etc.

- Una parte práctica llamada entrenamiento, que es un juego relacionado con la lección, que desbloquea nuevas lecciones en el núcleo actual u otros núcleos si cumplen un objetivo mínimo.

El panel admin permite gestionar los contenidos y herramientas para soporte a los usuarios de la plataforma.

Se ha usado React en el frontend, Tailwind para el sistema de estilos, Resend para el envío de correos y Supabase (Postgres + Auth + Storage) como backend.

  • HTML5
  • CSS3
  • Tailwind
  • Javascript
  • React
  • Supabase
  • PostgreSQL
  • Resend
  • OpenCode
En desarrollo
1 / 5
Vista 1 de Notas Guía

Ecoinge Canarias

Ecoinge Canarias es una empresa de ingeniería cuya misión es mejorar el uso de la tecnología combinándola con la sostenibilidad y el medio ambiente.

El proyecto se ha centrado en el blueprint (organización de contenido), utilizando código propio (CSS y JQuery) y Elementor para su maquetación.

Para poner a prueba el diseño, se han aplicado pruebas de usabilidad con diferentes perfiles de usuarios, haciendo los últimos cambios necesarios en base a los resultados obtenidos.

Se ha configurado un trabajo cron en PHP para los números de los contadores.

  • Wordpress
  • PHP
  • HTML5
  • CSS3
  • Javascript
  • JQuery

Personales

Mercurio En desarrollo

Mercurio es un asistente personal de organización diaria para menú semanal, entrenamiento, tareas, calendario, automatización de la lista de la compra, notas y un chatbot integrado en una sola vista.

Integra Google Calendar (vía Service Account), la API REST de Todoist, una playlist de videos con ejercicios que se dividen por secciones gestionada localmente (principalmente de youtube), añade al carrito del supermercado con tu navegador con Playwright los productos y notas importadas desde un ZIP de Google Takeout (Google Keep), unificando varias fuentes de datos personales en un único lugar.

El proyecto está estructurado con Astro, base de datos SQLite y diseño con Tailwind. El Chatbot, visible en la imagen de la galería, tiene el contexto de todo el contenido y tendrá un modo de solo lectura y otro de edición usando el Token Plan de MiniMax para evitar costes por uso.

  • HTML5
  • Astro
  • Javascript
  • CSS3
  • Tailwind
  • SQLite SQLite
  • Google Calendar
  • Todoist
  • Google Keep
  • Google Takeout
  • Playwright
  • OpenCode
En desarrollo
1 / 5
Vista del chat widget de Mercurio

ToDoToday Extensión

Interfaz de la extensión ToDoToday para Chrome

Extensión de Chrome que permite gestionar tareas.

La extensión se conecta a una API creada con Flask (Hosteada en Render) y MongoDB (Atlas), permitiendo gestionar las tareas de forma remota.

Permite añadir, editar, eliminar y marcar tareas como completadas una vez el usuario ha iniciado sesión.

Además, el modo claro y oscuro con Tailwind y controlar el tamaño del texto para la accesibilidad.

En el README del repositorio se explica cómo usarla de forma local y cómo instalar la extensión.

  • HTML5
  • CSS3
  • Tailwind
  • Javascript
  • React
  • Git
  • Docker
  • Chrome
  • Python
  • Flask
  • MongoDB

Competitive Bracket Generator

Cuadro de competición generado por la aplicación

Generador de Bracket para torneos, copas, ligas, etc. Enfocado principalmente a pruebas de concepto de Vue.

Primero, podremos mediante un formulario crear la lista de jugadores, elegir el tipo de competición y ponerle nombre. Tras esto pasaremos al cuerpo principal de la aplicación.

Al ver el bracket tenemos 4 acciones:

- Volver atrás

- Reordenar el bracket

- Actualizar el bracket (para descartar o añadir jugadores)

- Elegir ganador

Usamos Tailwind, slots condicionales, etiquetado de componente por prop, variables de estado (ref, reactive y computed) y, el núcleo del proyecto, los brackets generados de forma dinámica.

Proyecto responsive, modales con "vue-final-modal" y mensajes toast con "vue-sonner".

  • HTML5
  • CSS3
  • Tailwind
  • Javascript
  • Vue
  • Git

Jungle Paradise

Pantalla del videojuego Jungle Paradise

Proyecto 1 - Bloque Front-End de la Escuela de Programadores: Formación Dual de Desarrolladores Web Full-Stack (Fundación Universitaria de Las Palmas, Reboot Academy).

Videojuego en navegador, inspirado en Whac-A-Mole, en el que tendremos que matar a todos los mosquitos que podamos antes de que acabe el tiempo.

El mayor reto de este proyecto consistió en implementar el juego en 3 días, utilizando para ello el control de versiones con Git, y poniendo en prácticas los conocimientos adquiridos en las tecnologías Front-End.

  • HTML5
  • CSS3
  • Javascript
  • Git

LudOhana

Página de eventos educativos de LudOhana

Proyecto 3 - Bloque Full-Stack de la Escuela de Programadores: Formación Dual de Desarrolladores Web Full-Stack (Fundación Universitaria de Las Palmas, Reboot Academy).

LudOhana es una página web sobre eventos, para escuelas y familias, enfocados en la educación de los niños. Se utiliza la API creada en el proyecto del bloque 2.

Trabajamos principalmente con React y MaterialUI, aunque también tuvimos que adaptar el proyecto de la API para dar más funcionalidad al front. Utilizamos Stripe para las donaciones de los eventos.

Información completa en el README del proyecto.

  • HTML5
  • CSS3
  • Javascript
  • React
  • MaterialUI
  • Git

LudOhana-API

Interfaz de demostración de la API de LudOhana

Proyecto 2 - Bloque Back-End de la Escuela de Programadores: Formación Dual de Desarrolladores Web Full-Stack (Fundación Universitaria de Las Palmas, Reboot Academy).

LudOhana es una página web sobre eventos, para escuelas y familias, enfocados en la educación de los niños. Se crea la API que posteriormente se utilizaría en el proyecto 3.

Usamos el workspace compartido de Postman para tener los endpoints almacenados por entidad, entorno (desarrollo o producción) y los tokens de autentificación necesarios. Además de Node, Express, Sequelize y MySQL.

El proyecto desplegado tiene un pequeño front para presentar la integración de Stripe y hacer operaciones en nuestra base de datos una vez se procese el pago.

Información completa en el README del proyecto.

  • NodeJS
  • ExpressJS
  • Sequelize
  • Postman
  • Git

Solitario Web

El juego Solitario tiene muchas variantes y nos hemos centrado en una de ellas.

Dispone de 3 niveles de dificultad y animaciones de victoria y derrota.

El proyecto cuenta con ajustes de apariencia y permite cambiar el idioma entre el español y el inglés.

  • HTML5
  • CSS3
  • Javascript
  • JQuery

Pruebas Técnicas

Generación de Texto IA

Interfaz del generador de texto con inteligencia artificial

Objetivo de la prueba: Permitir a los usuarios generar texto utilizando una API que simule el comportamiento de una Inteligencia Artificial para generación de texto.

Se opta por generar frases célebres en base a la palabra de nuestro prompt con un debounce. Se destaca la animación de escritura para la generación de texto, la implementación del ORM Prisma y la conexión de la base de datos remota mediante el servicio Turso.

Todos los detalles en el README del repositorio.

  • HTML5
  • CSS3
  • Javascript
  • React
  • NodeJS
  • ExpressJS
  • Prisma
  • Turso
  • Vercel
  • Git

Recomendación profesional de Jorge Mor

Diego es a nivel general un buen trabajador con buenas aptitudes para sacar el trabajo adelante, consiguiendo los objetivos previstos. Es autodidacta y tiene una buena base en programación web.

Durante su estancia de varios meses en 21ninjas trabajó en varios proyectos web y en todos ellos demostró una gran eficacia. Sin duda aportó beneficios al equipo de trabajo.