index.html

<!------------------------------------------------------------
https://jegraham.github.io/
Description: This page is meant to host the main content and
direct through the pages as needed.


FUTURE GOALS https://www.w3schools.com/w3css/w3css_templates.asp
- Include About 
- Include Credits - Bootstrap, CDN
------------------------------------------------------------>
<!DOCTYPE HTML>
<html lang="en">

<!--- <link rel="stylesheet" type="text/css" href="stylesheet.css" media=""/>
<link rel="" src="HTML%20Content/Header.html"></include>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
<link rel="stylesheet" type="text/css" href="CSS/header.css"> --->

<!-- Importing Bootstrap -->
<link href="CSS/bootstrap.css" rel="stylesheet" type="text/css">
<link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="CSS/bootstrap-grid.css" rel="stylesheet" type="text/css">
<link href="CSS/bootstrap-grid.min.css" rel="stylesheet" type="text/css">
<link href="CSS/bootstrap-reboot.css" rel="stylesheet" type="text/css">
<link href="CSS/bootstrap-reboot.min.css" rel="stylesheet" type="text/css">
<link href="CSS/filtering.css" rel="stylesheet" type="text/css">
<link href="CSS/portfolio.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Importing the javascript class for typing and filtering -->
<script src="js/portfolio.js"></script>
<script src="js/filtering.js"></script>

<!-- This is the head that appears in the browser tab -->
<head>
    <title> Jessica L. Graham Portfolio </title>

    <!-- Making the Webpage Responsive -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<!-- Header of the Portfolio, includes the -->
<h1 class="text-center bg-dark text-white shadow" style="font-size:10VW; word-break: break-word;">Jessica Graham Portfolio</h1>

<!-- This is the Navigation bar-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <a class="navbar-brand" href="./index.html">Portfolio</a>
    <button class="navbar-toggler" data-target="#collapsibleNavbar" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link active bg-info" href="HTML_Content/content.html">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="HTML_Content/Resume.html">Resume</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="HTML_Content/About.html">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="HTML_Content/Contact.html">Contact</a>
            </li>
        </ul>
    </div>
</nav>

<body>

<!-- Begin Web-Stat code v 7.0 -->
<span id="wts2051325"></span>
<script>var wts=document.createElement('script');wts.async=true;
		wts.src='https://wts.one/log7.js';document.head.appendChild(wts);
		wts.onload = function(){ wtslog7(2051325,3); };
</script>

<noscript><a href="https://www.web-stat.com">
    <img alt="Web-Stat analytics"
         src="https://wts.one/7/3/2051325.png"></a></noscript>
<!-- End Web-Stat code v 7.0 -->
</body>

<!-- About Me Section-->
<div class=" text-center"">
    <div class="row">
        <div class="col-sm-3">
            <h2>About Me</h2>
            <img alt="Avatar" class="embed-img-responsive mx-auto"
                   src="./Images/Avatar.PNG" style="display: block; max-width:100%; height: auto;">
            <p> Hi, my name is Jessica and I am passionate about STEM and learning new things! I discovered my passion
                for Computer Science by accident. How do you discover this by accident? Well, I started my high school
                career planning out all my courses to become a Medical Doctor, specifically a Dermatologist. In the plan
                I decided to take a computer course in Grade 10. I soon discovered that </p>

                <i onclick="document.location='https://www.linkedin.com/in/jessica-graham-455261aa'" class="fa fa-linkedin-square" style="font-size:36px;color:blue"></i>
                <i onclick="document.location='https://github.com/jegraham/'" class="fa fa-github-square" style="font-size:36px;color:black"></i>

            <hr class="d-sm-none">
        </div>


        <!-- Portfolio Content-->
        <div class="col-sm-9">
            <div id="projectinfo"></div>
        </div>

    </div>
</div>

<!-- Footer Section -->
<footer class="jumbotron text-center" style="margin-bottom:0">
    <p>Thank You for Visiting! </p>
</footer>
</html>