resume.html

---
title: 'Resume'
layout: default
---
<style type="text/css">
	body {
		background-color: var(--color-background);
	}

	main nav > ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: space-around;
		list-style: none;
		padding: 0;
	}

	main nav > ul > li {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	main h1 {
		font-family: Georgia,'Times New Roman',serif;
		font-size: 2.5em;
		font-weight: lighter;
		text-align: center;
	}

	main h2 {
		color: var(--color-accent-light);
		display: inline-block;
		margin: 1rem 0;
		text-transform: uppercase;
	}

	main h3 {
		display: inline-block;
		margin: 0.5rem 0 0.25rem;
	}

	main p {
		margin: 0.5rem 0;
	}

	.resume-location {
		color: rgba(0,0,0,0.6);
	}

	.resume-experience {
		padding: 0.75rem 0;
	}

	.experience-org a {
		color: black;
		text-decoration: none;
	}

	ul.achievements {
		padding-left: 1.25rem;
		margin: 0.5rem 0;
	}

	.experience-skills-title {
		margin: 0.5rem 0;
	}

	.more {
		transition: 0.5s ease;
		overflow-y: hidden;
		opacity: 1;
		visbility: visible;
	}

	li.more {
		/* bullet disappears with overflow hidden */
		overflow-y: visible;
	}

	.hide-more .more {
		height: 0;
		transform: scaleY(0);
		margin: 0;
		padding: 0;
		opacity: 0;
		visbility: hidden;
	}

	.hide-more span.more {
		/* inline elements don't accept height */
		display: none;
	}

	main .form {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
		justify-content: center;
		margin: 1rem auto;
	}

	main .form button {
		flex-basis: 12rem;
	}

	.toggle-text:after {
		content: 'Concise Version';
	}

	.hide-more .toggle-text:after {
		content: 'Full Version';
	}

	@media print {
		.experience-skills li:after {
			content: ', ';
		}

		.experience-skills li:last-of-type:after {
			content: '';
		}
	}

	@media screen {
		main {
			margin-right: auto;
			margin-left: auto;
			max-width: var(--container-width);
			padding-left: 1rem;
			padding-right: 1rem;
		}

		.resume-experience {
			--timeline-padding: 0.75rem;
			--timeline-border-width: 2px;
			padding-left: var(--timeline-padding);
			border-left: var(--timeline-border-width) solid var(--color-alternate-light);
		}

		.resume-experience h3 {
			position: relative;
		}

		.resume-experience h3:before {
			content: '';
			position: absolute;
			left: calc(var(--timeline-border-width) / -2 - var(--timeline-padding));
			bottom: 0;
			transform: translate(-50%, -0.5rem);
			width: 0.5rem;
			height: 0.5rem;
			border-radius: 50%;
			background: var(--color-alternate);
			z-index: 1;
		}

		ul.experience-skills {
		}

		.experience-skills li {
		}
	}
</style>

<div class="h-resume">
	<h1 class="p-name h-card">
		<a href="/" class="p-name u-url disable-link-styles print-show">Anthony Ciccarello</a>
		<span class="print-hide">Resume</span>
	</h1>
	<nav>
		<ul>
			<li>
				{% include "icons/email.svg" %}
				<a href="mailto:anthony@ciccarello.me">anthony@ciccarello.me</a>
			</li>
			<li>
				{% include "icons/link.svg" %}
				<a href="{{page.url}}">www.ciccarello.me</a>
			</li>
			<li>
				{% include "icons/linkedin.svg" %}
				<a href="https://www.linkedin.com/in/anthonyciccarello/">in/anthonyciccarello</a>
			</li>
			<li>
				{% include "icons/github.svg" %}
				<a href="https://github.com/aciccarello">@aciccarello</a>
			</li>
		</ul>
	</nav>

	<div>
		<h2>Summary</h2>
		<span class="resume-location">﹣ San Diego County, California</span>
		<p class="p-summary">{{resume.summary}}</p>
		<h2>Top Skills</h2>
		<ul class="experience-skills chip-set">
			{% for skill in resume.topSkills %}
				<li class="p-skill chip-item">
					{{ skill }}
				</li>
			{% endfor %}
		</ul>

		<section class="form actions print-hide">
			<button class="toggle-text" type="button" onclick="toggleExpandedText()">Show </button>
			<button type="button" onclick="window.print()">Print for PDF</button>
		</section>

		<section>
			<h2>Experience</h2>
			{% for job in resume.experience %}
				<div class="resume-experience p-experience h-event">
					<div class="duration">
						<time class="dt-start" datetime="{{ job.startDate | formatMachineDate : "month" }}">{{ job.startDate | formatHumanDate : "month" }}</time>
							﹣
							{% if job.endDate %}
							<time class="dt-end" datetime="{{ job.endDate | formatMachineDate : "month" }}">{{ job.endDate | formatHumanDate : "month" }}</time>
						{% else %}
							Present
						{% endif %}
						{%- assign endDate = job.endDate | default : buildTime -%}
						{% if job.durationText %}
							({{job.durationText}})
						{% else %}
							({{job.startDate | yearsSince : endDate | default: '1 month' }})
						{% endif %}
					</div>
					<h3 class="p-name">{{job.position}}</h3>
					<span class="experience-org p-location h-card">
						{% if job.companyUrl %}
							<a class="p-org u-url" href="{{job.companyUrl}}" rel="noopener noreferrer">
							{%- endif -%}
							{{job.companyName}}
							{%- if job.companyUrl -%}
							</a>
						{% endif %}
					</span>
					<span class="resume-location more">﹣ <span class="p-location">{{job.location}}</span></span>

					<div class="p-summary">
						<p class="more">{{job.summary}}</p>

						<ul class="achievements">
							{% for achievement in job.achievements %}
								<li>
									{{ achievement }}
								</li>
							{% endfor %}
							{% for achievement in job.moreAchievements %}
								<li class="more">
									{{ achievement }}
								</li>
							{% endfor %}
						</ul>
					</div>

					{% if job.skills and job.skills.length > 0 %}
						<h4 class="experience-skills-title more">Skills and Technologies</h4>
						<ul class="experience-skills chip-set more">
							{% for skill in job.skills %}
								<li class="p-skill chip-item">
									{{ skill }}
								</li>
							{% endfor %}
						</ul>
					{% endif %}
				</div>
			{% endfor %}
		</section>
		<section class="p-education h-event">
			<h2>Education</h2>
			<div class="duration">
				<time class="dt-start" datetime="2010">2010</time>
						﹣
						<time class="dt-end" datetime="2014">2014</time>
			</div>
			<h3 class="p-name">Bachelor of Science (BS), Computer Engineering</h3>
			<span class="experience-org p-location h-card">
				<span class="p-org">Cedarville University</span>
			</span>
			<p class="p-summary">Minor in Mathematics, and Computer Science.</p>
		</section>
		<section class="more">
			<h2>Personal<span class="print-hide"> Tidbits</span></h2>
			<ul>
				{% for item in resume.personal %}
					<li>{{ item }}</li>
				{% endfor %}
			</ul>
		</section>
	</div>

	<section class="form actions print-hide">
		<button class="toggle-text" type="button" onclick="toggleExpandedText()">Show </button>
		<button type="button" onclick="window.print()">Print for PDF</button>
	</section>
</div>

<script>
	function toggleExpandedText() {
		document
			.querySelector('.h-resume')
			.classList
			.toggle('hide-more');
	}
</script>