nextjs resume

Next.js dan Tailwind Resumé

Résume yang dibangun terutama dengan mempertimbangkan profesional perangkat lunak. Kesan calon majikan Anda dengan situs web resume yang indah dan sangat cepat, atau hasilkan PDF untuk email dan cetak.

Lihat contoh

Resume Anda juga dapat menghasilkan URL aman yang akan menampilkan informasi yang tidak dapat diakses di URL publik. Versi yang aman dapat mencakup informasi pribadi seperti email, nomor telepon, dan alamat surat. Anda dapat mengirim tautan pribadi ke pemberi kerja potensial atau menggunakannya untuk menghasilkan PDF yang lebih lengkap untuk diri Anda sendiri.

Fitur

• Perbarui resume Anda dengan file penurunan harga sederhana
  • Ketik Manajemen Konten yang Aman Menggunakan ContentLayer
  • Integrasi dengan sistem CMS eksternal akan dimungkinkan di masa depan
• Aplikasi web yang indah dan mudah diakses untuk melihat resume Anda, tautan di media sosial, dan mengirim ke calon pemberi kerja
• Gunakan tautan rahasia untuk menghasilkan resume dengan informasi pribadi tambahan
• Hasilkan PDF sesuai permintaan untuk melihat, mengunduh, atau mencetak dalam mode terang atau gelap
• Mudah disesuaikan
  • 19 palet warna aksen di luar kotak
  • 6 palet warna netral di luar kotak
  • Mode cahaya dan gelap otomatis untuk setiap palet
  • Kelas Tailwind untuk memodifikasi aplikasi dan gambar yang dihasilkan
• OG Dinamis Berbagi gambar dalam mode terang atau gelap

Teknologi

• Next.js
• Naskah
• Tailwind CSS
• ContentLayer
• React-PDF
• Warna Radix UI
• Perpustakaan Pengujian

Cara Menggunakan Proyek Ini

Proyek ini hanya memerlukan beberapa langkah untuk mengatur konfigurasi khusus Anda, menambahkan konten ke CMS internal, dan menggunakan Vercel atau Netlify!

Klon dan Deploy

Cara paling sederhana untuk memulai adalah mengkloning dan menggunakan dalam satu langkah. Setelah itu, Anda dapat mengedit CMS dan template agar sesuai dengan kebutuhan Anda.

Proyek ini dirancang untuk digunakan di Netlify atau Vercel. Anda dapat mengklik salah satu tombol berikut untuk mengkloning repo, mengatur variabel lingkungan, dan menggunakan.

Perkembangan

Untuk menyesuaikan resume Anda, klon proyek yang baru saja Anda buat ke mesin lokal dan cd untuk itu.

 cd my-resume
npm i

Saya telah menguji proyek dengan bun , npm , pnpm , dan yarn dan belum mengalami masalah penting. Untuk pengembangan default Test Runner ke bun .

Ubah Konfigurasi Kustom

Buka proyek di editor favorit, dan buka edit-me/config/ folder di root tempat Anda dapat mengedit file resumeConfig.ts untuk memenuhi kebutuhan Anda. File konfigurasi berisi konstanta berikut yang akan digunakan di seluruh proyek (ini diketik untuk memberikan pengecualian pelengkapan dan kesalahan yang sesuai):

• accentColor : AccentColor . Nama palet aksen dari warna Radix UI. Jika menggunakan warna standar, warna teks yang kontras akan berwarna putih, dan jika menggunakan warna cerah, warna teks yang kontras akan menjadi hitam.
• neutralColor : NeutralColor . Nama palet netral dari Radix UI Grays.
• appTheme : 'system' | 'light' | 'dark' . Jika appTheme diatur ke system , situs resume akan default ke preferensi sistem pengguna. Jika diatur ke light atau dark preferensi pengguna akan ditimpa.
• imageTheme : 'light' | 'dark' . Ikon OG Share Image dan Aplikasi Anda akan dihasilkan dalam varian cahaya atau gelap.
• pdfTheme : 'light' | 'dark' . PDF Anda akan dihasilkan dalam varian terang atau gelap.

Anda juga akan menemukan links.ts yang menghasilkan tautan eksternal di bagian bawah dokumen. Anda dapat menggunakan ikon apa pun dari ikon sederhana di samping tautan ini.

Contoh palet warna

Generator resume menyediakan 19 palet warna aksen dan 6 palet warna netral di luar kotak. Di bawah ini adalah tangkapan layar dari beberapa variasi dalam mode terang dan gelap.

Mode Cahaya	Mode gelap
Biru/lembu	Biru/lembu
Ruby/Grey	Ruby/Grey
Mint/slate	Mint/slate

Contoh gambar OG

Preferensi skema aksen, netral, dan warna Anda juga berlaku untuk gambar OG yang dihasilkan.

