developerFolio
Safe Release
เพียงแค่เปลี่ยน src/portfolio.js เพื่อรับผลงานส่วนตัวของคุณ ปรับแต่งธีมพอร์ตโฟลิโอโดยใช้โทนสีของคุณเองทั่วโลกในไฟล์ src/_globalColor.scss อย่าลังเลที่จะใช้มันตามที่เป็นหรือปรับแต่งให้มากที่สุดเท่าที่คุณต้องการ
หากคุณต้องการ มีส่วนร่วม และทำให้สิ่งนี้ดีขึ้นสำหรับผู้ใช้รายอื่นให้ดูปัญหา
สร้างสิ่งที่ยอดเยี่ยมสำหรับส้อมของพอร์ตโฟลิโอและต้องการแบ่งปันหรือไม่? อย่าลังเลที่จะเปิดคำขอดึง
✔สรุปและเกี่ยวกับฉัน
✔ทักษะ
✔การศึกษา
✔ประสบการณ์การทำงาน
✔โครงการโอเพ่นซอร์สที่เชื่อมต่อกับ GitHub
✔โครงการใหญ่
✔ความสำเร็จและการรับรอง?
✔บล็อก
✔พูดคุย
podcast
✔ติดต่อฉัน
timeline Twitter
✔โปรไฟล์ GitHub
หากต้องการดูตัวอย่างสด คลิกที่นี่
คำแนะนำเหล่านี้จะช่วยให้คุณได้รับสำเนาของโครงการและทำงานบนเครื่องในพื้นที่ของคุณเพื่อการพัฒนาและการทดสอบ
คุณจะต้องติดตั้ง git และ node.js (ซึ่งมาพร้อมกับ NPM) ที่ติดตั้งบนคอมพิวเตอร์ของคุณหรือใช้ Docker
[email protected] or higher
[email protected] or higher
[email protected] or higher
1) BUILD IMAGE : docker build -t developerfolio:latest .
2) RUN IMAGE: docker run -t -p 3000:3000 developerfolio:latest
จากบรรทัดคำสั่งของคุณโคลนและเรียกใช้นักพัฒนาซอฟต์แวร์:
# Clone this repository
git clone https://github.com/saadpasta/developerFolio.git
# Go into the repository
cd developerFolio
# Setup default environment variables
# For Linux
cp env.example .env
# For Windows
copy env.example .env
# Install dependencies
npm install
# Start a local dev server
npm startสร้างโทเค็นการเข้าถึงส่วนบุคคลของ GitHub แบบคลาสสิกตามคำแนะนำเหล่านี้ (ตรวจสอบให้แน่ใจว่าคุณไม่ได้เลือกขอบเขตใด ๆ เพียงแค่สร้างโทเค็นที่เรียบง่าย) หากคุณใช้การกระทำของ GitHub เพื่อปรับใช้พอร์ตโฟลิโอของคุณคุณสามารถข้ามส่วนนี้ได้
หมายเหตุ: การกำหนดค่าตัวแปรสภาพแวดล้อมก่อนที่จะปรับใช้พอร์ตโฟลิโอของคุณแนะนำเป็นอย่างยิ่งเนื่องจากส่วนประกอบบางอย่างขึ้นอยู่กับข้อมูล API
- DeveloperFolio
- node_modules
- public
- src
- .env < -- create it here
- env.example < -- this is the base file
- .gitignore
- package-lock.json
- package.jsonREACT_APP_GITHUB_TOKEN และกำหนดโทเค็น gitHub ของคุณเช่นนี้เพิ่มชื่อผู้ใช้ของคุณเป็น GITHUB_USERNAME // .env
REACT_APP_GITHUB_TOKEN = " YOUR GITHUB TOKEN HERE "
GITHUB_USERNAME = " YOUR GITHUB USERNAME "
USE_GITHUB_DATA = " true " ตั้งค่า showGithubProfile เป็นจริงหรือเท็จเพื่อแสดงโปรไฟล์ผู้ติดต่อโดยใช้ gitHub, ค่าเริ่มต้นเป็นเท็จ
คำเตือน: ปฏิบัติต่อโทเค็นของคุณเช่นรหัสผ่านและทำให้เป็นความลับ เมื่อทำงานกับ API ให้ใช้โทเค็นเป็นตัวแปรสภาพแวดล้อมแทนการเข้ารหัสในโปรแกรมของคุณ
หมายเหตุ: ส่วนโครงการโอเพ่นซอร์สแสดงเฉพาะรายการที่ตรึงไว้ใน GitHub ของคุณ หากคุณเห็นบางสิ่งบางอย่างดังที่แสดงด้านล่างให้ทำตามคำแนะนำเหล่านี้
หากโซลูชันข้างต้นยังไม่ทำงานให้ไปที่หน้า Wiki
ทางเลือกคุณสามารถเชื่อมโยงส่วนบล็อกไปยังบัญชีผู้ใช้สื่อของคุณ:
MEDIUM_USERNAME key และกำหนดชื่อผู้ใช้สื่อของคุณ // .env
MEDIUM_USERNAME = " YOUR MEDIUM USERNAME "MEDIUM_USERNAME ใน .github/workflows/deploy.yml ตั้งค่า displayMediumBlogs เป็นจริงหรือเท็จใน portofolio.js เพื่อแสดงบล็อกกลางที่ดึงมาเป็นค่าเริ่มต้นเป็นจริง
/src/portfolio.js & แก้ไขตามความต้องการของคุณ คุณจะต้องแก้ไข index.html เพื่อเปลี่ยนชื่อและข้อมูลเมตาเพื่อให้ SEO ที่แม่นยำสำหรับพอร์ตโฟลิโอส่วนตัวของคุณ /* Change this file to get your Personal Porfolio */
const greeting = {
/* Your Summary And Greeting Section */
title : "Hi all I'm Saad" ,
subTitle : emoji ( "A passionate Full Stack Software Developer " ) ,
resumeLink : "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing"
} ;
const socialMediaLinks = {
/* Your Social Media Link */
github : "https://github.com/saadpasta" ,
linkedin : "https://www.linkedin.com/in/saadpasta/" ,
gmail : "[email protected]" ,
gitlab : "https://gitlab.com/saadpasta" ,
facebook : "https://www.facebook.com/saad.pasta7"
} ;
const skillsSection = { ... . }
const techStack = { ... . }
const workExperience = { ... . }
const openSource = { ... . }
const bigProjects = { ... . }
const achievementSection = { ... . }
const blogSection = { ... . }
const contactInfo = { ... . }
const twitterDetails = { ... } ในการอัปโหลดเรซูเม่ของคุณเองเพียงอัปโหลด PDF ไปยัง src/containers/greeting/resume และเปลี่ยนชื่อ PDF เป็น resume.pdf
สำหรับการเพิ่มอิโมจิ? ลงในข้อความใน Portfolio.js ใช้ฟังก์ชัน emoji() และส่งข้อความที่คุณต้องการเป็นอาร์กิวเมนต์ สิ่งนี้จะช่วยในการรักษาอิโมจิที่เข้ากันได้กับเบราว์เซอร์และแพลตฟอร์มที่แตกต่างกัน
คุณสามารถเลือก Lottie และดาวน์โหลดในรูปแบบ JSON จากเว็บไซต์เช่นนี้ ใน src/assets/lottie ให้แทนที่ไฟล์ Lottie JSON ที่คุณต้องการเปลี่ยนด้วยชื่อไฟล์เดียวกัน หากคุณต้องการเปลี่ยนตัวเลือก Lottie ให้ไปที่ src/components/displayLottie/DisplayLottie.js และเปลี่ยนวัตถุ defaultOptions คุณสามารถอ้างอิงเอกสาร Lottie-React สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวัตถุ defaultOptions
แทรกชื่อผู้ใช้ Twitter ของคุณใน portfolio.js เพื่อแสดงกิจกรรมล่าสุดของคุณในหน้าของคุณ
const twitterDetails = {
userName : "Your Twitter Username"
} ; หมายเหตุ: อย่าใช้ @ Symbol เมื่อเพิ่มชื่อผู้ใช้
เมื่อคุณทำการตั้งค่าเสร็จแล้วคุณควรโฮสต์เว็บไซต์ออนไลน์ของคุณ เราขอแนะนำให้อ่านผ่านการปรับใช้ในเอกสารหน้า GitHub สำหรับ React
ก่อนอื่นคุณควรเปิดใช้งานการกระทำของ GitHub สำหรับที่เก็บที่คุณใช้
โปรไฟล์และข้อมูลที่เก็บจาก GitHub ถูกสร้างขึ้นในเวลาที่ปรับใช้เท่านั้นและเว็บไซต์จะต้องได้รับการปรับใช้ใหม่หากข้อมูลเหล่านั้นจำเป็นต้องได้รับการอัปเดต ดังนั้นงาน cron ที่กำหนดค่าได้คือการตั้งค่าซึ่งปรับใช้เว็บไซต์ของคุณทุกสัปดาห์ดังนั้นเมื่อคุณอัปเดตโปรไฟล์ของคุณใน GitHub จะแสดงในพอร์ตโฟลิโอของคุณ นอกจากนี้คุณยังสามารถเรียกใช้งานด้วยตนเองโดยใช้เหตุการณ์ workflow_dispatch ดูคู่มือนี้เกี่ยวกับวิธีการทำเช่นนั้น
ส่วนนี้จะแนะนำให้คุณปรับใช้พอร์ตโฟลิโอของคุณในหน้า GitHub
นำทางไปยัง package.json และป้อนชื่อโดเมนของคุณแทน https://developerfolio.js.org/ ในตัวแปร homepage ตัวอย่างเช่นหากคุณต้องการให้ไซต์ของคุณเป็น https://<your-username>.github.io/developerFolio เพิ่มเช่นเดียวกันกับส่วนหน้าแรกของ package.json
ในระยะสั้นคุณยังสามารถเพิ่ม /devloperFolio ไปยัง package.json เนื่องจากทั้งคู่เหมือนกันทุกประการ เมื่อทำเช่นนั้นคุณจะบอก create-react-app เพื่อเพิ่มสินทรัพย์เส้นทางตามนั้น
เลือกกำหนดค่าโดเมน คุณสามารถกำหนดค่าโดเมนที่กำหนดเองด้วยหน้า GitHub โดยการเพิ่มไฟล์ CNAME ลงใน public/ โฟลเดอร์
ติดตามผ่านคู่มือการตั้งค่าหน้า GitHub จากเอกสาร CRA อย่างเป็นทางการที่นี่
คุณสามารถโฮสต์โดยตรงกับ netlify โดยเชื่อมโยงที่เก็บของคุณเอง
สำหรับข้อมูลเพิ่มเติมอ่านโฮสติ้งบน Netlify
หากคุณสามารถช่วยเราได้ โปรดอย่าลังเลที่จะเปิดคำขอดึง
เชื่อมต่อกับ LinkedIn เพื่อรับสรุปทักษะการศึกษาและประสบการณ์
ย้ายไปที่ Gatsby
เพิ่มส่วนเพิ่มเติม
พาสต้า Saad | Kartik Choudhary | Naveen MK | Muhammad Hasham |
ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):
Fawad Ali - | Dasun Navoda | Brian Teeman | Rajkumar s | Coder ผอมเพรียว | Mohamed Sayyaf | Ashutosh Hathidara |
Rizwan Jamal ⚡ | Muhammad Hasham | ujjawal joshi | Palak Sethi | Vinicius Barbosa | Bharat Kammakatla - | Garima Singh |
เฮนรี่เฮง - | Pulkit Banta - | Akshay Kumar - | amna ejaz - | Paras Nagpal | Sparsh Garg | Aashutosh Rathi |
Abhishek Kashyap - | Lucas VC Nicolau | Bradley C. Herrin - | Zekinah Lecaros | ปั่นป่วน | Arshad Ahmed | Xiaohui Liu - |
Seungyeon-lee | Najam Shehzad | Randy Jesus Real Srsen | Tamojit Das | Waren Gonzaga | Benjamin Bourgeois | Keshav Jain |
Hanzla | โยค์ Rathod | Kunal Mundada | Anubhav Gupta | Vatsal Dave | Elvis Ciuffetelli | สกอตต์เจลเลน - |
Karthik Mohan - | Mhowell11 | Gajanandh - | Joohyukkim | หูฟังสีแดง - | Sunit Roy - | Atir Nayab - |
Shehriyar Qureshi | ความเคารพ | เบรย์เดน - | CUNCIU COSTIN | Atharv Singh | Ishan Khandelwal | Sergey Lyapustin |
Camila Pozas | Sai Teja - | Vinit Hemadri | njong emy | Tamal Das | Dunsin | Muneeb Ahmed |
Qais Attarwala |
