Живий перегляд: jihed-hagui.vercel.app

Підніміть свою цифрову присутність на новий рівень

Забудьте про типові пласкі сайти-портфоліо.

Кінематографічний інтерактивний шаблон портфоліо для розробників, дизайнерів, креативних технологів і цифрових митців, які хочуть, щоб їхні роботи сприймалися як досвід.

Працює на Next.js 14, Three.js, React Three Fiber, GSAP та Lenis і поєднує 3D у реальному часі, імерсивний рух, інтерактивний звук та ретельно продумані переходи в єдиний незабутній цифровий досвід.

Створено, щоб привертати увагу, ефектно презентувати ваші роботи та залишати перше враження, яке вирізняє вас.

Ключові можливості

3D WebGL у реальному часі

Інтерактивні 3D-враження на базі Three.js і React Three Fiber з авторськими сценами, зокрема Черепом, Шаховим конем і Мислителем.

Оптимізований рендеринг зберігає чутливість інтерфейсу та візуальну якість 3D-середовищ.

Кінематографічні анімації

GSAP ScrollTrigger, плавне прокручування Lenis, Framer Motion, авторські взаємодії з фізичною логікою, ефекти віяла з карток і кінематографічні переходи створюють портфоліо, що здається живим від першого прокручування до останнього розділу.

Імерсивний звуковий ландшафт

Вбудована система Web Audio додає атмосферний шар до перегляду сайту.

Інтерактивний аудіовідгук і ретельно інтегрований звуковий дизайн роблять портфоліо більше схожим на цифровий досвід, ніж на традиційний вебсайт.

Легке налаштування

Створено так, щоб його можна було налаштовувати, не борючись із кодом.

Оновлюйте особисті дані, проєкти, кольори, посилання та інший вміст, не порушуючи основної архітектури.

Готова контактна форма

Інтеграція з Resend API для надійної доставки повідомлень із контактної форми.

Підключіть дані своєї пошти та отримуйте запити просто з портфоліо.

Адаптивна продуктивність

Створено з урахуванням продуктивності як на десктопі, так і на мобільних пристроях.

Адаптивні 3D-налаштування, респонсивні макети, оптимізований рендеринг і керування продуктивністю залежно від пристрою допомагають зберігати плавність на різних розмірах екрана.

Чистий і добре прокоментований код

Повністю написано на TypeScript і організовано в чисту модульну архітектуру.

Код ретельно прокоментований у всьому проєкті, тож легше зрозуміти, як працюють різні системи і де вносити зміни.

Жодних відкритих API-ключів. Жодної зайвої складності. Жодного заплутаного коду.

Повна документація

До проєкту додається окремий файл README.

Він охоплює основні кроки: встановлення залежностей, налаштування проєкту, запуск сервера розробки, налаштування змінних середовища та підготовку портфоліо до розгортання.

Технології

Фреймворк
Next.js 14
React 18
TypeScript

3D
Three.js
React Three Fiber
@react-three/drei

Анімація
GSAP
ScrollTrigger
Framer Motion
Lenis

Стилі
Tailwind CSS

Стан і звук
Zustand
Web Audio API

Пошта
Resend API

Для кого

Креативні розробники
Фронтенд-розробники
Фулстек-розробники
3D-художники
UI/UX-дизайнери
Креативні директори
Цифрові агенції
Фрилансери

Чи ви показуєте інженерію, дизайн, 3D-арт, експериментальні проєкти чи креативну розробку, шаблон дає вашим роботам візуальне середовище, на яке вони заслуговують.

Налаштування

Почати можна за кілька кроків.

1. Завантажте вихідний код.

2. Дотримуйтеся вкладеного README.

3. Встановіть залежності.

4. Налаштуйте змінні середовища.

5. Додайте свій особистий вміст.

6. Запустіть сервер розробки.

7. Розгорніть своє портфоліо.

Досвід

Це не ще одне портфоліо, збудоване навколо головного блоку, сітки проєктів і кнопки контакту.

Воно створене навколо іншої ідеї:

Саме портфоліо має стати частиною роботи.

Кінематографічне цифрове середовище, де технології, рух, звук і візуальне оповідання поєднуються, щоб ваші роботи неможливо було не помітити.

Не просто показуйте свої роботи.
Створіть навколо них досвід.