Site Design

Users should be able to access this site smoothly on their mobile devices. I’ve made this possible by creating a static website with dynamic features powered by Cascading Style Sheets and JavaScript on the client side.

Regarding the user interface, I’ve taken on a significant — for me at least — challenge. Instead of a traditional menu bar with drop-down menus, I’ve opted for a collection of relatively large icon buttons to help you navigate the content. This design adapts to your screen size and orientation, ensuring a seamless experience.

One cool feature is our layout flexibility. On smaller mobile screens, you’ll see content in a single column, but on larger screens, it switches to a multi-column layout to maintain readability without resorting to oversized fonts.

I’ve also implemented a dark mode option to reduce eye strain, especially during low-light conditions in the evening and early morning, and it can also help save battery life, especially if you’re using a device with an OLED display. In brighter settings, a light mode, which matches the display’s surroundings, is preferred. Achieving this dual-mode functionality, particularly for graphical elements, was quite tricky. Our graphics and icons are primarily in SVG format, allowing us to adjust their colors using CSS. Most of these icons are designed as symbols in an SVG container file, with black fills on light backgrounds and white on dark backgrounds.

I’m striving to support the major browsers, including Chrome, Safari, Firefox, and Edge. However, maintaining consistent rendering across all these platforms has proven challenging. For instance, Safari sometimes has trouble with our multi-column layout, but I’m hopeful they’ll resolve these issues in future updates. I’ve heavily utilized CSS Flexbox containers for responsive design, which may not work in older browsers but are crucial for our layout. Additionally, pages with complex calculations can benefit significantly from Web Assembly, a technology not supported by browsers released before 2018.

I kindly ask that you update your browser’s latest version to minimize layout errors and save me time trying to keep backward compatible. I apologize if this requires installing another browser if your preferred platform isn’t fully supported. I am committed to delivering the best experience I can.