Maria Szubski, Front-end Developer in Cincinnati, United States
Maria Szubski

Front-end Developer in Cincinnati, United States

Member since August 25, 2022
Maria is a front-end developer specializing in React and GraphQL. She has five years of experience building B2C and B2B sites and three years mentoring junior developers through local tech workshops. She has also contributed as a solo/lead developer and as part of large dev teams across various technologies. Maria's UX design background helps her quickly translate mockups into responsive UIs, delivering best practices in accessibility, user experience, and maintainable code standards.
Maria is now available for hire

Portfolio

  • Self-employed
    React, JavaScript, NPM, Git, Accessibility, Static Hosting, Code Generators...
  • Girl Develop It
    Mentorship, Web Development, Event Planning, Management, Workshops, HTML...
  • Nielsen
    UX Design, Web Development, Documentation, Illustrator CC, Photoshop CC...

Experience

Location

Cincinnati, United States

Availability

Part-time

Preferred Environment

MacOS, React, Git, Accessibility, Netlify, GraphQL, JavaScript, ESLint, SCSS, Storybook

The most amazing...

...tool I've built is a React-based site generator for a Fortune 500 company to quickly create brand sites with customizable web components and low hosting costs.

Employment

  • Front-end Web Developer

    2018 - PRESENT
    Self-employed
    • Collaborated with clients to strategize and build web applications, focusing on single-page application architecture and accessibility.
    • Translated designs into user-friendly responsive web interfaces with React, Gatsby, Vue, and Ruby on Rails.
    • Developed data models in headless CMS, such as Contentful, Dato, and Strapi, and hooked these models up to the front end with GraphQL.
    • Built, tested, and documented flexible React component systems in Storybook.
    • Set up automatic static site deployment with GitHub and Netlify.
    • Produced CSS keyframe animations and interactive SVGs.
    • Created a drag-and-drop, React-based static site generator with reusable web components.
    Technologies: React, JavaScript, NPM, Git, Accessibility, Static Hosting, Code Generators, GraphQL, InVision, GitHub, Jamstack, ESLint, Gatsby, Content Management Systems (CMS), Contentful, Netlify, SCSS, Bootstrap, Styled-components, Tailwind CSS, JSX, Shopify, Ruby on Rails (RoR), Vue, Storybook, HTML, Photoshop CC, Illustrator CC, Mentorship, Bitbucket, Asana, Jira, Trello, TypeScript, Responsive UI, CSS, Scrum, Debugging, Responsive Web Apps, API Integration, YARN, Management, Strapi CMS, Yarn Workspaces, Gatsby Themes, DatoCMS, Documentation, Front-end, HTML5, React Router
  • Chapter Leader | Event Organizer | Instructor

    2015 - 2018
    Girl Develop It
    • Led and supported instructors, volunteers, and students at local tech meetups for Girl Develop It's Cincinnati chapter.
    • Planned the quarterly course schedule, promoted events, fostered community partnerships, grew the chapter, awarded scholarships, and ran day-to-day operations.
    • Conducted multi-session workshops on HTML and CSS and provided mentoring for classes of 10-15 students.
    • Oversaw the training of meetup organizers and instructors and guided the new curriculum.
    Technologies: Mentorship, Web Development, Event Planning, Management, Workshops, HTML, JavaScript, React, Git, GitHub, SCSS, Netlify, CSS, Responsive UI, NPM, Bootstrap, Trello, Front-end, HTML5
  • UI Designer

    2012 - 2017
    Nielsen
    • Governed Nielsen's collection of big data applications to establish brand cohesion, consistency, and ease of use.
    • Built and maintained the application standards documentation website to communicate the department's UX guidelines.
    • Designed interfaces across multiple frameworks, including AngularJS, Sencha, MicroStrategy, and D3.
    • Created mobile applications that adhered to iOS and Material Design standards.
    • Participated in the employee engagement team to organize the company's intranet and drive new initiatives within the organization.
    • Increased product adoption and improved the panelists' experience by simplifying the Nielsen Panelist web portal.
    • Wrote the white paper: Quantifying the Business Value of User Experience and presented this to over 150 employees. This presentation led to the UX team being repositioned in the company, giving us more authority over the brand's suite of products.
    Technologies: UX Design, Web Development, Documentation, Illustrator CC, Photoshop CC, Mobile App Design, UX Testing, Accessibility, JavaScript, HTML, SCSS, UI Design, Prototyping, jQuery, Responsive UI, CSS, Front-end, HTML5
  • Digital Product Design Intern

    2012 - 2012
    Moment Design
    • Designed the first ESPN ScoreCenter iPad app with data-heavy live game statistics and breaking news coverage. Each layout was customizable based on the user's favorite sports and teams.
    • Created The Power of IX virtual mosaic for ESPN W's celebration of the 40th anniversary of Title IX. Users could upload photos of female athletes and browse the interactive mosaic by athlete name or sport.
    • Consulted on new rapid prototyping tools to expand the company's capabilities and improve workflow efficiency.
    Technologies: UX, Prototyping, App Design, UX Testing, UI Design, Illustrator CC, Photoshop CC, UX Design, Digital Product Design
  • Interactive Design Intern

    2011 - 2011
    The Ant Farm
    • Created multi-asset marketing strategies for the upcoming movie and video game releases, including social media themes, custom websites, viral campaigns, and banner ads.
    • Built websites and sizzle reels for consideration in The Ant Farm's industry award nominations. These microsites focused on a subset of the company's capabilities, highlighting how work is done through case studies.
    • Redesigned the Careers website for a major entertainment company to give it a modern feel, highlight their major properties, and increase interest in employment opportunities.
    Technologies: jQuery, JavaScript, HTML, Advertising, Flash, Social Media Campaigns, UI Design, Illustrator CC, Photoshop CC, Web Development, App Design
  • Digital Design Intern – IT Innovations

    2010 - 2010
    JCPenney
    • Designed applications for FindMore, a series of large-format touch screen kiosks inside JCPenney stores, which promoted seasonal marketing campaigns and provided customers with product guides to enhance their in-store experience.
    • Implemented an approachable and intuitive FindMore storefront and checkout process that was accessible at eye-level for both standing and wheelchair users.
    • Built an iPad app to increase sales on JCPenney's extended collection of fine jewelry for use in-store by sales associates. This included an Engagement Ring Builder, which showed previews of possible ring customizations.
    Technologies: Mobile App Design, Photoshop CC, Illustrator CC, UX Testing, UI Design
  • Web Intern

    2009 - 2009
    Evenflo
    • Maintained the custom CMS for internal and consumer-facing sites, adhering to strict web standards and accessibility principles.
    • Filmed and edited instructional product demos in Flash to train customers in safely operating baby products and car seats.
    • Created promotional materials, including posters and pamphlets, to reach new customers and vendors at B2B conferences.
    Technologies: Social Media Campaigns, Content Management Systems (CMS), Instruction & Coaching, Photoshop CC, Illustrator CC, Flash, DSLR Photography, Web Development, Advertising, HTML, CSS

