Привіт!
Давненько не писав, але тепер знову почав публікувати статті на своєму особистому сайті. У цій статті хочу поділитись, чому та як я розробив нову версію свого сайту, використовуючи Next.js та Tailwind CSS.
Щороку я намагаюсь переписати свій особистий сайт, використовуючи нову технологію. Таким чином, я отримую можливість попрактикуватись з актуальними технологіями року та тримати сайт в актуальному стані. Раніше я створював сайт на HTML (односторінковий), PHP (блог), GatsbyJS (статичний сайт) та у 2022 році на Next.js.
Використані технології
На моєму сайті, крім Next.js та Tailwind CSS, я використав інструменти як shadcn/ui і Magic UI, щоб швидко та ефективно створити сучасний інтерфейс. Вже довгий час активно використовую Next.js у своїй кар'єрі.
Код проекту доступний на GitHub.
Логотип
Для особистого сайту я поки не зміг створити логотип. Оскільки я дуже детально підходжу до цього питання, досі не можу зробити остаточний вибір. Через моє прізвище використовую логотип з квіткою.
Додані новинки
Фільтрація статей
У новій версії сайту на сторінці блогу я додав не лише категорії, а й підкатегорії для фільтрації технічних та особистих статей. Оскільки кількість статей зростала, це стало необхідністю.
Закладки
У Chrome я часто зберігаю різні посилання, організовуючи їх по категоріях. Тепер я додав ці посилання на свій сайт, щоб інші могли скористатись ними, а я сам створив постійну архівну колекцію.
Дорожня карта
Це була ідея, яку я планував реалізувати вже давно, але не встиг. Я хотів створити дорожню карту для тих, хто хоче стати Frontend Developer. Це, звісно, моя особиста точка зору на основі досвіду та спостережень, тому вона може варіюватися для різних людей.
У верхньому меню ви можете знайти розділ освіта > дорожня карта з детальною інформацією. Натискаючи на блоки, ви зможете отримати додаткові відомості по кожному напрямку.
Сайт ще знаходиться на етапі розробки. Я продовжую додавати нові функції.
Ви можете стежити за проектом на GitHub, поставити зірочку, скопіювати його та адаптувати під себе. Якщо ви помітите помилку або маєте пропозиції, будь ласка, повідомте мене.
Мій особистий сайт: omergulcicek.com
Instagram: @omerilekesfet
Ви можете підтримати мене, поставивши "аплодисменти" 🌹
Перекладено з: Kişisel Sitemin Yeni Arayüzü: Next.js ve Tailwind CSS ile Geliştirildi