mirsazzathossain.me ดาวน์โหลด - mirsazzathossain.me ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

mirsazzathossain.me

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

ซ้อนเทค

mirsazzathossain.me

นี่คือซอร์สโค้ดของเว็บไซต์ส่วนตัวของฉัน mirsazzathossain.me เว็บไซต์พอร์ตการศึกษานี้เป็นสถานะออนไลน์ที่ครอบคลุมและดึงดูดสายตาซึ่งแสดงทักษะความสำเร็จและประสบการณ์ในสาขาการศึกษาของฉัน ฉันสร้างเว็บไซต์โดยใช้ Next.js ซึ่งเป็นเฟรมเวิร์ก JavaScript ที่ได้รับความนิยมสูงซึ่งช่วยให้สามารถสร้างเว็บแอปพลิเคชันที่สร้างขึ้นใหม่ได้ เพื่อให้แน่ใจว่าการออกแบบที่ทันสมัยและเป็นมืออาชีพฉันใช้ Tailwind CSS ซึ่งเป็นกรอบ CSS ยูทิลิตี้แรกและได้รับแรงบันดาลใจจากธีมสปอตไลท์จาก Tailwind UI เนื้อหาของเว็บไซต์ของฉันได้รับการจัดการด้วยความช่วยเหลือของ ContentLayer ซึ่งเป็นแพลตฟอร์มที่ทำให้การสร้างและการจัดการเนื้อหาง่ายขึ้นและเขียนด้วย markdown สำหรับองค์กรที่มีประสิทธิภาพและการจัดรูปแบบ โพสต์บล็อกบนเว็บไซต์ของฉันมีระบบแสดงความคิดเห็นที่ขับเคลื่อนโดย Giscus ซึ่งเป็นแพลตฟอร์มการสนทนาที่ใช้ GitHub ช่วยให้การสื่อสารแบบโต้ตอบและข้อเสนอแนะจากผู้ชมของฉัน นอกจากนี้ฉันยังรวม Spotify Web API เพื่อแสดงเพลงที่เล่นเมื่อเร็ว ๆ นี้ของฉันบนเว็บไซต์และใช้ไอคอนจาก Heroicons เพื่อเพิ่มความน่าดึงดูดของเว็บไซต์ของฉัน เว็บไซต์ของฉันโฮสต์บน Vercel แพลตฟอร์มคลาวด์ที่เชื่อถือได้สำหรับการโฮสต์ไซต์คงที่และฟังก์ชั่นที่ไม่มีเซิร์ฟเวอร์ทำให้มั่นใจได้ว่าการเข้าถึงที่ราบรื่นและรวดเร็วสำหรับผู้ใช้ทุกคน โดยรวมแล้วฉันเชื่อว่าเว็บไซต์พอร์ตการศึกษาของฉันแสดงให้เห็นถึงความทุ่มเทของฉันในการอยู่กับเทคโนโลยีที่ทันสมัยและนำเสนอสถานะออนไลน์ที่มีชีวิตชีวาและโดดเด่น

ในระยะสั้นสแต็คเทคโนโลยีของเว็บไซต์มีดังนี้:

เฟรมเวิร์ก: next.js
สไตล์: Tailwind CSS
ไอคอน: Heroicons
เนื้อหา: Markdown
การจัดการเนื้อหา: ContentLayer
การปรับใช้: vercel
ความคิดเห็น: Giscus

ภาพรวม

app/* : ฉันใช้ next.js โครงสร้างไดเรกทอรี app ใหม่ ไดเรกทอรีนี้มีแอพหลัก
components/* : ส่วนประกอบที่กำหนดเองทั้งหมดจะถูกเก็บไว้ในไดเรกทอรีนี้
content/* : ไดเรกทอรีนี้มีเนื้อหา contentLayer ทั้งหมด
public/* : ไดเรกทอรีนี้มีสินทรัพย์คงที่ทั้งหมดของเว็บไซต์
public/content/* : ไดเรกทอรีนี้มีเนื้อหาคงที่ทั้งหมดของเว็บไซต์ เช่นโครงการประสบการณ์การศึกษา ฯลฯ
styles/* : ฉันใช้ CSS Tailwind สำหรับการจัดแต่งทรงผม ไดเรกทอรีนี้มีสไตล์ Global CSS CSS และสไตล์ที่กำหนดเองสำหรับเว็บไซต์
utils/* : ไดเรกทอรีนี้มีฟังก์ชั่นยูทิลิตี้บางอย่าง

การโคลนนิ่งและฟอร์ก

หากคุณต้องการโคลนหรือแยกที่เก็บนี้โปรดตรวจสอบให้แน่ใจว่าได้ลบ content และไดเรกทอรี public เนื่องจากมีเนื้อหาและสินทรัพย์ส่วนบุคคลของฉัน คุณสามารถเพิ่มเนื้อหาและสินทรัพย์ของคุณเองใน content และไดเรกทอรี public ตามลำดับ

โคลนที่เก็บโดยเรียกใช้คำสั่งต่อไปนี้

git clone https://github.com/mirsazzathossain/mirsazzathossain.me.git
# or
git clone [email protected]:mirsazzathossain/mirsazzathossain.me.git

คุณสามารถลบ content และไดเรกทอรี public ได้โดยเรียกใช้คำสั่งต่อไปนี้

rm -rf content
rm -rf public

เพิ่มเนื้อหาและสินทรัพย์ของคุณเองใน content และไดเรกทอรี public ตามลำดับ

การติดตั้ง

ติดตั้งการพึ่งพาโดยเรียกใช้คำสั่งต่อไปนี้

npm install
# or
yarn install

สุดท้ายเรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มต้นเซิร์ฟเวอร์การพัฒนา

npm run dev
# or
yarn dev

เปิด http: // localhost: 3000 พร้อมเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์

หมายเหตุ : คุณต้องสร้างไฟล์ .env ในไดเรกทอรีรูทและเพิ่มตัวแปรสภาพแวดล้อมต่อไปนี้เพื่อให้การรวม Spotify ทำงาน

SPOTIFY_CLIENT_ID=yourspotifyclientid
SPOTIFY_CLIENT_SECRET=yourspotifyclientsecret
SPOTIFY_REFRESH_TOKEN=yourspotifyrefreshtoken

คุณสามารถรับ SPOTIFY_CLIENT_ID และ SPOTIFY_CLIENT_SECRET จากแผงควบคุม Spotify Developer คุณสามารถรับ SPOTIFY_REFRESH_TOKEN จาก Spotify Web API Console