Beyond the Usual, Passive DEI Efforts in Tech

About: Meta

Manny Becerra as a child

This site

I built this website myself and it's gone through several incarnations over the last couple of decades. Some of the tools, frameworks and so-on that I've used to create this latest version include but are not limited to:

It's worth noting that a website is never complete; as such, my site is in a perpetual state of WIP (work-in-progress); however, along the way, I hope to write some blog posts that highlight some of the changes during this iterative process.

Hosting and Deployments

For secure, reliable hosting, I leverage Zeit's Vercel's Now platform. Vercel allows me to seamlessly configure and implement a continuous integration and deployment (CI/D) pipeline using the command line (CLI). When I fancy, I can easily ship changes to a staging area for testing and review, then production - On average, I can ship new changes to production in less than 90 seconds.

Other notable tidbits

  • Code is saved, versioned and maintained with git and housed in GitHub
  • The main content (copy/text) is generated from Markdown files that I write with semantic meaningful markup (#A11Y). Markdown content elements (e.g. paragraphs, headers, etc.) are mapped to a central set of custom UI React components when being rendered for consistency in look-and-feel with the rest of the site
  • Site is generated using server side rendering (SSR) for better performance and search engine optimization (SEO)
  • There's an offline mode to this site in case connectivity is lost, already loaded content and pages can still be viewed and navigated while your Internet connectivity is regained (#PWA)
  • There are multiple themes one can switch between to help make it easier on the eyes to read the content depending on your surrounding environment or any eye constraints

Multiple themes

I created two (2) themes for the site:

  • A default, light mode, and
  • A darker mode, which is ideal for nighttime viewing (easier on the eyes; allows your eyes to focus more on what's in front of you: the screen content)

To toggle between the themes, visitors can use either the keyboard or the user interface (UI):

  • Using the keyboard: press the shift and m keys at the same time, shift + m
  • Using the UI: select the horizontal toggle switch located at the top of the page


  • If your system or operating system allows for toggling between dark mode and a default one, this site is "smart enough" to pre-load your system configuration
  • Both themes are based on the default theme I created and packaged with the Bristlecone Design System; the color styles for each theme are configured to have a minimum contrast ratio of 4.5:1. Learn more about color contrast and what it means to your users at the A11Y project site.

Manny Becerra as a child

I operate from a place of compassion, possibility and imagination. My work and efforts share a common goal: create a better, sustainable and equitable world by building inclusive communities, products & experiences.