Garrett Siegel

Developed for ESPN's visual storytelling team, this dynamic web experience delves into the multi-faceted value of baseball sensation Shohei Ohtani. Utilizing HTML, CSS, JS, and Hugo, I engineered a "ticker" that updates in real-time as users scroll, thanks to the integration of GSAP ScrollTrigger and matchMedia. The project garnered significant user engagement and reached the front page of espn.com.

As a key contributor to an inventive project, I helped develop an Interactive Fantasy Football Name Generator that blends sports, creativity, and user engagement. Built using JavaScript, HTML, CSS (SASS), and Hugo, this interactive platform not only generates custom football-themed names but also features an entertaining mini-game to enhance the user experience.

My strength lies in harnessing both static and dynamic data to manipulate DOM events and facilitate real-time web updates. In a recent project, I successfully implemented seamless content refreshes in sync with real-time data changes, enhancing user engagement with a more interactive experience.

In my recent ventures, I have adopted Atomic Design principles to architect personalized web design systems. Leveraging advanced CSS and CSS preprocessors, I've engineered scalable and modular frameworks that streamline development and simplify maintenance. My proficiency in this approach has resulted in aesthetically pleasing websites offering intuitive user experiences.

I recently completed an innovative dynamic web page design project that showcases my expertise in creating engaging and interactive user experiences. Working closely with the ESPN Visual Storytelling design team, I took their vision and transformed it into a responsive and visually appealing editorial piece using the powerful GSAP animation library and ScrollTrigger plugin. Collaborating with my development team, I created a custom experience that incorporates custom video and audio players, as well as carousel elements, ensuring a smooth and captivating user experience across various devices and platforms. This project demonstrates my proficiency in front-end development and my ability to leverage advanced animation techniques to bring design visions to life.

Leveraging a robust tech stack that included Next.js, Magento 2, HTML, and CSS, I spearheaded the transformation of user journeys for K&N Engineering. A standout accomplishment was the design and development of an intuitive Winter Clearance Experience page. This user-focused innovation substantially elevated sales performance, generating an additional $8 million in revenue. This initiative serves as a testament to my capabilities in synergizing technology and creative problem-solving to meet and exceed business objectives.

In this project, I applied the Atomic Design theory and used Hugo for the build, along with HTML, CSS (SASS), and JavaScript. I employed Masonry.js for the image grid. The entire site can be populated and updated via a JSON document and implements lazy loading through the Intersection Observer API. Serving as the lead developer on this project, I collaborated with both the development and design teams. The result is a single-page site that showcases collaborations between ESPN and Make-A-Wish, focusing on their events from both the current and previous years. This new site design is an upgrade from the previous version.

An chronicle of Hinchliffe Stadium's rebirth, a project where I served as a contributing developer. Complying with design specifications, I built various modules that played a crucial role in the site design, contributing to the overall visual storytelling of the stadium's reconstruction and its complicated history. In addition to this, my role included supporting the project quality assurance, ensuring the functionality and responsiveness of the developed modules, thereby enhancing the user interaction and overall experience of the site.

A custom lead capture page for Sneaker Smarter, a weekly sneaker news site. This project involved updating the design with provided assets, creating a responsive layout using HTML, CSS, and PHP, and embedding essential functions.