Trung Quân
  • Node.js
  • ReactJS
    • Learn React Hooks
  • MERN Stack
  • Thuật Toán
  • Công Nghệ
    • Amazon AWS
    • Hosting – Domain
  • Về Tác Giả
  • Bản Quyền
Top Posts
Lộ trình học lập trình Web từ con...
Nhận diện, xác thực khuôn mặt với ReactJS...
Tạo hiệu ứng thẻ bài Magic với HTML...
NodeJS viết API gửi Email với OAuth2 và...
Tạo hiệu ứng Parallax đơn giản chỉ với...
Git – GitHub • Học Git thực tế...
Tạo một trang GitHub Profile phiên bản vũ...
Cài đặt iTerm2, Oh My Zsh, Zsh-autosuggestions và...
Cài đặt NVM, NodeJS và GIT trên MacOS...
Thuật toán Tìm phần tử bị lặp đầu...

Trung Quân

  • Node.js
  • ReactJS
    • Learn React Hooks
  • MERN Stack
  • Thuật Toán
  • Công Nghệ
    • Amazon AWS
    • Hosting – Domain
  • Về Tác Giả
  • Bản Quyền
Developer Tips

Tạo một trang GitHub Profile phiên bản vũ trụ huyền ảo và chuyên nghiệp

by trungquandev March 12, 2022March 13, 2022
written by trungquandev March 12, 2022March 13, 2022
amazing-github-profile-readme-trungquandev

Xin chào tất cả các bạn, mình là Quân, hôm nay mình sẽ hướng dẫn các bạn tạo một trang GitHub Profile phiên bản vũ trụ cực đẹp mà vẫn không thiếu phần chuyên nghiệp nha. Đặc biệt là phần mình hướng dẫn cách để có thể Style CSS vào file README.md (mặc định không thể viết trực tiếp trong file này được) để các bạn có thể thỏa sức sáng tạo với kỹ năng CSS, Animation…thay vì phải sử dụng tới những mẫu ảnh GIF nha.

“Bài này nằm trong loạt bài Tổng hợp kiến thức hữu ích cho lập trình viên trên trang blog chính thức trungquandev.com“

Những nội dung có trong bài:

  1. Note lại kỹ năng Style CSS cho file Readme.md của GitHub
  2. Video hướng dẫn làm trang GitHub Profile Readme Universe mode
  3. Repo GitHub của bài hướng dẫn ngày hôm nay

1. Note lại kỹ năng Style CSS cho file Readme.md của GitHub

Cái này thì cũng khá đơn giản, mình sẽ liệt kê theo các bước nha:

  1. Chúng ta có thể sử dụng file SVG với thẻ <img> kiểu <img src=”trungquandev.svg” /> trong file Readme.md
  2. Trong file SVG có thể sử dụng phần tử <foreignObject>
  3. Phần tử <foreignObject> có cho phép chúng ta tùy biến nội dung HTML và CSS bên trong nó
  4. Từ đây các bạn có thể thỏa sức sáng tạo nội dung trong file SVG bằng các kỹ năng CSS Animation …vv rồi nhé.

Ngoài ra nếu bạn nào chưa biết cách sử dụng Git – GitHub như thế nào cho đúng chuẩn đi làm thực tế thì có thể tham khảo bài này của mình trước nha:

Git – GitHub • Học để đi làm


2. Video hướng dẫn làm trang GitHub Profile Readme Universe mode

(Ngoài lề quen thuộc: Cảnh báo này dành cho bất kể trang nào khác mà có ý định copy bài không phải của các bạn thì hãy tôn trọng người viết bài chân chính, tuyệt đối không được xào nấu, chỉnh sửa linh tinh bài viết của mình cụ thể là không được xóa những liên kết (link) cũng như tự ý xóa các câu thoại của mình trong toàn bộ bài viết rồi post lại lên trang của các bạn như kiểu đây là bài của các bạn vậy, nếu tham khảo thì hãy để lại liên kết nguồn rõ ràng từ trang trungquandev, mình sẽ thường xuyên dùng tool để check, và nếu phát hiện ra thì cứ đơn giản là chắc chắn sẽ ăn report DMCA nhé.)


3. Repo GitHub của bài hướng dẫn ngày hôm nay

Mình có để full source code của bài hôm nay ở repo này cho các bạn tham khảo giống như mọi lần, các bạn có thể clone về và tùy biến thoải mái nha.

Và nếu thấy bài viết cũng như video bổ ích, hãy ủng hộ về mặt tinh thần bằng cách cho mình 1 star trên repo này để mình có động lực tiếp tục viết những bài viết chất lượng nha, cảm ơn các bạn.
https://github.com/trungquandev/trungquandev


Cảm ơn các bạn đã dành thời gian đọc bài viết.

Xin chào và hẹn gặp lại các bạn ở những bài viết tiếp theo.

