bsodium / bsodium.fr Goto Github PK

The Safe area for the elements below the navbar should be infered from it through CSS variables. This would allow for a more flexible spacing, and an automatic disablement when the Navbar is unmounted (the 404 page is an example of this scenario)

When updating the selected platform or clearing the search string, the debounce effect will still trigger leading to unwanted delay.

Here is a non exhaustive list of the elements of the page that look weird in light theme:

• Header illustration should be theme-specific:
  

• Resume link looks too contrasted and generally odd:
  

• Terminal colours are not contrasted enough:
  

• Icon glow looks very weird and should be softer:
  

• Project cards hover state is very poorly contrasted:
  

• Generated service colours should be adaptive and regenerated in light theme:
  

• Illustration glow should be softer
  
  

A navigation bar could allow for easy navigation to the project explorer, and could also host a theme switch button.

The lack of optimisation of the theme transition animation in the header is causing severe lag and greatly damages the user experience. See screen recording for reference:

Unverified URLs (not bsodium.fr) should display a disclaimer linking to the original project, in order to avoid people reusing the code witout proper crediting. Until this is implemented, the project will remain private.

When the user chooses to block Google analytics tracking (soft data collection), a banner should be shown prompting the user to whitelist the website in their ad blocker

Translation to English, French and Spanish would be a very nice-to-have feature, especially for a portfolio template.
i18next sounds like the go-to solution for that. The main work comes from having to translate everything, but also from the implementation and debugging work, which will be modifying very scattered and diverse parts of the app.

When submitting the footer contact form, the user is redirected to the following confirmation page. This should not happen and may lower user engagement.

The handling of the submission should be:

• a circular progress loading state during submission
• some kind of success message, directly in-app

The transition from desktop to mobile mode currently isn't fully lossless interaction-wise. The theme switching button, available in both desktop and tablet mode disappears.

The easiest and cleanest solution is implementing an equivalent of Material Design's FAB:

The following basic features are required:

• Basic theming compatibility with the MUI Joy design system
• Functional display of the current state, as well as circling between Light, Dark and System modes
• Sizing options

Evidence below:

Screen size is 1400x1086px

The current mobile mode breaks for ultra thin display sizes, such as on the folded Galaxy Z Fold.

• Terminal overflow
  

• Excessive X padding
  
  

• Incoherent "projects & experiments" title sizing
  

When transitioning from mobile to non mobile viewport format, the header illustration position does not change unless fully rerendered (i.e. page reload).

When changing tabs, a swipe/slide transition would make the movement and the overall navigation both nicer to look at and more organic.

The landing page flashes in white theme upon load.This should never happen.

Two solutions seem possible:

1. Implement a light theme for the landing page, solves the locally forced theme issue which has been a bother for a long while now
2. Find another hacky solution which involves ignoring the saved cookies and overriding the saved theme on the landing

The background image of the landing page appears to have a steep gradient, leading to poor rendering on LCD monitors, especially wide ones. This needs to be solved either by editing the image in photoshop or by adding CSS filters to soften it

1. Right end of the background (tiling might be a solution)
   
2. Bottom end (only visible on non-OLED or non-MicroLED displays)
   

The current solution to print the resume from the /resume route is to hit Ctrl + P, adjust the settings to your liking (zoom, background graphics, sheet size, etc..., and print to PDF.

This is painful, and has now become even more obsolete since the introduction of the navigation bar as well as the copyright disclaimer.

A fresh, clean and efficient solution must be implemented, ideally involving a download button which takes care of everything for us.

The largest contentful paint takes a tremendously long amount of time, which results in terrible user experience in countries where the average device price is lower (India, Argentina, brazil, Algeria, etc...). This needs to be fixed ASAP using a solution such as react progressive graceful image

Mobile devices do not have a hover state (or at least not an easily usable one, since the cursor position can only be modified by touching the screen, which sometimes leads to clicking the element).

Therefore, the following elements need to somehow handle this:

• Project cards in projects directory
• Navigation bar items
• Ideally, contact buttons in the link carousel, under "Get in touch"

The current footer is very simple, and a bit outdated when compared to the current design. Here is an improvement idea:

The bottom of the page is covered in mountains, which a radial gradient as image mask to avoid having sharp boundaries.

There is currently no proper 404 error page, only a blank page: https://bsodium.fr/foo

The loading of the projects takes a long time for no apparent reason, and the front-end doesn't display a loader, which makes the experience even more frustrating to the user.

Currently, the projects page is not indexed on the landing page. There should be an "explore other projects" button in the featured section fo the landing page.

The dashes before the name of the tab in the terminal component on the homepage look strange on Chrome for Android. Their appearance should be identical to the normal dashes, but they look like underscores.

The navbar should forcefully leave room for content at the bottom of the page when in mobile mode:

The project selection behaves very weirdly on safari. Looks like a z-index issue.

Both the email and the phone number should be hidden behind some kind of captcha, or simply not shown at all. It is a dangerous choice to make this kind of sensitive data available to the world wide web.