Maria Szubski

This project was both a site redesign and a way for Johnson & Johnson to test their new BodilessJS platform. BodilessJS is a toolset that builds websites based on a shared component library without needing a CMS. Content can be edited in-browser and written directly to the repo.

I consulted with Johnson & Johnson to provide feedback on the BodilessJS developer experience and contributed new components to the shared library. I worked with multiple teams and stakeholders to establish the project's scope and timeline to create the best possible experience for the client.

For the Zarbee's website, a brand acquired by Johnson & Johnson, I created page templates and extended the BodilessJS library to align with brand requirements. I also mentored team members on best practices for React and Tailwind CSS.

Aster wanted to redesign its brand sites, sharing as much functionality and design between brands as possible. We accomplished this using the Gatsby theme to create a reusable library of styleable components.

I was the lead front-end developer on this site, creating the library of shared components, then customizing the styles to fit each site's branding. The client provided only desktop design mockups, which I turned into responsive layouts.

The following Aster sites were all built using the same underlying Gatsby theme and Strapi CMS set up: www.truemontmaterials.com, www.redi-rock.com, www.rosettahardscapes.com, www.polebase.com, www.redi-scapes.com, manufacture.redi-rock.com, www.makepolebase.com, and www.makerosetta.com.

The company wanted a redesigned site to promote its fleet solutions for commercial vehicle services, including vehicle upfitting, management, and a knowledge center.

I built front-end components and reusable templates in Gatsby on React and Storybook. The design overhauled the company's content organization and marketing strategy to reach a new customer base and highlight the company as an industry thought leader.

The company wanted to expand the scope of its website to include a series of training sessions based on its extensive collection of research and experience. Its new Fleet Studies Lab website consists of classes and courses on topics in the commercial fleet industry.

I was the lead front-end developer on this project, creating a library of components and templates for the classes, course categories, and main landing page. This website is being used to train and collaborate with other up-and-coming experts in the industry.

Kitchen 1883 is a chain of restaurants operated by Kroger. This website provides details about each location, including menu items and the ability to order online.

I built the front end of this site with Gatsby on React. I used Storybook to build, test, and document components. The site is fully responsive and accessible and can be navigated with a keyboard or screen reader.

On The Rhine Eatery is a food hall inside Kroger's Downtown Cincinnati grocery store, featuring local restaurant concepts. This site provides information about each restaurant and upcoming events.

I built the front end with Gatsby on React and the Styled Components. I used Storybook to build, test, and document these components to ensure they were flexible and met accessibility standards. The site can be browsed entirely with a keyboard or screen reader.

I created this single-session workshop to cover the basics of Gatsby and the benefits of static site generators. It explores the basics of React and Gatsby, including function components, props and state, routing, plugins, and CSS-in-JS. Participants built a single-page Gatsby site and deployed it to Netlify during an in-person meeting.

The workshop covered: the React project structure and routing; pre-fetching with Gatsby Link; the Gatsby Image; React building blocks such as function components, props, hooks, and state; the Styled Components and Web Font Loader plugins; and Netlify deployment.