Merge pull request #447 from subz3r0o0/master

Updated with READMe with New Instructions

README.md

@@ -20,27 +20,31 @@ Editing content on [opensourcedesign.net][osd-net] can be done in 3 ways, all of
 
 ## Code & Design The Website
 
-You need some basic ability to use a terminal as well as some knowledge of web
-development like HTML, CSS, and JavaScript. The site is built with the following
-programming tools:
+To contribute to the website, you'll need some basic terminal skills and knowledge of web development technologies like HTML, CSS, and JavaScript. The [open source design.net](https://opensourcedesign.net/) website is built with the following tools:
 
 - [Jekyll][jekyll]
 - [Bootstrap][bootstrap]
 
 ### Installing
 
-This step requires having a `ruby` development environment and `git` installed
-and configured to connect to GitHub with SSH.
+Before you begin, ensure you have a `Ruby` development environment and `Git` installed and configured to connect to GitHub with SSH.
+
+#### Prerequisites
+
+- **Ruby**: Jekyll requires Ruby version 2.5.0 or higher.
+- **RubyGems**: Ruby package manager.
+- **GCC and Make**: Essential for compiling native extensions.
+
+You can install these dependencies using the following guides:
 
 - [Installing Ruby][installing-ruby]
 - [Using GitHub with SSH][github-ssh]
 
-1. Install Jekyll using and other Ruby gems. Find out more on https://jekyllrb.com/docs/
-
-> e.g. Jekyll requires the following:
-Ruby version 2.5.0 or higher
-RubyGems
-GCC and Make
+#### Installation Steps
+
+1. **Install Bundler and Jekyll**
+
+First, install Bundler, which manages Ruby dependencies:
 
 ```sh
 sudo gem install bundler

index.html

@@ -162,6 +162,14 @@ <h2>Contact Us</h2>
                         <i class="fa fa-comment fa-fw"></i> <span class="network-name">Forum</span>
                     </a>
                 </li>
+                <li>
+                    <a href="https://mastodon.social/@yourusername" class="btn btn-default btn-lg">
+                        <svg style="display: inline-flex; align-self: center; transform: translateY(0.125em);" xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+                            <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a4 4 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522q0-1.288.66-2.046c.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764q.662.757.661 2.046z"/>
+                        </svg>
+                        <span class="network-name">Mastodon</span>
+                    </a>
+                </li>                
                 <li>
                     <a href="{{ site.url }}/code-of-conduct/" class="btn btn-default btn-lg">
                       <i class="fa fa-thumbs-up fa-fw"></i><span class="network-name">Code of Conduct</span>