Напиши мне сайт из элементов его концепта, которые я составил в Figma. Предоставь файлы HTML, CSS и JS отдельно. Учти все условия, что я распишу. Дай мне не пример сайта, а готовый сайт, учитывающий все мои пожелания.

Сайт должен быть таким:
* Наведение курсором на пункты боковой панели должно подсвечивать их;
* Сайт должен динамически подстраиваться под размер окна браузера;
* На сайте должен быть список проектов и поиск нём с фильтрами (на выбор людям даются, которые могут содержать эти проекты и по которым их можно отсеивать) и вариантами сортировки по количеству скачиваний, подписчиков, общей популярности, дате обновления и по алфавиту;
* На боковой панели должен быть пункт настроек, при нажатии на который мы открываем этот раздел и в нём есть возможность сменить язык сайта и выбрать цветовую схему (зелёная светлая, зелёная тёмная, розовая светлая, розовая тёмная). В зависимости от выбора меняются все цвета на сайте, не только в основной части сайта (то есть, боковую панель это тоже касается);
* Любые изменённые настройки должны сохраняться;
* Боковая панель должна быть свёртываемой.


# Элементы с Figma

## Страница

### Layout

```
/* ПК */
position: relative;
width: 1863px;
height: 920px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 0px;
```

### Style

```
border: 2px solid rgb(0, 0, 0);
background: rgb(247, 249, 247);
```

## Боковая панель

### Layout

```
/* Боковая панель */
position: static;
width: 320px;
height: 918px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20;
padding: 20px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
```

### Style

```
background: rgb(235, 245, 236);
```

## Боковая панель → Заголовок

### Layout

```
/* Заголовок */
position: static;
width: 280px;
height: 81px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;


/* Inside Auto Layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
margin: 20px 0px;
```

## Боковая панель → Заголовок → Дефлекта

### Layout

```
/* Дефлекта */
position: static;
width: 260px;
height: 61px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
```

### Font Layout

```
color: rgb(11, 76, 19);
font-family: Days One;
font-size: 48px;
font-weight: 400;
line-height: 61px;
letter-spacing: 0%;
text-align: left;
```

### Content

```
Дефлекта
```

## Боковая панель → Пункты панели

### Layout

```
/* Пункты панели */
position: static;
width: 280px;
height: 478px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10;
padding: 0px;


/* Inside Auto Layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
margin: 20px 0px;
```

## Боковая панель → Пункты панели → Главная

### Layout

```
/* Главная */
position: static;
width: 164px;
height: 51px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 5px 10px 5px 10px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 10px 0px;
```

## Боковая панель → Пункты панели → Обо мне

### Layout

```
/* Обо мне */
position: static;
width: 169px;
height: 51px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 5px 10px 5px 10px;


/* Inside Auto Layout */
flex: none;
order: 1;
flex-grow: 0;
margin: 10px 0px;
```

## Содержание раздела

### Layout

```
/* Страница */
position: static;
width: 1543px;
height: 920px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 0px;


/* Inside Auto Layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 1;
margin: 0px 0px;
```

## Содержание раздела → Вверхняя часть

### Layout

```
/* Верх */
position: static;
width: 1543px;
height: 898px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10;
padding: 0px 20px 0px 20px;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
```

## Содержание раздела → Промотка списка к верху

### Layout

```
/* Frame 16 */
position: static;
width: 800px;
height: 51px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 10px 20px 10px 20px;


/* Inside Auto Layout */
flex: none;
order: undefined;
flex-grow: 0;
margin: 0px 0px;
```

### Style

```
border-radius: 20px;

box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
background: rgb(247, 249, 247);
```

## Содержание раздела → Нижняя часть

### Layout

```
/* Низ */
position: static;
width: 1543px;
height: 150px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10;
padding: 20px;


/* Inside Auto Layout */
flex: none;
order: 1;
flex-grow: 1;
margin: 0px 0px;
```