Resume/theme/template.ejs

136 lines
4.7 KiB
Plaintext
Raw Normal View History

2023-07-25 16:16:36 -04:00
<!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>