> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/RicardoAlejandroSantillan/dev-showcase/llms.txt
> Use this file to discover all available pages before exploring further.

# Architecture Overview

> Understanding the ASP.NET Core MVC architecture and project structure of Dev Showcase

## Introduction

Dev Showcase is built using **ASP.NET Core MVC**, a modern web framework that implements the Model-View-Controller architectural pattern. This architecture separates concerns and provides a clean, maintainable structure for building web applications.

## ASP.NET Core MVC Pattern

The MVC pattern divides the application into three interconnected components:

<CardGroup cols={3}>
  <Card title="Model" icon="database">
    Represents the data and business logic layer. Contains domain objects and data structures.
  </Card>

  <Card title="View" icon="eye">
    Handles the presentation layer. Renders the UI using Razor templates (.cshtml files).
  </Card>

  <Card title="Controller" icon="gears">
    Processes incoming requests, interacts with models, and returns appropriate views.
  </Card>
</CardGroup>

## Project Structure

The Dev Showcase project follows the standard ASP.NET Core MVC structure:

```
dev-showcase/
├── Controllers/              # Application controllers
│   └── HomeController.cs    # Main controller handling profile routes
├── Models/                   # Data models and view models
│   └── ErrorViewModel.cs    # Error handling model
├── Views/                    # Razor view templates
│   ├── Home/                # Views for HomeController
│   │   ├── HomePage.cshtml
│   │   └── Sections/        # Partial views for page sections
│   │       ├── _Introduction.cshtml
│   │       ├── _Skills.cshtml
│   │       ├── _Projects.cshtml
│   │       └── _Education.cshtml
│   └── Shared/              # Shared views and layouts
│       ├── _Layout.cshtml   # Main layout template
│       └── Error.cshtml     # Error page
├── wwwroot/                  # Static files (CSS, JS, images)
│   ├── css/                 # Stylesheets
│   ├── js/                  # JavaScript files
│   ├── images/              # Image assets
│   ├── languages/           # JSON localization files
│   │   ├── en.json
│   │   └── es.json
│   ├── files/               # Downloadable files (CVs)
│   └── lib/                 # Third-party libraries
├── Properties/               # Launch and build settings
├── Program.cs               # Application entry point and configuration
├── appsettings.json         # Application configuration
└── dev-showcase.csproj      # Project file
```

## Request Lifecycle

Understanding how requests flow through the application:

<Steps>
  <Step title="Request arrives">
    A user navigates to a URL like `/en/dataScience`
  </Step>

  <Step title="Routing matches pattern">
    The routing middleware matches the URL to a route pattern defined in `Program.cs`
  </Step>

  <Step title="Controller action executes">
    The appropriate controller action (e.g., `HomeController.Profile`) is invoked
  </Step>

  <Step title="Model processing">
    The controller processes data, validates input, and prepares the model
  </Step>

  <Step title="View rendering">
    The controller returns a view, which renders HTML using Razor syntax
  </Step>

  <Step title="Response sent">
    The rendered HTML is sent back to the client's browser
  </Step>
</Steps>

### Visual Flow

```mermaid theme={null}
graph LR
    A[Browser Request] --> B[Routing]
    B --> C[Controller]
    C --> D[Model]
    C --> E[View]
    E --> F[HTML Response]
    F --> A
```

## Core Components

### Program.cs

The application entry point configures services and middleware:

```csharp Program.cs:1 theme={null}
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseRouting();
app.UseAuthorization();
app.MapStaticAssets();
```

<Note>
  The `AddControllersWithViews()` method registers MVC services, including controllers, views, and model binding.
</Note>

### Controllers

Controllers handle incoming requests and return responses:

```csharp Controllers/HomeController.cs:10 theme={null}
public class HomeController : Controller
{
    private static readonly HashSet<string> ValidProfiles = new(StringComparer.OrdinalIgnoreCase)
    {
        "dataScience",
        "webDev",
        "dataAnalyst",
        "DataAnalysis"
    };

    public IActionResult Profile(string profile)
    {
        if (!ValidProfiles.Contains(profile))
            return NotFound();

        ViewData["Profile"] = profile;
        return View("HomePage");
    }
}
```

### Models

Models represent data and business logic:

```csharp Models/ErrorViewModel.cs:1 theme={null}
namespace dev_showcase.Models
{
    public class ErrorViewModel
    {
        public string? RequestId { get; set; }

        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
    }
}
```

### Views

Views use Razor syntax to generate HTML:

```cshtml Views/Home/HomePage.cshtml:1 theme={null}
@{
    ViewData["Title"] = "Portafolio";
}

<div class="content-sections-container">
    <div class="content-section active" data-content="introduction">
        <partial name="Sections/_Introduction" />
    </div>
    
    <div class="content-section" data-content="skills">
        <partial name="Sections/_Skills" />
    </div>
    
    <div class="content-section" data-content="projects">
        <partial name="Sections/_Projects.cshtml" />
    </div>
    
    <div class="content-section" data-content="education">
        <partial name="Sections/_Education.cshtml" />
    </div>
</div>
```

## Static Files

The `wwwroot` folder contains static assets:

* **CSS**: Modular stylesheets for different components (header, sidebar, carousel, charts)
* **JavaScript**: Client-side functionality (translation, navigation, charts, animations)
* **Images**: Profile photos, project screenshots, certificates
* **Languages**: JSON files for multilingual content
* **Libraries**: Third-party dependencies (jQuery, validation libraries)

<Tip>
  Static files are served directly by the web server without going through the MVC pipeline, improving performance.
</Tip>

## File Organization Best Practices

The project follows these organizational principles:

1. **Separation of Concerns**: Controllers, Models, and Views are in separate directories
2. **Partial Views**: Complex views are broken into reusable sections (e.g., `_Introduction.cshtml`, `_Skills.cshtml`)
3. **Modular CSS**: Stylesheets are split by component/feature rather than one monolithic file
4. **Asset Organization**: Images are organized by category (profile, projects, certificates)
5. **Language Files**: Localization content is externalized to JSON files for easy maintenance

## Configuration Files

### appsettings.json

Stores application configuration:

```json theme={null}
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}
```

### dev-showcase.csproj

Defines project properties and dependencies:

```xml theme={null}
<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
</Project>
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Routing" icon="route" href="/architecture/routing">
    Learn how URL routing works and how profile routes are configured
  </Card>

  <Card title="Localization" icon="language" href="/architecture/localization">
    Understand the multilingual system and how to add new languages
  </Card>
</CardGroup>