Skip to content

Instantly share code, notes, and snippets.

@TravisBumgarner

TravisBumgarner/resume.html

Created December 16, 2024 20:43
Show Gist options
  • Save TravisBumgarner/1ebed93d23c07a5bb770dd3f38b26dda to your computer and use it in GitHub Desktop.
Save TravisBumgarner/1ebed93d23c07a5bb770dd3f38b26dda to your computer and use it in GitHub Desktop.
Download ZIP
Resume in HTML
Raw
resume.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travis Bumgarner Resume</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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Travis Bumgarner</h1>
<div id="contact-info"></div>
</header>
<div id="content">
<div id="left-column">
<section class="sub-section" id="languages"><h2>Languages</h2><ul></ul></section>
<section class="sub-section" id="frontend"><h2>Frontend</h2><ul></ul></section>
<section class="sub-section" id="backend"><h2>Backend</h2><ul></ul></section>
<section class="sub-section" id="design"><h2>Design</h2><ul></ul></section>
<section class="sub-section" id="spoken"><h2>Spoken</h2><ul></ul></section>
</div>
<div id="right-column">
<section class="sub-section" id="jobs"><h2>Experience</h2><ul></ul></section>
<section class="sub-section" id="personal-explorations"><h2>Personal Explorations</h2><ul></ul></section>
<section class="sub-section" id="education"><h2>Education</h2><ul></ul></section>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
const INCLUDE_PHONE = true;
const CODING_LANGUAGES = [
"TypeScript",
"JavaScript",
"Python",
"CSS3",
"HTML5",
"SQL",
];
const FRONTEND = [
"React",
"React Native",
"Electron"
];
const BACKEND = [
"Express",
"GraphQL",
"Node",
"GCP",
"AWS",
"Mongo",
"PostgreSQL",
"Docker"
];
const DESIGN = ["Figma"];
const SPOKEN = ["English", "Spanish"];
const JOBS = [
{
title: "Senior Software Engineer",
company: "Switchboard",
location: "Remote, USA",
startDate: "2022-07",
endDate: "2024-07",
responsibilities: [
"Architected and implemented a recording creation engine to produce interactive video recordings of meetings and asynchronous work, with near-instantaneous cloud streaming.",
"Developed a high-performance collaborative PDF app with shared viewing and commenting, achieving a 95% performance improvement over its predecessor.",
"Collaborated with engineers to implement usage tiers, encouraging membership upgrades.",
"Organized two virtual team outings for coworkers.",
],
},
{
title: "Senior Software Engineering Consultant & Tech Lead",
company: "DEPT",
location: "Remote, USA",
startDate: "2021-12",
endDate: "2022-07",
responsibilities: [
"Acted as technical lead on a greenfield project to explore a new market and new technologies.",
"Launched 91 member security collective focused on company-wide security.",
],
},
{
title: "Founder",
company: "Painless Prototyping",
location: "Boston, MA",
startDate: "2016-05",
endDate: "2017-07",
startDate: "2020-08",
endDate: "2021-10",
responsibilities: [
"Created practical, affordable, and approachable hardware and software kits for learning about engineering topics.",
"Ran successful Kickstarter campaign for BYO Keyboard Kit with $31,828 raised across 510 backers.",
],
},
{
title: "Lead Full Stack Software Engineer",
company: "Prenda",
location: "Remote, USA",
startDate: "2021-02",
endDate: "2021-09",
responsibilities: [
"Led a team of 10 engineers to rewrite the student attendance tool to improve company profitability.",
"Brought structure to engineering team of 25 by establishing biweekly all hands and learning meetings.",
"Managed one direct report, enhancing their coding and soft skills and helping define their career goals.",
],
},
{
title: "Senior Full Stack Software Engineer",
company: "Pluralsight",
location: "Boston, MA",
startDate: "2018-06",
endDate: "2021-02",
responsibilities: [
"Brought critical path search engine, built with React, TypeScript, Express, Elasticsearch, and Python, from idea to general release which serves over 1.6 million searches a month.",
"Improved team health by running quarterly health surveys and organizing team building activities.",
"Performed user research and data analysis, and prototyped over 10 experiences to improve the product in the areas of search, browse, spell check, content, and technical certifications.",
"Created and presented over 15 presentations on topics including prototyping outside of the product and communication skills to groups of between 10 and 200 people.",
],
},
{
title: "Full Stack Software Engineer",
company: "Contract & Freelance",
location: "Remote, USA",
startDate: "2015-08",
endDate: "2018-03",
responsibilities: [
"Built 14 frontend and backend solutions for clients including non-profits, scientists, and doctors.",
],
},
{
title: "Environmental Health Specialist",
company: "Peace Corps",
location: "Panama",
startDate: "2013-06",
endDate: "2015-07",
responsibilities: [
"Designed and fabricated improvements to 5 gravity-fed water systems.",
"Trained 4 rural water committees by organizing and leading water committee seminars and educational presentations.",
],
},
];
const EDUCATION = [
{
degree: "B.S. in Mechanical Engineering",
institution: "Rutgers University",
location: "New Brunswick, NJ",
endDate: "6/13",
},
];
const PERSONAL_EXPLORATIONS = [
{
title: "Photography Portfolio",
description:
"Created with React, TypeScript, Framer Motion, Zustand, GCP, Adobe Lightroom.",
},
{
title: "Ideas Down",
description:
"iPhone app for quickly recording ideas. Created with Figma, React Native, TypeScript.",
},
{
title: "Todo Today",
description:
"Todo list desktop app for the easily distracted. Created with React, Electron, TypeScript.",
},
];
const formatLeftColumn = (query, list) => {
query.innerHTML += list
.map((item) => `<li>${item}</li>`)
.join("");
};
const formatJob = (job) => {
const headerContent = `<div><span class="job-title">${job.title}</span> | <span class="job-company">${job.company}</span></div><div><span class="job-location">${job.location}</span> | <span class="job-date">${job.startDate} - ${job.endDate}</span></div>`;
const bodyContent = `<ul>${job.responsibilities.map(responsibility => `<li>${responsibility}</li>`).join("")}</ul>`;
return `<div class="job-container"><div class="job-header">${headerContent}</div><div class="job-body">${bodyContent}</div></div>`;
};
const formatJobs = (query, jobs) => {
query.innerHTML += jobs.map(formatJob).join("");
};
const formatPersonalExploration = (exploration) => {
return `<div class="side-project-container"><div class="side-project-header"><p><span class="side-project-title">${exploration.title}</span> | <span class="side-project-description">${exploration.description}</span></p></div></div>`;
};
const formatPersonalExplorations = (query, personalExplorations) => {
query.innerHTML += personalExplorations.map(formatPersonalExploration).join("");
};
const formatEducation = (education) => {
return `<div class="education-container"><div class="education-header"><div class="education-title">${education.degree}</div><div class="education-body">${education.institution} | ${education.location} | ${education.endDate}</div> </div></div>`;
};
const formatEducations = (query, educations) => {
query.innerHTML += educations.map(formatEducation).join("");
};
const formatContactInfo = (query) => {
let contactInfoContent = [{label: "Email", value: "[email protected]"}];
if (INCLUDE_PHONE) {
contactInfoContent.push({label: "Phone", value: "123-456-7890"});
} else {
contactInfoContent.push({label: "", value: ""});
}
contactInfoContent.push({label: "GitHub", value: "github.com/travisbumgarner"});
contactInfoContent.push({label: "Website", value: "travisbumgarner.dev"});
query.innerHTML = contactInfoContent.map(contactInfo => `<p><strong>${contactInfo.label}</strong> ${contactInfo.value}</p>`).join("");
};
const getCurrentDate = () => {
const date = new Date();
return date.toISOString().split('T')[0];
};
const appendDocumentTitleHeader = () => {
const date = getCurrentDate();
document.title = `Travis Bumgarner Resume - ${date} ${INCLUDE_PHONE ? "- P" : "- NP"}`;
}
formatLeftColumn(document.getElementById("languages").querySelector("ul"), CODING_LANGUAGES);
formatLeftColumn(document.getElementById("frontend").querySelector("ul"), FRONTEND);
formatLeftColumn(document.getElementById("backend").querySelector("ul"), BACKEND);
formatLeftColumn(document.getElementById("design").querySelector("ul"), DESIGN);
formatLeftColumn(document.getElementById("spoken").querySelector("ul"), SPOKEN);
formatJobs(document.getElementById("jobs").querySelector("ul"), JOBS);
formatEducations(document.getElementById("education").querySelector("ul"), EDUCATION);
formatPersonalExplorations(document.getElementById("personal-explorations").querySelector("ul"), PERSONAL_EXPLORATIONS);
formatContactInfo(document.getElementById("contact-info"));
appendDocumentTitleHeader();
Raw
style.css
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* End CSS Reset */
@page {
size: A4;
margin: 0;
}
@media screen {
body {
overflow: auto;
height: auto;
min-height: 27.9cm;
}
#content {
overflow: visible;
height: auto;
}
#right-column {
overflow: visible !important;
}
}
@media print {
html, body {
width: 21.5cm;
height: 27.9cm;
margin: 0;
padding: 0;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}
:root {
--section-item-padding: 0.3cm;
--list-item-padding: 0.15cm;
}
body {
width: 21.5cm;
height: 27.9cm;
margin: 0 auto;
font-family: "Roboto", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 0.38cm;
page-break-after: avoid;
page-break-before: avoid;
padding: 0.4cm;
}
h1 {
font-size: 1.2cm;
font-weight: 300;
}
h2 {
font-size: 0.45cm;
padding-bottom: 0.2cm;
font-weight: 600;
}
a {
color: #000;
text-decoration: none;
&::after {
content: attr(href);
}
}
.sub-section {
padding-bottom: 0.6cm;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
padding-bottom: var(--list-item-padding);
}
}
header {
padding-bottom: 0.3cm;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
#contact-info {
position: relative;
top: 0.42cm;
display: grid;
grid-template-columns: 4.8cm 3.9cm;
gap: 0.05cm 1cm;
font-size: 0.3cm;
}
}
#content {
display: flex;
flex-direction: row;
height: 100%;
#left-column {
padding-right: 1cm;
height: 100%;
}
#right-column {
height: 100%;
.job-container, .education-container, .side-project-container {
padding-bottom: var(--section-item-padding);
&:last-child {
padding-bottom: 0;
}
.job-header, .education-header, .side-project-header {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: 0.3cm;
.job-title, .education-title, .side-project-title {
font-weight: 500;
}
}
.job-body, .education-body, .side-project-body {
ul{
padding-left: 0.6cm;
list-style-type: circle;
}
}
}
.side-project-container {
padding-bottom: var(--list-item-padding);
.side-project-header {
padding-bottom: 0cm;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment