Work Portfolio

Overview

In my role as Sr. Front End Developer, I led the effort to streamline team collaboration by implementing a unified Jira Kanban board across multiple retail brands. I centralized task tracking by consolidating workstreams from Sally Beauty and BSG into a single FEDX project, improving visibility and cross-functional coordination. I structured Epics and swimlanes for clarity, migrated and organized backlog items, and implemented GitHub commit linking for traceable development workflows. Acting as Scrum Master, I facilitated daily standups, defined lightweight Agile processes tailored to our needs, and drove continuous improvement through prioritized workflows and documented standards in Confluence. This initiative enhanced transparency, accountability, and team efficiency across the organization.

Glossary Section – Structured Information Architecture

I implemented a comprehensive Hair Color Glossary to educate users and boost search engine visibility for long-tail keywords:

• Semantic HTML: Each term is wrapped in a proper heading (<h3>) followed by a <p> definition, ensuring screen readers and search engines can interpret the structure accurately.
• Internal Linking Strategy: Every term includes a clearly labeled “Shop Now” <a> tag with aria-label attributes, improving both accessibility and SEO crawlability. These links directly target filtered product category pages using SFCC’s $url(...)$ syntax.
• Accessibility Enhancements: All glossary links include aria-labels for context-aware screen reader navigation. The use of consistent heading hierarchy and plain language definitions improves readability for assistive technology users.

This glossary not only increases user engagement but also targets rich snippet eligibility for Google searches like “what is demi-permanent hair color?” or “hair color developer definition.”

SEO Section – Keyword-Driven, Accessible Content Blocks

The “More About Hair Color” content block is crafted with both readability and search intent in mind:

• Strategic Keyword Placement: Targeted phrases like “gray coverage,” “semi-permanent,” and “bleach” are embedded in natural language paragraphs, maximizing relevance without keyword stuffing.
• Contextual Anchor Links: Inline <a> tags use descriptive, keyword-rich anchor text. All links contain data-event-* attributes for GTM tracking, enabling performance insights.
• Paragraphs designed for Featured Snippets: Each block addresses a specific user query (e.g., benefits of semi-permanent hair color) in concise, informative text. Emphasis on verbs like "create," "refresh," "find," and "try" aligns with user action intents.

FAQ Accordion – Structured Data + Accessibility

The FAQ section utilizes a JavaScript-powered accordion component built with:

• JSON-LD Schema Support: Questions and answers are structured in a way compatible with schema generation (if integrated), supporting rich results.
• Expandable Content: Enhances page length and topical relevance without overwhelming the user upfront.
• Interactive but Accessible: Toggle buttons use descriptive headings (<h3> equivalent roles). Text content inside is fully keyboard accessible, promoting WCAG compliance.

Overview

This Similar Items Comparison Chart experience was built as an A/B split test in Monetate to determine the effectiveness of product comparison information vs a product carousel. The experiement was a success, determining that users preferred seeing detailed product information up front, and were more likely to add products to bag directly from the chart and reach the conversion stage more quickly.

Skills Demonstrated

• DOM Manipulation (Vanilla JS):
  • Proficient manipulation of the DOM using document.createElement, insertAdjacentHTML, and querySelectorAll.
  • Built dynamic UI tables using vanilla JavaScript for product comparison, adapting layouts and content on-the-fly based on API data.
• Asynchronous JavaScript / Promises:
  • Usage of Promise.then() for asynchronous API data retrieval.
  • Fetched and rendered live product data asynchronously with custom API integrations.
• Data Parsing & Filtering:
  • Conditional logic to process product attributes (e.g., filtering promotions, calculating rating stars, handling variant vs. master products).
  • Parsed and filtered product data structures to display dynamic promotional, pricing, and rating content.
• Modular & Reusable Logic:
  • Use of helper functions (getWarrantyForPrice) and reusable switch cases for modular row generation.
  • Engineered modular logic for dynamic row generation across customizable product attributes.
