ดาวน์โหลด codefolio - ดาวน์โหลด codefolio ซอร์สโค้ด

codefolio

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

โค้ดโฟลิโอ

สาธิตสด | การปรับใช้ | เกี่ยวกับ | คุณสมบัติ | ผลงาน

เว็บแอปที่พร้อมใช้งานเพื่อแสดงผลงานการเขียนโค้ดของคุณ

เกี่ยวกับ

Codefolio เป็นเว็บแอปพลิเคชันพอร์ตโฟลิโอ Jamstack สำหรับโปรแกรมเมอร์ สร้างขึ้นโดยใช้ Nuxt.js และใช้ประโยชน์จากโมดูล @nuxt/content เพื่อใช้ข้อมูลผู้ใช้ที่อยู่ในไดเร็กทอรี /content และสร้างสินทรัพย์คงที่ที่พร้อมสำหรับการผลิต

คุณสมบัติ

โค้ดทั้งหมดถูกเขียนขึ้นโดยคำนึงถึงโมดูลและความสามารถในการนำกลับมาใช้ใหม่ได้

คุณสมบัติหลักของแอพนี้คือรองรับการใช้งานแบบคงที่ พอร์ตการเขียนโค้ดไม่จำเป็นต้องมีการเปลี่ยนแปลงมากนัก ดังนั้นไซต์แบบคงที่จึงเป็นตัวเลือกที่ดีกว่า SPA ปกติหรือแอป Full-Stack

ส่วนต่อประสานกับผู้ใช้

ส่วนติดต่อผู้ใช้ของ Codefolio ได้รับการออกแบบโดยคำนึงถึงความเป็นมิตรต่อผู้ใช้เป็นหลัก มีการตอบสนองอย่างสมบูรณ์และใช้วิธีการเน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก

การออกแบบอิงตามรูปแบบ 7-1 Sass และใช้ประโยชน์จาก Bootstrap 5 ที่โหลดบางส่วนสำหรับเค้าโครงและยูทิลิตี้

ไดเรกทอรี Assets/aprite/svg มีไฟล์ไอคอน svg แต่ละไฟล์ คุณสามารถใช้ไอคอนเหล่านี้ (หรือวางไอคอน svg ของคุณเองในไดเร็กทอรีนี้) เพื่ออ้างอิงชื่อไอคอนในองค์ประกอบ <icon> vue

เนื้อหา

Codefolio รองรับข้อมูลผู้ใช้ที่กำหนดเอง นอกเหนือจากรายละเอียดส่วนตัวแล้ว ผู้ใช้ยังสามารถปรับแต่งเจ๋งๆ อื่นๆ ได้ เช่น ลิงก์ภายนอก และ URL ของปุ่มดำเนินการต่อในแถบนำทางด้านบน

คู่มือเนื้อหา

เครื่องมือสร้างไซต์แบบคงที่ใช้ข้อมูลผู้ใช้ดิบ (โดยปกติจะอยู่ในรูปแบบมาร์กดาวน์หรือ JSON) เพื่อสร้าง HTML ที่พร้อมใช้งานจริง ดังนั้น คุณจะต้องใช้คู่มือนี้เป็นข้อมูลอ้างอิงในขณะที่เพิ่มเนื้อหาของคุณลงใน Codefolio

โครงสร้างของโฟลเดอร์เนื้อหามีลักษณะดังนี้

 content
|	navbar.json
|	about.md
|	social-icons.json
|	user.json
|
└───projects
		project1.json
		project2.json
		project3.json
		/* so on... */

มาดูกันว่าแต่ละไฟล์หรือโฟลเดอร์มีไว้เพื่ออะไร

navbar.json

ไฟล์นี้ใช้สำหรับข้อมูลทางเลือกที่เกี่ยวข้องกับแถบนำทางด้านบน

คุณสมบัติ	พิมพ์	คำอธิบาย
ResumeUrl	`string`	URL ไฟล์ดำเนินการต่อสำหรับปุ่มดำเนินการต่อแถบนำทาง
ลิงค์ภายนอก	`array`	อาร์เรย์ที่มีออบเจ็กต์สำหรับสร้างลิงก์ภายนอกในแถบนำทางด้านบน ออบเจ็กต์ลิงก์ภายนอกแต่ละรายการต้องมีคุณสมบัติ `text` และสตริง `url` เพื่อให้ทำงานได้อย่างถูกต้อง

about.md

ไฟล์มาร์กดาวน์นี้ใช้สำหรับหน้าเกี่ยวกับ

โซเชียลicons.json

ไฟล์นี้ใช้เพื่อสร้างไอคอนโซเชียลในหน้าเกี่ยวกับ

คุณสมบัติ	พิมพ์	คำอธิบาย
ไอคอน	`array`	อาร์เรย์ที่มีออบเจ็กต์เพื่อสร้างไอคอนโซเชียลในหน้าผู้ติดต่อ แต่ละวัตถุต้องมีคุณสมบัติ `name` และ `url` (สตริง) คุณสมบัติ `name` ควรมีไฟล์ svg ที่ตรงกันในไดเรกทอรี /assets/sprite/svg/ ไอคอนโซเชียลส่วนใหญ่มีอยู่แล้ว แต่คุณสามารถเพิ่มไอคอน svg ที่คุณกำหนดเองได้ตามต้องการ ในโหมด dev คุณสามารถไปที่ `/_icons` path เพื่อแสดงไอคอนที่มีอยู่ทั้งหมด

user.json

ไฟล์นี้ใช้สำหรับรายละเอียดผู้ใช้ที่จำเป็นสำหรับโฮมเพจ

