<!DOCTYPE html>
<html lang="en" class=" bg-cursor color-terminal font-sans overflow-x-hidden">
  <head>
    <meta charset="UTF-8">
    <title>Ara Abcarians - Developer & Designer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="The portfolio of Los Angeles based web designer and developer, Ara Abcarians.">
    <meta name="generator" content="Eleventy">



    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">

    <!--  Styles  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Space+Mono:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&text=Pssst!ScrollDown!&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Space+Grotesk:wght@700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"></noscript>   
    
    <style>
*,
::after,
::before {
  box-sizing: border-box;
}
blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
ol[role="list"],
ul[role="list"] {
  list-style: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}
img,
picture {
  max-width: 100%;
  height: auto !important;
  display: block;
}
button,
input,
select,
textarea {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  ::after,
  ::before {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}
.o-wrapper {
  margin: 0 auto;
  padding: 0 10px;
  max-width: 1200px;
}
.o-wrapper:after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}
.u-sizeFull {
  width: 100%;
}
html {
  min-height: 100vh;
  font-size: 80%;
}
@media (min-width: 62em) {
  html {
    font-size: 90%;
  }
}
@media (min-width: 82em) {
  html {
    font-size: 100%;
  }
}
body {
  background: #faf77d;
  color: #151515;
  padding: 0.5rem;
  font-family: "Space Mono", monospace;
  font-weight: 400;
  line-height: 1.5;
}
@media (min-width: 62em) {
  body {
    padding: 0.75rem;
  }
}
a:not(.btn, .logo) {
  color: #111;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 0 solid transparent;
  transition: 0.2s border ease-in-out;
  border-bottom: 2px solid #ff269e;
}
a:not(.btn, .logo):active,
a:not(.btn, .logo):hover {
  border-color: #01d7b0;
}
a:not(.btn, .logo):focus {
  outline-style: dotted;
  outline-color: #ff269e;
  outline-width: 2px;  
}
p {
  margin-bottom: 1rem;
}
.leadLarge {
  font-size: 1.25rem;
}
@media (min-width: 62em) {
  .leadLarge {
    font-size: 1.75rem;
  }
}
.lead {
  font-size: 1.25rem;
}
@media (min-width: 62em) {
  .lead {
    font-size: 1.25rem;
  }
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.25rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(var(--min), var(--val), var(--max));
}
.h1,
h1 {
  --min: 2.25rem;
  --val: 3vw;
  --max: 4rem;
max-width: 900px;
}
.h2,
h2 {
  --min: 1.75rem;
  --val: 5vw;
  --max: 3.25rem;
}
.h3,
h3 {
  --min: 1.25rem;
  --val: 5vw;
  --max: 2.5rem;
}
.h4,
h4 {
  --min: 1rem;
  --val: 5vw;
  --max: 1.75rem;
}
.h5,
h5 {
  --min: 1rem;
  --val: 5vw;
  --max: 1.25rem;
}
.h6,
h6 {
  --min: 0.75rem;
  --val: 5vw;
  --max: 1rem;
}
.txtSmall,
small {
  --min: 0.75rem;
  --val: 5vw;
  --max: 0.75rem;
}
.wrapper {
  background-color: #fff;
  border: 2px solid #151515;
  position: relative;
}
.cta,
.logo {
  position: absolute;
  top: 1rem;
  z-index: 10;
}
.logo {
  left: 1rem;
}
.logo:focus {
  outline-style: dotted;
  outline-color: #ff269e;
  outline-width: 4px;  
}
.cta {
  right: 1rem;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.hero {
  position: relative;
  padding: 1rem;
  min-height: 100vh;
  padding-top: 1rem;
  display: grid;
  place-content: center;
}
.hero .card {
  margin: auto;
  animation: fadeIn 1s;
}

@media (min-width: 62em) {
  .hero {
    padding: 1rem 2rem;
  }
}
.hero-tip {
  display: none;
}
@media (min-height: 1080px) {
  .hero-tip {
    display: block;
    position: absolute;
    bottom: 3%;
    right: 25%;
    text-align: center;
    transform: rotate(15deg);
    animation: fadeIn 1s;
  }
  .hero-tip img {
    margin: 0.25rem auto;
  }
  .txtMarker {
    font-family: "Nanum Pen Script", cursive;
    color: #ff269e;
  }
}
.module {
  padding-inline: 1.5rem;
  padding-top: clamp(4rem, 8%, 14rem);
  padding-bottom: clamp(4rem, 8%, 14rem);
}
.module-content {
  max-width: 1200px;
  margin-inline: auto;
}
.card {
  background: #fff;
  border: 2px solid #151515;
  padding-left: clamp(1rem, 5%, 3rem);
  padding-right: clamp(1rem, 5%, 3rem);
  padding-top: clamp(1.25rem, 6%, 4rem);
  padding-bottom: clamp(1.25rem, 6%, 4rem);
  word-break: break-word;
}
.card > :last-child {
  margin-bottom: 0;
}
.js .card {
  opacity: 0;
}
.card--green {
  box-shadow: -10px -10px 0 #01d7b0, 8px 8px 0 #151515;
}
.card--cyan {
  box-shadow: -10px -10px 0 #b8fff3, 8px 8px 0 #151515;
}
.card--pink {
  box-shadow: -10px -10px 0 #ffdced, 8px 8px 0 #151515;
}
.card--greenLight {
  box-shadow: -10px -10px 0 #dcffea, 8px 8px 0 #151515;
}
.card--stackRight {
  box-shadow: 8px 8px 0 -2px #fff, 8px 8px 0 #151515;
}
.card--stackLeft {
  box-shadow: -8px 8px 0 -2px #fff, -8px 8px 0 #151515;
}
.card--heading {
  margin-bottom: 4rem;
}
.card--project {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.card--project .card-body {
  padding: clamp(1rem, 5%, 3rem);
  border-top: 2px solid #151515;
  flex: 1 1 auto;
}
.card--project .card-body :last-child {
  margin: 0;
}
.card--project .card-footer {
  padding-left: clamp(1rem, 5%, 3rem);
  padding-right: clamp(1rem, 5%, 3rem);
  padding-bottom: clamp(1rem, 5%, 3rem);
  padding-top: clamp(0.25rem, 5%, 3rem);
  text-align: right;
}
.card--project .btn {
  width: 100%;
}
@media (min-width: 62em) {
  .card--project .btn {
    width: auto;
  }
  .card--project .card-footer {
    text-align: right;
  }
}
@media (min-width: 62em) {
  .card--feature.card--green {
    box-shadow: -10px -10px 0 #01d7b0, 8px 8px 0 #151515;
    max-width: calc(1200px - 1.25rem);
  }
  .card--feature.card--cyan {
    box-shadow: -10px -10px 0 #b8fff3, 8px 8px 0 #151515;
  }
  .card--feature.card--pink {
    box-shadow: -10px -10px 0 #ffdced, 8px 8px 0 #151515;
  }
  .card--feature.card--greenLight {
    box-shadow: -10px -10px 0 #dcffea, 8px 8px 0 #151515;
  }
}
a.btn {
  text-decoration: none;
}
button.btn {
  border: none;
  background-color: transparent;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
}
@media screen and (-ms-high-contrast: active) {
  button.btn {
    border: 2px solid currentcolor;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  background-color: #faf77d;
  color: #151515;
  border: 2px solid #151515;
  box-shadow: 4px 4px 0 #151515;
  padding: 0.75em 1.25em;
  min-height: 44px;
  text-align: center;
  line-height: 1.1;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.2s all ease-in-out;
}
.btn:active,
.btn:hover {
  background-color: #f7f335;
}
.btn:focus {
  outline-style: dotted;
  outline-color: #ff269e;
  outline-width: 4px;
  box-shadow: 2px 2px 0 #151515;
}
.btn--small {
  font-size: 1.15rem;
}
.btn--block {
  width: 100%;
}
.btn--secondary {
  background-color: #eddcff;
}
.btn--secondary:active,
.btn--secondary:hover {
  background-color: #d5adff;
}
.btn--cyan {
  background-color: #b8fff3;
}
.btn--cyan:active,
.btn--cyan:hover {
  background-color: #8cffec;
}
.btn--pink {
  background-color: #ffdced;
}
.btn--pink:active,
.btn--pink:hover {
  background-color: #ffadd5;
}
.btn--green {
  background-color: #dcffea;
}
.btn--green:active,
.btn--green:hover {
  background-color: #adffce;
}
.cardGrid {
  --min: 50ch;
  --gap: 3rem;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}
.copyright {
  text-align: center;
  font-size: 0.75rem;
}
.linkList {
  list-style: none;
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1rem;
  gap: 3rem;
  justify-content: center;
  margin-top: 30px;
}
.linkList--inline {
  justify-content: start;
}
.w-full {
  width: 100%;
}

.module, .hero {
  position: relative;
  z-index: 5;
}

.bg {
  position: fixed;
  height: 78vh;
  width: 25vw;
  z-index: 1;
}

.bg--plus {
  bottom: 1rem;
  left: 1rem;
  background-image: url(/images/bg-plus.svg);
  background-repeat: repeat;

}

.bg--squigz {
  top: 1rem;
  right: 1rem;
  background-image: url(/images/squigz.svg);
  background-repeat: repeat-x;
  background-attachment: fixed;
}

.card--yellow {
  box-shadow: -10px -10px 0px #faf77d, 8px 8px 0px #151515;
}

@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
  }
  :where(:not(:active)):focus-visible {
    transition-duration: 0.25s;
  }
}
:where(:not(:active)):focus-visible {
  outline-offset: 4px;
}

    </style>


<script
  src="https://beamanalytics.b-cdn.net/beam.min.js"
  data-token="1e5e6955-0614-44e5-bf2c-95defdc64dae"
  async
>
</script>

  </head>
  <body id="page" class="bg-terminal">
    
      
<div class="wrapper"> 
  <div class="connector-line"></div>
  
  <a href="/" class="logo"><img src="images/logo-ara.svg" alt="Logo that says Ara" width="104" height="52" /></a>
  <a href="/Ara_Abcarians_Resume.pdf" class="cta  btn">Resume</a> 

  <header class="hero">  
    <div class="card  card--long  card--green  card--feature  animate--animated"> 
<h1>
  Marketing Web Development & Experience Lead
</h1>
<p class="lead">
  Hey! I'm Ara. I build, own, and scale marketing websites from the ground up, handling everything from design systems and CMS to analytics and optimization. Hire me to lead your web dev team — or be the team.
</p>
      <ul class="linkList linkList--inline"> 
        <li><a href="https://www.linkedin.com/in/arala/" onclick="plausible('ClickLinkedin', {props: {position: 'header'}});">LinkedIn</a></li>
        <li><a href="https://github.com/ItsMeAra" onclick="plausible('ClickGithub', {props: {position: 'header'}});">GitHub</a></li>
        <li><a href="https://codepen.io/itsMeAra" onclick="plausible('ClickCodepen', {props: {position: 'header'}});">CodePen</a></li>
        <li><a href="https://bsky.app/profile/arala22.bsky.social" onclick="plausible('ClickBluesky', {props: {position: 'header'}});">Bluesky</a></li>
        <li><a href="mailto:ara@itsmeara.com" onclick="plausible('ClickEmail', {props: {position: 'header'}});">Email</a></li>
      </ul>      
    </div>
      
    <div class="hero-tip">  
      <span class="txtMarker  h4">Pssst! Scroll Down!</span>
      <img src="images/arrow-down-1.svg" width="28" height="42" alt="Arrow pointing down signifying there is more conrtent below" />
    </div>
  </header>





  <section class="module"> 
    <div class="module-content"> 
      <header class="card  card--greenLight  card--heading  card--feature  animate--animated">  
        <span class="meta">2023 &mdash; 2025</span>
        <h2>
          <a href="https://flatfile.com/" target="_blank">Flatfile</a>
        </h2>
        <p class="lead"> 
          As <strong>Web Development Manager</strong> at Flatfile, I was a one-man development team within marketing, owning the entire company website and blog. I partnered closely with design, product, and marketing stakeholders to bring new pages, campaigns, and features to life—while also being solely responsible for site performance, accessibility, and technical quality.
</p>
<p> 
I managed the full development lifecycle: scoping requirements, architecting solutions, writing code, and deploying updates. On top of that, I implemented performance improvements, streamlined workflows, and ensured the site always looked great and ran fast.
</p>
<p> 
The stack included Gatsby, React, TypeScript, and Contentful CMS, which I used to build a scalable, maintainable, and SEO-friendly marketing site that supported business growth initiatives.
        </p>
      </header>
    </div>
  </section>  



  <section class="module"> 
    <div class="module-content"> 
      <header class="card  card--yellow  card--heading  card--feature  animate--animated">  
        <span class="meta">2021 &mdash; 2022</span>
        <h2>
          <a href="https://kandji.com/" target="_blank">Kandji</a>
        </h2>
        <p class="lead"> 
          As <strong>Web Development Manager</strong> at Kandji, 
          a hyper growth SaaS startup, I led a nimble team of developers 
          to continuously optimize and improve Kandji's marketing website to drive growth.
        </p>
      </header>

      <div class="cardGrid"> 
        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/oCT6nRx4EL-300.webp 300w, /images/oCT6nRx4EL-600.webp 600w, /images/oCT6nRx4EL-900.webp 900w, /images/oCT6nRx4EL-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/oCT6nRx4EL-300.jpeg 300w, /images/oCT6nRx4EL-600.jpeg 600w, /images/oCT6nRx4EL-900.jpeg 900w, /images/oCT6nRx4EL-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of kandji.io homepage" class="w-full" loading="lazy" decoding="async" src="/images/oCT6nRx4EL-300.jpeg" width="1200" height="675"></picture>
          
            <div class="card-body"> 
            <h3 class="h5">Kandji Website Redesign & Replatforming</h3>
            <p>  
              Under an aggressive timeline, I led the architectural transition from Webflow to the Jamstack, utilizing Netlify, Eleventy, Alpine.js, and Tailwind CSS. 
              This was part of a larger complete brand refresh to elevate Kandji from a start-up to a trusted technology partner.
              We increased our mobile lighthouse score by 50% and achieved a perfect desktop score through continuous web performance optimization.
            </p>
            <h4 class="h6">Tools &amp; Tech:</h4>
            <p> 
                HTML, CSS, JavaScript, Tailwind CSS, Alpine.js, GSAP, Node.js, 11ty, Netlify, HubSpot, Figma
            </p>
          </div>
          <div class="card-footer">
            <a href="https://www.kandji.io/" class="btn">Kandji.io</a>
          </div>             
        </div>

      </div>
    </div>
  </section>  


  <section class="module"> 
    <div class="module-content"> 
      <header class="card  card--cyan  card--heading  card--feature  animate--animated">  
        <span class="meta">2016 &mdash; 2021</span>
        <h2>
          <a href="https://bluebeam.com/" target="_blank">Bluebeam</a>
        </h2>
        <p class="lead"> 
          As the <strong>Sr. Manager of Web Development</strong> at Bluebeam, 
          I led a talented team of engineers as we maintained 
          and evolved Bluebeam's global core interactive experiences.
        </p>
      </header>

      <div class="cardGrid"> 
        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/0yCx658JIj-300.webp 300w, /images/0yCx658JIj-600.webp 600w, /images/0yCx658JIj-900.webp 900w, /images/0yCx658JIj-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/0yCx658JIj-300.jpeg 300w, /images/0yCx658JIj-600.jpeg 600w, /images/0yCx658JIj-900.jpeg 900w, /images/0yCx658JIj-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of bluebeam.com homepage" class="w-full" loading="lazy" decoding="async" src="/images/0yCx658JIj-300.jpeg" width="1200" height="675"></picture>
          
            <div class="card-body"> 
            <h3 class="h5">Bluebeam Global Responsive Website</h3>
            <p> 
              Bluebeam's website redesign was a massive ground-up rebuild and replatforming. As the lead developer, I 
              established coding best practices for the team, setup a proper workflow and deploy process, and leveraged 
              Grav CMS to simplify the platform and increase speed, security, and scalability. The Bluebeam website is 
              localized for 13 different languages using Smartling's GDN service.
            </p>
            <h4 class="h6">Tools &amp; Tech:</h4>
            <p> 
                HTML, CSS, JavaScript, jQuery, GSAP, PHP, Gulp, Grav CMS
            </p>
          </div>
          <div class="card-footer">
            <a href="https://www.bluebeam.com" class="btn  btn--cyan">Bluebeam.com</a>
          </div>             
        </div>

        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/FVAcd_hyLS-300.webp 300w, /images/FVAcd_hyLS-600.webp 600w, /images/FVAcd_hyLS-900.webp 900w, /images/FVAcd_hyLS-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/FVAcd_hyLS-300.jpeg 300w, /images/FVAcd_hyLS-600.jpeg 600w, /images/FVAcd_hyLS-900.jpeg 900w, /images/FVAcd_hyLS-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of Bluprnt design system homepage" class="w-full" loading="lazy" decoding="async" src="/images/FVAcd_hyLS-300.jpeg" width="1200" height="675"></picture>
          
            <div class="card-body"> 
            <h3 class="h5">Bluprnt: Design System & Front-end Framework</h3>
            <p> 
              Bluebeam's website had previously been filled with mixed design patterns and was incredibly hard to manage. 
              I knew we needed to establish consistency and build things the right way, so I worked with a designer 
              to create the company's first design system. From that, I built out a custom front-end framework that's been used 
              on a variety of Bluebeam's online properties. The workshop area is built with Jekyll, and the storefront is 
              built on zeroheight. 
            </p>
            <h4 class="h6">Tools &amp; Tech:</h4>
            <p> 
                HTML, CSS, JavaScript, jQuery, NPM, Netlify, Gulp, Jekyll, Figma
            </p>               
          </div>
          <div class="card-footer">
            <a href="https://bluprnt-workshop.netlify.app/" class="btn  btn--cyan">Launch Bluprnt</a>
          </div>            
        </div>
      </div>
    </div>
  </section>  



  <section class="module"> 
    <div class="module-content">  
      <header class="card  card--greenLight  card--heading  card--feature  animate--animated">  
        <span class="meta">Dec 2012 &mdash; May 2016</span>
        <h2>(mt) Media Temple (acquired by GoDaddy)</h2>
        <p class="lead"> 
          As a <strong>UX Manager/Engineer</strong> at Los Angeles based web hosting company, Media Temple, 
          I led the front-end development of the 2013 responsive redesign. I collaborated 
          with designers and developers to create the company’s first design system 
          and living styleguide. 
        </p>
        <p>Media Temple was acquired by GoDaddy in 2014.</p>
      </header>

      <div class="cardGrid"> 
        <div class="card  card--stackRight  card--project  animate--animated"> 
          <picture><source type="image/webp" srcset="/images/ZGm794NvDG-300.webp 300w, /images/ZGm794NvDG-600.webp 600w, /images/ZGm794NvDG-900.webp 900w, /images/ZGm794NvDG-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/ZGm794NvDG-300.jpeg 300w, /images/ZGm794NvDG-600.jpeg 600w, /images/ZGm794NvDG-900.jpeg 900w, /images/ZGm794NvDG-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of MediaTemple.net homepage" class="w-full" loading="lazy" decoding="async" src="/images/ZGm794NvDG-300.jpeg" width="1200" height="675"></picture>            
          
            <div class="card-body"> 
            <h3 class="h5">Media Temple Website</h3>
            <p> 
              Leading the front-end development of the Media Temple website redesign was one of the most rewarding 
              projects I've ever worked on. Working closely with our internal creative team as well as the 
              talented designers of <a href="http://charactersf.com/">Character</a> in San Fransisco, I developed a 
              mobile-first front-end framework and started the company's first internal living style guide and design system.
            </p>
            <h4 class="h6">Tools &amp; Tech:</h4>
            <p> 
                HTML, CSS, JavaScript, jQuery, PHP, Statamic CMS
            </p>                    
          </div>
          <div class="card-footer">
            <a href="https://css-tricks.com/design-systems-building-future/" class="btn  btn--green">Read Case Study</a>
          </div>
        </div>

        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/m-3c2yhIrb-300.webp 300w, /images/m-3c2yhIrb-600.webp 600w, /images/m-3c2yhIrb-900.webp 900w, /images/m-3c2yhIrb-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/m-3c2yhIrb-300.jpeg 300w, /images/m-3c2yhIrb-600.jpeg 600w, /images/m-3c2yhIrb-900.jpeg 900w, /images/m-3c2yhIrb-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of MediaTemple.net account center" class="w-full" loading="lazy" decoding="async" src="/images/m-3c2yhIrb-300.jpeg" width="1200" height="675"></picture>
          
            <div class="card-body"> 
            <h3 class="h5">Media Temple Account Center</h3>
            <p> 
              Though it was among the better looking admin dashboards in the web hosting space, 
              a redesign of <a href="https://ac.mediatemple.net">(mt)'s Account Center</a> was long overdue. 
              Used by over 150,000 customers, it was one of the most daunting projects I've ever been a part of. 
              It required extensive research and planning, modernizing code on 450+ pages, and countless iterations. 
            </p>
            <h4 class="h6">Tools &amp; Tech:</h4>
            <p> 
                HTML, CSS, JavaScript, jQuery, React JS, Perl, Template Toolkit
            </p>                
          </div>
<!--             <div class="card-footer">
            <a href="https://www.bluebeam.com" class="btn  btn--green">Launch Project</a>
          </div>             -->
        </div>

      </div>        
    </div>
  </section>  

  <section class="module"> 
    <div class="module-content">  
      <header class="card  card--pink  card--heading  card--feature  animate--animated">  
        <span class="meta">June 2008 &mdash; Dec 2012</span>
        <h2>
          <a href="https://hugeinc.com/" target="_blank">Huge, Inc</a>
        </h2>
        <p class="lead"> 
          At Huge, I had the honor and privilege of working with some of the best 
          creative leaders and engineers in the game. I worked as a <strong>Sr. Web Developer</strong> 
          on multiple large-scale projects against impossible deadlines. I’m proud to 
          have worked with some incredible brands during my journey.
        </p>

        <h3 class="h5">Clients:</h3>
        <p class="lead"> 
          American University, FX Networks, ABC, Alvin Ailey American Dance Theater, 
          Beats by Dre, MasterCard, Nintendo, Royal Caribbean, Celebrity Cruises, Disney, 
          Dell, Four Seasons Hotels & Resorts, Golf Channel, Vizio, Miramax, Samsung
        </p>
      </header>

      <div class="cardGrid"> 
        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/ZVDs-G4UL1-300.webp 300w, /images/ZVDs-G4UL1-600.webp 600w, /images/ZVDs-G4UL1-900.webp 900w, /images/ZVDs-G4UL1-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/ZVDs-G4UL1-300.jpeg 300w, /images/ZVDs-G4UL1-600.jpeg 600w, /images/ZVDs-G4UL1-900.jpeg 900w, /images/ZVDs-G4UL1-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of Beats by Dre Microsite homepage" class="w-full" loading="lazy" decoding="async" src="/images/ZVDs-G4UL1-300.jpeg" width="1200" height="675"></picture>           
        </div>

        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/fdYdLLJUoT-300.webp 300w, /images/fdYdLLJUoT-600.webp 600w, /images/fdYdLLJUoT-900.webp 900w, /images/fdYdLLJUoT-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/fdYdLLJUoT-300.jpeg 300w, /images/fdYdLLJUoT-600.jpeg 600w, /images/fdYdLLJUoT-900.jpeg 900w, /images/fdYdLLJUoT-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of Nintendo Punch Out website homepage" class="w-full" loading="lazy" decoding="async" src="/images/fdYdLLJUoT-300.jpeg" width="1200" height="675"></picture>          
        </div>

        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/BCokC6YCtu-300.webp 300w, /images/BCokC6YCtu-600.webp 600w, /images/BCokC6YCtu-900.webp 900w, /images/BCokC6YCtu-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/BCokC6YCtu-300.jpeg 300w, /images/BCokC6YCtu-600.jpeg 600w, /images/BCokC6YCtu-900.jpeg 900w, /images/BCokC6YCtu-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of FX Networks website homepage" class="w-full" loading="lazy" decoding="async" src="/images/BCokC6YCtu-300.jpeg" width="1200" height="675"></picture>       
        </div>

        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/RjYaueXrPo-300.webp 300w, /images/RjYaueXrPo-600.webp 600w, /images/RjYaueXrPo-900.webp 900w, /images/RjYaueXrPo-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/RjYaueXrPo-300.jpeg 300w, /images/RjYaueXrPo-600.jpeg 600w, /images/RjYaueXrPo-900.jpeg 900w, /images/RjYaueXrPo-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of Alvin Ailey website homepage" class="w-full" loading="lazy" decoding="async" src="/images/RjYaueXrPo-300.jpeg" width="1200" height="675"></picture>         
        </div>   
        
        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/CYXDzU6y8y-300.webp 300w, /images/CYXDzU6y8y-600.webp 600w, /images/CYXDzU6y8y-900.webp 900w, /images/CYXDzU6y8y-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/CYXDzU6y8y-300.jpeg 300w, /images/CYXDzU6y8y-600.jpeg 600w, /images/CYXDzU6y8y-900.jpeg 900w, /images/CYXDzU6y8y-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of American University homepage" class="w-full" loading="lazy" decoding="async" src="/images/CYXDzU6y8y-300.jpeg" width="1200" height="675"></picture>              
        </div>

        <div class="card  card--stackRight  card--project  animate--animated">  
          <picture><source type="image/webp" srcset="/images/uE-6oAyd26-300.webp 300w, /images/uE-6oAyd26-600.webp 600w, /images/uE-6oAyd26-900.webp 900w, /images/uE-6oAyd26-1200.webp 1200w" sizes="100vw"><source type="image/jpeg" srcset="/images/uE-6oAyd26-300.jpeg 300w, /images/uE-6oAyd26-600.jpeg 600w, /images/uE-6oAyd26-900.jpeg 900w, /images/uE-6oAyd26-1200.jpeg 1200w" sizes="100vw"><img alt="Screenshot of Royal Caribbean homepage" class="w-full" loading="lazy" decoding="async" src="/images/uE-6oAyd26-300.jpeg" width="1200" height="675"></picture>     
        </div>          

      </div>        
    </div>
  </section>        


  <section class="module"> 
    <div class="module-content">  
      <div class="card  card--greenLight  card--heading  card--feature  animate--animated">  
        <h2>
          Some nice things said about me
        </h2>
        <div class="senja-embed" data-id="6ccaab47-7bef-4cfc-b9e8-607a42dfb9b7" data-mode="shadow" data-lazyload="false" style="display: block; width: 100%;"></div>      
      </div>
    </div>
  </section>  

  
  <footer class="siteFooter">  
    <ul class="linkList"> 
        <li><a href="https://www.linkedin.com/in/arala/" onclick="plausible('ClickLinkedin', {props: {position: 'footer'}});">LinkedIn</a></li>
        <li><a href="https://github.com/ItsMeAra" onclick="plausible('ClickGithub', {props: {position: 'footer'}});">GitHub</a></li>
        <li><a href="https://codepen.io/itsMeAra" onclick="plausible('ClickCodepen', {props: {position: 'footer'}});">CodePen</a></li>
        <li><a href="https://bsky.app/profile/arala22.bsky.social" onclick="plausible('ClickBluesky', {props: {position: 'footer'}});">Bluesky</a></li>
        <li><a href="mailto:ara@itsmeara.com" onclick="plausible('ClickEmail', {props: {position: 'footer'}});">Email</a></li>
    </ul>
    <p class="copyright">&copy; 2025 Ara Abcarians | Built with <a href="https://11ty.dev">Eleventy</a>. </p>
  </footer>
  
  <div class="bg bg--plus"></div>
  <div class="bg bg--squigz"></div>
</div> <!-- /wrapper -->

    

    <script src="https://widget.senja.io/widget/6ccaab47-7bef-4cfc-b9e8-607a42dfb9b7/platform.js" type="text/javascript" async></script>
  </body>
</html>
