Tutorial langkah demi langkah untuk membangunkan laman web portfolio yang sempurna menggunakan rangka kerja Next.js untuk akses yang lebih baik kepada sumber portfolio melalui laman web yang menarik secara visual dengan animasi zarah yang bagus dan peralihan yang lancar dan sumber interaktif untuk pengalaman yang dipertingkatkan. berikut ialah pautan langsung my-portfolio
? Ciri-ciri
- Reka bentuk responsif untuk semua peranti
- Latar belakang zarah interaktif
- Peralihan halaman yang lancar
- Pameran projek dinamik
- Borang hubungan dengan pengesahan e-mel
- CV boleh dimuat turun
- Integrasi media sosial
- Bahagian blog
- Visualisasi kemahiran profesional
- Sokongan docker untuk kontena
?️ Dibina Dengan
- Seterusnya.js 14
- React 18
- CSS Tailwind
- Gerakan Pembingkai
- Ikon React
- Penyapu
- TSPartikel
- Komponen UI Radix
- Pelabuh
?♂️ Bermula
Prasyarat
- Node.js 18 atau lebih tinggi
- npm atau benang
Pemasangan
- Klon repositori:
- Pasang kebergantungan:
- Jalankan pelayan pembangunan:
- Buka http://localhost:3000 dalam penyemak imbas anda.
Jika Anda Lebih Suka Persediaan Docker
- Bina imej Docker:
- Jalankan bekas:
? Struktur Projek
? Kerahan
Projek ini boleh digunakan pada Vercel dengan langkah berikut:
- Tolak kod anda ke GitHub
- Sambungkan repositori anda ke Vercel
- Gunakan dengan satu klik
? Pembolehubah Persekitaran
Buat fail .env.local dalam direktori akar:
? Menyumbang
- Fork repositori
- Buat cawangan ciri anda (ciri git checkout -b/AmazingFeature)
- Komit perubahan anda (git commit -m 'Tambah beberapa AmazingFeature')
- Tekan ke cawangan (ciri asal tolak git/AmazingFeature)
- Buka Permintaan Tarik
? Lesen
Projek ini dilesenkan di bawah Lesen ISC - lihat fail LESEN untuk mendapatkan butiran.
? Pengarang
Bibek Thapa
- LinkedIn: bibek-thapa1
- GitHub: @B-KEY
? Ucapan terima kasih
- Pasukan Next.js untuk rangka kerja yang menakjubkan
- Vercel untuk pengehosan
- Semua penyumbang sumber terbuka
- Sebahagian inspirasi daripada cristianmihai01
Atas ialah kandungan terperinci Membina Portfolio Peribadi Moden'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!