Все, что делаешь, надо делать хорошо, даже если совершаешь безумство.
Оноре де Бальзак
[19.06.2023]
Итак, сегодня наконец-то начал думать о том, как же будет выглядеть моё портфолио после редизайна. И это спустя год и семь месяцев с того момента, когда я собирался этим заняться.
Сел делать и понял, что идей вообще никаких. Попытался «закинуть удочку» разным знакомым по поводу идей… Но как обычно — надежда только на самого себя.
Главное — я хочу сделать этот проект полностью запротоколированным. Поэтому буду делать такие вот заметки в стиле дневника и опубликую только после того, как сайт будет закончен и размещён на хостинге вместо ныне существующего.
Кстати, из того, что уже сделал — нарисовал первый макет и создал новый репозиторий на GitHub. Макет довольно примитивный пока и практически полностью копирует нынешнее портфолио. Но это то, от чего я буду отталкиваться и что буду менять.
И ещё — в этот раз я решил делать сайт с самого начала: документирование, макетирование, верстка, заливка на хостинг, тестирование и отладка. Я хочу пройти весь этот путь ещё и как тестировщик — пусть будет небольшой опыт. Поэтому в Trello создал отдельную доску «Редизайн портфолио» где буду также фиксировать все шаги.
Ещё сегодня перерисовал логотип. Теперь он уже скорее мой личный:
Хотел сделать также в оттенках серого, но мне не понравилось, как оно смотрится:
Работы ещё — непочатый край. Один только выбор цветового оформления чего стоит. А ещё ведь и шрифты подбирать.
Я даже думал пойти по пути наименьшего сопротивления и сделать портфолио таким же, как сайт. Но потом решил, что это не самая удачная идея. Надо придумать что-то более интересное.
[20.06.2023]
Итак, я определился со стилем — это будут элементы стекломорфизма (glassmorphism). Просто изучать все эти тренды можно до бесконечности. А это и красиво, и функционально.
Сегодня попробовал сделать главную страницу сайта и простенький стиль к нему. Но вот прикрутить фон к странице не удалось — надо делать полную вёрстку страницы. А я пока так и не придумал, какие блоки и как они будут располагаться. Тот макет, что нарисовал вчера, мне вообще не нравится. Надо переделывать.
Решил, что надо попробовать использовать асимметрию в расположении блоков. Но потом вспомнил, что с grid-размёткой это будет непросто. Да ещё надо помнить и об адаптивности. Короче, размышлений ещё не на один день. Хорошо хоть больше не буду лезть во все эти статьи с трендами в дизайне пользовательских интерфейсов.
Сложности с которыми столкнулся:
- фон должен быть неоднотонным и ярким, но в тоже время не должен отвлекать на себя всё внимание;
- общая цветовая гамма однозначно должна быть тёмной и это вызывает дополнительные сложности в подборе фона;
- определиться с количеством и расположением блоков с информацией.
[21.06.2023]
Сегодняшний день был посвящен тому, чтобы подобрать фон для будущего сайта и продумать цветовую палитру.
Как обычно столкнулся с проблемами — нужно было правильно соединить градиентную цветную фоновую заливку и картинки. Просто раз уж я решил использовать стиль стекломорфизма, то фон не может быть однородным и одноцветным. Нужен контраст для того, чтобы выделять «акриловый» эффект отдельных элементов сайта.
После довольно продолжительного чтения различных статей, посвященных фоновым цветам и картинкам, вот что у меня получилось:
Второй элемент, которым сегодня занимался — это хэдер. Пока сделал заголовок сайта и меню. Мне ужасно не нравятся эти огромные пункты меню. Но пока ничего более краткого не придумал. Поэтому будет так:
[22.06.2023]
Сегодня закончил оформление подвала (footer). Пока оставлю так. А там посмотрим.
Долго думал над меню. И пока реализовал два варианта — на ПК меню будет сверху (в «шапке»), а на мобильных устройствах — снизу (в «подвале»).
Ну и решил наконец-то убрать эти ужасные рамки, которые сбивают с толку. За одно доделал футер. И пока остановился на таком вот варианте рамки:
Следующий шаг — оформление центрального блока с основной информацией. Но тут тоже не всё так просто — есть кое-какие мысли, которые завтра попробую осуществить на практике, если получится.
[23.06.2023]
Доделал размётку центрального блока с основной информацией на главной странице сайта. Пока без этой самой информации:
[25.06.2023]
Вчера день пропустил. Сегодня же сделал оформление ссылок. А еще заполнил главную страницу.
Но главное, решил загрузить весь наработанный материал на GitHub. Надо чтобы сохранялись все версии и чтобы можно было вернуться к чему-то более раннему, если вдруг передумаю.
Главная страница сейчас выглядит так:
Посмотрел сейчас и подумал, что ссылки надо сделать более тёмными в обычном состоянии. А при наведении курсора пусть и становятся белыми.
[26.06.2023]
Начал работать над оптимизацией сайта под мобильные устройства. Нельзя это откладывать, потому что потом придётся переделывать сразу слишком многое.
Обдумываю вероятность того, что сделаю главную страницу в виде лендинга. Посмотрел, что есть по этой теме в интернете — стало грустно: всё либо устарело, либо какое-то смешное и несерьёзное. Ну или, естественно, платное. Поэтому пока эту идею отложу «в долгий ящик».
Сегодня попробовал поменять своё фото — убрал фон. Думаю, так и сделаю — без фона. Надо будет только продумать, что делать с этим белым контуром у волос.
Кроме того, «зафиксировал» футер. Сделал это из расчёта на лендинг. Но теперь думаю — верну всё обратно.
Сравнил два последних фото и понял, что пора дорабатывать фон — делать его таким, каким он должен быть на самом деле на сайте, а не эти треугольники. Или возвращать фон у моего фото.
[08.07.2023]
Смотрел я как выглядит всё это на большом (очень большом!) экране и понимал, что мне это совсем не нравится.
У меня даже нет желания продолжать его делать. Мне не нравится как оно смотрится. Да, есть то, что нравится. Но в целом — ужасно.
[09.07.2023]
Как бы не было мне тяжело это признавать, но я не буду продолжать ту версию, что начал делать самостоятельно.
Решил взять готовую тему и ее редактировать под себя. Уже даже определился с темой и даже сделал тестовый сайт, ссылку на который, естественно, оставлять не буду, потому что когда опубликую этот пост, она уже будет нерабочей. Поэтому опять картинки:
Сегодня отредактировал и наполнил три раздела — «Обо мне», «Опыт» и «Образование». Есть мечта поменять местами «Опыт» и «Образование». Но боюсь испортить весь шаблон. Хотя…
Кроме того, надо что-то делать со шрифтами и цветами, потому что русский язык в этих шрифтах не поддерживается и поэтому заголовки и текст смотрятся весьма убого.
[20.07.2023]
Решил всё-таки поменять цвета на сайте. И теперь он выглядит как-то так.
За одним сменил и шрифты и их цвета. Постарался подобрать такие на замену оригинальной латинице, чтобы текст на кириллице смотрелся также, как в оригинале.
[28.07.2023]
Когда начал делать раздел «Работа», то сразу подумал о том, что использовать таблицы на странице — очень плохая идея. Но вот только замену им довольно сложно найти. Более наглядное представление, чем таблицы, дают только визуальные концепты — диаграммы, графики. Но сделать график используя только html и css оказалось не так то просто. В итоге воспользовался готовым ресурсом, который позволяет создавать довольно красивые и информативные графики на страницах сайта.
Размещать на странице решил под спойлером. Благо в шаблоне уже заложены спойлеры. Получились такие симпатичные графики.
Ниже один из графиков представлен в интерактивном режиме.
[13.08.2023]
Спустя больше месяца после того, как я поменял шаблон сайта, наконец-то почти доделал новое портфолио. Есть ещё над чем поработать (например, раздел «Интересы»). Но основную работу я почти закончил.
Сегодня вот сделал в разделе «Работа» новые подразделы. А главное — переделал их техническую реализацию. Решил отказаться от кнопок-спойлеров и реализовал через ссылки-аккордеоны. Смотрится лучше и работает интереснее.
Также добавил ссылки на дипломы в разделе «Образование». Сделал так, что по нажатию на кнопку открывается модальное окно, в котором можно посмотреть соответствующий диплом или даже скачать его. Надо ещё также сделать раздел с повышением квалификации — туда надо тоже добавить дипломы и удостоверения.
Наконец-то оформил раздел «Достижения». Не особо много у меня значимых достижений. Но уж что есть.
[18.08.2023]
Вчера и сегодня занимался разделом «Достижения» — переписал, наконец-то свои достижения за последние годы. Но главное — сегодня придумал, как будут выглядеть все эти бесконечные сертификаты, дипломы и грамоты, которые получают на различных мероприятиях.
Хотел сделать в виде интерактивной фотогалереи, но пока что-то не удалось её запустить — упускаю какую-то деталь. В итоге получилась статичная галерея, которая довольно симпатично выглядит.
Теперь мне осталось дооформить разделы «Навыки» и «Интересы». С навыками я уже наполовину закончил, а вот за интересы ещё и не брался.
[31.08.2023]
Вот и закончил. Сегодня доделал разделы «Навыки» и «Интересы». А ещё сделал ссылки в разделе «Образование» на подтверждающие документы с курсов, которые я закончил. Ещё можно будет подумать о том, как сделать их визуальными. Сейчас они открываются в новой вкладке в виде документа, который лежит в облаке.
Кстати, ещё решил обновить иконку сайта.
На этом эпопея по обновлению портфолио завершается. Хотя вряд ли можно её завершить по-настоящему. Всё равно придётся что-то «допиливать» и доделывать. Но пока — всё!
Новая версия портфолио доступно по тому же адресу — a-kalashnikov.ru
Может быть еще немного переделаю свой сайт — temo4kin.ru.
P.S. Уже опубликовал пост и понял, что в разделе «Работа» у меня не опубликованы рабочие программы по предметам. Надо будет этим заняться.
