HTML, CSS, JS, REACT

Heyo,

I have only started learning React fairly recently so the existence of portals was new to me. I looked them up now but what I'm about to say take with a grain of salt (me being a newbie and all that).

I strongly doubt portals are something that you should use for a mobile menu. I get where you're coming from wanting to use it here but it seems off. Why would you not want your nav menu to exist in your DOM at all times? I think it should. You're only keeping it from being displayed but it's there. If it was a modal, that's a different topic. From what I gather, the main use case of portals are modals. I found 2 articles - this and this - that I think are pretty easy to follow, check them out. My suggestion would be to just make things work with good ol` css styling and toggle the menu with state. Once you're done, you can extract it and make it a reusable component pretty much so you don't have to bother coding it again (that's what I did at least).

Regarding the code, there's a few things to note:

1. Your markup is really hard to follow. Everything seems to be nested in containers, even when it's not needed (headings, for example are individually wrapped in divs).

2. Everything should be contained by landmarks. Right now, your nav and header-container isn't. Your nav should be inside a <header> and what is a header-container right now belongs to <main>, but perhaps you could rename it hero section or something like that.

3. All images seem to be missing alt texts. You need to have these, even if you just leave them empty (which is a correct solution for decorative images).

4. You may be misunderstanding what article and figure does. In short, not everything that is an image should be wrapped in a <figure>. Most of the time, images can be embedded without any sort of wrapper. Articles should be used for the actual articles in the Lastest Articles section (you're using a figure inside a figure right now). For the Why choose Easybank? section, article and figure seem like a strange choice too. Just use divs, it's fine.

5. Your social links are missing aria-labels.

Overall, React seems like an overkill for a project that mainly consist of just css and html. This leads to a lot of strange abstractions in your code and that makes it hard to follow. That might just be my opinion though. Regarding the React code I have some suggestions:

1. Decide what your'e going to use js or jsx files. It's one or the other.

2. You could create an assets folder that holds all the images and things like info.js, redes.js.

3. You seem to have a Redes.js and a Redes.jsx? It's a bit confusing.

4. There are 3 separate components for your nav: Nav.jsx, NavbarNav,jsx, PortalNav.jsx. A navbar should be one component in your website and that's it. This is what I mean by unnecessary abstractions.

5. If you ask me, this challenge requires some really unique solutions both markup and css wise so the fact that you abstracted them all away and everything is hidden behind <Article /> and <Section /> is an odd choice.

Don't misunderstand me, I think what you did style wise seems pretty fine. I found this challenge really tough myself. I think you're just using the wrong tools for it and making your life harder than it should be >.< This challenge needs some planning ahead with the styles and markup which is admittedly a lot harder to do when everything is broken down to components.

cheers man. good work