Convierte tus diseños de .NET Blazor en un portafolio profesional: Guía paso a paso con ejemplos reales

Introducción

Como desarrollador web full stack e instructor técnico con experiencia en tecnologías como .NET, Blazor, React y WordPress, sé lo valioso que es contar con un portafolio profesional sólido y visualmente atractivo. En 2025, con la competencia creciendo en el mercado tech, no basta con saber programar: necesitas mostrar lo que sabes hacer de manera estratégica. En este artículo, te enseñaré cómo transformar tus diseños en .NET Blazor en un portafolio funcional, moderno y alineado con las mejores prácticas actuales.

¿Qué es un portafolio profesional en .NET Blazor?

Un portafolio profesional en Blazor es una aplicación web desarrollada con esta tecnología que presenta tus proyectos, habilidades, experiencia y contacto de forma estructurada y visual. Lo que lo diferencia de otros portafolios es que está construido con .NET Blazor, un framework moderno de Microsoft que permite desarrollar aplicaciones web interactivas usando C# en lugar de JavaScript.

¿Por qué es importante en 2025?

Blazor ha madurado enormemente desde sus primeras versiones. Con .NET 9, lanzado en 2025, Blazor se consolida como una de las alternativas más potentes para desarrollar aplicaciones web empresariales y personales, con integración nativa con el ecosistema .NET, soporte para WebAssembly, renderizado híbrido y mejoras en performance y desarrollo offline.

Si estás aplicando a puestos de backend o full stack, mostrar un portafolio hecho en Blazor puede diferenciarte del resto. Muestra dominio de C#, Razor, componentes reutilizables y despliegue profesional.

Paso a paso: Convierte tus diseños Blazor en un portafolio profesional

1. Crea un nuevo proyecto Blazor WebAssembly

dotnet new blazorwasm -n MiPortafolioBlazor
cd MiPortafolioBlazor

Este proyecto usa WebAssembly, ideal para portafolios estáticos o de carga rápida. Si deseas integración con backend, puedes optar por Blazor Server o Blazor WebAssembly con ASP.NET Core hosted.

2. Estructura tu portafolio

Organiza las secciones básicas:

• Inicio
• Sobre mí
• Proyectos
• Habilidades
• Contacto

Puedes crear componentes Razor para cada sección:

<!-- Pages/Proyectos.razor -->
@page "/proyectos"

<h2>Proyectos Destacados</h2>
@foreach (var proyecto in proyectos)
{
    <div class="card">
        <h3>@proyecto.Titulo</h3>
        <p>@proyecto.Descripcion</p>
        <a href="@proyecto.Url" target="_blank">Ver más</a>
    </div>
}

Define tu modelo:

public class Proyecto
{
    public string Titulo { get; set; }
    public string Descripcion { get; set; }
    public string Url { get; set; }
}

3. Aplica estilos profesionales con Tailwind o Bootstrap

Integra Tailwind CSS para personalizar rápidamente tu diseño con clases utilitarias:

<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
  <h3 class="text-xl font-bold text-blue-600">Sistema de Inventario</h3>
  <p class="text-gray-700">Proyecto con .NET 9 y EF Core 8</p>
</div>

4. Agrega rutas de navegación con NavMenu

Modifica Shared/NavMenu.razor:

<NavLink href="/" Match="NavLinkMatch.All">Inicio</NavLink>
<NavLink href="/proyectos">Proyectos</NavLink>
<NavLink href="/contacto">Contacto</NavLink>

Asegúrate de usar rutas limpias y amigables.

5. Implementa formularios con validación

Ejemplo de formulario de contacto:

<EditForm Model="@modelo" OnValidSubmit="EnviarMensaje">
    <InputText @bind-Value="modelo.Nombre" />
    <InputTextArea @bind-Value="modelo.Mensaje" />
    <button type="submit">Enviar</button>
</EditForm>

Valida con DataAnnotations:

public class ContactoModel
{
    [Required]
    public string Nombre { get; set; }

    [Required]
    public string Mensaje { get; set; }
}

6. Despliega en producción (ejemplo: Vercel, Azure o GitHub Pages)

Blazor WebAssembly genera archivos estáticos que puedes publicar fácilmente:

dotnet publish -c Release

Luego, sube el contenido de wwwroot al servidor o a GitHub Pages.

Buenas prácticas para portafolios con Blazor

• Usa componentes reutilizables para evitar código duplicado.
• Optimiza para móviles usando diseño responsive.
• Integra microanimaciones con CSS o bibliotecas ligeras.
• Implementa SEO básico agregando <title> dinámico y etiquetas meta.
• Utiliza datos reales: proyectos de clientes, open source, freelance, etc.

Errores comunes y cómo evitarlos

Error	Solución recomendada
Crear todo en una sola página	Usa componentes separados y rutas
Código no reutilizable	Refactoriza en componentes independientes
No optimizar imágenes o carga	Usa lazy loading y compresión
Falta de llamada a la acción clara	Incluye botones de contacto o descarga de CV
No testear en móvil	Usa media queries y frameworks CSS

Preguntas frecuentes (FAQs)

¿Puedo usar Blazor para un portafolio si solo soy backend?

¡Sí! De hecho, es una excelente forma de mostrar tu backend aplicado al frontend con .NET puro.

¿Puedo integrarlo con una base de datos?

Sí, usando Blazor Server o Blazor WebAssembly hosted con .NET 9 y EF Core para exponer tus datos mediante APIs.

¿Qué diferencia a Blazor de React para un portafolio?

Blazor usa C#, lo cual es ideal si tu stack es .NET. React puede tener mayor comunidad visual, pero Blazor ha alcanzado paridad en muchos aspectos para 2025.

Recursos oficiales recomendados

• Documentación oficial de Blazor (.NET 9)
• Guía para usar Tailwind con Blazor
• GitHub Pages + Blazor WebAssembly