-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprofile.html
More file actions
259 lines (212 loc) · 13.3 KB
/
Copy pathprofile.html
File metadata and controls
259 lines (212 loc) · 13.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile & Portfolio — Git & GitHub Handbook</title>
<meta name="description"
content="Build a GitHub profile README, pin your best repositories, add stats and badges, and keep your contribution graph looking active.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="navToggle" class="nav-toggle" aria-label="Toggle table of contents">☰ Contents</button>
<div id="navOverlay" class="nav-overlay"></div>
<div class="app">
<nav class="sidebar" id="sidebar" aria-label="Table of contents">
<div class="sidebar-inner">
<a href="index.html" class="brand">
<span class="brand-mark">git</span>
<span class="brand-sub">& github</span>
</a>
<p class="sidebar-tagline">A no-nonsense guide for people who've never touched a terminal.</p>
<div class="site-nav">
<p class="site-nav-label">Guides</p>
<ul class="site-nav-list">
<li><a href="index.html">Home</a></li>
<li><a href="git-basics.html">1. Git Basics</a></li>
<li><a href="github-guide.html">2. GitHub Essentials</a></li>
<li><a href="collaboration.html">3. Working with Others</a></li>
<li><a href="profile.html" class="current">4. Profile & Portfolio</a></li>
<li><a href="tips-tricks.html">5. Tips & Tricks</a></li>
</ul>
</div>
<p class="toc-label">On this page</p>
<ul class="toc-list">
<li><a href="#whatis-profile">The Profile README</a></li>
<li><a href="#create-profile">Creating It</a></li>
<li><a href="#sections">What to Include</a></li>
<li><a href="#stats">Stats & Badges</a></li>
<li><a href="#pins">Pinning Repositories</a></li>
<li><a href="#graph">The Contribution Graph</a></li>
<li><a href="#polish">General Polish</a></li>
</ul>
<a class="sidebar-footer-link" href="https://www.linkedin.com/in/muhammad-hamza-naqi-569741403/"
target="_blank" rel="noopener noreferrer">Connect with the author →</a>
</div>
</nav>
<main class="main" id="top">
<div class="content">
<header class="hero">
<p class="eyebrow">Part 4 of 5 · Beginner's Handbook</p>
<h1>Profile & Portfolio</h1>
<p class="lede">Your GitHub profile is often the first thing a recruiter, client, or
collaborator sees. This part covers turning it from a bare username into something that
actually shows what you can do.</p>
</header>
<hr>
<div class="note-card">
<p><b>New here?</b> This part assumes you already know how to create a repo on GitHub — see
<a href="github-guide.html#newrepo-web">Part 2</a> if you haven't yet.</p>
</div>
<section id="whatis-profile">
<h3><span class="num">01</span> The Profile README</h3>
<p>A <b>README</b> is just a text file that GitHub automatically displays on a repo's page —
short for "read me," it's meant to explain what a project is before anyone digs into the
code. GitHub also has a special trick: if you create a repository with the <i>exact same
name</i> as your username and add a <code>README.md</code> to it, GitHub renders that
one specific README at the very top of your profile page — above your pinned repos, visible
to anyone who visits <code>github.com/your-username</code>.</p>
<p>It's the only repo on GitHub that behaves this way, and it's the closest thing GitHub has to
a personal "about me" page.</p>
</section>
<hr>
<section id="create-profile">
<h3><span class="num">02</span> Creating It</h3>
<ul>
<li>Click <b>+</b> → <b>New repository</b>.</li>
<li>
Name it <i>exactly</i> your GitHub username — GitHub will actually notice and show a
message like <i>"username/username is a special repository"</i> once you type it
correctly.
</li>
<li>Make it <b>Public</b> (private profile READMEs don't render on your profile).</li>
<li>Tick <b>Add a README file</b>, then click <b>Create repository</b>.</li>
<li>Click the pencil icon on the README to edit it directly in the browser, or clone it and
edit locally like any other repo.</li>
</ul>
</section>
<hr>
<section id="sections">
<h3><span class="num">03</span> What to Include</h3>
<p>Keep it scannable — most visitors skim for ten seconds. A solid structure:</p>
<ul>
<li><b>A one- or two-line intro</b> — who you are and what you work on.</li>
<li><b>Currently working on / learning</b> — shows you're active, not just a static bio.</li>
<li><b>Tech stack</b> — languages and tools you actually use, not every technology you've
ever heard of.</li>
<li><b>Featured projects</b> — one-line description and a link, for anything not already
obvious from your pinned repos.</li>
<li><b>How to reach you</b> — email, LinkedIn, portfolio site, whatever you actually check.</li>
</ul>
<p>README files are written in <b>Markdown</b> — a simple way to format text using plain
symbols instead of a toolbar: <code>##</code> before a line makes it a heading,
<code>**text**</code> makes it <b>bold</b>, and <code>[label](url)</code> turns it into a
clickable link. GitHub reads these symbols and renders styled text automatically, in any
README. Here's a minimal starting template using exactly those three tricks:</p>
<div class="file">
<div class="file-bar">README.md</div>
<div class="file-body">
## Hi, I'm Jane 👋<br><br>
I build web apps with React and Node, and I'm currently learning Go.<br><br>
**Tech stack:** JavaScript · Python · React · PostgreSQL<br><br>
**Find me:** [LinkedIn](https://linkedin.com/in/jane) ·
jane@example.com
</div>
</div>
</section>
<hr>
<section id="stats">
<h3><span class="num">04</span> Stats & Badges</h3>
<p>You can drop in small auto-generated images that pull live data straight from your account —
no code or hosting required on your end. Two popular ones people embed as plain Markdown
image links:</p>
<ul>
<li>
<b>GitHub stats card</b> (via the community <code>github-readme-stats</code> project) —
shows your star count, commits, and top languages as an image.
</li>
<li>
<b>Shields.io badges</b> — small pill-shaped labels for things like your latest release,
license, or follower count.
</li>
</ul>
<p>These are just image URLs, so you paste them into your README like any other image:</p>
<div class="file">
<div class="file-bar">README.md</div>
<div class="file-body">
</div>
</div>
<div class="note-card">
<p><b>Use these sparingly.</b> One stats card and a couple of badges look sharp; a wall of
ten badges reads as clutter and slows the page down. Pick the two or three that actually
say something about you.</p>
</div>
</section>
<hr>
<section id="pins">
<h3><span class="num">05</span> Pinning Repositories</h3>
<p>By default your profile shows your most recently active repos — not necessarily your best
ones. Pin the ones you actually want people to see:</p>
<ul>
<li>Go to your profile → <b>Customize your pins</b>.</li>
<li>Choose up to six repositories (your own, or ones you've contributed to).</li>
<li>Pick projects with a clear README, a real description, and — ideally — a live demo link
or screenshot, over half-finished experiments.</li>
</ul>
</section>
<hr>
<section id="graph">
<h3><span class="num">06</span> The Contribution Graph</h3>
<p>That grid of green squares on your profile counts commits, issues, and PRs on public repos
(and on private repos too, if you opt in). A few things that trip people up:</p>
<ul>
<li>
Commits only count if the email in your commit (<code>git config user.email</code>)
matches an email verified on your GitHub account.
</li>
<li>
To include private-repo activity in the graph, go to your profile → <b>Contribution
settings</b> → enable <b>"Include private contributions on my profile."</b> The exact
commit content stays hidden — only the square lights up.
</li>
</ul>
<p>Don't chase the graph for its own sake — a slightly quieter graph with real, working projects
beats one padded with meaningless commits.</p>
</section>
<hr>
<section id="polish">
<h3><span class="num">07</span> General Polish</h3>
<ul>
<li><b>Give every repo a real README</b> — what it does, how to run it, a screenshot if it's
visual. This matters far more than badges.</li>
<li><b>Add a description and topics</b> to each repo (the gear icon next to "About" on a
repo's page) — topics make your projects searchable on GitHub.</li>
<li><b>Pick a license</b> if you want others to be able to reuse your code — GitHub can add
one for you when creating or editing a repo.</li>
<li><b>Delete or archive dead experiments</b> rather than leaving twenty half-finished repos
visible — quality over quantity.</li>
<li><b>Keep it updated.</b> A profile that mentions "currently learning React" three years
ago reads worse than no profile README at all.</li>
</ul>
</section>
<hr>
<div class="note-card">
<p><b>Want to work faster once the basics feel automatic?</b> Head to
<a href="tips-tricks.html">Part 5 — Tips & Tricks</a> for aliases, stashing, and a few
genuinely useful shortcuts.
</p>
</div>
<hr>
<footer class="page-footer">
<p>Prepared by <b>Muhammad Hamza Naqi</b></p>
<a class="linkedin-btn" href="https://www.linkedin.com/in/muhammad-hamza-naqi-569741403/"
target="_blank" rel="noopener noreferrer">Connect on LinkedIn</a>
</footer>
</div>
</main>
</div>
<button id="backTop" class="back-top" aria-label="Back to top">↑</button>
<script src="script.js"></script>
</body>
</html>