Experience

  • Johnson & Johnson's Zarbee's | Website Redesign and BodilessJS Testing
    https://www.zarbees.com/

    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 | Redesign of Eight Brand Sites Using the Gatsby Theme
    https://www.rosettahardscapes.com

    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.

  • Mike Albert Fleet Solutions | Website Redesign
    https://www.mikealbert.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.

  • Mike Albert Fleet Solutions | Website Design of Fleet Studies Lab
    https://www.mikealbert.com/fleet-studies-lab

    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.

  • Kroger | Front-end Development of Kitchen 1883
    https://www.kitchen1883.com/

    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.

  • Kroger | Front-end Development of On The Rhine Eatery
    https://www.ontherhineeatery.com/

    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.

  • An Intro to Static Site Generators Workshop for the Jamstack Cincinnati Meetup
    https://github.com/MariaSzubski/1906-getting-started-with-static-sites

    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.

Skills

  • Languages

    JavaScript, SCSS, HTML, CSS, GraphQL, TypeScript, HTML5
  • Libraries/APIs

    React, Vue, React Router
  • Tools

    Git, GitHub, Photoshop CC, Illustrator CC, JSX, Asana, Trello, NPM, InVision, Flash, Yarn Workspaces, Bitbucket
  • Paradigms

    Jamstack, Mobile App Design, Scrum, Management
  • Platforms

    MacOS, Netlify, Contentful, Shopify
  • Other

    Accessibility, Storybook, Web Development, Gatsby, Responsive UI, ESLint, Styled-components, Content Management Systems (CMS), Instruction & Coaching, Prototyping, App Design, Mentorship, Event Planning, Workshops, Gatsby Themes, DatoCMS, DSLR Photography, Digital Product Design, Debugging, Responsive Web Apps, Social Media Campaigns, Advertising, Documentation, Static Hosting, Code Generators, Strapi CMS, API Integration, Front-end
  • Frameworks

    Bootstrap, YARN, Next.js, Tailwind CSS, Ruby on Rails (RoR)

Education

  • Bachelor's Degree in Digital Design
    2007 - 2012
    University of Cincinnati - Cincinnati, Ohio, United States

To view more profiles

Join Toptal
Share it with others