This is a customizable Blazor portfolio project.

Project

1. About this repo
   • What has changed?
2. Getting started
   • Installs required
   • Build and run
3. Project details
   • Components
   • Data
   • ViewModels
   • Styling
4. Resources
   • GitHub Codespaces
   • GitHub Actions
   • Azure Static Web Apps
   • Visual Studio Code
   • Debugging Resources

This repo is based on the "Build your Project Portfolio website with .NET session" from the dotnetconf-studentzone.

I re-structured the project and used MVVM to separate the UI from the Models.

In any case, the only requirement to be up and running is to replace your data in the resume.json file. Therefore, you don't have to worry about MVVM unless your intention is to add or remove code.

Furthermore, I split the Resume component into different components that are rendered in different routes. These routes are also included to the Navigation.

Finally, more components were added, and they are completely optional. If you do not want them at your resume, you can remove the info in resume.json and leave that field blank.

• Visual Studio or Visual Studio Code or directly open a GitHub Codespace from a fork of this repo.
• .NET SDK 6

To run the app, open up a terminal window and make sure you're in the same directory as the Portfolio.csproj file. (In this repo within the src folder). Then run:

dotnet run

The terminal will display a variety of output, including the URL the site can be viewed at.

• Components - several components used to display pieces of the resume.
  • The most important components are Background.razor, Skills.razor and Accomplishments.razor. These components are responsible for grabbing the resume's data and displaying it.
• Navigation - changes made to Shared/NavMenu.razor to update the left hand navigation.
• Data - a JSON file stored in wwwroot/sample-data that holds resume specific data.
• C# representation of the resume. Code in Shared/Models/Resume.cs that model the data from the resume.json in C#.
• ViewModels - being the link between UI and the Models.
• Styling - CSS changes used to make the resume.

• Background, a "smart" component you can navigate to via /background. This component contains the About, Experience, Education and Volunteer presentation components that display this part of the resume.
• Skills, a "smart" component you can navigate to via /skills. This component contains the About, Skill and Certification presentation components that display this part of the resume.
• Accomplishments, a "smart" component you can navigate to via /accomplishments. This component contains About, Award, Patent, Article, Conference and Mentorship presentation components that display this part of the resume.
• About, presentation component rendering info about you.
• Experience, presentation component rendering an experience.
• Education, presentation component rendering an education.
• Volunteer, presentation component rendering a volunteering.
• Skill, presentation component rendering a skill.
• Certification, presentation component rendering a certification.
• Award, presentation component rendering an award.
• Patent, presentation component rendering a patent.
• Article, presentation component rendering an article.
• Conference, presentation component rendering a conference.
• Mentorship, presentation component rendering a mentorship.

The idea is for this app to use an API. Currently, it relies on static data, a JSON file placed in sample-data/resume.json.

The data is a JSON file and looks like the following hierarchy:

{
 "name": "string",
 "about": "string",
 "experiences" : [],
 "educations": [],
 "volunteers" : [],
 "skills" : [],
 "certifications" : [],
 "communities" : [],
 "awards" : [],
 "patents" : [],
 "articles" : [],
 "conferences" : [],
 "mentorships" : [],
 "projects" : []
}

It contains an interface IResumeViewModel.cs and a class that implements it ResumeViewModel.cs

The class is in charge of making a GET Request, here to a static file resume.json, and then load its info to a component when required.

This is handy to separe the UI from the Models and, furthermore, a frontned developer can work separately from code logic within the components.

Components rely mostly on wwwroot/css/app.css. And wwwroot/img/* contains background images for different templates.

• GitHub Codespaces overview
• GitHub Codespaces docs

• GitHub Actions overview
• GitHub Codespaces docs

• Learn how to Publish an Angular, React, Svelte, or Vue JavaScript app and API with Azure Static Web Apps
• API support in Azure Static Web Apps
• Add an API to Azure Static Web Apps
• Authentication and authorization
• Routes
• Review pre-production environments

• Azure Free Trial
• VS Code
• VS Code Extension for Node on Azure
• Azure Functions local.settings.json file

• Debugging Blazor WebAssembly