portfolio.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Joshua's First Website</title>
       <link rel="stylesheet" type="text/css" href="mystyle.css"> </link>
    </head>

    <body>
      <div id="all-contents">
              <nav>

                    <header>Joshua's First Website</header>
                        <ul>
                            <li><a href="index.html">Home</a>
                            </li>
                            <li><a href="portfolio.html">Portfolio</a>
                            </li>
                        </ul>
            </nav>
        <main>
              <div class="content">
                <h1>Portfolio</h1>
                <ul id="portfolio">
                </ul>
              </div>
        </main>

      </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script id="portfolioScript">$(document).ready(function() {$.getJSON('projects/projects.json').then(function(data) { data.projects.forEach(function(project){ $('#portfolio').append('<li><a href="projects/' + project.name + '/">' + project.title + ' : ' + project.description + '</a></li>'); }); }); });</script>
    </body>
</html> 