Create Museum Website UI/UX + Demo 🍿
Tags: webdev, javascript, react, css
Published: 2021-08-06 19:15:51

> <a href="https://kerthin.github.io/pradoMuseum-templateSait/#" target="_blank"><h1>Full Prado Museum Demo</h1></a>

> {% github Kerthin/pradoMuseum-templateSait %}

<h1>Introduction</h1>
2 years ago, wandering through the expanses of Behance, I saw an interesting work, which was a redesign for the website of the Spanish Prado Museum. The work was called <a href="https://www.behance.net/gallery/73878699/Prado-Museum-Website-with-Virtual-Reality-Experience">Prado Museum Website with Virtual Reality Experience</a>.

Of course, I didn't want to implement the entire project, because I didn't understand the UI and UX logic very well in the work that I saw on Behance.

Moreover, I just wanted to create a small one-page project. Considering that this was supposed to be my first project on React. Therefore, I want to immediately note that the code here is very lousy, and this post is not a tutorial of any kind. And I was too lazy to break the code into components, so it is written entirely in one file. I'm not going to teach anyone anything, but I just want to tell you about how I implemented this project.

![Alt Text](https://media.giphy.com/media/LweK4Ma6Chp8k/giphy.gif)

<h1>Concept</h1>
The idea was simple, I want to implement a one-page website where I can use the menu to select the artist I am interested in and view his works, as well as information about him, which will be displayed on the main page and in a specially side menu.

All information is stored in a special object, which you can see at <a href="https://github.com/Kerthin/pradoMuseum-templateSait/blob/master/src/App.js">this link</a>. The object itself consists of three stages.
> <strong> The Country 👉 The Artist 👉 His Paintings</strong>
There are `7` countries in our array, and the total number of artists is `27`.

There are `2 menus` on the website. `One menu` is the main one, it presents artists who are in sections with countries. The `second menu` is auxiliary, it displays information about the selected artist (the menu is located on the side, you can open it by `clicking on the portrait` of the artist that is located on the main screen).

<h1>Realization</h1>

<h3>01. Main Page</h3>
To begin with, I decided to create a main page that will display brief information about the artist.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fia1fufy8ndq1rlukszv.png)

<strong>1.</strong> At the very top I have a button to open the menu.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3jipf6zsquke18dewts.png)

<strong>2.</strong> In the center there is a very brief information about the artist (`years of life`, `name`, `country of birth`).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jczfaysdj0cxdviqmvq.png)

<strong>3.</strong> Just below is a portrait of the selected artist, which is located in a round block. When you `click` on it, a side menu should `open`, where the artist's paintings will be presented, as well as broader information about the artist (`early life`, `synopsis`).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n0evr1qz5uqvmoaaqns.png)

<strong>4.</strong> At the very bottom there is information about the picture, which is displayed on the main screen (`name`, `year of creation`, `artist's name`).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0z44l4sawez7z42lbv2k.png)

<h3>02. Artists Menu</h3>
The menu was planned to be made full-screen. Therefore, before I output information to it, I need to work out the animation of opening this menu.

<strong>1. Animation</strong>
The animation of opening the menu should look as if it shifts the main page down when opening it. This was implemented as follows:

