Skip to main content

​
Quick Start Guide

Get your Dev Showcase portfolio up and running in minutes. This guide will walk you through installation, configuration, and customization.
Estimated Time: 10-15 minutes from clone to running application

​
Prerequisites

Before you begin, ensure you have the following installed on your system:
1

.NET 9.0 SDK

The application requires .NET 9.0 SDK or later.Check if you have it installed:
dotnet --version
Expected output: 9.0.x or higherDon’t have it? Download from dot.net
After installation, verify by running:
dotnet --info
You should see output similar to:
.NET SDK:
 Version:   9.0.100
 Commit:    abcd1234

Runtime Environment:
 OS Name:     Windows/Linux/macOS
 OS Version:  ...
2

Git

Required to clone the repository.
git --version
Download from git-scm.com if needed.
3

Text Editor or IDE (Optional)

Recommended options:
  • Visual Studio 2022 (Windows/Mac) - Full IDE with debugging
  • Visual Studio Code - Lightweight, cross-platform
  • JetBrains Rider - Powerful .NET IDE

​
Installation

1

Clone the Repository

Open your terminal and navigate to where you want to store the project:
git clone https://github.com/your-username/dev-showcase.git
cd dev-showcase
If you’re creating your own portfolio, fork the repository first, then clone your fork.
2

Restore Dependencies

The project uses NuGet packages. Restore them with:
dotnet restore
Expected output:
Determining projects to restore...
Restored /path/to/dev-showcase/dev-showcase.csproj (in 2.1 sec).
This command downloads all required packages specified in dev-showcase.csproj:
<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
</Project>
3

Build the Project

Compile the application to ensure everything is set up correctly:
dotnet build
Successful build output:
Build succeeded.
    0 Warning(s)
    0 Error(s)

Time Elapsed 00:00:05.23
If you see errors, ensure:
  • You’re using .NET 9.0 SDK (check with dotnet --version)
  • All files were cloned successfully
  • You ran dotnet restore first
4

Run the Application

Start the development server:
dotnet run
Expected output:
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
The application will be available at:
  • HTTPS: https://localhost:5001
  • HTTP: http://localhost:5000
5

View in Browser

Open your browser and navigate to:
https://localhost:5001
You should see the portfolio homepage with the animated particle header!
The root URL (/) automatically redirects to /dataScience profile:
// Program.cs
app.MapGet("/", context =>
{
    context.Response.Redirect("/dataScience", permanent: false);
    return Task.CompletedTask;
});

​
Project Structure

Understanding the project layout will help you customize the portfolio: 
dev-showcase/
├── Controllers/
│   └── HomeController.cs          # Profile routing and language cookie
├── Models/
│   └── ErrorViewModel.cs          # Error handling
├── Views/
│   ├── Home/
│   │   ├── HomePage.cshtml        # Main page with section containers
│   │   └── Sections/              # Modular content sections
│   │       ├── _Introduction.cshtml
│   │       ├── _Skills.cshtml
│   │       ├── _Projects.cshtml
│   │       └── _Education.cshtml
│   └── Shared/
│       ├── _Layout.cshtml          # Master layout, sidebar, particles
│       └── Error.cshtml            # Error page
├── wwwroot/                       # Static files
│   ├── css/                       # Stylesheets
│   │   ├── base.css              # Variables and base styles
│   │   ├── layout.css            # Grid layout
│   │   ├── header-particles.css  # Particle animations
│   │   ├── panels-glow.css       # Glassmorphism effects
│   │   ├── skills.css            # Skills section styling
│   │   ├── charts.css            # Chart containers
│   │   ├── carousel.css          # Project carousel
│   │   └── responsive.css        # Mobile breakpoints
│   ├── js/                       # JavaScript modules
│   │   ├── main.js               # App initialization
│   │   ├── translation.js        # Multilingual system
│   │   ├── navigation.js         # Section switching
│   │   ├── carousel.js           # Infinite carousel
│   │   ├── charts-manager.js     # Chart.js integration
│   │   ├── typewriter.js         # Header animation
│   │   └── glow-panels.js        # Interactive hover effects
│   ├── languages/                # Translation files ⚠️ EDIT THESE
│   │   ├── en.json               # English content
│   │   └── es.json               # Spanish content
│   ├── files/                    # Downloadable CVs
│   │   └── *.pdf                 # Your CV files
│   ├── images/                   # Project images, icons
│   └── lib/                      # Third-party libraries
├── Program.cs                    # Application entry, routing config
├── appsettings.json              # Configuration
└── dev-showcase.csproj           # Project file

​
Customizing Your Content

The beauty of Dev Showcase is that all content is in JSON files - no code changes required!
1

Update Personal Information

Edit the translation files in wwwroot/languages/:English content (en.json):
{
  "typewriter": {
    "prefix": "I'm ",
    "phrases": [
      "Your Name Here",
      "a Full Stack Developer",
      "a Problem Solver"
    ]
  },
  "header": {
    "hello": "#HELLO WORLD",
    "name": "I'm Your Name"
  },
  "introduction": {
    "aboutTitle": "About Me",
    "aboutContent_dataScience": "Your data science bio here...",
    "aboutContent_webDev": "Your web dev bio here...",
    "aboutContent_dataAnalyst": "Your data analyst bio here..."
  }
}
Spanish content (es.json):
{
  "typewriter": {
    "prefix": "Soy ",
    "phrases": [
      "Tu Nombre Aquí",
      "un Desarrollador Full Stack",
      "un Solucionador de Problemas"
    ]
  }
}
Maintain the same JSON structure in both files. Keys must match for the translation system to work correctly.
2

