Software Engineer
Based in New York City
Software Engineer
Based in New York City
I'm a software engineer with direct experience in modern web technologies including JavaScript, React, Redux, Node.js, Express.js, Ruby on Rails, HTML and CSS. Whether it’s a sophisticated single-page application for music enthusiasts or a highly-customizable audiovisual experience, I love diving head first into challenging work utilizing my analytical and creative strengths to their fullest potential. Feel free to take a look at my projects below and reach out through my email or LinkedIn.
React, Redux, Ruby on Rails, AWS, PostgreSQL
CalmCloud is an online music streaming service for lovers of music. This single-page application, inspired by Mixcloud.com, offers a platform where users can upload, share and interact with audio content provided by the website's wider community.
JavaScript, HTML, CSS, D3.js, Web Audio API
Visicality is a music visualizer web application allowing users to experience dynamic, real-time visuals synchronized to their favorite music. The application offers users a highly customizable experience through a diverse selection of visualizer designs and color palettes.
MERN (MongoDB, Express.js, React, Node.js) Stack, Redux, Sass, Docker
InvestChest is a web-based stock portfolio application which allows users to easily look up real-time stock prices and purchase shares. Users can return to the website at any point to review their transaction history and portfolio performance.
Dark modes are more popular than ever, so I knew from the get-go I wanted to implement a color scheme switch on my website. To achieve this, a combination of media queries (to set an initial light or dark mode based on a user’s device) and CSS variables (to assign a theme's corresponding colors) are utilized. I’ve also included a toggle switch to freely change between light and dark modes, and incorporated fluid CSS transitions when swapping between schemes.
When accessing this website, the Window interface’s matchMedia() method is used to check if there is a preferred color scheme, and a document.documentElement is set accordingly. If there is no preferred color scheme the page defaults to light mode. Event listeners are placed onto both window.matchMedia('(prefers-color-scheme: dark)') and the page’s theme toggle switch element to ensure consistency between CSS variables, HTML elements and favicon.
if (window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
document.getElementById('checkbox').checked = true;
setFaviconColor("dark");
}
window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
if (e.matches === true) {
document.getElementById('checkbox').checked = true;
document.documentElement.setAttribute('theme-mode', 'dark');
setFaviconColor("dark");
} else if (e.matches === false) {
document.getElementById('checkbox').checked = false;
document.documentElement.setAttribute('theme-mode', 'light');
setFaviconColor("light");
}
});
document.getElementById('theme-switch').addEventListener('change', (e) => {
if (e.target.checked) {
document.documentElement.setAttribute('theme-mode', 'dark');
setFaviconColor("dark");
} else {
document.documentElement.setAttribute('theme-mode', 'light');
setFaviconColor("light");
}
}, false);Colors affected by the selected color mode are assigned to CSS variables based on the MediaQueryList value for "prefers-color-scheme". If the page’s theme toggle switch has been adjusted, the value of the theme-mode root element is used to determine the colors instead.
If you want to learn more about how to implement a dynamic dark mode on your own website check out the following resources from WebKit and W3C:
Dark Mode Support in WebKitCSS Color Adjustment Module Level 1