Портфолио 2.0
Уебсайт за представяне на моите предишни проекти, с обяснения как са били изградени, пред какви предизвикателства съм се изправил и как съм ги преодолял.
Детайли за проекта
Продължителност
2 Седмици
Роля
Създател, Fullstack Инжинер
Технологии
Преглед на проекта
Моят личен портфолио уебсайт се роди от нуждата от едно единно място, където мога да споделям своите мисли със света и да представям работата си.
Като създател на личния си уебсайт имах свободата да експериментирам с различни технологии, но избрах да го изградя с помощта на популярни и доказани решения като Next.js 16 с App Router. За управление на съдържанието използвах Sanity CMS за структурирани данни, а Turso ми помогна за съхранението на имейл абонаментите.
Предизвикателство
Основното препятствие беше използването на Next.js за първи път. След като през по-голямата част от кариерата си съм работил с по-традиционни технологии, преминаването към нещо толкова модерно и структурирано като Next.js беше освежаващо. Все пак, това изискваше време за четене на документацията и проучване на добрите практики. В крайна сметка успях да го внедря успешно.
Целта беше ясна: да създам модерен и бърз уебсайт с лесен начин за добавяне на структурирано съдържание, без да е необходимо да се променя кодът.
- Стремеж към добър до перфектен Lighthouse резултат за производителност.
- Създаване на модерен потребителски интерфейс с анимации.
- Добавяне и обновяване на съдържание без да е необходимо да променяте кода.
Решение
Постигането на висок Lighthouse резултат не беше толкова лесно, колкото очаквах първоначално.
Трябваше внимателно да проверя размера на bundle-ите на всяка използвана библиотека и да оценя начина, по който са интегрирани. Някои библиотеки предлагаха оптимизирани bundle-и, докато други не, което в крайна сметка се оказа ключов фактор при избора на едно решение пред друго.
Ключови характеристики
Плавна анимация при скролиране
Използването на библиотеката Lenis беше изключително лесно, както и много удовлетворяващо. Тя направи уебсайта да изглежда жив, премиум и завършен.
Респонсив дизайн
Респонсив дизайн, който обхваща всички устройства – всичко изглежда подобава, независимо от типа устройство.
Оптимизиран за производителност
Бързо зареждане. Най-новите функции на Next.js гарантират производителност и оптимизация.