origami1024

Нужно всего-навсего изменять css св-во stroke-dashoffset у svg-тэга <circle>

Вот базовый пример

Думаю есть около 3-х вариантов:
1. Через css на flex свойством order
2. Через css на grid свойством grid-template-areas
3. Через js dom методы типа insertBefore, insertAfter - не удобно для разметки

Вместо
description={findDescription()}
используй
description={allFind.shift()}

Скорее всего это не mix-blend, а что-то типа:
1) 2 span-а с одинаковым текстом - наложенны друг на друга через position: absolute;
2) белый span идет в разметке после черного, чтобы был поверх
3) у белого спана overflow: hidden и рассчитывается width, чтобы подходила под зеленую полосу.

Вот вариант реализации

Тут не нужно парсить что-то, просто забирай из API данные.
Например список стран тут: https://de1.api.radio-browser.info/json/countries
Данные по конкретной стране так: https://de1.api.radio-browser.info/json/stations/b...

Например, через requests.get:

import requests
raw = requests.get("https://de1.api.radio-browser.info/json/stations/bycountryexact/Ukraine")
print(raw.content)

Ну и конвертируй JSON в объект так, для полноты ответа:

import json
jsoned = json.loads(raw.content)
print(jsoned[0])

#requests - для скачки странички
import requests
#html из lxml - чтобы парсить DOM дерево
from lxml import html

#забираем страничку с нефтью
raw = requests.get("https://yandex.ru/news/quotes/1006.html")

#строим из нее html дерево
dom = html.fromstring(raw.content)

#забираем xpath-ом ноды с датами и ценами из дерева
dates = dom.xpath('//td[@class="quote__date"]')
prices = dom.xpath('//td[@class="quote__value"]')    

#выводим на экран
for d,p in zip(dates, prices):
    print(d.text_content(), p.text_content())

Сандбокс для тестов
https://repl.it/@Origami1024/pythonOilParser

Зависит что с ним нужно делать, если содержимое менять, то можно через css переменную его задать. Саму переменную можно менять через js

% 7

Это баг отображения в хроме, решить можно плясками с размерами блока, например:

.block2 { 
  margin-top: -1px;
  border-top: 1px solid black;
}

П. С. у меня линия появлялась только во время ресайза окна

Можно и без гридов, используй flex-wrap и order

const getUsers = async () => {
    let real_result = await pool.query('select * from users', (err, result) => {
        if (err) {
            console.log(err);
        }
        return result.rows;
    });
  return real_result;
}

let data = [];
getUsers().then((result) => {
    data = result;
    console.log(data);
});

<a :class="{active: item == currentlyActiveItem}">{{item}}</a>

active - это название класса
item - это то что у тебя уже используется в цикле
currentlyActiveItem - переменная из data, хранящая текущий актив итем

https://ru.vuejs.org/v2/guide/class-and-style.html - вот почитать
https://codepen.io/Bondar/pen/OzWYNd - вот еще примерчиг

$_POST['name'] - это распозналось бы если бы ты отправил переменную как form_data
Ты отправляешь просто raw данные
Чтобы посмотреть что ты получаешь на вход в PHP используй
file_get_contents('php://input')

P. S. json_decode на это не сработает, так как не валидный json.
Валидный json выглядит так: {"name": "test"}

Возможно, раздел официальной доки называется mixed charts:
https://www.chartjs.org/docs/latest/charts/mixed.html

И вот пример по нагляднее, тоже с официального сайта:
https://www.chartjs.org/samples/latest/charts/comb...

Конкуренция усилилась - все сидят по домам и изучают веб.
Начинать нужно с должности веб тестировщика, или чего-то, где основные инструменты будут скорее всего google dev tools и postman. Требования на такую должность - что-то вроде большой action per minute в старкрафте, но денег только на мивину дают
Портфолио нормальное сидя в одночку дома придумывая проекты от балды можно только по очень большой случайности сделать.