FinGanapre

Текст не вмещается просто. Зачем это задано классу button:
width: 170px;
height: 40px;

Уберите и будет ок. Вы же за счёт padding-ов и контента задаёте размер.

Начните с этого. Вы очень усложняете задачу. И не стоит дёргать DOM десять раз, если в итоге вам нужно добавить туда все 10 div. Соберите их в массив и разок добавьте всё вместе.

В вашем текущем варианте вы и элемент куда добавлять каждый раз ищите, хотя он не меняется и каждый div туда добавляете по одному. Это не самый лучший вариант. Плюс, шаблонные строки намного удобнее в данном случае, чем простая конкатенация (склеивание через +).

Ещё момент. Не проще ли будет в вашем случае завести массив с нужными url или получать их откуда-то с сервера, чем склеивать строку и делать цикл на 10. Тогда вы просто используя map преобразуете это к нужному шаблону и выведите в нужное место.

Это не кнопка. клик
Часто элемент заменяют для удобства оформления, например

Иконку кнопкой можно пристроить рядом, с похожими стилями, обернуть всё в общий контейнер с каким-нибудь data-input, ловить клики по кнопкам, чистить соседний инпут от кнопки.
<input type="text" value="" class="some-input">

body, html {
  background-color: black;
  color: white;
}

.some-input {
  border: none;
  border-bottom: 1px solid white;
  background-color: transparent;
  color: inherit;
  outline: none;
}

На бэкенде, в вашем случае wp, необходимо реализовать выдачу контента порциями. Ведь суть этого дела в минимизации объёма данных, которые поступают на клиентскую сторону. В адресную строку добавиться query параметр, указывающий номер страницы к примеру. Вы могли бы отдать все данные на клиент, оформить в виде слайдера с пагинацией, но это долго в плане загрузки, при большом объёме ещё и браузеру сложно рендерить дом. Ну и экономьте клиентам трафик, зачем их так не любить:)

Это в итоге должен быть сервис, на котором люди создают портфолио или это просто ваше личное портфолио будет тут размещаться?

когда я делал себе портфолио/резюме я добавлял следующее:
1. Базовую информацию о себе ( ФИО, дата рождения, подходящие должности, семейное положение, о себе, зп)
2. Образование
3. Опыт работы
4. Навыки (технологии/ПО/ОС/проф компетенции)
5. Портфолио. Проекты, в которых участвовал (название, дата, описание, ссылка если не nda) с сортировкой по годам
6. Книги (прочитал, читаю сейчас, хочу прочитать)
7. Курсы, сертификаты
8. Youtube каналы, которые смотрю с описание что полезного там нашёл, чему научился

Само резюме делил на 3 блока (резюме - то, о чём 8 пунктов, контакты, pdf )

В контактах собственно контакты и инфа о том согласен ли на релокацию и куда и на каких условиях с картой
В pdf экспорт в pdf:) Чтобы наполнять всё это дело и не париться с оформлением pdf.

Создайте за меню прозрачный div на весь экран и обработайте на нём клик. При желании, можно задавать ему какой-либо цвет если потребуется в дальнейшем затемнять всё, кроме меню, когда оно открыто.