ealsycod / portfolio

Jupiter(Portfolio)

Jupiter(Portfolio)

Usage

npm i

npm start npm run server

Task

• Do not use gallery plugins or the like, which will do the main task for you.
• Use Flexbox model (and Grid optionally) for layout.
• When resizing the screen width, the desktop version should be replaced by the mobile version and vice versa.
• Mobile layout should be displayed at a width of less than 1040 px.
• The desktop version stretches across the width to display a maximum of 4 columns, after that the content does not stretch, only the indents along the edges increase.
• When you select a category, only pictures of this category are displayed, when you select "Show all", show all pictures.
• Pressing the "Load more" button loads 9 more pictures (you can use the same ones, but with different names, for example, just add a deuce).
• For the desktop, make it possible to select an image by clicking on it, such an image should have a green highlight, as in the layout. Pressing again turns off the backlight.
• On the desktop, if there is a selected picture, when you press the "Del" button, the picture should be deleted. After that, it should no longer be displayed, including when switching categories.
• Clicking on the category label inside the picture should also toggle the category display.
• There are no requirements for where the object with pictures and names will be loaded from, it can be written locally in the code, it can be loaded remotely from the database, this is optional.

Coded by EalsyCoD