Pull

.gitattributes

@@ -0,0 +1 @@
+* text=auto

README.md

@@ -1,5 +1,106 @@
 # Hello, Summer of Tech!
 
-This is an example page for the Summer of Tech git tutorial.
+This is an example repository for the Summer of Tech git tutorial.
 
 Feel free to fork and modify it as you see fit.
+
+## Setup
+
+Make sure you have installed the GitHub desktop client and signed up to GitHub:
+
+* [GitHub Desktop](https://desktop.github.com/ "GitHub Desktop")
+* [Signup to GitHub](https://github.com/join "Signup to GitHub")
+
+## The Workshop
+
+1. (On GitHub) Fork the Flux [hello-summer](https://github.com/fluxfederation/hello-summer "hello-summer") repository.
+2. (With GitHub Desktop) Clone your hello-summer repository.
+3. Add your name and photo.
+4. (With GitHub Desktop) Commit and push your changes.
+5. (On GitHub) View the result.
+
+### Fork the Flux hello-summer repository
+
+Extra help docs: [Forking repositories](https://guides.github.com/activities/forking/ "Forking repositories").
+
+A Fork is a copy of another person's repository onto your GitHub account.
+By copying a repository, you may then edit your copy as you see fit (make sure to respect the LICENSE), either for yourself or as a playground before submitting a pull request (patch or fix).
+
+We will be forking the [hello-summer](https://github.com/fluxfederation/hello-summer "hello-summer") repository to edit it for yourself.
+
+1. Visit [hello-summer](https://github.com/fluxfederation/hello-summer "hello-summer").
+2. Click "Fork" in the top right hand corner. You should be redirected to a copy of the repository
+   on your account.
+
+### Clone your hello-summer repository
+
+Extra help docs: [Cloning your fork](https://guides.github.com/activities/forking/#clone "Cloning your fork").
+
+Cloning a repository will copy it to your computer, so that you may edit it locally.
+This can be done a few ways. We're going to do it through the GitHub Desktop client.
+(N.B., these instructions are for using the client on a Mac, but it should be very similar for Windows or Linux.)
+
+1. Open GitHub Desktop.
+2. Sign in with your GitHub account.
+    1. Click "GitHub Desktop" in the menu bar.
+    2. Click "Preferences".
+    3. Go to the "Accounts" tab.
+    4. Click "Sign In" next to "GitHub.com".
+3. Clone your repository.
+    1. Click "File" in the menu bar.
+    2. Click "Clone Repository...".
+    3. Go to the "Github.com" tab.
+    4. Find and click "your-username/hello-summer".
+    5. Select a destination path.
+    6. Click "Clone".
+
+### Add your name and photo
+
+Update the website! You can do this using your favourite editor.
+
+There are a couple of TODO's in the index.html file:
+* Your name.
+* Your picture.
+* Your blurb.
+* Your links.
+
+Edit some or all, and anything else that you want to change.
+
+### Commit and push your changes
+
+We're going to create a commit with the new versions of the files.
+We can view what we have changed in GitHub Desktop before making the commit.
+We can also choose to only commit some of the changes.
+
+1. Open GitHub Desktop.
+2. Ensure "hello-summer" is selected as the "Current Repository" in the top left corner.
+3. Get the commit ready.
+    1. Tick any changes you wish to commit in the left hand panel (they will be ticked by default,
+       so you shouldn't have to do anything here).
+    2. Write a summary and description for the commit.
+4. Click commit to master!
+5. Click "Push origin" (to the right of "Current Repository" and "Current Branch".
+
+If you click on the "History" tab (just below "Current Repository"), you should see your new commit
+at the top.
+
+### View the result
+
+We're going to use GitHub pages to view the result.
+GitHub pages is essentially a web server that grabs the website from your repository.
+You need to enable it (it's disabled by default), and then you can view the website at https://your-username.github.io/hello-summer.
+
+1. Open GitHub.
+2. Enable GitHub Pages.
+    1. Click on "hello-summer" from "Your repositories" (the box on the right).
+    2. Click "Settings" (make sure to click on the repository settings, and not your account settings).
+    3. Scroll down to "GitHub Pages".
+    4. Select "master" as the "Source".
+    5. Click "Save".
+3. Visit https://your-username.github.io/hello-summer (make sure to replace your-username with your
+   actual username).
+
+## Additional links
+
+* [GitHub help](https://help.github.com/ "GitHub help").
+* [Git documentation](https://git-scm.com/doc "Git documentation").

hello.css

@@ -1,9 +1,13 @@
+/*
+ * purple-color: #5f259f;
+ * pink-color: #f04e99;
+ */
 body {
   margin: 0;
   padding: 0;
   font: 1em/1.5em "Open Sans", sans-serif;
-  background-color: #d2232a;
-  color: white;
+  background-color: #5f259f;
+  color: #fff;
 }
 
 a {
@@ -81,7 +85,7 @@ main p {
 }
 
 .social li a:hover {
-  color: #00aeef;
+  color: #f04e99;
 }
 
 .social li a::before {
@@ -93,6 +97,7 @@ main p {
   font: normal 2rem/1em "FontAwesome";
 }
 
+.social li a[rel="github"]::before { content: '\f09b'; }
 .social li a[rel="home"]::before { content: '\f015'; }
 .social li a[rel="twitter"]::before { content: '\f099'; }
 

index.html

@@ -12,25 +12,33 @@
       <p>My name is</p>
     </header>
     <main>
-      <img src="me.png">
+      <!--
+      TODO: Replace the image with your own, e.g., "me.png" or "me.jpg".
+            You'll need to ensure that you add the image to the codebase if you change this.
+      -->
+      <img src="me.svg">
+      <!-- TODO: Replace the text with your name. -->
       <h1>Your name here</h1>
       <p>
         Here's a good place to write a little bit about yourself.
         Include anything you want people to know about you.
       </p>
+      <!-- TODO: Replace the text with a description about yourself. -->
       <p>
          Intelligentsia dreamcatcher chartreuse franzen sartorial ugh. Whatever
          brunch asymmetrical tousled occupy before they sold out, distillery VHS
          fingerstache salvia church-key readymade listicle. Craft beer skateboard
          hella, hoodie brooklyn.
       </p>
       <ul class="social">
-        <li><a rel="home" href="http://example.com">My website</a></li>
-        <li><a rel="twitter" href="http://twitter.com/powershop">@powershop</a></li>
+        <!-- TODO: Replace the links with your own GitHub account, website and Twitter handle. -->
+        <li><a rel="github" href="http://github.com/fluxfederation">My code</a></li>
+        <li><a rel="home" href="http://fluxfederation.com">My website</a></li>
+        <li><a rel="twitter" href="http://twitter.com/fluxfederation">@fluxfederation</a></li>
       </ul>
     </main>
     <footer>
-      <a href="http://powershop.co.nz"><img src="winky.svg" alt="Powershop"></a>
+      <a href="http://fluxfederation.com"><img src="flux-logo.svg" alt="Flux Federation"></a>
       <a href="http://www.summeroftech.co.nz/"><img src="sot-logo.svg" alt="Summer of Tech"></a>
     </footer>
   </body>