Add Your Skills

Update the skills section with your proficiency levels:
"skills": {
  "progressBars": {
    "webDev": {
      "htmlcss": 90,
      "aspnet": 85,
      "csharp": 85,
      "javascript": 75
    },
    "dataScience": {
      "python": 80,
      "pandas": 75,
      "machinelearning": 70
    },
    "databases": {
      "sqlserver": 85,
      "postgresql": 80,
      "mongodb": 70
    }
  }
}
Values range from 0-100 representing proficiency percentage.
3

Update Chart Data

Customize the vocational and cognitive charts:
"chartsData": {
  "cognitive": {
    "mine": [47, 40, 47],    // Verbal, Numerical, Logical
    "avg": [44, 34, 51]       // Comparison averages
  },
  "bars": {
    "topSkills": [91.89, 88.96, 88.78],
    "softSkills": {
      "teamwork": 88,
      "problemSolving": 90,
      "communication": 85
    }
  }
}
4

Add Your Projects

Update the projects section with your work:
"projects": {
  "personal": {
    "myproject": {
      "name": "My Awesome Project",
      "short": "Brief description",
      "description": "Detailed project description with your accomplishments...",
      "h1": "Key feature 1",
      "h2": "Key feature 2",
      "h3": "Key feature 3",
      "img1": {
        "title": "Screenshot Title",
        "desc": "What this image shows"
      }
    }
  }
}
5

Replace CV Files

Add your CV files to wwwroot/files/:
wwwroot/files/
├── cv_en.pdf                    # English CV
├── cv_es.pdf                    # Spanish CV
└── YourName_Specialty.pdf       # Profile-specific CVs
Update the CV link logic in translation.js if you use different filenames:
window.updateCVLink = () => {
    const btn = document.getElementById('cvDownloadBtn');
    const lang = document.documentElement.lang || 'es';
    
    btn.href = lang === 'en' 
        ? '/files/your_cv_english.pdf' 
        : '/files/your_cv_spanish.pdf';
};
6

Update Profile Images

Replace the profile image:
  1. Add your photo to wwwroot/images/profile/
  2. Update the reference in Views/Shared/_Layout.cshtml:
<div class="profile-image-container">
    <img src="~/images/profile/your-photo.webp" 
         alt="Your Name" 
         class="profile-image">
</div>
Use WebP format for smaller file sizes and faster loading. Free converters available at squoosh.app

​
Testing Different Profiles

The portfolio supports multiple professional profiles. Test each one: 
https://localhost:5001/en/dataScience
https://localhost:5001/es/dataScience
Shows data science-focused content with Python, ML, and analytics skills.

​
Development Tips

​
Hot Reload

With .NET 9.0, hot reload is enabled by default. Changes to .cshtml files and CSS will reflect immediately without restarting the server. 
dotnet watch run
This command enables hot reload for C# files as well.

​
Browser Developer Tools

  1. Open DevTools: Press F12 in your browser
  2. Console Tab: Check for JavaScript errors
  3. Network Tab: Verify JSON translation files load correctly
  4. Application Tab: Inspect localStorage and cookies

​
Common Issues

Error: System.IO.IOException: Failed to bind to addressSolution: Change the port in Properties/launchSettings.json:
{
  "profiles": {
    "dev-showcase": {
      "commandName": "Project",
      "applicationUrl": "https://localhost:5002;http://localhost:5001"
    }
  }
}
Symptom: Content shows translation keys instead of textSolution:
  1. Check browser console for 404 errors
  2. Verify files exist at wwwroot/languages/en.json and es.json
  3. Ensure JSON is valid (use jsonlint.com)
  4. Check file permissions
Solution:
  1. Verify Chart.js loads in browser DevTools → Network tab
  2. Check for JavaScript errors in console
  3. Ensure chartsData exists in translation JSON
  4. Verify canvas elements have IDs matching JavaScript selectors

​
Building for Production

1

Create Production Build

dotnet publish -c Release -o ./publish
This creates an optimized build in the ./publish directory.
2

Test Production Build

Navigate to the publish directory and run:
cd publish
dotnet dev-showcase.dll
3

Configure for Deployment

Update appsettings.json for production:
{
  "Logging": {
    "LogLevel": {
      "Default": "Warning",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "yourdomain.com"
}

​
Next Steps

Explore Features

Learn about all the interactive features and how they work

Deploy Your Portfolio

Deploy to Azure, AWS, or your preferred hosting provider

Customize Styling

Modify colors, fonts, and layouts to match your brand

Add Components

Extend with new sections and interactive components
Need help? Check the troubleshooting section or open an issue on GitHub. The community is here to help you build an amazing portfolio!
Pro Tip: Make small changes incrementally and test frequently. Use git branches to experiment without affecting your main version.

Build docs developers (and LLMs) love

Get started for freeTalk to us