You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p><spanclass="teal-text"><iclass="fa-solid fa-user" title="a person" aria-label="user"></i></span> learn about you as a person who has interests and a personality</p>
370
370
</div>
371
371
</section>
372
-
<sectionid="photo-bio" class="slide level2" data-menu-title="Add a photo & bio">
372
+
<sectionid="photo-bio1" class="slide level2" data-menu-title="Add a photo & bio 1">
373
373
<h2></h2>
374
-
<p><spanclass="slide-title">Personalize your profile</span></p>
374
+
<p><spanclass="slide-title">1. Personalize your profile</span></p>
375
375
<hr>
376
+
<p><br></p>
376
377
<divclass="columns">
377
378
<divclass="column" style="width:50%;">
378
379
<divclass="cell" data-layout-align="center">
@@ -387,67 +388,88 @@ <h2></h2>
387
388
<divclass="center-text gray-text body-text-s">
388
389
<p>By default, your profile photo is a unique <ahref="https://github.blog/news-insights/company-news/identicons/">Identicon</a>, which is generated from your GitHub user ID – pretty cool! But you should absolutely update this with your photo.</p>
<li>Takes very little time and “gives a sense of authenticity”</li>
393
394
<li>Photo makes your commits / contributions more easily recognizable</li>
394
395
<li>Short bio is a nice quick intro + links to your public profiles / website(s)</li>
395
396
</ul>
396
-
<p><br></p>
397
-
<divclass="center-text blue-box">
398
-
<p><spanclass="dark-blue-text"><strong>To update your profile image and information:</strong></span></p>
399
-
<p><em>Click on your profile image, which takes you directly to your settings page</em></p>
400
-
</div>
401
397
</div></div>
402
-
<divclass="footer">
403
-
<p>Find more information on <ahref="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile">GitHub Docs</a></p>
404
-
</div>
405
398
</section>
406
-
<sectionid="pin-repos1" class="slide level2" data-menu-title="Pin your top repos 1">
399
+
<sectionid="photo-bio2" class="slide level2" data-menu-title="Add a photo & bio 2">
407
400
<h2></h2>
408
-
<p><spanclass="slide-title">Pin the repos that demonstrate your skills</span></p>
401
+
<p><spanclass="slide-title">1. Personalize your profile</span></p>
<p><spanclass="dark-blue-text"><strong>To update your profile image and bio, click on <em>Edit profile</em> or on your photo. Consider adding:</strong></span></p>
412
416
<ul>
413
-
<li><strong>Each should be well-organized</strong>, have a README, and ideally a short description (update “About” section)</li>
414
-
<li><strong>Order them</strong> from most > least “important”</li>
415
-
<li><strong>Update your pinned repos</strong> as necessary</li>
416
-
<li><strong>Which repos should you pin?</strong>
417
-
<ul>
418
-
<li><em>“things that do the best job of communicating the skills that you’re bringing to the table”</em> (A. Haddad)
419
-
<ul>
420
-
<li>personal website is a great place to start!</li>
421
-
<li>personal projects</li>
422
-
<li>course projects</li>
423
-
<li>capstone repo(s)</li>
424
-
</ul></li>
425
-
</ul></li>
417
+
<li>a photo!</li>
418
+
<li>your pronouns</li>
419
+
<li>your company or school</li>
420
+
<li>current location</li>
421
+
<li>personal website URL</li>
422
+
<li>social media (LinkedIn & Bluesky are great options to include!) – best if these are professional accounts</li>
423
+
<li>a <em>short</em> bio – your current title or role, or even a tagline is great here</li>
426
424
</ul>
427
-
</div><divclass="column" style="width:50%;">
428
-
<p><br><br><br><br></p>
429
-
<divclass="center-text blue-box">
430
-
<p><spanclass="dark-blue-text"><strong>To pin (up to six) repositories:</strong></span></p>
431
-
<p><strong>A.</strong><em>Navigate to your desired repo > click Pin (top right)</em>, or</p>
432
-
<p><strong>B.</strong><em>If you already have a pinned repo(s): navigate to you landing page > click Customize your pins > check up to 6 boxes</em></p>
433
-
</div>
434
425
</div></div>
435
426
<divclass="footer">
436
-
<p>Find more information on <ahref="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/pinning-items-to-your-profile">GitHub Docs</a></p>
427
+
<p>Find more information on <ahref="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile">GitHub Docs</a></p>
437
428
</div>
438
429
</section>
439
-
<sectionid="pin-repos2" class="slide level2" data-menu-title="Pin your top repos 2">
430
+
<sectionid="pin-repos1" class="slide level2" data-menu-title="Pin your top repos 1">
440
431
<h2></h2>
441
-
<p><spanclass="slide-title">Pin the repos that demonstrate your skills</span></p>
432
+
<p><spanclass="slide-title">2. Pin repos that showcase your skills</span></p>
<p>Find more information on <ahref="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/pinning-items-to-your-profile">GitHub Docs</a></p>
446
437
</div>
447
438
</section>
439
+
<sectionid="pin-repos1" class="slide level2" data-menu-title="Pin your top repos 1">
440
+
<h2></h2>
441
+
<p><spanclass="slide-title">2. Pin repos that showcase your skills</span></p>
442
+
<hr>
443
+
<!-- :::: {.columns}
444
+
445
+
::: {.column width="50%"} -->
446
+
<div>
447
+
<ul>
448
+
<liclass="fragment"><spanclass="teal-text"><strong>Each should be well-organized</strong></span>, have a README, and ideally a short description (update “About” section)</li>
449
+
<liclass="fragment"><spanclass="teal-text"><strong>Order them</strong></span> from most > least “important”</li>
450
+
<liclass="fragment"><spanclass="teal-text"><strong>Update your pinned repos</strong></span> as necessary</li>
451
+
<liclass="fragment"><spanclass="teal-text"><strong>Which repos should you pin?</strong></span>
452
+
<ul>
453
+
<liclass="fragment"><em>“things that do the best job of communicating the skills that you’re bringing to the table”</em> (A. Haddad)
454
+
<ul>
455
+
<liclass="fragment">personal website is a great place to start!</li>
456
+
<liclass="fragment">personal projects</li>
457
+
<liclass="fragment">course projects and / or capstone repo(s)</li>
458
+
</ul></li>
459
+
</ul></li>
460
+
</ul>
461
+
</div>
462
+
<divclass="fragment">
463
+
<p><spanclass="body-text-m dark-blue-text"><strong>Pin up to 6 repositories by:</strong></span></p>
464
+
<ul>
465
+
<li>Navigating to your desired repo > click <em>Pin</em> (top right), <strong><em>or</em></strong></li>
466
+
<li>If you already have a pinned repo(s): from landing page, click <em>Customize your pins</em>, then check up to 6 boxes</li>
<p>Troubleshooting or trying to understand your contributions map? Check out this help documentation: <ahref="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/why-are-my-contributions-not-showing-up-on-my-profile">Why are my contributions now showing up on my profile?</a></p>
484
+
<p><strong>Troubleshooting or trying to understand your contributions map? Check out this help documentation: <ahref="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/managing-contribution-settings-on-your-profile/why-are-my-contributions-not-showing-up-on-my-profile">Why are my contributions now showing up on my profile?</a></strong></p>
<p><spanclass="body-text-m dark-blue-text"><strong>To add a profile README:</strong></span></p>
495
+
<oltype="1">
496
+
<li>Create a new repo and give it the <strong>same name</strong> as your GitHub username (e.g. <ahref="https://github.com/samanthacsik/samanthacsik">my repo</a> is named “samanthacsik”, which matches my GitHub username)</li>
497
+
<li>Make sure your repo is <strong>Public</strong> and initialize it with a <strong>README</strong></li>
498
+
<li>Click the <strong>Edit README</strong> button to edit directly in the browser (I find this easier than cloning and editing locally)</li>
499
+
</ol>
500
+
<divclass="footer">
472
501
<p>See <ahref="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme">GitHub documentation</a> for more info on profile READMEs</p>
<li>Something(s) that you’re <strong>currently working on</strong></li>
490
-
<li>Guidance on how to connect with your <strong>professional communities</strong></li>
514
+
<liclass="fragment">A version of <spanclass="teal-text"><strong>your bio</strong></span> (I start mine off with text from my personal website landing page)</li>
515
+
<liclass="fragment"><spanclass="teal-text"><strong>Impactful contributions</strong></span> you’ve made (and context)</li>
<liclass="fragment">Something(s) that you’re <spanclass="teal-text"><strong>currently working on</strong></span></li>
518
+
<liclass="fragment">Guidance on how to connect with your <spanclass="teal-text"><strong>professional communities</strong></span></li>
491
519
</ul></li>
492
-
<li>Some template suggestions are provided when you first create your repo / initialize your README (and check out the <ahref="https://www.webfx.com/tools/emoji-cheat-sheet/">Emoji Cheat Sheet</a>)</li>
520
+
<liclass="fragment">Some template suggestions are provided when you first create your repo / initialize your README (and check out the <ahref="https://www.webfx.com/tools/emoji-cheat-sheet/">Emoji Cheat Sheet</a>)</li>
493
521
</ul>
494
-
</div><divclass="column" style="width:50%;">
495
-
<p><br><br></p>
496
-
<divclass="center-text blue-box">
497
-
<p><spanclass="dark-blue-text"><strong>To add a profile README:</strong></span></p>
498
-
<p><strong>1.</strong><em>Create a new repo and give it the <strong>same name</strong> as your GitHub username (e.g. <ahref="https://github.com/samanthacsik/samanthacsik">my repo</a> is named “samanthacsik”)</em></p>
499
-
<p><strong>2.</strong><em>Make sure your repo is <strong>Public</strong> and initialize it with a <strong>README</strong></em></p>
500
-
<p><strong>3.</strong><em>Click the <strong>Edit README</strong> button to edit directly in the browser (I find this easier than cloning and editing locally)</em></p>
501
522
</div>
502
-
</div></div>
503
523
<divclass="footer">
504
524
<p>See the <ahref="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme">GitHub documentation</a> for more info on profile READMEs</p>
505
525
</div>
506
526
</section>
507
-
<sectionid="explore-other-profile-readmes" class="slide level2" data-menu-title="Explore other profile READMEs">
<p><spanclass="slide-title2">Explore / adapt from other profile READMEs</span></p>
529
+
<p><spanclass="slide-title">4. Add a profile README</span></p>
510
530
<hr>
511
-
<p>See someone with a really cool README? Check out the source code! Navigate to their profile README repo > click on the <code>README.md</code> file > switch to “Code” view:</p>
531
+
<p>See someone with a really cool README? <spanclass="teal-text"><strong>Check out the source code!</strong></span> Navigate to their profile README repo > click on the <code>README.md</code> file > switch to “Code” view:</p>
<p><spanclass="slide-title2">Improve your GitHub profile page accessibility</span></p>
533
553
<hr>
534
-
<p><em>A few simple ways to ensure that assistive technology can help users understand and navigate your README:</em></p>
554
+
<p><spanclass="dark-blue-text body-text-m"><strong>A few simple ways to ensure that assistive technology can help users understand and navigate your README:</strong></span></p>
535
555
<divclass="fragment">
536
556
<oltype="1">
537
-
<li><strong>Make links descriptive:</strong> assistive technologies present links in isolation, so provide context
557
+
<li><spanclass="teal-text"><strong>Make links descriptive:</strong></span> assistive technologies present links in isolation, so provide context
538
558
<ul>
539
-
<li>e.g. opt for <em>“Find the <ahref="https://bren.ucsb.edu/courses/eds-296-1f">EDS 296-1F course description</a>…”</em> rather than <em>“Find the EDS 296-1F course description <ahref="https://bren.ucsb.edu/courses/eds-296-1f">here</a>”</em></li>
559
+
<li>e.g. opt for <em>“Find the <ahref="https://ucsb-meds.github.io/career-professional-dev/">Career & Professional Development Workshop materials</a>…”</em> rather than <em>“Find Career & Professional Development Workshop materials <ahref="https://ucsb-meds.github.io/career-professional-dev/">here</a>”</em></li>
540
560
</ul></li>
541
561
</ol>
542
562
</div>
543
563
<divclass="fragment">
544
564
<olstart="2" type="1">
545
-
<li><strong>Add alt text to images:</strong> screen readers read alt text descriptions out loud
565
+
<li><spanclass="teal-text"><strong>Add alt text to images:</strong></span> screen readers read alt text descriptions out loud
546
566
<ul>
547
567
<li>e.g. in html, <code><img src="image-url.com" alt="This is alt text"></code></li>
548
568
</ul></li>
549
569
</ol>
550
570
</div>
551
571
<divclass="fragment">
552
572
<olstart="3" type="1">
553
-
<li><strong>Use proper heading structure:</strong> helps people understand content structure and more easily navigate sections
573
+
<li><spanclass="teal-text"><strong>Use proper heading structure:</strong></span> helps people understand content structure and more easily navigate sections
554
574
<ul>
555
575
<li>e.g. use <code>#</code> for your title, then the appropriate level-header thereafter (don’t skip levels)</li>
556
576
</ul></li>
557
577
</ol>
558
578
</div>
559
579
<divclass="fragment">
560
580
<olstart="4" type="1">
561
-
<li><strong>Structure lists with proper markup:</strong> helps people understand lists as they are intended
581
+
<li><spanclass="teal-text"><strong>Structure lists with proper markup:</strong></span> helps people understand lists as they are intended
562
582
<ul>
563
583
<li>e.g. use <code>*</code> or <code>-</code> for each list item, rather than special characters or emojis</li>
564
584
</ul></li>
565
585
</ol>
566
586
<divclass="footer">
567
-
<p>The above pointers come from the <ahref="https://github.blog/">github.blog</a> post, <ahref="https://github.blog/developer-skills/github/5-tips-for-making-your-github-profile-page-accessible/">5 tips for making your GitHub profile page accessible</a>.</p>
568
-
<p><strong>Importantly, these tips apply for <em>all</em> web pages, not just your GitHub profile README!</strong></p>
587
+
<p>The above pointers come from the <ahref="https://github.blog/">github.blog</a> post, <ahref="https://github.blog/developer-skills/github/5-tips-for-making-your-github-profile-page-accessible/">5 tips for making your GitHub profile page accessible</a>, and they apply to <em>all</em> web pages, not just your README!</p>
588
+
</div>
589
+
</div>
590
+
</section>
591
+
<sectionid="end" class="slide level2" data-menu-title="# END #" data-background="#047C90">
592
+
<h2></h2>
593
+
<divclass="page-center vertical-center">
594
+
<pclass="custom-subtitle bottombr">
595
+
You may use the remainder of our time to finish customizing your GitHub profile!
596
+
</p>
597
+
<!-- <p class="caption-text">*~ This is the end of Lesson 2 (of 2) ~*</p> -->
0 commit comments