![Alt Text](https://media.giphy.com/media/mx4XGr7XKInZMaURbm/giphy.gif)

The burger menu itself was made in the form of two closing lines that form a cross.
![Alt Text](https://media.giphy.com/media/cACoiAP0PTSMqdvZBJ/giphy.gif)

<strong>2. Artists</strong>
Now it's time to draw lists of artists. To do this, we need to break the information about artists into components and display them in the form of columns, which are divided by country categories.

```javascript
// ----- Picture Components
function PictureInfo(props) {
  return(
    <div className="picture__textWrap">
      <div className="picture__text">
        <h1 className="picture__date">{props.dateWritten}</h1>
        <p className="picture__name">{props.name}</p>
      </div>
    </div>
  );
}

function PictureImg(props) {
  return(
    <div className="picture__imgWrap">
      <div className="picture__img">
        <div className={`picture__imgBg ${props.imgBook}`}></div>
      </div>
    </div>
  );
}

function Picture(props) {
  return(
    <div className="picture">
      <div className="picture__info">
        <PictureInfo dateWritten={props.dateWritten} name={props.name} />
        <PictureImg imgBook={props.imgBook} />
      </div>
    </div>
  );
}

function Pictures(props) {
  return (
    <React.Fragment>
      {Object.entries(props.pictures || {}).map(([ i, j ]) => (
        <Picture key={i} name={i} {...j} />
      ))}
    </React.Fragment>
  );
}
// ----- END Picture Components


// ----- Painter Components
function PainterInfo(props) {
  return(
    <div className="painter__textWrap">
      <div className="painter__text">
        <h1 className="painter__name">{props.name}</h1>
        <p className="painter__years">{props.born} - {props.died}</p>
      </div>
    </div>
  );
}

function PainterImg(props) {
  return(
    <div className="painter__imgWrap">
      <div className="painter__img">
        <div className={`painter__imgBg ${props.class}`}></div>
      </div>
    </div>
  );
}

function Painter(props) {
  return(
    <a href="#" onClick={() => props.onClickLink(props)}>
      <div className={`painter ${props.active ? 'active' : ''}`} onClick={() => props.onClick(props)}>
        <div className="painter__info">
          <PainterInfo name={props.name} born={props.born} died={props.died} />
          <PainterImg class={props.class} />
        </div>
      </div>
    </a>
  );
}
// ----- END Painter Components


// ----- Сountries Components
function CountryTitle(props) {
  return(
    <div className="countryTitle">
      <h2 className="countryTitle__name">{props.name}</h2>
    </div>
  );
}
function Сountries(props) {
  return(
    <div className="swiper-slide">
      <CountryTitle name={props.name} />
      {Object.entries(props.painters).map(([ i, j ]) => (
        <Painter key={i} name={i} {...j} onClickLink={props.onSelectLink} onClick={props.onSelectWriter} active={i === props.selected} />
      ))}
    </div>
  );
}
// ----- END Сountries Components
```

And now we need to bring it all to our menu.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxqlv6s9kq3rm7o8llf7.png)

But here we have a problem. The fact is that we have 7 countries in our array, and a maximum of 4 fall into our field of view in the menu. To do this, we need to implement the slider function in our menu so that we can scroll through our list of countries.

To do this, I decided to use the <a href="https://swiperjs.com/">Swiper.js</a>. It was possible to simply implement this using `CSS` and `FLEX`, but I wanted the slider to be scrollable with gestures.

And here's what happened:
![Alt Text](https://media.giphy.com/media/Tc65wdG9L9WkQDFewb/giphy.gif)

<strong>3. Choosing a artist</strong>
The last thing left for us is to implement the artist selection function. To do this, we need that when we `click` on the artist we need, the information stored in the <a href="https://github.com/Kerthin/pradoMuseum-templateSait/blob/master/src/App.js">object</a> about the artist is transferred to our side menu, where paintings and more detailed information about the artist are displayed. It is important that the number of paintings is the same as it is prescribed in the <a href="https://github.com/Kerthin/pradoMuseum-templateSait/blob/master/src/App.js">object</a>. It is also necessary that the `menu closes` independently when choosing the artist we need.

![Alt Text](https://media.giphy.com/media/sVFwRufEGSe3lcQnwW/giphy.gif)

<h3>03. Side Menu</h3>
It remains to implement the side menu. It will be executed in the form of three columns. The `first` column will display brief information about the artist, the `second` will display paintings, and the `third` column will display more detailed information from the artist's life.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl0kya4agmf1r842dief.png)

Now you need to display information about the artist who was selected in the top menu in these columns.

![Alt Text](https://media.giphy.com/media/0tI1AF0JgbQma1IBoH/giphy.gif)

<h1>THE END</h1>
Well, that's it. I apologize in advance for the fact that the information was submitted very crumpled. But on the other hand, as I wrote earlier, I was not going to teach anyone anything in this article. In this post, I just wanted to demonstrate my old work and nothing more special.

> <a href="https://kerthin.github.io/pradoMuseum-templateSait/#" target="_blank"><h1>Full Prado Museum Demo</h1></a>

> {% github Kerthin/pradoMuseum-templateSait %}

Thank you for your attention. I hope that each of you has your favorite artist, whose works you can endlessly admire.

See you all later.
![Alt Text](https://media.giphy.com/media/HAhv0X86V7nzi/giphy.gif)