• Responsive Layout with Utility Classes:
  • Integration with utility-first class structures (Bootstrap + custom CSS).
  • Implemented responsive, mobile-first product layouts using utility class architecture.
• Accessibility Enhancements:
  • Semantic HTML (.sr-only class) and accessible navigation (aria-label, keyboard-friendly links)
  • Ensured accessible navigation and product ratings via screen reader-friendly markup and ARIA attributes.
• Edge Case Handling & Fallbacks: Anticipated edge cases and implemented UI fallbacks for missing product data and empty states.
• Dynamic Data-driven Rendering: Programmatically generated data-driven UI for ratings, price comparisons, and warranty matching.
• eCommerce Context & Experience:
  • Product info rendering (e.g. name, brand, image, add-to-cart button) with marketing tracking (data-event-action, data-event-label).
  • Developed interactive product detail modules aligned with eCommerce goals and marketing tracking needs.

Overview

Working in collaboration with UX, I began laying the foundation for a scalable design system using Storybook. My goal was to provide developers with accessible documentation and reusable components that reflected our approved brand tokens. I established the structure, architecture, and tooling that could support long-term adoption and handoff.

Tech Stack & Tooling

• Framework: React 18 + Vite
• Storybook: Version 8, using the @storybook/react-vite framework
• TypeScript: Strongly typed components and stories
• SCSS: Modular SCSS structure with utility classes for variants, states, spacing, typography, and color
• Design Tokens: SCSS variables structured across palettes like Primary, Neutral, and Alert states
• Bootstrap: Used for layout scaffolding within Storybook decorators
• Accessibility: Focus styling and keyboard support in components
• Addon Features:
• @storybook/addon-controls: Interactive props editing
• @storybook/addon-docs and @storybook/blocks: MDX-based docs with custom layouts and visual swatches
• @whitespace/storybook-addon-html: Shows underlying HTML output
• @storybook/test: Testing hooks for future visual/interaction testing
• Linting: ESLint with Storybook plugin and TypeScript integration

Design System Integration

• Color Documentation:
• Created reusable <ColorItem> blocks using @storybook/blocks to document brand, neutral, and semantic color tokens (e.g., Sally Red, Error BG, etc.)
• Structured into sections like Primary, Natural, Alert Text, and Alert Background palettes for UX parity with Figma
• Typography & Layout:
• Typography tokens defined in _typography.scss and referenced in MDX files
• SCSS modifiers applied using structured class patterns: .df_template--[variant] and .df_template--[status]

Component Architecture

• Reusable Component: TemplateComponent built with flexible props
• variant: for block vs inline styles
• status: for semantic intent (success, error, warning, info)
• children: customizable message content
• Styled Using: BEM-style SCSS utility classes for consistent design application
• Dynamic Rendering in Stories:
• Storybook story uses useFirstRender() hook to toggle between default and reactive content for live previewing component behavior

Storybook Documentation & Controls

• Custom MDX Layouts:
• Used <Title>, <Primary>, <Controls>, <Stories>, and <ColorPalette> from @storybook/blocks to structure intuitive documentation
• Interactive Controls:
• Storybook’s Controls tab wired to argTypes for live prop manipulation of status, variant, and content
• Live Code Examples:
• Stories include dynamic examples and static snapshots for each alert state to support visual QA and documentation

Design System MVP Implementation

Created an MVP branch of the Design System to provide immediate access to UX-approved color, typography, and border radius utility classes. This foundational setup allows developers to begin using the design system without waiting for full integration.

• SCSS Utilities: Centralized in branch and imported into the site's scss
• Global Variables & Mixins: Configured via sass-resources-loader in the Webpack config, enabling use without manual imports
• Font Integration: included webfont files and wired them to typography utilities
• Non-intrusive Setup: Can be optionally commented out to avoid duplication with existing css

Overview

