---

layout: default

title: Home

image: "https://secure.gravatar.com/avatar/17d306899b5f20953440eca1d65d34e0?s=256"

---

<link rel="stylesheet" href="/assets/css/homepage.css"/>

<span class="h-card">

<section class="introduction">

<img alt="" class="profile-pic u-photo" src="https://secure.gravatar.com/avatar/17d306899b5f20953440eca1d65d34e0?s=512" height="256" width="256" crossorigin="anonymous"/>

<div class="introduction-text">

<h1>Hi, I'm

<a href="https://www.ciccarello.me/ " class="p-name u-url disable-link-styles" rel="me">Anthony Ciccarello</a>!

<button id="pronounce-name-button" aria-label="Pronounce name" title="Pronounce 'Anthony Ciccarello'" style="display: none;">🔈</button>

</h1>

<p class="p-note">

{{ site.description}}

</p>

<div class="btn-group">

<a class="btn-link" href="#connect">

Connect with me

</a>

<a rel="feed" class="btn-link btn-alternate" href="/posts">

See Posts

</a>

<div>

</div>

</section>

<section class="profiles container">

<h2 class="profiles__title">Around the Web</h2>

{%- for group in links.homepage %}

<div class="card profile-card">

<div class="profile-card__title">

<h3 id="{{group.name | slugify }}-links">

{{group.name}}

</h3>

</div>

<nav aria-labelledby="{{group.name | slugify }}-links">

{%- for account in group.links %}

<a class="account-link" href="{{account.url}}" rel="me">

<span class="account-link__graphic" role="presentation">

<span class="svg-icon">

{% include account.icon %}

</span>

</span>

<span class="account-link__text">

{{account.title}}

<span class="account-link__secondary-text">{{account.description}}</span>

</span>

</a>

{%- if account.description == "@anthony@ciccarello.me" %}

<a class="u-url" href="acct:anthony@ciccarello.me"></a>

{%- endif %}

{%- endfor %}

</nav>

</div>

{%- endfor %}

</section>

<section class="skills">

<h2 class="h1">Skills for the Web</h2>

<div class="skills-list">

<div>

<svg height="64" viewbox="0 0 48 48" width="64" xmlns="http://www.w3.org/2000/svg">

<path d="M18.8 33.2L9.7 24l9.2-9.2L16 12 4 24l12 12 2.8-2.8zm10.4 0l9.2-9.2-9.2-9.2L32 12l12 12-12 12-2.8-2.8z"/>

</svg>

<h3 class="h4">Programming</h3>

<p>

<span id="years">{{ '2014-06-01' | yearsSince }}</span>

years experience with JavaScript/TypeScript, HTML/CSS, and Java.

Degree in Computer Engineering.

</p>

</div>

<div>

<svg height="64" viewbox="0 0 48 48" width="64" xmlns="http://www.w3.org/2000/svg">

<path d="M6 34.5V42h7.5l22.13-22.13-7.5-7.5L6 34.5zm35.41-20.41c.78-.78.78-2.05 0-2.83l-4.67-4.67c-.78-.78-2.05-.78-2.83 0l-3.66 3.66 7.5 7.5 3.66-3.66z"/>

</svg>

<h3 class="h4">Design</h3>

<p>

User interfaces, user experience flows, and code that are easy

to understand, accessible, and aesthetically pleasing

</p>

</div>

<div>

<svg height="64" viewbox="0 0 48 48" width="64" xmlns="http://www.w3.org/2000/svg">

<path d="M10 26.36v8L24 42l14-7.64v-8L24 34l-14-7.64zM24 6L2 18l22 12 18-9.82V34h4V18L24 6z"/>

</svg>

<h3 class="h4">Learning</h3>

<p>

Flexibility to learn new tools, frameworks, and langugages.

Experience to teach software development best practices.

</p>

</div>

</div>

<a href="/resume" class="btn-link">Learn More</a>

</section>

<section class="container">

<h3>Career</h3>

{%- assign currentPosition = resume.experience[0] %}

<p>

I currently work remotely as a {{currentPosition.position}} for

<a class="p-org h-card" href="{{currentPosition.companyUrl}}" title="{{currentPosition.companyName}} home page">{{currentPosition.companyName}}</a>

doing full-stack development.

Previously I've worked for {{resume.experience[1].companyName}}, {{resume.experience[2].companyName}}, and {{resume.experience[3].companyName}}.

I've primarily worked on creating JavaScript front-end applications and Java back-end APIs

but have a wide range of experience across various projects.

See my <a href="/resume">resume</a> for my full career history.

</p>

<h3>

Personal

</h3>

<p>

My personal life is primarially focused on raising kids who are in <a href="/foster/">foster care</a>.

I enjoy outdoor activities such as hiking,

<a href="https://ebird.org/profile/OTUwMDI4" rel="me" title="eBird profile">bird watching</a>, and

playing

<a href="https://en.wikipedia.org/wiki/Ultimate_(sport)" title="Ultimate frisbee wikipedia article">

ultimate frisbee</a>. I like working on small wood working projects and caring for my

indoor and outdoor plants. Additionally, I contribute to Open Source

software in my free time and was a maintainer of

<a href="https://typedoc.org/">TypeDoc</a>

project.

</p>

</section>

<section class="h-feed">

{% removeindents %}

<div class="container">

<h2 class="post-list-heading p-name">Latest Posts</h2>

<nav class="category-menu" aria-labelledby="post-grouping-title">

<ul class="btn-group">

<li>

<a class="btn-link" href="/blog">

Blog

</a>

</li>

<li>

<a class="btn-link" href="/recipes">

Recipes

</a>

</li>

<li>

<a class="btn-link" href="/photos">

Photos

</a>

</li>

<li>

<a class="btn-link" href="/notes">

Notes

</a>

</li>

</ul>

<a class="btn-link btn-alternate" href="/posts">

See All

</a>

</nav>

<ol class="post-list">

{%- assign posts = collections.mainPosts | reverse %}

{%- for post in posts limit: 5 -%}

<li>

{% include "post-card.html" %}

</li>

{%- endfor -%}

</ol>

</div>

{% endremoveindents %}

</section>

<section class="" id="connect">

<h2>Connect</h2>

<p>Connect with me using one of my preferred channels</p>

<div class="connect-icons">

<a aria-label="Email" class="icon-button btn-link u-email" href="mailto:anthony@ciccarello.me" rel="me">

<span class="svg-icon">

{% include "icons/email.svg" %}

</span>

</a>

<a aria-label="LinkedIn profile" class="icon-button btn-link" href="https://www.linkedin.com/in/anthonyciccarello/" rel="me">

<span class="svg-icon">

{% include "icons/linkedin.svg" %}

</span>

</a>

</div>

</section>

</span>

<script>

if (window.SpeechSynthesisUtterance) {

const speakButton = document.getElementById('pronounce-name-button');

speakButton.addEventListener('click', speakName);

speakButton.style.display = 'inline-block';

}

function speakName() {

var utterance = new SpeechSynthesisUtterance();

utterance.text = 'Anthony Chicka-rello';

utterance.lang = 'en-US';

utterance.rate = 0.75;

speechSynthesis.speak(utterance)

}

</script>