Сайт, чтобы показать мою удивительность
Зачем построить это?
Предположительно, портфель может быть полезен, когда вы ищете работу, и это может быть полезно при попытке проявления ваших проектов.
Цель этой недели было построить Сайт для моего портфолио . Я начал делать это много раз, но я продолжал подняться на передний конец и дизайнерские вещи. Итак, я решил, что я просто собираюсь сделать что-то простое с небольшим количеством Markdown и списком.
Требования
Я просто хотел список способов связаться со мной, что я делаю, и что я сделал.
Я не оказался только в списке. Я решил использовать фрагмент кода и определил некоторые переменные, чтобы показать мои проекты, статьи и ссылки.
Я буду честен, я не ожидал научиться сильно, когда просто строя сайт, который говорит: «Я знаю некоторые вещи».
Как только я закончил, писал все в Readme.md В моем Github Reppo я понял, что это было уродливым, а подсвечивание синтаксиса была подсчеты. Итак, я спросил в Twitter, о том, чтобы сделать это похоже на мою тему VS-кода и сказала о Prism.js. Итак, я продолжал узнать новые вещи JS.
Я так счастлив, Адам предложил Prism.js, поскольку я не с нетерпением ждал, чтобы заставить это выглядеть красиво.
Жидкая ошибка: внутренний
Что я выучил
JavaScript извлечена
Я никогда не нужен, ни хотела использовать синтаксис выделения за пределами того, какие сайты уже сделали для меня. Я был взволнован, чтобы узнать о Prism.js. . Сначала было немного запутано, но было не слишком сложно, чтобы использовать. Просто выберите свой язык, загрузите файлы JS и CSS и добавьте ссылку и скрипт на голову.
Скажу, я не хотел использовать встроенную цветную тему, поэтому мне пришлось скучить в Интернете для цветов, которые у меня есть в моем теме VS Code. Теперь это довольно близко. Единственная часть синтаксиса, которая не окрашена вправо, это F в моих F-струнах.
HTML-материалы Научился
На минимальной HTML-головке должен включать ЧАСТЬ , Вид на просмотр и а Название Отказ ( Ссылка )
Vicki Langer - Portfolio
К счастью, Майк напомнил мне, чтобы добавить их, или я, скорее всего, забыл.
В дополнение к требуемому голова Теги, я также нашел, что мой сайт выглядит хорошо, когда размещены в Twitter и Facebook.
Вот добавленные мета-теги для Twitter
и предварительный просмотр от Валидатор карты Twitter
Вот добавленные мета-теги для Facebook
и Предварительный просмотр от Facebook обменивается отладчиком
Наконец, мне нужно было добавить Фавикон. Я использовал Favicon.cc Pixelize мою фотографию на странице. Хотя, похоже, вы можете использовать их для анимации и делать другие аккуратные вещи.
Что дальше?
- Я хотел бы выяснить, как использовать какой-то жидкий бирк, чтобы потянуть содержимое моего файла Python в HTML
<Код>блокировать. - Я работаю, сделайте этот Screenreader доступным.
- Я хотел бы найти способ проверить способность скрининга
Ссылки
Ссылка на мое портфолио
Vickilanger/vickilanger.com.
Немного о Вики
""" my_portfolio.md: a introductory page about me and my awesomeness 13 January 2020 @vicki_langer """
Оригинал: “https://dev.to/vickilanger/showing-my-awesomeness-2jn9”