Best Regards – ? Trungquandev Official ❤


Tham khảo kiến thức:

– Ý tưởng trái đất xoay tròn + background Space tuyệt đẹp:
https://codepen.io/manz/pen/XbjxMR
– Tổng hợp nhiều ý tưởng cho GitHub Profile Readme (chiếc Profile của mình cũng đang có sẵn một pull request ở repo này chờ tác giả Merge ^^ ):
https://github.com/abhisheknaiidu/awesome-github-profile-readme
– Nguồn ảnh Free từ Pixabay (Mình lấy cái ảnh bản đồ thế giới ở đây):
https://pixabay.com/vi/

“Thanks for awesome knowledges.”
“ From author: trungquandev ”

Khóa học lập trình làm việc thực tế:

Nếu các bạn thấy bài viết của mình có ích thì hãy ủng hộ mình bằng cách tham khảo bài viết giới thiệu khóa học lập trình MERN Stack Miễn Phí cực kỳ chất lượng và chính chủ dưới đây của mình nhé, cảm ơn các bạn ^^
KHOÁ HỌC LẬP TRÌNH MERN STACK 100% DỰ ÁN THỰC TẾ và CHẤT LƯỢNG
mern-stack-course-trungquandev
gitgithubjavascripttrungquandevtrungquandev official
0 comment
1
FacebookTwitterGoogle +Pinterest
trungquandev

previous post
Cài đặt iTerm2, Oh My Zsh, Zsh-autosuggestions và Zsh-syntax-highlighting trên MacOS M1 Silicon
next post
Git – GitHub • Học Git thực tế để đi làm

Related Posts

Tạo hiệu ứng Parallax đơn giản chỉ với...

May 4, 2022

Cài đặt iTerm2, Oh My Zsh, Zsh-autosuggestions và...

February 19, 2022

Nhận diện, xác thực khuôn mặt với ReactJS...

September 25, 2022

Tạo hiệu ứng thẻ bài Magic với HTML...

August 14, 2022

Git – GitHub • Học Git thực tế...

March 13, 2022

Cài đặt WSL2 để sử dụng Ubuntu dễ...

November 29, 2021

Cài đặt NVM, NodeJS và GIT trên MacOS...

February 19, 2022

Bát Chánh Đạo

batchanhdao-trungquandev

About Me

About Me

Trung Quân

Senior Software Engineer at Pod Foods (US)

Academy Of Cryptography Techniques

"I am a dog and cat lover, love green, love to read books, write blog and oil painting ..."

Read my CV → https://cv.trungquandev.com/

My Maxim Live

A bit of fragrance clings to the hand that gives flowers!

For Vietnamese young generation

Đừng bao giờ làm người khổng lồ trong tư tưởng nhưng chỉ là thằng lùn trong hành động.

Keep in touch

Facebook Instagram Linkedin Youtube Email Github

Fanpage Facebook

Facebook

Học lập trình “MERN Stack Cơ Bản” qua ứng dụng thực tế

mern-stack-trello-app-trungquandev


  Khóa học lập trình MERN Stack (NodeJS, ReactJS, ExpressJS, MongoDB) cực kỳ chất lượng và Miễn Phí do chính mình hướng dẫn nhé:
  MERN Stack - xây dựng ứng dụng quản lý công việc dạng Kanban tương tự Trello.

Học lập trình “MERN Stack Nâng Cao” qua ứng dụng thực tế

mern-stack-advanced-trello-app-trungquandev


  * Học lập trình MERN Stack Nâng Cao (NodeJS, ReactJS, ExpressJS, MongoDB). Đây là một khóa học mà mình đã làm cực kỳ tâm huyết, với phong cách dạy lập trình làm dự án thực tế, chuyên nghiệp. Để các bạn có một hành trang kiến thức vững chắc cho hành trình làm lập trình viên trong tương lai nhé.
  Lập Trình MERN Stack Nâng Cao - Học Thực Tế Để Đi Làm

YouTube: Trungquandev Official

youtube-channel-trungquandev-official


  - Các bạn tham khảo kênh YouTube chính thức của mình và ủng hộ mình bằng cách tặng mình một lượt Đăng Ký Kênh nha.
Cảm ơn các bạn ^^

  YouTube: TRUNGQUANDEV OFFICIAL

© Copyright

Bản quyền:
  © DMCA (Digital Millennium Copyright Act)


DMCA.com Protection Status

License

Giấy phép nội dung:
  Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 Quốc tế.


Giấy phép Creative Commons

Other links

Portfolio của mình:
  https://cv.trungquandev.com

Lập trình cuộc sống:
  https://laptrinhcuocsong.com

Nhiều bài viết hay về javascript:
  https://codetheworld.io

  • Facebook
  • Youtube
  • GitHub
  • Linkedin
  • Instagram

@2022 - trungquandev.com. Since 2016 - All Right Reserved. Developed by Trung Quân Dev