Personaliza y despliega plantilla de portafolio en GitHub Pages

Plantilla de portafolio moderno para desarrolladores con React, TypeScript y Tailwind, optimizada con Vite. Diseño minimalista, animaciones suaves y tema oscuro.

18 ago 2025 • 4 min de lectura • Equip Q2BSTUDIO

Inteligencia-Artificial-

Plantilla de sitio web para portafolio de desarrollador moderna y responsiva creada con React, TypeScript y TailwindCSS, optimizada para rendimiento con Vite y con un elegante esquema de colores púrpura, negro y blanco y animaciones suaves

Características principales: diseño moderno y minimalista con degradados y animaciones; totalmente responsive para dispositivos móviles y escritorio; rendimiento rápido gracias a Vite; tipado con TypeScript para mejor experiencia de desarrollo; desplazamiento suave entre secciones; formulario de contacto con validación; tema oscuro profesional

Estructura recomendada del proyecto: carpeta src con componentes como Header, Hero, About, Skills, Projects, Contact y Footer; carpeta data con projects.ts para datos de proyectos y skills; assets para imágenes y archivos estáticos; ui para componentes reutilizables; archivo App.tsx como núcleo de la aplicación

Cómo empezar paso a paso: obtener la plantilla y crear un repositorio en GitHub llamado developer-portfolio; inicializar git en el directorio del proyecto con git init; añadir el remoto con git remote add origin https://github.com/YOUR_USERNAME/developer-portfolio.git; agregar cambios git add .; realizar commit git commit -m initial commit; y subir a la rama principal con git push origin main; instalar dependencias con npm install y levantar el servidor de desarrollo con npm run dev; la aplicación por defecto estará disponible en https://localhost:5173; para producción ejecutar npm run build y para vista previa npm run preview

Personalización del contenido: actualizar la sección Hero en src/components/Hero.tsx con tu nombre, título y descripción; editar About en src/components/About.tsx con tu historia profesional; añadir y modificar proyectos en src/data/projects.ts incluyendo título, descripción, tecnologías, imagen, url de GitHub y url en vivo; actualizar la lista de skills también en src/data/projects.ts o en el archivo correspondiente; modificar información de contacto en Header, Hero, Contact y Footer reemplazando los enlaces y el correo por tus datos

Personalización de diseño: colores definidos en src/index.css mediante variables CSS en :root, ajustar variables para cambiar paleta; tipografías configuradas en tailwind.config.ts y cargadas en index.html para usar fuentes como Inter y JetBrains Mono; puedes cambiar la paleta a tonos azul grisáceos o cualquier otra combinación que prefieras; añade efectos hover para tarjetas de proyecto con transformaciones y transiciones para un escalado sutil

Despliegue en GitHub Pages con GitHub Actions: crear el archivo de workflow en .github/workflows/deploy.yml que instale dependencias, ejecute npm run build y publique la carpeta de salida en Pages; configurar en Settings la fuente de Pages usando GitHub Actions y añadir el entorno github-pages con la rama main; verificar que el path base en vite.config.ts coincida con el nombre del repositorio, por ejemplo base /developer-portfolio/; luego comitear los cambios y hacer push para activar el pipeline de despliegue; la página quedará disponible en https://YOURUSERNAME.github.io/developer-portfolio/

Sugerencias de prompts para IA que aceleran la personalización: generar un texto breve sobre mi perfil profesional para front end con enfoque minimalista y experiencia en React; crear descripciones de proyectos como tienda en linea, gestor de tareas, app meteorologica, plataforma de blog y chat en tiempo real; proponer una lista de skills para un desarrollador web moderno que incluya frontend, backend y herramientas de despliegue; adaptar CSS custom properties a una paleta azul grisacea; añadir un efecto hover con leve escala y sombra para tarjetas de proyecto

Stack tecnologico: React 18 con TypeScript, Vite como herramienta de build, TailwindCSS para estilos, componentes UI con Radix UI y shadcn ui, iconos con Lucide React y despliegue con GitHub Pages

Sobre Q2BSTUDIO: somos una empresa de desarrollo de software especializada en aplicaciones a medida y software a medida, con experiencia en inteligencia artificial y soluciones de IA para empresas, agentes IA y proyectos de analitica avanzada con Power BI; ofrecemos servicios de ciberseguridad para proteger infraestructuras y datos, servicios cloud AWS y Azure para desplegar aplicaciones escalables y servicios de inteligencia de negocio para convertir datos en decisiones accionables; en Q2BSTUDIO creamos soluciones personalizadas que integran inteligencia artificial, desarrollo full stack y seguridad para acelerar la transformación digital de su empresa

Por que elegirnos: experiencia en aplicaciones a medida y software a medida, equipos expertos en inteligencia artificial y ciberseguridad, capacidad de desplegar en servicios cloud AWS y Azure, y competencias en servicios inteligencia de negocio y Power BI para mejorar la visibilidad y el rendimiento del negocio; trabajamos con metodologias agiles para entregar valor rapido y seguro

Contacta y siguiente paso: personalizamos la plantilla del portafolio para mostrar tus proyectos mas relevantes y optimizar palabras clave como aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi para mejorar posicionamiento web; si quieres que Q2BSTUDIO adapte e implemente tu portafolio y lo despliegue en GitHub Pages, contactanos para una consultoria inicial

UNA PAUSA?

Juga una estona abans de marxar

ELS NOSTRES SERVEIS

Com et podem ajudar

Tens un projecte en ment?

Explica'ns la teva visió i la convertim en una solució de programari. Sigui quin sigui l'abast, fem realitat la teva idea.