Portfolio Blazor Template

This is a customizable Blazor portfolio project.

Project

Table of Contents

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

About this repo

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

Session Title	Speaker(s)	Tools	Session Code	Video	Presentation
Build your Project Portfolio website with .NET	Matt Soucoup	Blazor	Project Portfolio with Blazor Session	Watch On-Demand	Presentation

What has changed?

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.

Getting started

Installs required

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

Clone, fork or generate from this template

Whether you are going to work with the repository locally or remotely with GitHub Codespaces I recommend you to make a fork of this repo, but generating a repo from it is also ok. The steps vary according to the method.

Fork

Once you have forked the repo. Either clone it or open it on a Codespace.

Local	Remote
git clone https://github.com/yourusername/portfolio-blazor-template.git

Then, enable GitHub Actions

Click on the ⏵ Actions button. The following message will be displayed.

Generate from template

Click on the Use this template ⏷︎ button

Then, enable GitHub Action write permissions

Click on ⚙ Settings button. Then, in the Code and Automation section click on Actions and then General. At the bottom of the page you will find the following section.

Select Read and write permissions and check Allow GitHub Actions to create and approve pull requests. Finally Save your changes.

Build and run

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.

Deployment

By default, this repo is deployed to GitHub Pages, but you can choose another option, such as Azure Static Web Apps or any other service. If doing so, delete main.yml and follow the steps of your service.

The main.yml should create a branch called gh-pages on push. But you must manually enable GitHub pages for your repository.

Click on ⚙ Settings button. Then, in the Code and Automation section click on Pages. Then, select the gh-pages branch as shown in the image below.

Project details

• Components - several components used to display pieces of the resume.
  • The most important components are Background.razor, Skills.razor, Accomplishments.razor and Projects.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.

Components

• Background, a "smart" component you can navigate to via /background. This component contains the About, Experience, Education, Volunteer and Community 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.
• Projects, a "smart" component you can navigate to via /projects. This component contains About and ProjectCards presentation components that display this part of the resume.
• Project, a "smart" component you can navigate to via /project/{Project Name}. Renders a project page.
• 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.
• Community, presentation component rendering a community.
• 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.
• ProjectCard, presentation component rendering a project card.

Data

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" : []
}

ViewModels

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 separate the UI from the Models and, furthermore, a frontend developer can work separately from code logic within the components.

Styling

Components rely mostly on wwwroot/css/app.css.

Resources

GitHub Codespaces

• GitHub Codespaces overview
• GitHub Codespaces docs

GitHub Actions

• GitHub Actions overview
• GitHub Codespaces docs

Azure Static Web Apps

• 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

Visual Studio Code

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

Debugging Resources

• Debugging Blazor WebAssembly