Mode Cahaya	Mode gelap
Biru/Slate	Biru/Slate

Siapkan CMS Anda

Selanjutnya, ubah data Mock CMS yang termasuk dalam edit-me/content/ . Setiap file markdown menggunakan bidang materi depan yang digunakan untuk menambahkan atribut ke item. Atribut ini jenis aman, sehingga proyek tidak akan berjalan jika bidang yang diperlukan hilang atau tidak valid. Sisa file markdown akan diterjemahkan sebagai HTML untuk memberikan deskripsi item.

Meskipun file tiruan harus cukup jelas, Anda dapat melihat konfigurasi ContentLayer untuk deskripsi terperinci dari bidang yang diperlukan dan opsional.

Variabel Lingkungan

Terlepas dari di mana aplikasi digunakan, mungkin perlu akses ke variabel lingkungan berikut:

• PRIVATE_KEY (Opsional): Ini adalah kode, ditentukan oleh penulis, yang akan memberikan akses URL ke versi resume yang mencakup informasi pribadi. Kami sarankan menghasilkan kode ini (misalnya A UUID atau menggunakan generator kata sandi).

Tautan pribadi

Proyek Anda dapat dikonfigurasi untuk memberikan URL rahasia yang akan menampilkan lebih banyak informasi daripada URL publik. Ini bermanfaat jika Anda ingin mengirim resume lengkap ke calon majikan, atau jika Anda ingin menghasilkan PDF untuk Anda gunakan sendiri. Dalam versi ini, Anda dapat menyertakan informasi pribadi seperti email, nomor telepon, dan alamat yang tidak Anda inginkan terlihat oleh masyarakat umum.

Pengaturan

URL pribadi hanya akan berfungsi jika Anda menambahkan variabel lingkungan PRIVATE_KEY . Jika bekerja secara lokal, Anda dapat menambahkan ini di file .env.local :

 PRIVATE_KEY=your-private-key

Anda kemudian dapat mengunjungi https://your-url.com/private/your-private-key untuk melihat versi pribadi dari resume.

Menambahkan konten pribadi

Untuk integrasi penurunan harga bawaan, harap dicatat bahwa Anda harus yakin untuk tidak melakukan informasi pribadi ke repo git publik . Hanya gunakan fitur ini dalam repo pribadi, dan bahkan kemudian perhatikan masalah keamanan seputar melakukan informasi pribadi kepada repo git mana pun.

Untuk menambahkan data pribadi ke CMS, cukup tambahkan ke folder privateFields .

• cms/privateFields/ . Tambahkan sebanyak mungkin bidang informasi kontak pribadi yang ingin Anda tampilkan. Mereka akan muncul dalam urutan yang diatur di folder, sehingga Anda dapat menggunakan awalan angka untuk memesannya.
  • label : String yang Diperlukan . Label bidang, seperti "email" atau "alamat".

Keamanan

URL pribadi ini hanya seaman orang yang Anda kirimkan . Untuk membatalkan URL pribadi lama, Anda hanya perlu mengubah variabel lingkungan PRIVATE_KEY .

Desain dan Kustomisasi

Template ini dibangun agar responsif, indah, dan dapat diakses langsung dari kotak. Ini mendukung tema mode gelap/terang otomatis dalam versi web, dan tata letak cetak satu halaman yang bagus di versi PDF. Proyek ini mendukung serangkaian konfigurasi minimal seperti warna aksen, tetapi jika Anda seorang pengembang atau desainer ujung depan, Anda dapat dengan mudah membuka kode sumber dan menyesuaikannya sesuai keinginan Anda.

Jika Anda benar -benar ingin melakukan kustomisasi jauh, Anda memiliki kontrol penuh atas konfigurasi tailwind di file root folder tailwind.config.ts .

Kami menggunakan pembuatan gambar Next.js untuk menghasilkan grafik terbuka dinamis (Facebook/Twitter) berbagi gambar dan ikon aplikasi. Anda dapat mengedit tata letak, gaya, dan teks gambar OG menggunakan kelas Tailwind di src/app/api/og/route.tsx dan ikon di src/app/icon.tsx .

Gambar berbagi dinamis ini akan menggunakan pengaturan accentColor khusus Anda, serta data dari CMS.

Mendapatkan pembaruan terbaru

Untuk menyinkronkan resume pribadi Anda dengan versi terbaru dari proyek ini, Anda dapat melakukan hal berikut:

// add the original repo as a git remote
git remote add upstream [email protected]:colinhemphill/nextjs-resume.git

// pull changes from upstream
git pull upstream main

Kemudian selesaikan konflik penggabungan dan buat perubahan yang Anda inginkan. Anda harus memeriksa changelog untuk melihat apa yang terjadi sejak terakhir kali Anda menarik, dan harap dicatat bahwa perubahan hulu dapat merusak kustomisasi Anda!