136 lines
4.7 KiB
Plaintext
136 lines
4.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Resume - <%= resume.basics.name %></title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: "FILL"0, "wght"400, "GRAD"0, "opsz"48;
|
|
}
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
<% if (css.devBKG) { %>
|
|
<%- css.tagOpen + css.css + css.devBKG + css.tagClose %>
|
|
<% } else { %>
|
|
<%- css.tagOpen + css.css + css.tagClose %>
|
|
<% } %>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="page">
|
|
<div class="page-content">
|
|
<div class="resumehead">
|
|
<img class="profile-image" src=<%= resume.basics.image %> alt="">
|
|
<div class="resumehead-name">
|
|
<h5><%= resume.basics.label %></h5>
|
|
<h1><%= resume.basics.name %></h1>
|
|
</div>
|
|
<span class="divider"></span>
|
|
<div class="resumehead-contactinfo">
|
|
<div class="contactinfo">
|
|
<span class="material-symbols-outlined">
|
|
phone
|
|
</span>
|
|
<p><%= resume.basics.phone %></p>
|
|
</div>
|
|
|
|
<div class="contactinfo">
|
|
<span class="material-symbols-outlined">
|
|
mail
|
|
</span>
|
|
<p><%= resume.basics.email %></p>
|
|
</div>
|
|
|
|
<div class="contactinfo">
|
|
<span class="material-symbols-outlined">
|
|
pin_drop
|
|
</span>
|
|
<p><%= resume.basics.location.address %> Matthews, NC</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="resumebody">
|
|
<div class="l">
|
|
<h3>Profile</h3>
|
|
<p><%= resume.basics.summary %></p>
|
|
|
|
<br>
|
|
<h3>Skills</h3>
|
|
<% resume.skills.forEach(element => { %>
|
|
<!-- Timeline component -->
|
|
<div class="skill-container">
|
|
<h5><%= element.name %></h5>
|
|
<div class="chip-container">
|
|
<% element.keywords.forEach(word => { %>
|
|
<div class="chip"><div class="chip-content"><%= word %></div></div>
|
|
<% }) %>
|
|
</div>
|
|
</div>
|
|
<% }) %>
|
|
</div>
|
|
|
|
<div class="r">
|
|
<h3>Experience</h3>
|
|
<% resume.work.forEach(element => { %>
|
|
<!-- Timeline component -->
|
|
<div class="timelineitem">
|
|
<h4><%= element.position %></h4>
|
|
<p><i><%= element.name %></i></p>
|
|
|
|
<div class="space-small"></div>
|
|
<p><%= element.summary %></p>
|
|
<% if (element.endDate) { %>
|
|
<p class="date"><%= new Date(element.startDate).getFullYear() %> - <%= new Date(element.endDate).getFullYear() %></p>
|
|
<% } else { %>
|
|
<p class="date"><%= new Date(element.startDate).getFullYear() %> - Now</p>
|
|
<% } %>
|
|
|
|
</div>
|
|
<% }) %>
|
|
|
|
<div class="space"></div>
|
|
<h3>Education</h3>
|
|
<% resume.education.forEach(element => { %>
|
|
<!-- Timeline component -->
|
|
<div class="timelineitem">
|
|
<h4><%= element.area %></h4>
|
|
<p><i><%= element.studyType %></i></p>
|
|
<div class="space-small"></div>
|
|
<p><%= element.institution %></p>
|
|
<p class="date"><%= new Date(element.endDate).getFullYear() %> </p>
|
|
</div>
|
|
<% }) %>
|
|
|
|
<div class="space"></div>
|
|
<h3>Certifications</h3>
|
|
<% resume.certificates.forEach(element => { %>
|
|
<!-- Timeline component -->
|
|
<div class="timelineitem">
|
|
<h4><%= element.name %></h4>
|
|
<p><i><%= element.issuer %></i></p>
|
|
<p class="date"><%= new Date(element.date).getFullYear() %> </p>
|
|
</div>
|
|
<% }) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |