​

Dev Showcase Portfolio

​

What is Dev Showcase?

• Dynamic Profile Views: Switch between different professional profiles (Data Science, Web Development, Data Analyst) with content that adapts to each role
• Multilingual Support: Seamlessly toggle between English and Spanish with dynamic JSON-based translations
• Interactive Data Visualization: Showcase skills and competencies using Chart.js-powered charts, including radar charts for vocational profiles and bar charts for skill levels
• Engaging User Experience: Modern UI with particle animations, glassmorphism effects, and smooth transitions
• Responsive Design: Fully optimized for desktop, tablet, and mobile devices

​

Who is it for?

​

Key Technologies

​

Backend

• ASP.NET Core 9.0: Latest version of Microsoft’s cross-platform framework
• MVC Pattern: Clean separation of concerns with Model-View-Controller architecture
• Razor Views: Server-side rendering with partial views for modular components

​

Frontend

• Vanilla JavaScript: No heavy framework dependencies, ensuring fast load times
• Chart.js 4.4.0: Professional data visualization library for interactive charts
• CSS3: Modern styling with custom properties, grid, flexbox, and animations
• jQuery: DOM manipulation and AJAX support

​

Features Implementation

// Program.cs - Route configuration for profile switching
app.MapControllerRoute(
    name: "profilesWithLang",
    pattern: "{lang}/{profile}",
    defaults: new { controller = "Home", action = "Profile" },
    constraints: new
    {
        lang = "^(es|en)$",
        profile = @"^(dataScience|webDev|dataAnalyst|DataAnalysis)$"
    });

​

Data Management

• JSON-based Content: All text content, translations, and chart data stored in structured JSON files
• Client-side Caching: Translation files are cached for optimal performance
• Cookie-based Preferences: User language preferences persist across sessions

// translation.js - Language resolution with fallback chain
const resolveInitialLanguage = () => {
    const pathMatch = window.location.pathname.match(/^\/(es|en)(?:\/|$)/);
    if (pathMatch) return pathMatch[1];

    const stored = localStorage.getItem('preferredLanguage');
    if (stored && SUPPORTED_LANGUAGES.includes(stored)) return stored;

    const browserLang = (navigator.language || '').slice(0, 2).toLowerCase();
    if (SUPPORTED_LANGUAGES.includes(browserLang)) return browserLang;

    return DEFAULT_LANGUAGE;
};

​

Project Architecture

dev-showcase/
├── Controllers/
│   └── HomeController.cs          # Main controller with profile routing
├── Models/
│   └── ErrorViewModel.cs          # Error handling model
├── Views/
│   ├── Home/
│   │   ├── HomePage.cshtml        # Main page layout
│   │   └── Sections/              # Modular partial views
│   │       ├── _Introduction.cshtml
│   │       ├── _Skills.cshtml
│   │       ├── _Projects.cshtml
│   │       └── _Education.cshtml
│   └── Shared/
│       └── _Layout.cshtml          # Master layout with particles
├── wwwroot/
│   ├── css/                       # Modular stylesheets
│   ├── js/                        # Feature-specific JavaScript
│   ├── languages/                 # Translation JSON files
│   │   ├── en.json
│   │   └── es.json
│   └── files/                     # Downloadable CV files
└── Program.cs                     # Application entry point

​

Design Philosophy

1. Dark Theme: Sophisticated color palette optimized for readability
2. Glassmorphism: Translucent panels with backdrop blur effects
3. Particle Animations: Dynamic header with floating particles creating depth
4. Smooth Transitions: Carefully crafted animations for section changes and interactions
5. Accessibility: Semantic HTML, ARIA labels, and keyboard navigation support

​

Why ASP.NET Core 9.0?

• Cross-Platform: Deploy on Windows, Linux, or macOS
• High Performance: One of the fastest web frameworks available
• Built-in Features: Routing, dependency injection, and middleware out of the box
• Easy Hosting: Deploy to Azure, AWS, Docker, or any hosting provider
• Modern Development: C# 12 features and minimal API support

​

What’s Included?

• Introduction: About me, professional goals, and journey
• Skills: Technical skills, soft skills, and vocational profiles with interactive charts
• Projects: Professional experience and personal projects with image carousels
• Education: Academic training, certifications, and professional development

​

Next Steps