Custom Gutenberg blocks built with React, PHP, and modern CSS techniques (Grid, Flexbox, Custom Properties, Container Queries).
This project is a showcase of how I approach enterprise-grade WordPress development: responsive, accessible, reusable, and maintainable.
- Responsive CSS Grid layout for client feedback
- Dynamically adapts to container size (not just viewport)
- Editable in Gutenberg (name, role, quote, avatar image)
- Uses
clamp()for fluid typography and CSS variables for theming
- Responsive grid/flexbox cards for skills and features
- Supports icons/images, title, description, and CTA
- Micro-interactions on hover (lift + shadow)
- Scales fluidly — mobile-first, container-query aware
- Three-tier responsive pricing layout
- Featured plan highlighted with accent color and scale
- Uses semantic roles for accessibility
- WCAG AA contrast, ARIA labels, keyboard-friendly
- Expand/collapse questions with keyboard + ARIA support
- Vanilla JS frontend controller for accessible toggling
- Smooth transitions, accent color for active state
- Two-column hero with image on one side, text + CTA buttons on other
- Responsive
clamp()typography, consistent dark theming - Pill-shaped buttons with brand accent color
- Supports primary button (jump to section) and secondary button (WhatsApp contact)
- Responsive carousel with Flexbox track + transform transitions
- Prev/Next nav buttons (fixed size, accessible targets)
- Slide content supports image, title, and readable description text
- Larger body text for consistent legibility
- WordPress Gutenberg (React, JSX, PHP block registration)
- Modern CSS (Grid, Flexbox, Custom Properties, Container Queries)
- SCSS preprocessing
- Webpack / @wordpress/scripts build pipeline
- Accessibility baked in (ARIA roles, WCAG 2.1 AA, semantic HTML)
Clone into your WordPress plugin directory:
git clone https://github.com/yourusername/modern-wordpress-blocks.git wp-content/plugins/modern-wordpress-blocks
cd wp-content/plugins/modern-wordpress-blocks
npm install
npm run build