I’ve spent all day trying to figure this out, so for anyone else, here is my working solution:
@page
<!-- Index.cshtml -->
<!-- Add model directive below -->
@model IndexModel
@{
// Add ViewData Title below
ViewData["Title"] = "Home";
}
<div class="jumbotron jumbotron-fluid jumbotron-container resume-jumbotron text-white">
<div class="container-fluid jumbotron-content">
<p class="text-center jumbotron-header mb-4">Hey there, I'm @Model.FullName !</p>
</div>
</div>
<div class="container">
<div class="resume-content">
<h4 class="general-header mb-3">Summary:</h4>
<p class="general-content mb-3">I'm an enthusiastic software engineer with @Model.YearsOfExperience + years of experience participating in the complete lifecyclye of successfully launched applications. I am skilled in developing business plans, requirements specifications, user documentation, and architectural systems research. Strong written and verbal communications.</p>
</div>
<div class="resume-content">
<h4 class="general-header mb-3">Languages:</h4>
<ul class="list-group general-content">
@foreach(string language in @Model.Languages)
{
<li class="list-item" style="width: 18rem;">
@language
</li>
}
</ul>
</div>
<div class="resume-content">
<h4 class="general-header mb-3">Contact</h4>
<p class="general-content">
<!-- Render partial for Link below -->
For more information regarding my experience, please refer to my <partial name="_Links" for="@Model.LinkedInUsername"/>
</p>
</div>
</div>
// Index.cshtml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
namespace ResumeTemplater.Pages
{
public class IndexModel : PageModel
{
public string FullName { get; set; }
public string LinkedInUsername { get; set; }
public int YearsOfExperience { get; set; }
public List<string> Languages { get; set; }
public void OnGet()
{
FullName = "Jeremy Keeling";
LinkedInUsername = "Jeremy";
YearsOfExperience = 3;
Languages = new List<string> {"Python", "SQL", "C#", "HTML", "CSS", "JavaScript"};
}
}
}
@page
<!-- Projects.cshtml -->
<!-- Add model directive below -->
@model ProjectsModel
@{
// Add ViewData Title below
ViewData["Title"] = "Projects";
}
<div class="jumbotron jumbotron-fluid jumbotron-container text-white project-jumbotron">
<div class="container-fluid jumbotron-content">
<p class="text-center mb-4 jumbotron-header">Projects</p>
</div>
</div>
<div class="container">
<div class="project-container">
@foreach(Project project in @Model.Projects)
{
if (project.Year > 2017)
{
<h4 class="project-title general-header">
@(project.Title)
<!-- Project Title -->
</h4>
<p class="project-year general-header">
@(project.Year)
<!-- Project Year -->
</p>
<p class="project-description general-content">
@(project.Description)
<!-- Project Description -->
</p>
}
}
</div>
<br>
<h4 class="general-header">Portfolio</h4>
<p class="general-content">
<!-- Render partial for Link below -->
For more information regarding my experience, please refer to my <partial name="_Links" for="@Model.GithubUsername"/>
</p>
<br>
</div>
// Projects.cshtml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using ResumeTemplater.Models;
namespace ResumeTemplater.Pages
{
public class ProjectsModel : PageModel
{
public List<Project> Projects { get; set; }
public string GithubUsername { get; set; }
public void OnGet()
{
GithubUsername = "JRK77";
Projects = new List<Project> {
new Project()
{
Title = "Explorella",
Description = "A large scale travelling application built to help plan your destination and itinerary on your next trip! Built on React, Node, Express, and MongoDB.",
Year = 2019,
Technologies = new List<string> {
"React",
"Node",
"Express",
"MongoDB"
}
},
new Project()
{
Title = "Spotivize",
Description = "Spotivize is a music platform that uses geolocation to track when your favorite artists are playing in your local city! Built with Node, Express, React and MongoDB.",
Year = 2016,
Technologies = new List<string> {
"React",
"Node",
"Express",
"MongoDB"
}
},
new Project()
{
Title = "Cypher Clothing",
Description = "A large scale e-commerce clothing store application. Built with Razor Pages and SQLite.",
Year = 2019,
Technologies = new List<string> {
"Razor Pages",
"SQLite",
}
},
new Project()
{
Title = "Password Box",
Description = "A password manager Chrome plugin used to create and safely store all your passwords! Built with Javascript and HTML.",
Year = 2020,
Technologies = new List<string> {
"Javascript",
"HTML",
}
},
};
}
}
}
Good luck and happy learning! 