Descripción

Descubre cómo hacer un portafolio moderno con .NET Razor en 2025. Aprende a dominar Razor, Blazor y más con nuestra guía.

Introducción

Convierte tus diseños de .NET Razor en un portafolio profesional es una de las habilidades más demandadas en 2025 para cualquier desarrollador web moderno. Como instructor y desarrollador con experiencia real en .NET, Blazor, Razor Pages, React y WordPress, he ayudado a cientos de alumnos a transformar diseños simples en portafolios funcionales y altamente profesionales que verdaderamente llaman la atención de reclutadores.

Lo que aprenderás aquí está actualizado al 2025, adaptado a .NET 9/10 y basado en experiencia práctica.

¿Qué es un portafolio profesional basado en .NET Razor?

Un portafolio profesional basado en .NET Razor es un sitio construido con Razor Pages o Blazor que presenta tu experiencia, tus proyectos reales y tus habilidades mediante componentes reutilizables, layouts modernos y secciones bien estructuradas.
Es la mejor forma de mostrar tu dominio de .NET sin usar plantillas genéricas.

¿Por qué es importante en 2025?

En 2025, el mercado exige capacidad real de construir interfaces profesionales, manejar componentes con Razor, integrar API modernas y demostrar dominio del ecosistema .NET.
Crear un portafolio propio demuestra experiencia y buenas prácticas.

1. Crea la estructura base del proyecto

En 2025, la opción recomendada es Blazor Server con .NET 9/10, por rendimiento y simplicidad

dotnet new blazorserver -n MiPortafolioRazor
cd MiPortafolioRazor

Esto genera:

/Pages
/Shared
/wwwroot
/App.razor
/_Host.cshtml

2. Define un Layout profesional

Los portafolios deben tener:

• Header
• Footer
• Sidebar opcional
• Área central limpia

Edita Shared/MainLayout.razor:

@inherits LayoutComponentBase

<div class="layout-container">
    <header>
        <NavMenu />
    </header>

    <main>
        @Body
    </main>

    <footer class="footer">
        <p>© @DateTime.Now.Year - Mi Portafolio en .NET Razor</p>
    </footer>
</div>

Buenas prácticas usadas aquí:

• Layout limpio
• Componentes reutilizables
• Footer dinámico
• Separación UI lógica

3. Convierte tus diseños HTML/Razor en componentes

En lugar de pegar HTML “duro”, crea componentes:

Ejemplo: Componente ProjectCard.razor

<div class="project-card">
    <img src="@Image" alt="@Title" />
    <h3>@Title</h3>
    <p>@Description</p>

    <a href="@Github" target="_blank" class="btn">Ver en GitHub</a>
</div>

@code {
    [Parameter] public string Title { get; set; }
    [Parameter] public string Description { get; set; }
    [Parameter] public string Image { get; set; }
    [Parameter] public string Github { get; set; }
}

Ahora cualquier diseño que antes tenías “suelto” puedes convertirlo en interfaz profesional.

4. Crea la página de proyectos

@page "/proyectos"
@inherits ComponentBase

<h2>Mis Proyectos</h2>

<div class="grid">
    <ProjectCard 
        Title="Sistema de Inventario .NET 9"
        Description="Aplicación real desarrollada con Razor Pages y EF Core."
        Image="images/inventario.png"
        Github="https://github.com/usuario/inventario-dotnet9"
    />

    <ProjectCard 
        Title="API REST en .NET 10"
        Description="Arquitectura limpia, JWT y mejores prácticas."
        Image="images/api.png"
        Github="https://github.com/usuario/api-dotnet10"
    />
</div>

Aquí muestras experiencia real, demostrando proyectos relevantes.

Buenas prácticas para un portafolio Razor profesional

✔ Usa componentes para todo

NavBar, tarjetas, secciones, footer, etc.

✔ Usa Code Behind cuando haya lógica

Evita mezclar lógica pesada en Razor.

✔ Usa servicios para cargar datos

Incluso si los datos son falsos.

✔ Optimiza imágenes

Tu portafolio debe cargar rápido.

✔ Incluye versión en inglés

En 2025, esto duplica tus oportunidades laborales.

Errores comunes y cómo evitarlos

❌ Error 1: Copiar HTML sin convertirlo a componente

Tu código se vuelve inmantenible.

❌ Error 2: No usar un Layout

Las páginas quedan distintas y sin cohesión.

❌ Error 3: No documentar proyectos

Los reclutadores quieren saber qué hiciste tú.

❌ Error 4: No desplegar el portafolio

Debe estar disponible en:

• Azure
• Vercel (con Blazor WebAssembly)
• GitHub Pages (WebAssembly)

❌ Error 5: Poner diseños pero no código

Tu portafolio debe demostrar capacidad técnica.

Preguntas frecuentes (FAQ)

1. ¿Puedo usar Razor Pages en lugar de Blazor?

Sí. Razor Pages sigue siendo excelente y moderno en .NET 9/10.

2. ¿Puedo agregar un blog dentro del portafolio?

Sí, incluso puedes integrarlo con Headless WordPress + .NET.

3. ¿Cómo hago para que luzca más profesional?

Agrega:

• Animaciones suaves
• Dark mode
• Sección de skills con barras dinámicas
• Sección “Sobre mí” con logros reales

4. ¿Puedo agregar IA?

En 2025 sí, por ejemplo:

• Chatbot integrado
• Resumen automático de proyectos
• Generación de imágenes para el portafolio

Recursos oficiales recomendados

• Documentación oficial de Razor Pages (Microsoft)
• Documentación Blazor 2025
• GitHub Actions para CI/CD en .NET
• Azure Static Web Apps