nextjs resume
1.0.0
ประวัติย่อที่สร้างขึ้นโดยเฉพาะอย่างยิ่งกับผู้เชี่ยวชาญด้านซอฟต์แวร์ในใจ สร้างความประทับใจให้นายจ้างที่มีศักยภาพของคุณด้วยเว็บไซต์ประวัติย่อที่สวยงามและรวดเร็วอย่างไม่น่าเชื่อหรือสร้าง PDF สำหรับอีเมลและสิ่งพิมพ์
ดูตัวอย่าง
ประวัติย่อของคุณยังสามารถสร้าง URL ที่ปลอดภัยซึ่งจะแสดงข้อมูลที่ไม่สามารถเข้าถึงได้บน URL สาธารณะ เวอร์ชันที่ปลอดภัยสามารถรวมข้อมูลส่วนตัวเช่นอีเมลหมายเลขโทรศัพท์และที่อยู่ทางไปรษณีย์ คุณสามารถส่งลิงค์ส่วนตัวไปยังนายจ้างที่มีศักยภาพหรือใช้เพื่อสร้าง PDF ที่สมบูรณ์ยิ่งขึ้นสำหรับตัวคุณเอง
โครงการต้องการเพียงไม่กี่ขั้นตอนในการตั้งค่าการกำหนดค่าที่กำหนดเองของคุณเพิ่มเนื้อหาลงใน CMS ภายในและปรับใช้กับ Vercel หรือ Netlify!
วิธีที่ง่ายที่สุดในการเริ่มต้นคือการโคลนและปรับใช้ในขั้นตอนเดียว หลังจากนั้นคุณสามารถแก้ไข CMS และเทมเพลตเพื่อให้ตรงกับความต้องการของคุณ
โครงการได้รับการออกแบบมาเพื่อนำไปใช้กับ NetLify หรือ Vercel คุณสามารถคลิกหนึ่งในปุ่มต่อไปนี้เพื่อโคลน repo ตั้งค่าตัวแปรสภาพแวดล้อมและปรับใช้
ในการปรับแต่งประวัติย่อของคุณให้โคลนโครงการที่คุณเพิ่งสร้างขึ้นในเครื่องและ cd ในพื้นที่ของคุณ
cd my-resume
npm i ฉันได้ทดสอบโครงการด้วย bun , npm , pnpm และ yarn และยังไม่ได้พบปัญหาที่น่าสังเกต สำหรับการพัฒนานักวิ่งทดสอบเริ่มต้นเป็น bun
เปิดโครงการในตัวแก้ไขที่ชื่นชอบและเปิด edit-me/config/ Folder ที่รูทที่คุณสามารถแก้ไขไฟล์ resumeConfig.ts เพื่อตอบสนองความต้องการของคุณ ไฟล์ config มีค่าคงที่ต่อไปนี้ที่จะใช้ตลอดทั้งโครงการ (พิมพ์เพื่อให้การตรวจสอบอัตโนมัติและการตรวจสอบข้อผิดพลาดที่เหมาะสม):
accentColor : AccentColor ชื่อของจานสีสำเนียงจากสี Radix UI หากใช้สีมาตรฐานสีข้อความที่ตัดกันจะเป็นสีขาวและหากใช้สีสดใสสีข้อความที่ตัดกันจะเป็นสีดำneutralColor : NeutralColor ชื่อของจานสีกลางจาก Radix UI GraysappTheme : 'system' | 'light' | 'dark' . หาก appTheme ถูกตั้งค่าเป็น system เว็บไซต์Résuméจะเริ่มต้นตามการตั้งค่าระบบของผู้ใช้ หากตั้งค่าเป็น light หรือ dark การตั้งค่าของผู้ใช้จะถูกครอบงำimageTheme : 'light' | 'dark' . ไอคอน Image และแอพ OG ของคุณจะถูกสร้างขึ้นในแสงหรือตัวแปรมืดpdfTheme : 'light' | 'dark' . PDF ของคุณจะถูกสร้างขึ้นในแสงหรือตัวแปรมืด นอกจากนี้คุณยังจะพบ links.ts ที่สร้างลิงก์ภายนอกที่ด้านล่างของเอกสาร คุณสามารถใช้ไอคอนใด ๆ จากไอคอนง่ายๆควบคู่ไปกับลิงก์เหล่านี้
เครื่องกำเนิดไฟฟ้าRésuméให้บริการจานสีสำเนียง 19 ชุดและจานสีที่เป็นกลาง 6 สีนอกกรอบ ด้านล่างนี้เป็นภาพหน้าจอจากรูปแบบสองสามรูปแบบทั้งในโหมดแสงและมืด
| โหมดแสง | โหมดมืด |
|---|---|
สีน้ำเงิน/สีม่วง  | สีน้ำเงิน/สีม่วง  |
ทับทิม/สีเทา  | ทับทิม/สีเทา  |
มิ้นต์/กระดานชนวน  | มิ้นต์/กระดานชนวน  |
การตั้งค่ารูปแบบสำเนียงความเป็นกลางและสีของคุณยังใช้กับอิมเมจ OG ที่สร้างขึ้น
| โหมดแสง | โหมดมืด |
|---|---|
สีน้ำเงิน/กระดานชนวน  | สีน้ำเงิน/กระดานชนวน  |
ถัดไปแก้ไขข้อมูล Mock CMS ที่รวมอยู่ใน edit-me/content/ แต่ละไฟล์ Markdown ใช้ฟิลด์สสารด้านหน้าที่ใช้เพื่อเพิ่มแอตทริบิวต์ให้กับรายการ แอตทริบิวต์เหล่านี้มีความปลอดภัยประเภทดังนั้นโครงการจะไม่ทำงานหากฟิลด์ที่ต้องการหายไปหรือไม่ถูกต้อง ส่วนที่เหลือของไฟล์ Markdown จะแสดงเป็น HTML เพื่อให้คำอธิบายของรายการ
แม้ว่าไฟล์จำลองควรอธิบายตนเองได้ แต่คุณสามารถดู ContentLayer Config สำหรับคำอธิบายโดยละเอียดเกี่ยวกับฟิลด์ที่จำเป็นและฟิลด์เสริม
ไม่ว่าแอพจะถูกปรับใช้ที่ไหนอาจต้องเข้าถึงตัวแปรสภาพแวดล้อมต่อไปนี้:
PRIVATE_KEY (เป็นทางเลือก): นี่คือรหัสที่กำหนดโดยผู้เขียนซึ่งจะให้การเข้าถึง URL ไปยังประวัติย่อรุ่นที่มีข้อมูลส่วนตัว เราขอแนะนำให้สร้างรหัสนี้ (เช่น UUID หรือใช้ตัวสร้างรหัสผ่าน) โครงการของคุณสามารถกำหนดค่าเพื่อให้ URL ลับที่จะแสดงข้อมูลมากกว่า URL สาธารณะ สิ่งนี้มีประโยชน์หากคุณต้องการส่งประวัติย่อให้กับนายจ้างที่มีศักยภาพหรือหากคุณต้องการสร้าง PDF สำหรับการใช้งานของคุณเอง ในเวอร์ชันนี้คุณสามารถรวมข้อมูลส่วนบุคคลเช่นอีเมลหมายเลขโทรศัพท์และที่อยู่ที่คุณไม่ต้องการให้ประชาชนทั่วไปมองเห็นได้
URL ส่วนตัวจะทำงานได้ก็ต่อเมื่อคุณเพิ่มตัวแปรสภาพแวดล้อม PRIVATE_KEY หากทำงานในพื้นที่คุณสามารถเพิ่มสิ่งนี้ในไฟล์ .env.local :
PRIVATE_KEY=your-private-key
จากนั้นคุณสามารถเยี่ยมชม https://your-url.com/private/your-private-key เพื่อดูRésuméเวอร์ชันส่วนตัว
สำหรับการรวม Markdown ในตัวโปรดทราบว่าคุณ ต้องแน่ใจว่าจะไม่ส่งข้อมูลส่วนตัวให้กับ Repo Git สาธารณะ ใช้คุณสมบัตินี้ในการซื้อคืนส่วนตัวเท่านั้นและแม้กระทั่ง โปรดทราบ ถึงความกังวลด้านความปลอดภัยเกี่ยวกับการให้ข้อมูลส่วนตัวกับ GIT repo ใด ๆ
หากต้องการเพิ่มข้อมูลส่วนตัวลงใน CMS เพียงเพิ่มลงในโฟลเดอร์ privateFields
cms/privateFields/ เพิ่มฟิลด์ข้อมูลติดต่อส่วนตัวมากเท่าที่คุณต้องการแสดง พวกเขาจะปรากฏในลำดับที่พวกเขาถูกจัดเรียงในโฟลเดอร์เพื่อให้คุณสามารถใช้คำนำหน้าตัวเลขเพื่อสั่งซื้อlabel : สตริงที่ต้องการ ฉลากของฟิลด์เช่น "อีเมล" หรือ "ที่อยู่" URL ส่วนตัวนี้มี ความปลอดภัยเท่ากับคนที่คุณส่งไป ในการทำให้ URL ส่วนตัวแบบเก่าเป็นโมฆะคุณเพียงแค่เปลี่ยนตัวแปรสภาพแวดล้อม PRIVATE_KEY
เทมเพลตถูกสร้างขึ้นเพื่อตอบสนองสวยงามและเข้าถึงได้ทันทีนอกกรอบ รองรับธีมโหมด Dark/Light อัตโนมัติในเวอร์ชันเว็บและเค้าโครงพิมพ์หน้าเดียวที่ยอดเยี่ยมในเวอร์ชัน PDF โครงการรองรับชุดการกำหนดค่าขั้นต่ำเช่นสีที่เน้นเสียง แต่ถ้าคุณเป็นนักพัฒนาหรือนักออกแบบด้านหน้าคุณสามารถเปิดซอร์สโค้ดและปรับแต่งได้อย่างง่ายดายตามที่คุณเห็นว่าเหมาะสม
หากคุณต้องการปรับแต่งอย่างลึกซึ้งคุณสามารถควบคุมการกำหนดค่า Tailwind ได้อย่างเต็มที่ในไฟล์ Root Folder tailwind.config.ts
เราใช้การสร้างภาพ next.js เพื่อสร้าง Dynamic Open กราฟ (Facebook/Twitter) แชร์รูปภาพและไอคอนแอพ คุณสามารถแก้ไขเค้าโครงสไตล์และข้อความของภาพ OG โดยใช้คลาส Tailwind ใน src/app/api/og/route.tsx และไอคอนใน src/app/icon.tsx
ภาพการแชร์แบบไดนามิกนี้จะใช้การตั้งค่า accentColor ที่กำหนดเองของคุณรวมถึงข้อมูลจาก CMS
ในการซิงค์ประวัติส่วนตัวของคุณกับโครงการรุ่นใหม่ล่าสุดของโครงการนี้คุณสามารถทำสิ่งต่อไปนี้:
// 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จากนั้นแก้ไขข้อขัดแย้งที่ผสานและทำการเปลี่ยนแปลงที่คุณต้องการ คุณจะต้องดูการเปลี่ยนแปลงเพื่อดูว่าเกิดอะไรขึ้นตั้งแต่ครั้งสุดท้ายที่คุณดึงและโปรดทราบว่าการเปลี่ยนแปลงต้นน้ำอาจทำให้การปรับแต่งของคุณแตก!
