react tailwindcss portfolio

Portfolio React & Tailwindcss - ด้วยโหมดมืด

ชุดรูปแบบเริ่มต้นพอร์ตโฟลิโอที่สร้างขึ้นด้วย React และ Tailwind CSS นี่คือเวอร์ชัน React ของ Vuejs-tailwindcs-portfolio

URL สาธิต

https://react-tailwindcss-portfolio.netlify.app

โครงการนี้รุ่นอื่น ๆ

• Next.js เวอร์ชัน: https://github.com/realstoman/nextjs-tailwindcs-portfolio
• vue.js เวอร์ชัน: https://github.com/realstoman/vuejs-tailwindcs-portfolio
• nuxt.js เวอร์ชัน: https://github.com/realstoman/nuxtjs-tailwindcss-portfolio

คุณสมบัติ

• React V18 ด้วย React Router v6
• Tailwind CSS v3
• บริบท API สำหรับการจัดการรัฐ
• ตะขอที่กำหนดเอง
• การทดสอบหน่วย
• Framer Motion Transitions & Animations
• ส่วนประกอบที่ใช้ซ้ำได้
• โหมดมืด
• ตัวกรองโครงการตามหมวดหมู่
• ตัวกรองโครงการโดยการค้นหา
• ม้วนเลื่อนที่ราบรื่น
• เคาน์เตอร์
• รูปแบบไดนามิก
• กลับไปที่ปุ่มด้านบน
• ดาวน์โหลดปุ่มไฟล์
• การออกแบบที่เรียบง่ายและตอบสนอง

เพื่อมีส่วนร่วมในโครงการนี้อ่านแนวทางการบริจาค

การตั้งค่า

1. ตรวจสอบให้แน่ใจว่าคุณติดตั้งโหนด JS แล้ว ถ้าคุณไม่มี:

• ดาวน์โหลดจาก nodejs.org
• ติดตั้งโดยใช้ NVM
• หากคุณใช้ Mac Homebrew เป็นตัวเลือกที่ดีเช่นกัน:

 brew install node

2. โคลน repo:

 git clone https://github.com/realstoman/react-tailwindcss-portfolio.git

3. เปิดโฟลเดอร์โครงการ:

 cd react-tailwindcss-portfolio

4. ติดตั้งแพ็คเกจและการพึ่งพา:

 yarn

4. หมายเหตุ: หากคุณไม่ได้ติดตั้งเส้นด้ายคุณสามารถติดตั้งได้ทั่วโลกโดยใช้ NPM:

 npm install --global yarn

5. เริ่มต้นเซิร์ฟเวอร์ dev ท้องถิ่นที่ http://localhost:3000 :

 yarn start

6. เรียกใช้การทดสอบ:

 yarn test

หมายเหตุ

• เรียกใช้ yarn install เสมอหลังจากดึงการเปลี่ยนแปลงใหม่
• ฉันจะอัปเดต repo นี้อย่างต่อเนื่องเพราะฉันจะเพิ่มส่วนเพิ่มเติมลงไปดังนั้นโปรดตรวจสอบส่วนโครงการของ repo นี้เพื่อดูว่างานใดที่อยู่ภายใต้สิ่งที่ต้องทำและกำลังดำเนินการ
• เร็ว ๆ นี้ฉันจะทำ screencast เร็ว ๆ นี้ฉันจะอัปโหลดวิดีโอไปยังช่อง YouTube ของฉันซึ่งฉันจะต้องผ่านกระบวนการสร้าง portoflio นี้
• ภาพประกอบจาก Undraw และ Freepik
• ภาพจาก Unsplash
• อย่าลังเลที่จะใช้เป็นผลงานของคุณเอง
• ยินดีต้อนรับการมีส่วนร่วม

ใบอนุญาต

มิกซ์