elusiveplanet/alexisrenderos.com

Rebuilding my personal website using React, Next.js and Typescript

alexisrenderos.com's Issues

Right Arrow Icon filter animation doesn't always render properly due to browser support

The right arrow icon used currently (it's a png) will not always render a smooth onclick transition since filter isn't supported by all browsers, notably Brave on iOS.

This causes the animation to not transition properly. It is able to wait the proper time, but there is no easing.

Potential solve is changing out the png arrow for a text based one. It's possible to create a circle around text as shown here: https://jsfiddle.net/aqhdgnLu/ which allows for expected onclick behavior since text works just fine.

Arrow: https://unicode-table.com/en/2794/
StackOverflow: https://stackoverflow.com/questions/9358882/how-to-make-a-circle-around-content-using-css

[Spike] - Code Reuse is poor throughout the codebase, specifically with components

There is limited code reuse throughout the frontend.

This is because of an early design decision I made to optimize for speed of development. I opted to create separate components for each individual platform (Desktop, Tablet, Mobile) instead of opting for a single centralized component that had flexible styling depending on the platform.

This caused each component to have three distinct versions for each platform with limited code reuse between the trio. This design decision causes limitations in speed and accuracy of future revisions since there are 3x the number of changes that would need to be made. Editing copy + styling are the biggest pain points by far.

This is partially resolved by the implementation of ctaButton.tsx, as this component is designed with support for all three platforms in mind. Props can be passed to modify styling, but this is largely made unnecessary by usage of CSS media queries.

By refactoring pre-existing code to use this frontend design pattern I would be able to develop new features more quickly, increase accuracy, and reduce total count of bugs shipped.

It would be prudent to first identify which components use the old design pattern and then prioritize refactoring efforts based on the likelihood of a change to the component group in the future.