Build a GitHub Portfolio Profile
Create a professional GitHub profile README with badges and stats.
Introduction
30 Second Summary
When someone visits your GitHub profile, they form an impression in seconds. A blank profile with just a list of repositories doesn't tell them who you are or what you're capable of.
In this project, you will build a professional GitHub Profile README that acts as a landing page for your account. You'll add a personal introduction, tech stack badges, and dynamic stats cards that update automatically.
What You'll Build
A polished GitHub profile page using Markdown, Shields.io badges, and dynamic stats widgets that showcase your GitHub activity.
By the end of this project, you'll have:
- A profile README repository that GitHub automatically displays at the top of your profile page.
- A structured introduction with Shields.io badges linking to your social profiles and a visual tech stack section.
- Dynamic GitHub Stats, Top Languages, and Streak Stats cards showing your real contribution activity.
- Secret Mission: Add responsive dark/light mode theme switching that automatically adapts to each visitor's GitHub theme preference.
Are there any prerequisites?
You just need a GitHub account. The entire project is done in the GitHub web interface, so no code editor or local tools are required.
Before We Start
Before We Start...
Create Your Profile Repository
GitHub has a hidden feature that turns a specific repository into a personal landing page. When someone visits your profile, the content of that repository's README.md file displays right at the top of the page.
The trick is simple. The repository name must match your GitHub username exactly. In this step, you'll create that special repository and confirm your profile page is ready to customize.
In this step, get ready to:
- Create a special profile repository on GitHub.
- Confirm GitHub recognizes it as a profile README.
- View the default README on your public profile page.
Create a new repository named after your username
GitHub only displays a profile README when the repository name is an exact match for your username. This is how GitHub knows to surface the file on your profile page instead of treating it like a normal repo.
- In the upper-right corner of any GitHub page, click the + dropdown menu.
- Click New repository.
- Under Repository name, type your exact GitHub username. For example, if your username is "octocat", the repository name must be octocat.
- Select Public.
- Toggle Add README to On.
- Click Create repository.
Why does the name need to match exactly?
GitHub watches for a public repository whose name is identical to the owner's username. When it finds one, it treats the README.md inside as a GitHub Profile README and renders it at the top of your profile page.
If the name doesn't match (even one letter off), GitHub won't surface the file. It just stays a normal repository.
Confirm the special repository banner
After clicking Create repository, GitHub takes you to the new repository's page.
- Look for a notice near the top of the repository page indicating that this is a special repository. It tells you that your username/username repository is used to display content on your profile.
Don't see the special repository notice?
Double check that the repository name matches your username exactly, including capitalization. Also confirm the repository is set to Public, not Private.
help me figure out why GitHub isn't showing the special repository notice for my profile README
View your README on your profile page
Now let's confirm the README is live on your public profile.
- Click your profile avatar in the upper-right corner of the page.
- Click Your profile.
You should see the default README content displayed at the top of your profile page, starting with a "Hi there" greeting.
What is the default template?
GitHub pre-fills the README.md with a starter template that begins with ### Hi there and includes commented-out suggestions. You'll replace all of this with your own content in the next step.
Your profile repository is live. Next up, you'll replace that default template with a professional introduction section complete with social badges.
Write Your Introduction Section
Your profile repository is live and GitHub is already displaying the default README on your profile page. Now it's time to replace that placeholder content with a real introduction that tells visitors who you are.
A strong intro section gives visitors an immediate sense of what you work on and how to connect with you. You'll write this using Markdown directly in GitHub's web editor, and add clickable social badges powered by Shields.io.
In this step, get ready to:
- Replace the default template with a heading, bio, and bullet points.
- Add social badges linking to your LinkedIn and portfolio.
- Preview and commit your changes to the main branch.
Replace the default template with your intro
The default template GitHub generated is a starting point, but it's full of placeholder comments that don't tell visitors anything useful about you. You'll replace all of it with a clean heading, a one-line bio, and bullet points about your current work.
- In your profile repository, click Edit README (above the right sidebar).
- Select all the existing text in the editor (the default template beginning with ### Hi there) and delete it.
- Paste the following Markdown to create your intro section:
# Hi, I'm [[YOURNAME="Your Name"]] 👋
I'm a developer passionate about building things and learning new technologies.
- 🔭 I'm currently working on personal projects
- 🌱 I'm currently learning new frameworks and tools
- 💬 Ask me about web development
- 📫 How to reach me: [[YOUREMAIL="your-email@example.com"]]What does this Markdown do?
- The # at the start creates a large first-level heading. This is bigger and bolder than the default ### (third-level) heading the template used.
- The single paragraph below the heading acts as a quick bio that visitors read in seconds.
- Each line starting with - creates a bullet point. The emoji at the start of each bullet makes the list scannable at a glance.
- Replace the placeholder values with your own details. Change the name, email, and bullet text to reflect what you're actually working on and learning.
Customize your bullet points
These bullets are just suggestions. Feel free to change them to reflect your real interests. For example, swap "web development" for "data science" or "cloud computing" if that fits you better.
You won't see the rendered result yet. You'll preview everything after adding the Connect section below.
Add a Connect section with social badges
Plain-text links are easy to miss in a README. Shields.io badges turn your social links into eye-catching, clickable buttons that stand out visually.
- Below the last bullet point in your editor, add a blank line, then paste the following Markdown:
## Connect with me
[](https://linkedin.com/in/[[YOURLINKEDIN="YOUR-LINKEDIN"]])
[](https://[[YOURWEBSITE="your-website.com"]])How does the badge URL work?
Each badge follows the Shields.io static badge format: https://img.shields.io/badge/MESSAGE-COLOR?style=for-the-badge&logo=SLUG&logoColor=white.
- MESSAGE is the text displayed on the badge (e.g., "LinkedIn").
- COLOR is a hex color code without the # (e.g., 0A66C2 for LinkedIn blue).
- logo takes a Simple Icons slug (e.g., linkedin) to display the brand icon.
- The entire badge image is wrapped in a Markdown link [](url) so clicking it opens your profile.
Shields.io serves over 1.6 billion images monthly and is the standard for badges in GitHub READMEs.
- Replace the LinkedIn and Portfolio URLs with your own links. If you don't have one of these, remove that badge line entirely or swap it for another platform.
Shields.io special characters
If your badge text needs a space, use an underscore _ or %20 in the URL. A double underscore __ renders as a literal underscore, and a double dash -- renders as a literal dash.
You won't see the badges rendered yet. The next substep previews everything together.
Preview and commit your changes
GitHub's editor lets you preview rendered Markdown before committing so you can catch formatting issues early.
- Click the Preview tab above the editor to see your rendered README.
- Confirm you see a large heading with your name, a bio paragraph, four bullet points with emoji, and two colored badges under "Connect with me".
- Click Commit changes... (green button in the top right).
- In the commit message field, type Add introduction and social badges.
- Leave the default option selected to commit directly to the main branch.
- Click Commit changes.
- Navigate to your profile page by clicking your avatar in the top-right corner, then clicking Your profile.
- You should see your new heading, bio, bullet points, and social badges displayed at the top of your profile.
Don't see your badges or formatting?
- Check that you committed to the main branch. If you accidentally created a new branch, your profile won't update.
- Make sure there are no extra spaces or missing parentheses in the badge Markdown. The [](link) pattern requires matching brackets and parentheses.
- If badges show as broken images, double-check the URL has no typos in the color code or logo slug.
Still stuck? Help me fix my profile README badges.
✔️ Awesome, I've got everything!
Great. Double check you've committed your file and the changes are visible on your profile page.
ⓧ I'd like to double check the full code
Here's what your full README.md should look like at this point:
# Hi, I'm [[YOURNAME="Your Name"]] 👋
I'm a developer passionate about building things and learning new technologies.
- 🔭 I'm currently working on personal projects
- 🌱 I'm currently learning new frameworks and tools
- 💬 Ask me about web development
- 📫 How to reach me: [[YOUREMAIL="your-email@example.com"]]
## Connect with me
[](https://linkedin.com/in/[[YOURLINKEDIN="YOUR-LINKEDIN"]])
[](https://[[YOURWEBSITE="your-website.com"]])Your introduction is live. Next up, you'll build a visual tech stack section that shows visitors exactly which technologies you work with.
Build Your Tech Stack Section
Your introduction and social links are live on your profile. Visitors can now see who you are and how to reach you.
Next, you'll create a visual Tech Stack section that shows what technologies you work with. Instead of listing skills as plain text, you'll use colored badges that are instantly recognizable.
In this step, get ready to:
- Create Shields.io badges for your programming languages.
- Organize badges into categories using bold text labels.
- Commit your Tech Stack section and verify it on your profile.
Add your Tech Stack heading and language badges
Each badge uses a Shields.io URL that encodes the technology name, a brand color, and a logo from Simple Icons. You used this same pattern for your social badges in the previous step.
- Return to your profile repository in GitHub and click Edit README above the right sidebar.
- Scroll to the bottom of your existing content (below the Portfolio badge line).
- Add the following Markdown to create a horizontal rule, a Tech Stack heading, and your language badges:
---
## Tech Stack
**Languages:**
What does this code do?
Each badge URL follows the same pattern: https://img.shields.io/badge/TECHNOLOGY-COLOR?style=for-the-badge&logo=SLUG&logoColor=white.
- --- creates a horizontal line to separate the Tech Stack from your intro section.
- The text before the dash (e.g. Python) is the badge label.
- The six-character hex after the dash (e.g. 3776AB) sets the badge background color.
- The logo parameter takes a Simple Icons slug (e.g. python, javascript) to display the brand icon.
- The logoColor is set to black for JavaScript because its badge background is yellow. White text on yellow is hard to read.
- Click the Preview tab in the editor to check your badges render correctly.
- You should see four colored badges in a row, each with a technology icon and label.
Badges showing as broken images?
- Check that each URL starts with https://img.shields.io/badge/ and has no extra spaces.
- Make sure the color codes are exactly six characters with no # prefix (e.g. 3776AB not #3776AB).
- Verify there are no line breaks in the middle of a badge URL.
Help me fix my Shields.io badges that aren't rendering in my GitHub README preview.
Add your Frameworks & Tools category
Organizing badges into labeled categories makes your tech stack scannable at a glance. Bold text labels act as section dividers without needing extra heading levels.
- Below the CSS3 badge line, add a blank line and then paste the following Frameworks & Tools section:
**Frameworks & Tools:**
What's happening here?
- Placing badge images on consecutive lines (no blank lines between them) makes them render side by side in a row.
- The React badge uses logoColor=black because its light blue background needs a dark icon for contrast.
- VS Code's badge uses VS_Code with an underscore because Shields.io renders underscores as spaces in the label.
- The logo slug for Node.js is nodedotjs because Simple Icons uses this as the canonical slug rather than node.js.
- Click the Preview tab again to check both badge categories render correctly.
- You should now see two groups of badges. Languages on one line and Frameworks & Tools on another, separated by their bold labels.
Badges stacking vertically instead of in a row?
- Make sure there are no blank lines between badge lines within the same category. A blank line in Markdown creates a new paragraph, which forces badges onto separate lines.
- Each badge line should start immediately after the previous one with only a single newline character between them.
Why are my badges rendering vertically instead of horizontally?
Preview and commit your changes
- Click the Preview tab to review the full README one final time.
- Verify that your Tech Stack section appears below the horizontal rule, with Languages and Frameworks & Tools as two distinct groups.
- Click Commit changes (the green button in the top right).
- In the commit dialog, leave the default commit message or type something like Add tech stack section.
- Click Commit changes to save directly to the main branch.
- Navigate to your profile page by clicking your avatar in the top right, then selecting Your profile.
- You should see your Tech Stack section with colored badges displayed below your introduction.
Tech Stack section not showing on your profile?
- Make sure you committed to the main branch, not a new branch.
- Hard refresh your profile page (Cmd+Shift+R on macOS or Ctrl+Shift+R on Windows) to clear cached content.
- Confirm your repository name matches your GitHub username exactly, including capitalization.
My Tech Stack section isn't appearing on my GitHub profile page after committing.
Customize your badges
These example badges use common technologies, but you should swap them for the ones you actually know. Browse simpleicons.org to find the slug for any technology. The slug is usually the lowercase name (e.g. python, react, docker).
✔️ Awesome, I've got everything!
Great. Double check you've committed your changes and your profile page shows the Tech Stack badges.
ⓧ I'd like to double check the full code
Here is the full README.md as it should look at this point:
# Hi, I'm [Your Name] 👋
I'm a developer passionate about building things and learning new technologies.
- 🔭 I'm currently working on personal projects
- 🌱 I'm currently learning new frameworks and tools
- 💬 Ask me about web development
- 📫 How to reach me: your-email@example.com
## Connect with me
[](https://linkedin.com/in/YOUR-LINKEDIN)
[](https://your-website.com)
---
## Tech Stack
**Languages:**
**Frameworks & Tools:**
Your tech stack is looking sharp. Next up, you'll add dynamic stats cards that update automatically to show your GitHub activity and most-used languages.
Add Dynamic GitHub Stats Cards
Your profile now has a clear introduction and a polished tech stack section. The next piece is showing your actual GitHub activity through dynamic stats cards.
Stats cards pull real-time data from your GitHub account and display it as visual graphics on your profile. Visitors can see your contribution count, most-used languages, and coding streak at a glance.
In this step, get ready to:
- Add a GitHub Stats card showing your contribution activity.
- Add a Top Languages card showing your most-used programming languages.
- Add a GitHub Streak Stats card showing your contribution streak.
Add a GitHub Stats card
The github-readme-stats project generates dynamic SVG images based on your GitHub data. You embed these as Markdown images, and they update automatically whenever someone views your profile.
- Return to your profile repository and click the pencil icon (or Edit README) to open the editor.
- Scroll to the bottom of your existing content (after the Frameworks & Tools badges).
- Add a horizontal rule and the GitHub Stats section heading with your first stats card by pasting this code at the end of your file:
---
## GitHub Stats
![Your GitHub stats](https://github-readme-stats.vercel.app/api?username=[[YOUR_USERNAME="your GitHub username"]]&show_icons=true&theme=radical)What does this code do?
- The --- creates a horizontal rule that visually separates your Tech Stack section from the stats section.
- The image URL points to the github-readme-stats API, which dynamically generates an SVG card showing your total stars, commits, PRs, and issues.
- The show_icons=true parameter adds icons next to each stat, and theme=radical applies a vibrant gradient color scheme.
- Click the Preview tab to see the card render.
- You should see a colorful card with your GitHub username and contribution stats displayed as an image.
Seeing a broken image icon?
Double-check that you replaced the username placeholder with your exact GitHub username. The username is case-sensitive.
The stats card service occasionally experiences brief downtime. If you see a broken image, wait a moment and refresh the preview. The card usually loads on the second attempt.
Help me troubleshoot my broken stats card image.
Add a Top Languages card
The Top Languages card shows which programming languages appear most frequently across your public repositories. This gives visitors a quick sense of your technical focus.
- Below your GitHub Stats card, add a blank line and then paste this code:
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=[[YOUR_USERNAME="your GitHub username"]]&layout=compact&theme=radical)What does this code do?
This image URL hits the /top-langs/ endpoint instead of the base /api endpoint. It scans your public repos and calculates the percentage of each language you use.
The layout=compact option displays languages in a condensed bar format instead of a tall list. This keeps the card readable without taking up too much vertical space on your profile.
- Click Preview again to confirm the Top Languages card renders below the Stats card.
- You should see a second card showing colored bars representing your most-used languages.
Card showing unexpected languages?
The Top Languages card reflects the languages in your public repositories only. If you have forked repos with lots of code, those languages may dominate the chart.
Why is my Top Languages card showing languages I don't use much?
Add a GitHub Streak Stats card
The final card tracks your contribution streak. It shows your total contributions, your current streak (consecutive days with at least one contribution), and your longest streak ever.
- Below your Top Languages card, add a blank line and paste this code:
[![GitHub Streak](https://streak-stats.demolab.com/?user=[[YOUR_USERNAME="your GitHub username"]]&theme=radical)](https://git.io/streak-stats)What does this code do?
This uses a different service (streak-stats.demolab.com) that specializes in contribution streak tracking. The outer [](link-url) syntax makes the entire card a clickable link that takes visitors to the streak-stats project page.
Notice that streak-stats uses user= instead of username= in its URL. Each service has its own parameter names.
- Click Preview to verify all three cards are visible in order.
- Scroll down in the Commit changes section, keep the default commit message, and click Commit changes.
- Navigate to your profile page (click your avatar, then Your profile) to see all three dynamic cards live.
Streak card not loading?
Make sure you used user= (not username=) in the streak-stats URL. This is a common mix-up since the other cards use username=.
Help me fix my GitHub Streak Stats card.
✔️ Awesome, I've got everything!
Great. Double check you have saved your file by committing changes.
ⓧ I'd like to double check the full code
Here is what your full README.md should look like at this point:
# Hi, I'm [Your Name] 👋
I'm a developer passionate about building things and learning new technologies.
- 🔭 I'm currently working on personal projects
- 🌱 I'm currently learning new frameworks and tools
- 💬 Ask me about web development
- 📫 How to reach me: your-email@example.com
## Connect with me
[](https://linkedin.com/in/YOUR-LINKEDIN)
[](https://your-website.com)
---
## Tech Stack
**Languages:**
**Frameworks & Tools:**
---
## GitHub Stats
[](https://git.io/streak-stats)Your profile now shows real-time data about your coding activity. Next up, you will polish the layout by aligning cards side by side and adding some final visual touches.
Align and Polish Your Layout
Your profile README now has real content. An introduction, social badges, a tech stack, and dynamic stats cards.
Content alone is not enough to make a strong first impression. In this step, you will polish the layout so your stats cards sit side by side, sections are clearly separated, and visitors can see your profile view count at a glance.
In this step, get ready to:
- Align your GitHub Stats and Top Languages cards side by side using HTML.
- Add a profile views counter badge to the top of your README.
- Add visual separators and do a final review of your live profile.
Align your stats cards side by side
Right now, your GitHub Stats card and Top Languages card stack vertically. They take up a lot of vertical space and leave the page looking sparse on wider screens.
HTML <a> and <img> tags inside Markdown let you control image size and alignment. You will wrap each card in an anchor tag that forces them onto the same line.
- In your profile repository, click Edit README (the pencil icon) to open the editor.
- Scroll down to the ## GitHub Stats section.
- Find these two lines (your file will show your actual username instead of YOUR-USERNAME):
- Delete those two lines and replace them with the following HTML (remember to use your actual username where it says YOUR-USERNAME):
<a href="https://github.com/YOUR-USERNAME">
<img height=200 align="center" src="https://github-readme-stats.vercel.app/api?username=YOUR-USERNAME&show_icons=true&theme=radical" />
</a>
<a href="https://github.com/YOUR-USERNAME">
<img height=200 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR-USERNAME&layout=compact&theme=radical&langs_count=8&card_width=320" />
</a>What does this code do?
Each <a> tag wraps a card image and links it to your GitHub profile. The height=200 attribute makes both cards the same height so they line up evenly.
The align="center" attribute places the images next to each other on one line. The Top Languages card also gets langs_count=8 and card_width=320 so its size balances nicely against the stats card.
- Click the Preview tab to verify both cards appear on the same row.
Cards still stacking vertically in the preview?
Make sure there is no blank line between the closing </a> of the first card and the opening <a> of the second card. A blank line between them tells Markdown to render them as separate paragraphs.
Also confirm you deleted the original ![]() image lines and did not leave duplicates above or below the new HTML.
help me fix my side-by-side stats cards in my GitHub Profile README
Add a profile views counter and section divider
A profile views counter gives you a quick sense of how many people visit your page. It also adds a professional touch at the very top of your README.
- Switch back to the Edit file tab.
- Scroll to the very top of the file, click at the beginning of the first line (before # Hi, I'm), and press Enter to create a blank line above it.
- On the new first line, paste this badge (using your actual username):
What is this badge?
This badge is powered by komarev.com and counts how many unique visitors view your GitHub profile. The color=blueviolet parameter sets the badge color to match a professional palette.
Next, you will add a horizontal rule to separate your side-by-side stats cards from the Streak Stats card below them.
- Scroll down to the ## GitHub Stats section.
- Find the closing </a> tag of the second card (the Top Languages card).
- Add a blank line below it, then type --- on its own line.
- Leave another blank line, then make sure your existing Streak Stats line sits below it.
Your GitHub Stats section should now look like this:
## GitHub Stats
<a href="https://github.com/YOUR-USERNAME">
<img height=200 align="center" src="https://github-readme-stats.vercel.app/api?username=YOUR-USERNAME&show_icons=true&theme=radical" />
</a>
<a href="https://github.com/YOUR-USERNAME">
<img height=200 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR-USERNAME&layout=compact&theme=radical&langs_count=8&card_width=320" />
</a>
---
[](https://git.io/streak-stats)Why separate the streak card?
The Streak Stats card is wider than the other two and looks best on its own line. The horizontal rule creates a clear visual break, making the layout feel intentional rather than cramped.
Preview and commit your final layout
- Click the Preview tab at the top of the editor.
- Scroll through the full README from top to bottom. Confirm you see the profile views badge at the top, your introduction, social badges, tech stack badges, side-by-side stats cards, a divider, and the streak card.
- Click Commit changes (the green button).
- In the commit dialog, leave the default message or type something like Polish layout and add profile views badge.
- Select Commit directly to the main branch and click Commit changes.
- Click your avatar in the top-right corner of GitHub.
- Select Your profile.
You should see your fully polished profile page. The stats cards sit side by side, sections are separated by clean horizontal lines, and a profile views badge appears at the top.
Stats cards showing as broken images?
Check that the URLs inside your src attributes are correct and contain your actual GitHub username. A typo in the username means the stats API cannot find your data.
If the images load in the Preview tab but not on your profile, give it a minute. GitHub caches profile pages and the cards may take a moment to appear.
help me troubleshoot broken stat card images on my GitHub profile README
✔️ Awesome, I've got everything!
Great. Double check you have committed your changes and your profile page shows the polished layout.
ⓧ I'd like to double check the full code
Here is the complete README.md at this point (with YOUR-USERNAME as a placeholder for your actual GitHub username):
# Hi, I'm [Your Name] 👋
I'm a developer passionate about building things and learning new technologies.
- 🔭 I'm currently working on personal projects
- 🌱 I'm currently learning new frameworks and tools
- 💬 Ask me about web development
- 📫 How to reach me: your-email@example.com
## Connect with me
[](https://linkedin.com/in/YOUR-LINKEDIN)
[](https://your-website.com)
---
## Tech Stack
**Languages:**
**Frameworks & Tools:**
---
## GitHub Stats
<a href="https://github.com/YOUR-USERNAME">
<img height=200 align="center" src="https://github-readme-stats.vercel.app/api?username=YOUR-USERNAME&show_icons=true&theme=radical" />
</a>
<a href="https://github.com/YOUR-USERNAME">
<img height=200 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR-USERNAME&layout=compact&theme=radical&langs_count=8&card_width=320" />
</a>
---
[](https://git.io/streak-stats)Secret mission
Dark/Light Mode Theme Switching
Your profile looks great, but it only works well in one theme. What happens when someone visits your profile with light mode enabled? The dark-themed stats cards clash with the background. In this mission, you'll add responsive theme switching so your cards automatically adapt to each visitor's preferred theme.
Clean Up Your Resources
Clean Up Your Resources
Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely in the GitHub web browser, so there are no ongoing costs.
Resources you used:
- GitHub profile repository (YOUR-USERNAME/YOUR-USERNAME) containing your README.md profile page.
Keep everything running
No action needed. Choose this if you want your profile README to stay visible to anyone who visits your GitHub profile.
- Your repository is free to keep. GitHub does not charge for public repositories.
- The third-party services (Shields.io, github-readme-stats, streak-stats, profile views counter) are all free URL-based services with no account or stored data on your end.
- You can continue editing your README.md at any time to update your profile.
Pause - I'll come back to this later
Hide your profile README temporarily without deleting it. You can bring it back at any time by reversing this step.
- Go to your profile repository on GitHub.
- Click Settings in the repository navigation bar.
- Scroll down to the Danger Zone section.
- Click Change visibility and set the repository to Private.
- Your profile README will no longer display on your public profile, but all your code is preserved.
- To restore it later, change the repository visibility back to Public.
Delete - I don't want to use this again
Remove the profile repository entirely. This permanently deletes your README and all commit history.
- Go to your profile repository on GitHub.
- Click Settings in the repository navigation bar.
- Scroll down to the Danger Zone section.
- Click Delete this repository.
- GitHub will ask you to type the repository name to confirm. Type it and click the confirmation button.
- Your profile page will return to its default state with no README displayed.
Nice Work!
Nice Work!
Nice work! You've just built a professional GitHub profile page that showcases your skills, activity, and personality to anyone who visits your profile.
You've learned how to:
- Created a special GitHub Profile README repository that displays as a landing page on your profile.
- Built a visual tech stack section using Shields.io badges organized by category.
- Added dynamic GitHub Stats, Top Languages, and Streak Stats cards with HTML alignment for a polished layout.
- Added responsive dark/light mode theme switching using the HTML <picture> element.
Ready to quiz yourself?