index.html

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link href="https://fonts.googleapis.com/css?family=Muli:300|Ovo" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
</head>

<body>
  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Add your site or application content here -->
  <div id="site-top" class="wrapper">
    <header id="header">
      <div class="profile__pic">
        <picture>
          <img src="img/matchymatchy.jpg" alt="Matchy Matchy">
        </picture>
      </div>
      <div class="profile__name side-gutters--standard">
        <h1>Phaedra Riley</h1>
      </div>
      <div class="profile__bio side-gutters--standard">
        <p>Developer with 15+ years of experience in digital technologies, I've been playing and working in digital
          media since discovering I could make cartoons in Director &amp; Flash.</p>
        <p>Currently volunteering at the Lower Eastside Girls Club and wrapping my head around Advanced React and Redux
          on Udemy when I'm not watching (way too much) tv, lifting weights, or walking my chihuahuas. She/her.</p>
        <nav class="contact-links">
          <ul class="list--grid list--style-none">
            <li>
              <address><a href="mailto:phaedra@wanderingrabbit.com" title="Email"><i class="fas fa-envelope"></i></a>
              </address>
            </li>
            <li><a href="resume/Phaedra-Riley-Resume.pdf" title="Resume"><i class="fas fa-file"></i></a></li>
            <li><a href="https://www.linkedin.com/in/phaedrariley/" title="LinkedIn" target="_blank"><i
                  class="fab fa-linkedin-in"></i></a></li>
            <li><a href="https://github.com/buhny" title="Github" target="_blank"><i class="fab fa-github"></i></a></li>
            <li><a href="https://gitlab.com/phaedra" title="Gitlab" target="_blank"><i class="fab fa-gitlab"></i></a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="main">
      <h2 class="projects__header side-gutters--standard">Projects</h2>
      <article id="pods" class="project">
        <picture>
          <source media="(max-width: 767px)" srcset="img/pods-sm.jpg">
          <source media="(max-width: 1199px)" srcset="img/pods-md.jpg">
          <source media="(min-width: 1200px)" srcset="img/pods-lg.jpg">
          <img src="img/pods-lg.jpg" alt="Pods.com website">
        </picture>
        <div class="project__desc side-gutters--standard">
          <h1>PODS</h1>
          <h2>Redesign and replatform of Pods.com</h2>
          <p>Tech director and lead developer for agency's strategy, design and front-end engagement to modernize the
            Pods.com website design and stack.</p>
          <ul>
            <li>Wrote responsive, light-weight, dynamic components in HTML5, CSS3/Sass, JS ES6, and Razor within a
              Bootstrap 4 grid</li>
            <li>Collaborated closely with back-end partner to build robust Sitecore components in organized sprint
              cycles</li>
            <li>Enforced front-end standards through Gitlab pull request approval process</li>
          </ul>
        </div>
        <footer class="project__footer side-gutters--standard">
          <ul class="list--style-none">
            <li><a href="https://www.pods.com/" target="=_blank">Pods.com</a></li>
            <li><a href="https://web.archive.org/web/20181015043736/https://www.pods.com/" target="_blank">Wayback
                Pods.com</a></li>
            <li>Launched Nov 2018</a>
          </ul>
        </footer>
      </article>
      <article id="lista" class="project">
        <picture>
          <source media="(max-width: 767px)" srcset="img/lista-sm.jpg">
          <source media="(max-width: 1199px)" srcset="img/lista-md.jpg">
          <source media="(min-width: 1200px)" srcset="img/lista-lg.jpg">
          <img src="img/lista-lg.jpg" alt="Lista Configurator screenshot">
        </picture>
        <div class="project__desc side-gutters--standard">
          <h1>LISTA Configurator</h1>
          <h2>3D cabinet customization web app</h2>
          <p>A 3D tool cabinet customizer for Stanley Black &amp; Decker Storage Solutions' Lista&reg; brand. Built with
            a React framework UI updating a three.js 3D cabinet rendering, the user can choose from a multitude of
            options and see their selections reflected immediately. Users can save cabinet configurations, see multiple
            in comparison, and get pricing estimates for orders.</p>
          <ul>
            <li>Coded the 3D model portion of the app in three.js to run on both desktop and mobile devices</li>
            <li>Re-rendered cabinet dimensions, colors and other features triggered by React integration</li>
            <li>Used both imported models and created native geometries to render wheels, handles, doors, housing, etc.
            </li>
            <li>Generated multiple screenshots for thumbnails and at relative scale for side-by-side comparison</li>
          </ul>
        </div>
        <footer class="project__footer side-gutters--standard">
          <ul class="list--style-none">
            <li><a href="https://www.storageconfiguration.com" target="_blank">StorageConfiguration.com</a></li>
            <li><a
                href="https://www.prnewswire.com/news-releases/lista-launches-virtual-online-configurator-for-industrial-storage-solutions-300555502.html"
                target="_blank">Press Release</a></li>
            <li>Launched Nov 2017</a>
          </ul>
        </footer>
      </article>
      <article id="bmw" class="project">
        <picture>
          <source media="(max-width: 767px)" srcset="img/bmw-sm.jpg">
          <source media="(max-width: 1199px)" srcset="img/bmw-md.jpg">
          <source media="(min-width: 1200px)" srcset="img/bmw-lg.jpg">
          <img src="img/bmw-lg.jpg" alt="BMW Inventory website">
        </picture>
        <div class="project__desc side-gutters--standard">
          <h1>BMW Inventory</h1>
          <h2>SPA to search and filter new vehicle inventory</h2>
          <p>Primary developer on the first web-based new vehicle inventory service for BMW North America. Users can
            search for vehicles, filter results, and view vehicle details.</p>
          <ul>
            <li>Developed an AngularJS single-page app on BMW's AEM platform</li>
            <li>Connected to multiple APIs to to provide search results, dealer information and vehicle details based on
              ZIP code</li>
            <li>Worked in an Agile process with the BMW BYO app squad for both design and code consistency</li>
          </ul>
        </div>
        <footer class="project__footer side-gutters--standard">
          <ul class="list--style-none">
            <li><a href="https://www.bmwusa.com/inventory.html" target="_blank">BMW USA Inventory</a></li>
            <li>Delivered March 2017</a>
          </ul>
        </footer>
      </article>
      <article id="hersheys" class="project">
        <picture>
          <source media="(max-width: 767px)" srcset="img/hersheys-sm.jpg">
          <source media="(max-width: 1199px)" srcset="img/hersheys-md.jpg">
          <source media="(min-width: 1200px)" srcset="img/hersheys-lg.jpg">
          <img src="img/hersheys-lg.jpg" alt="Hershey's website">
        </picture>
        <div class="project__desc side-gutters--standard">
          <h1>Hershey's Redesign</h1>
          <h2>White label component library for use across Hershey's websites</h2>
          <p>A new design system for the Hershey's brands network that delivers consistency for both global elements and
            customizable, re-usable components to fit different brands' needs.</p>
          <ul>
            <li>Wrote component frontends in HTML, CSS, and JS/jQuery by mocking up content in Handlebars.js for hand
              off to the client's internal backend team</li>
            <li>Validated component integration in client's AEM setup</li>
            <li>Worked closely with product and design teams to created robust, well-documented designs and specs</li>
          </ul>
        </div>
        <footer class="project__footer side-gutters--standard">
          <ul class="list--style-none">
            <li><a href="https://www.hersheys.com" target="_blank">Hershey's</a></li>
            <li><a href="https://www.hersheys.com/reeses/" target="_blank">Reese's</a></li>
            <li>Launched July 2016</a>
          </ul>
        </footer>
      </article>
      <article id="windstreamcx" class="project">
        <div class="video-wrapper">
          <div style="padding:56.25% 0 0 0;position:relative;"><iframe
              src="https://player.vimeo.com/video/179467190?color=2e334a&title=0&byline=0&portrait=0"
              style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0"
              allow="autoplay; fullscreen" allowfullscreen></iframe></div>
        </div>
        <div class="project__desc side-gutters--standard">
          <h1>Windstream CX&nbsp;Tool</h1>
          <h2>Animated, interactive, customer experience tool for internal training</h2>
          <p>Windstream asked for a training tool to help their customer experience reps better understand where
            customers were on their journeys, and where they should go next.</p>
          <ul>
            <li>Built with an in-house Canvas UI helper library, Imp.js by Mike Cornell</li>
            <li>Collaborated with lead dev to create journeys and paths, and add content</li>
            <li>Tweaked animations, speed and timing</li>
          </ul>
        </div>
        <footer class="project__footer side-gutters--standard">
          <ul class="list--style-none">
            <li><a href="http://www.andreasbaumert.com/windstream-cx-tool" target="_blank">Video via Andreas Baumert</a>
            </li>
            <li>Presented April 2016</a>
          </ul>
        </footer>
      </article>
      <article id="bananarepublic" class="project">
        <picture>
          <source media="(max-width: 767px)" srcset="img/bananarepublic-sm.jpg">
          <source media="(max-width: 1199px)" srcset="img/bananarepublic-md.jpg">
          <source media="(min-width: 1200px)" srcset="img/bananarepublic-lg.jpg">
          <img src="img/bananarepublic-lg.jpg" alt="Banana Republic : True BR : Kuwait website">
        </picture>
        <div class="project__desc side-gutters--standard">
          <h1>Banana Republic : True&nbsp;BR</h1>
          <h2>Replatformed individual static sites into an internationalized multisite</h2>
          <p>Under a tight deadline, migrated the True BR international static sites to a single platform: an
            internationalized Wordpress multisite.</p>
          <ul>
            <li>Wrote flexible components in HTML, CSS, JS/jQuery, and PHP for Wordpress templates</li>
            <li>Ensured components could be localized for non-Roman and right-to-left alphabets</li>
            <li>Worked closely with backend and other frontend engineers to divvy up work and ship as quickly as
              possible</li>
            <li>Designed the IA, based only on the pre-existing static sites, to minimize redundant content entry</li>
          </ul>
        </div>
        <footer class="project__footer side-gutters--standard">
          <ul class="list--style-none">
            <li><a href="https://bananarepublic.com.kw/" target="_blank">True BR : Kuwait</a></li>
            <li><a href="https://web.archive.org/web/20150914035246/http://bananarepublic.com.kw/ar/"
                target="_blank">Wayback True BR : Kuwait (Arabic)</a></li>
            <li>Launched March 2015</a>
          </ul>
        </footer>
      </article>

    </main>
    <footer class="site__footer gray--light side-gutters--standard">
      <div class="top-link__wrapper">
        <a class="top-link" href="#site-top"><i class="top-link__icon fas fa-sort-up"></i><span
            class="top-link__text">top</span></a>
      </div>
      <p>&copy; 2019 Phaedra Riley</p>
    </footer>
  </div>

  <script src="https://player.vimeo.com/api/player.js"></script>
</body>

</html>