[Improvement]: Get started (phase 1): Setting up your profile (new article) #12378 (#48685)

Co-authored-by: Siara <108543037+SiaraMist@users.noreply.github.com>

content/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme.md

@@ -43,12 +43,7 @@ You can format text and include emoji, images, and GIFs in your profile README b
 
 ## Adding a profile README
 
-{% data reusables.repositories.create_new %}
-1. Under "Repository name", type a repository name that matches your {% data variables.product.prodname_dotcom %} username. For example, if your username is "octocat", the repository name must be "octocat".
-1. Optionally, in the "Description" field, type a description of your repository. For example, "My personal repository."
-1. Select **Public**.
-{% data reusables.repositories.initialize-with-readme %}
-{% data reusables.repositories.create-repo %}
+{% data reusables.profile.create-profile-readme %}
 1. Above the right sidebar, click **Edit README**.
 
   The generated README file is pre-populated with a template to give you some inspiration for your profile README.

content/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile.md

@@ -46,12 +46,7 @@ If you use Gravatar, and your Gravatar image is associated with the email you us
 ### Setting a profile picture
 
 {% data reusables.user-settings.access_settings %}
-1. Under "Profile Picture", select {% octicon "pencil" aria-hidden="true" %} **Edit**, then click **Upload a photo...**.
-
-   ![Screenshot of the "Public profile" section of a user account's settings. A button, labeled with a pencil icon and "Edit", is outlined in dark orange.](/assets/images/help/profile/edit-profile-photo.png)
-1. Select an image, then click **Upload**.
-1. Crop your picture.
-1. Click **Set new profile picture**.
+{% data reusables.accounts.set-profile-picture %}
 
 ### Resetting your profile picture to the identicon
 
@@ -109,7 +104,7 @@ For a longer-form and more prominent way of displaying customized information ab
 
 ## Adding pronouns to your profile
 
-Add pronouns to your public user profile to share information about yourself with other {% data variables.product.product_name %} users. Your pronouns will only be visible to users that are signed in to {% data variables.product.product_name %}.
+Add pronouns to your public user profile to share information about yourself with other {% data variables.product.product_name %} users. {% data reusables.profile.pronouns-visibility %}
 
 {% data reusables.user-settings.access_settings %}
 1. Under **Pronouns**, add the pronouns that you want displayed on your profile. You may add custom pronouns.

content/get-started/quickstart/downloading-files-from-github.md

@@ -1,6 +1,6 @@
 ---
 title: Downloading files from GitHub
-shortTitle: Download files from GitHub
+shortTitle: Download files
 intro: 'Learn how to download files from {% data variables.product.prodname_dotcom %}, and understand the difference between downloading, cloning, and forking.'
 versions:
   fpt: '*'

content/get-started/quickstart/index.md

@@ -15,6 +15,7 @@ children:
   - /about-github-and-git
   - /creating-an-account-on-github
   - /hello-world
+  - /setting-up-your-profile
   - /finding-inspiration-on-github
   - /downloading-files-from-github
   - /uploading-a-project-to-github

content/get-started/quickstart/setting-up-your-profile.md

@@ -0,0 +1,102 @@
+---
+title: Setting up your profile
+shortTitle: Set up your profile
+intro: 'Your profile tells people who you are and what you''re interested in.'
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghec: '*'
+topics:
+  - Profile
+  - Accounts
+type: how_to
+---
+
+## About your profile
+
+Your profile page on {% data variables.product.prodname_dotcom %} is a place where people can find out more about you. You can use your profile to:
+
+- **Share** your interests and skills.
+- **Showcase** your projects and contributions.
+- **Express** your identity{% ifversion fpt or ghec %} and show the {% data variables.product.prodname_dotcom %} community who you are{% endif %}.
+
+In this tutorial, you'll learn the basics of how to personalize your profile by adding a profile picture, bio, and a profile README.
+
+### Prerequisites
+
+- You must have a {% data variables.product.prodname_dotcom %} account. {% ifversion fpt or ghec %}For more information, see "[AUTOTITLE](/get-started/quickstart/creating-an-account-on-github)."{% endif %}
+
+## Adding a profile picture and bio
+
+First, we'll add a picture to your profile. Your profile picture helps identify you across {% data variables.product.product_name %}.
+
+### Adding a profile picture
+
+1. In the upper-right corner of any page, click your existing profile avatar, then, from the dropdown menu, click **Settings**.
+{% data reusables.accounts.set-profile-picture %}
+
+Next, we'll add some basic information about yourself to share with other {% data variables.product.product_name %} users. This information will display below your profile picture on your profile page.
+
+### Adding a bio
+
+1. On your profile page, under your profile picture, click **Edit profile**.
+1. Under "Bio", write one or two sentences about yourself, such as who you are and what you do.
+
+   {% tip %}
+
+   **Tip:** Keep the bio short; we'll add a longer description of your interests in your profile README in the section below.
+
+   {% endtip %}
+1. To add an emoji to your bio, visit "[Emoji cheat sheet](https://www.webfx.com/tools/emoji-cheat-sheet/)" and copy and paste an emoji into the "Bio" dialog box.
+1. Optionally, add your {% ifversion profile-pronouns %}preferred pronouns,{% endif %} workplace, location and timezone{% ifversion profile-social-links %}, and any links to your personal website and social accounts{% endif %}. {% ifversion profile-pronouns %}{% data reusables.profile.pronouns-visibility %}{% endif %}
+1. Click **Save**.
+
+## Adding a profile README
+
+In the "[AUTOTITLE](/get-started/quickstart/hello-world)" tutorial, we learned how to create a new repository and how to add a `README.md` file to it. We'll do the same thing here, but this time, we'll create a special README file that displays on your profile page.
+
+Your profile README lets you showcase information about yourself in more detail, such as your interests, skills, and background.
+
+As we learned in the "Hello world" tutorial, `README.md` files are written using Markdown syntax, which is just a way to format plain text.
+
+In the following steps, we'll create and edit your profile README.
+
+### Step 1: Create a new repository for your profile README
+
+{% data reusables.profile.create-profile-readme %}
+
+### Step 2: Edit the `README.md` file
+
+{% data reusables.profile.edit-profile-readme %}
+1. In the "Edit" view, you'll see some pre-populated text to get you started. On line 1, delete the text that says `### Hi there` and type `# About me`.
+   - In Markdown syntax, `###` renders the plain text as a small ("third-level") heading, while `##` or `#` renders a second- and first-level heading respectively.
+1. Toggle to "Preview" to see how the plain text now renders. You should see the new text displayed as a much larger heading.
+1. Toggle back to the "Edit" view.
+1. Delete line 3 and line 16.
+   - This HTML syntax (e.g. ` <!-- `) is keeping the other lines hidden when you toggle to "Preview".
+1. Complete some of the prompts on lines 8 to 15, and delete any lines you don't want. For example, add your interests, skills, hobbies, or a fun fact about yourself.
+1. Now, toggle to "Preview". You should see your completed prompts render as a bulleted list.
+1. Toggle back to "Edit" and remove any other lines of text that you don't want displayed on your profile.
+1. Keep customizing and editing your profile README.
+   - Use the "[Emoji cheat sheet](https://www.webfx.com/tools/emoji-cheat-sheet/)" to add emojis.
+   - Use the "[Markdown cheat sheet](https://www.markdownguide.org/cheat-sheet/) to experiment with additional Markdown formatting.
+
+### Step 3: Publish your changes to your profile
+
+1. When you're happy with how your profile README looks in "Preview", and you're ready to publish it, click **Commit changes..**.
+1. In the open dialog box, simply click again **Commit changes**.
+1. Navigate back to your profile page. You will see your new profile README displayed on your profile.
+
+## Next steps
+
+If you want to learn more Markdown syntax and add more sophisticated formatting to your profile README, see "[AUTOTITLE](/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github)."
+
+Alternatively, try the [{% data variables.product.prodname_learning %}](https://skills.github.com/) "Communicate using Markdown" course.
+
+Next, we'll look at ways you can explore {% data variables.product.product_name %} in "[AUTOTITLE](/get-started/quickstart/finding-inspiration-on-github)."
+
+## Further reading
+
+- [AUTOTITLE](/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/about-your-profile)
+- [AUTOTITLE](/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile)
+- [AUTOTITLE](/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)

content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github.md

@@ -47,9 +47,7 @@ If you don't already have a profile README, you can add one.
 If you already have a profile README, you can edit it from your profile page.
 
 {% data reusables.profile.navigating-to-profile %}
-1. Click the {% octicon "pencil" aria-label="Edit this file" %} next to your profile README.
-
-   ![Screenshot of @octocat's profile README. A pencil icon is outlined in dark orange.](/assets/images/help/profile/edit-profile-readme.png)
+{% data reusables.profile.edit-profile-readme %}
 
 {% endif %}
 

data/reusables/accounts/set-profile-picture.md

@@ -0,0 +1,6 @@
+1. Under "Profile Picture", select {% octicon "pencil" aria-hidden="true" %} **Edit**, then click **Upload a photo...**.
+
+   ![Screenshot of the "Public profile" section of a user account's settings. A button, labeled with a pencil icon and "Edit", is outlined in dark orange.](/assets/images/help/profile/edit-profile-photo.png)
+1. Select an image, then click **Upload**.
+1. Crop your picture.
+1. Click **Set new profile picture**.

data/reusables/profile/create-profile-readme.md

@@ -0,0 +1,6 @@
+{% data reusables.repositories.create_new %}
+1. Under "Repository name", type a repository name that matches your {% data variables.product.prodname_dotcom %} username. For example, if your username is "octocat", the repository name must be "octocat".
+1. Optionally, in the "Description" field, type a description of your repository. For example, "My personal repository."
+1. Select **Public**.
+{% data reusables.repositories.initialize-with-readme %}
+{% data reusables.repositories.create-repo %}

data/reusables/profile/edit-profile-readme.md

@@ -0,0 +1,3 @@
+1. Click the {% octicon "pencil" aria-label="Edit this file" %} next to your profile README.
+
+   ![Screenshot of @octocat's profile README. A pencil icon is outlined in dark orange.](/assets/images/help/profile/edit-profile-readme.png)

data/reusables/profile/pronouns-visibility.md

@@ -0,0 +1 @@
+Your pronouns will only be visible to users that are signed in to {% data variables.product.product_name %}.