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:
- React w/Hooks
- OAuth 2.0
- SendGrid - For dynamic email communication w/users
- Node w/custom API server
- Semantic markup and attributes
- Bristlecone (a design system I've been assembling), and
- as a Progressive Web App (PWA)
- Endless curiosity and fun along the way
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 -
www.mannybecerra.com. 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
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
mkeys 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.
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.