คุณสมบัติ	พิมพ์	คำอธิบาย
ชื่อเต็ม	`string`	ชื่อผู้ใช้.
เกี่ยวกับ	`string`	เล็กน้อยเกี่ยวกับผู้ใช้
ภาพ	`string`	URL รูปภาพที่ถูกต้องเริ่มต้นจาก http หรือชื่อ (รวมถึงนามสกุล) ของรูปภาพที่วางอยู่ในไดเรกทอรี `assets/images` โปรดครอบตัดรูปภาพเป็น `500x500` เพื่อผลลัพธ์ที่ดีขึ้น
ชื่อ	`string`	ตำแหน่งหรือบทบาทของผู้ใช้

ติดต่อ.json

ไฟล์นี้ใช้เพื่อสร้างหน้าการติดต่อ

คุณสมบัติ	พิมพ์	คำอธิบาย
รูปแบบการดำเนินการ	`string`	การกระทำของแบบฟอร์มแบบกำหนดเองสำหรับแบบฟอร์มการติดต่อ ตรวจสอบ formpree.io
ที่ตั้ง	`string`	สตริงตำแหน่งของผู้ใช้
อีเมล	`string`	ที่อยู่อีเมลของผู้ใช้
โทรศัพท์	`string`	หมายเลขโทรศัพท์ของผู้ใช้.

โครงการ

โฟลเดอร์นี้ประกอบด้วยโปรเจ็กต์ทั้งหมดเป็นไฟล์เดี่ยวในรูปแบบ json แต่ละไฟล์ในโฟลเดอร์นี้จะแสดงถึงโปรเจ็กต์ที่แตกต่างกัน

ตารางต่อไปนี้ประกอบด้วยรูปแบบของแต่ละไฟล์ในโฟลเดอร์โครงการ

คุณสมบัติ	พิมพ์	คำอธิบาย
รหัส	`integer`	ตัวระบุที่ไม่ซ้ำกันสำหรับการสั่งซื้อ
ชื่อ	`string`	ชื่อโครงการ.
คำอธิบาย	`string`	รายละเอียดเกี่ยวกับโครงการ
ภาพ	`string`	URL รูปภาพที่ถูกต้องเริ่มต้นจาก http หรือชื่อ (รวมถึงนามสกุล) ของรูปภาพที่วางอยู่ในไดเรกทอรี `assets/images`
ลิงค์	`object`	ออบเจ็กต์ที่มีลิงก์ภายนอกของโครงการ สามารถมีคุณสมบัติเสริม `liveDemo` , `videoDemo` และ `sourceCode` สำหรับ URL
เทคโนโลยี	`array`	อาร์เรย์ที่ประกอบด้วยเทคโนโลยีทั้งหมด (สตริง) ที่ใช้ในโปรเจ็กต์

หมายเหตุ: สร้างไฟล์ใหม่เพื่อเพิ่มโปรเจ็กต์เพิ่มเติมและตั้งชื่อเป็นชื่อโปรเจ็กต์

ดูไฟล์จำลองที่มีอยู่ในโฟลเดอร์เนื้อหาเพื่อใช้อ้างอิง

การทำ SEO

เมตาแท็ก

Nuxt.js มอบวิธีที่มีประสิทธิภาพในการเพิ่มประสิทธิภาพไซต์ของคุณสำหรับเครื่องมือค้นหา โปรดดูคู่มือ SEO Nuxt.js สำหรับรายละเอียดเพิ่มเติม

แผนผังไซต์

โปรเจ็กต์นี้ใช้ @nuxtjs/sitemap เพื่อสร้างไฟล์ sitemap.xml โดยอัตโนมัติ โปรดดูคู่มือการกำหนดค่าหากคุณต้องการข้อมูลเพิ่มเติม

การปรับใช้

หลังจากปรับแต่งเนื้อหาตามความต้องการของคุณแล้ว คุณจะต้องปรับใช้แอปกับการใช้งานจริง

การปรับใช้ด้วยตนเอง

มาดูวิธีการสร้างไฟล์บิลด์กัน

เริ่มต้นด้วยการโคลนที่เก็บบนเครื่องของคุณโดยใช้ git (หรือดาวน์โหลดด้วยตนเอง)

 git clone https://github.com/0xaliraza/codefolio

จากนั้น นำทางไปยังไดเร็กทอรีรากของที่เก็บและติดตั้งการขึ้นต่อกัน

 npm install

สร้างไฟล์บิลด์

 npm run generate

ณ จุดนี้ คุณจะมีโฟลเดอร์ ./build build ที่ประกอบด้วยไฟล์ที่พร้อมสำหรับการผลิตทั้งหมดสำหรับการปรับใช้ คุณสามารถปรับใช้ไฟล์เหล่านี้กับเซิร์ฟเวอร์โฮสต์หรือ CDN บางแห่งได้

หากคุณต้องการเห็นแอปทำงานในเครื่อง

 npm run dev

ซีไอ/ซีดี

คุณต้องมีประสบการณ์ GitHub/การเขียนโค้ดมาก่อนจึงจะปรับใช้สิ่งนี้ได้โดยใช้การดำเนินการ GitHub หรือแพลตฟอร์ม CI/CD อื่นๆ

นี่คือที่เก็บเทมเพลต ดังนั้นคุณจึงสามารถคลิกปุ่ม "ใช้เทมเพลตนี้" ที่ด้านบนขวาเพื่อโคลนที่เก็บนี้ ปรับแต่งไฟล์เนื้อหาตามความต้องการของคุณและแท็บการดำเนินการเพื่อเพิ่มขั้นตอนการทำงานที่จำเป็น คุณสามารถใช้ไฟล์ ci.yml และ cd.yml ที่มีอยู่ซ้ำได้

ดูการดำเนินการ GitHub เพื่อเรียนรู้เพิ่มเติม