Implemented a redesign of the global footer based on comps from UX. Modified existing footer architecture for an MVP experience by using JavaScript and CSS overrides. Navigation and interactivity is fully accessible and ADA-compliant. Design is responsive across mobile, tablet, and desktop viewports.

Overview

Developed a dynamic script to inject promotional banner content with responsive imagery and a tooltip-style disclaimer for legal clarity. Collaborated with stakeholders by creating a visual PDF showcasing design variants for feedback and approval.

Overview

A responsive, accessible landing page designed to highlight a sustainable product collection on SallyBeauty.com. Built using Salesforce Commerce Cloud, the page integrates dynamic carousels, analytics tagging, custom JavaScript interactivity, and structured content modules.

Key Skills Demonstrated

• Modular + Responsive HTML/CSS Development:
• Created a modular, mobile-first layout using SFCC-compatible HTML and BEM-style class structuring.
• Custom media queries for breakpoint-specific behavior (e.g., adaptive image swaps, hiding breadcrumbs).
• SCSS-based utility classes for typography, color, and spacing using tokenized brand variables.
• Accessibility & SEO Enhancements:
• Implemented visually hidden <h1> and <h2> tags (.sr-only) for semantic SEO while maintaining layout control.
• FAQ accordion uses proper ARIA roles and keyboard focus management (scrollIntoView(), focus()), including conditionally removing outlines on mouse interaction.
• Component Architecture & Reusability:
• Used content-asset and Demandware includes ($include(...)$) to structure reusable content modules and product tiles.
• Dynamically built product carousels with fedx.buildVn() and FAQs with fedx.buildAccordion()—custom JavaScript utility patterns within SFCC.
• User Experience Features:
• Interactive “Learn More” button scrolls and expands specific FAQ accordion content to educate users, improving discoverability and flow.
• Smooth hover transitions and responsive navigation for category filtering using pill-style buttons and GTM events for click tracking.
• Integration with Salesforce Commerce Cloud:
• Used SFCC-specific syntax for image and URL linking ($staticlink$, $url(...)$) ensuring compatibility with site controllers and pipelines.
• Dynamic product tiles populate carousel sections using server-side includes mapped to product IDs, maintaining scalability.

Overview

A branded landing page celebrating Hispanic Heritage Month, featuring dynamic content tiles, responsive layouts, custom quote styling, and integrated e-commerce product navigation. Built on Salesforce Commerce Cloud with a strong emphasis on accessibility, storytelling, and scalable design.

Key Skills Demonstrated

• Advanced Responsive Layouts with Grid + Clamp:
• Employed advanced CSS Grid and clamp() typography to scale beautifully across all screen sizes.
• Designed overlapping, layered elements (e.g., quote blocks on background images) with precise media query adjustments from min-width: 410px to 1320px+ breakpoints.
• Dynamic Content & Brand Storytelling:
• Integrated visually rich brand spotlights using SFCC component includes ($url(...)$) and <blockquote> layouts for storytelling content.
• Combined <picture> tags with lazy loading for performance-optimized media presentation.
• Accessibility & Semantic HTML:
• Used semantic tags (<section>, <blockquote>, <cite>) and descriptive alt text to support accessibility and SEO.
• Implemented hover/focus states and accessible CTAs with clear visual feedback.
• Custom JavaScript Enhancements:
• Populated dynamic content tiles using a buildVn() function that injected HTML into the DOM based on defined brand data.
• Created a modular component approach for product navigation and tiles, supporting reuse and localization.
• Thematic Styling & Brand Identity:
• Developed a cohesive visual identity using SCSS tokens (.hhm__orange, .hhm__heading--large) and themed color variables.
• Implemented background overlays and visual hierarchy to emphasize cultural storytelling, brand equity, and social mission.
• E-Commerce Integration:
• Used GTM-friendly event labels (data-event-action, data-event-label) for all interactive elements to support analytics and campaign performance tracking.
• Product category navigation built with SFCC’s Demandware $url(...)$ hooks for filterable shopping experiences.