tylerkkp/index.html

## index.html
<!-- Create the nav bar -->
<head>
  <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/brands.js" integrity="sha384-qJKAzpOXfvmSjzbmsEtlYziSrpVjh5ROPNqb8UZ60myWy7rjTObnarseSKotmJIx" crossorigin="anonymous"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/fontawesome.js" integrity="sha384-2IUdwouOFWauLdwTuAyHeMMRFfeyy4vqYNjodih+28v2ReC+8j+sLF9cK339k5hY" crossorigin="anonymous"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>


  <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Questrial">
  <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Didact Gothic">
</head>

<div id="navbar">
  <a>Tyler K Parker</a>
  <a href="#about"> About</a>
  <a href="#projects"> Projects</a>
  <a href="#contact"> Contact</a>
</div>

<!-- Main page content. Note: id tags in 'a' elements is for links from nav bar -->
<div id="aboutpage">
  <a id="about" class="smooth">
    <!--About page content goes here.-->
    <h1>About</h1>
    <p><img class="pic-border img-responsive" src="https://media-exp2.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAW8AAAAJDRkN2Y1M2IyLWUxYjgtNGQ4YS1hNTE3LTM5NTNlNWM2NjI4YQ.jpg" alt="Profile Portrait"></p>
    <p>We're gonna need a bigger photo</p>
    <p class="content">My name is Tyler K Parker. After getting my bachelors degree in Mechanical Engineering Technology and working in the field for a couple years, my interests have moved more in the direction of web and app development. I am currently working through the freecodecamp curriculum and looking for exciting new career opportunities.</p>
  </a>
</div>

<!-- Gradient background transition to smooth between solid background colors -->
<div id="grad1">
</div>

<div id="projectspage">
  <a id="projects" class="smooth">
    <!--Projects page content goes here.-->
    <h1>Projects</h1>
    <p><img src="https://github.com/tylerkkp/cryptotracker/blob/master/CryptoCompare.jpg?raw=true" alt="CryptoTracker Screenshot"></p>
    <p class="content">CryptoTracker: A cryptocurrency app written in Python using tkinter for the GUI. Allows comparisons of various cryptocurrencies, with stats pulled from the cryptomarketcap API</p>
    <p>more words</p>
  </a>
</div>

</div>
<div id="grad2">
</div>

<div id="contactpage">
  <a id="contact" class="content">
    <!--Content page content goes here.-->
    <h1>Contact</h1>
    <p>I am currently looking for projects to contibute to! Please let me know if I can help you with yours!</p>
    <div class="row">
      <p href="https://www.linkedin.com/in/tyler-kuromiya-parker-a01861a1/" target="_blank"><i class="fa f08c"></i> LinkedIn</p>
      <p href="https://github.com/tylerkkp"><i class="fa fa-github"></i> Github</p>
      <p href="mailto: tylerkkp@gmail.com"><i class="fa fa-envelope"></i> Email</p>
    </div>
  </a>
</div>

## portfolio.markdown

      
    Raw
  

              portfolio.markdown
            
          
    Portfolio

A Pen by Tyler K Parker on CodePen.
License.

  
## style.css
#navbar {
  background-color: #86bbd8;
  text-align: right;
  font-size: 36px;
  font-weight: bold;
}

.pic-border {
    border-color: white;
    border-width: 5px;
    border-style: solid;
    border-radius: 10%;
}

#aboutpage {
  background-color: #86bbd8;
}

#projectspage {
  background-color: #33658a;
}

#contactpage {
  background-color: #4949a3;

}

.content {
  background-transparency: 50%;
  margin-top: 10px;
  margin-left: 30%;
  margin-right: 30%;
  margin-bottom: 10px;
  text-align: center;
  color: white;
}

a {
  color: white;
  font-size: 24px;
  padding: 10px;
  margin-top: 5px;
  font-family: Questrial, Didact Gothic;

}

p {
  color: white;
  text-align: center;
  font-size: 24px;
}

h1 {
  color: white;
  text-align: center;
  font-size: 48px;
  font-family: Questrial, Didact Gothic;
}

#grad1 {
  background: linear-gradient(#86bbd8, #33658a);
  height: 50px;
}

#grad2 {
  background: linear-gradient(#33658a, #4949a3);
  height: 50px;
}

.leftalign {
  text-align: left !important;
}

button {
  font-family: Didact Gothic;
  font-size: 20px;
}
	<!-- Create the nav bar -->
	<head>
	<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/brands.js" integrity="sha384-qJKAzpOXfvmSjzbmsEtlYziSrpVjh5ROPNqb8UZ60myWy7rjTObnarseSKotmJIx" crossorigin="anonymous"></script>
	<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/fontawesome.js" integrity="sha384-2IUdwouOFWauLdwTuAyHeMMRFfeyy4vqYNjodih+28v2ReC+8j+sLF9cK339k5hY" crossorigin="anonymous"></script>
	<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>


	<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Questrial">
	<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Didact Gothic">
	</head>

	<div id="navbar">
	<a>Tyler K Parker</a>
	<a href="#about"> About</a>
	<a href="#projects"> Projects</a>
	<a href="#contact"> Contact</a>
	</div>

	<!-- Main page content. Note: id tags in 'a' elements is for links from nav bar -->
	<div id="aboutpage">
	<a id="about" class="smooth">
	<!--About page content goes here.-->
	<h1>About</h1>
	<p><img class="pic-border img-responsive" src="https://media-exp2.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAW8AAAAJDRkN2Y1M2IyLWUxYjgtNGQ4YS1hNTE3LTM5NTNlNWM2NjI4YQ.jpg" alt="Profile Portrait"></p>
	<p>We're gonna need a bigger photo</p>
	<p class="content">My name is Tyler K Parker. After getting my bachelors degree in Mechanical Engineering Technology and working in the field for a couple years, my interests have moved more in the direction of web and app development. I am currently working through the freecodecamp curriculum and looking for exciting new career opportunities.</p>
	</a>
	</div>

	<!-- Gradient background transition to smooth between solid background colors -->
	<div id="grad1">
	</div>

	<div id="projectspage">
	<a id="projects" class="smooth">
	<!--Projects page content goes here.-->
	<h1>Projects</h1>
	<p><img src="https://github.com/tylerkkp/cryptotracker/blob/master/CryptoCompare.jpg?raw=true" alt="CryptoTracker Screenshot"></p>
	<p class="content">CryptoTracker: A cryptocurrency app written in Python using tkinter for the GUI. Allows comparisons of various cryptocurrencies, with stats pulled from the cryptomarketcap API</p>
	<p>more words</p>
	</a>
	</div>

	</div>
	<div id="grad2">
	</div>

	<div id="contactpage">
	<a id="contact" class="content">
	<!--Content page content goes here.-->
	<h1>Contact</h1>
	<p>I am currently looking for projects to contibute to! Please let me know if I can help you with yours!</p>
	<div class="row">
	<p href="https://www.linkedin.com/in/tyler-kuromiya-parker-a01861a1/" target="_blank"><i class="fa f08c"></i> LinkedIn</p>
	<p href="https://github.com/tylerkkp"><i class="fa fa-github"></i> Github</p>
	<p href="mailto: tylerkkp@gmail.com"><i class="fa fa-envelope"></i> Email</p>
	</div>
	</a>
	</div>
	#navbar {
	background-color: #86bbd8;
	text-align: right;
	font-size: 36px;
	font-weight: bold;
	}

	.pic-border {
	border-color: white;
	border-width: 5px;
	border-style: solid;
	border-radius: 10%;
	}

	#aboutpage {
	background-color: #86bbd8;
	}

	#projectspage {
	background-color: #33658a;
	}

	#contactpage {
	background-color: #4949a3;

	}

	.content {
	background-transparency: 50%;
	margin-top: 10px;
	margin-left: 30%;
	margin-right: 30%;
	margin-bottom: 10px;
	text-align: center;
	color: white;
	}

	a {
	color: white;
	font-size: 24px;
	padding: 10px;
	margin-top: 5px;
	font-family: Questrial, Didact Gothic;

	}

	p {
	color: white;
	text-align: center;
	font-size: 24px;
	}

	h1 {
	color: white;
	text-align: center;
	font-size: 48px;
	font-family: Questrial, Didact Gothic;
	}

	#grad1 {
	background: linear-gradient(#86bbd8, #33658a);
	height: 50px;
	}

	#grad2 {
	background: linear-gradient(#33658a, #4949a3);
	height: 50px;
	}

	.leftalign {
	text-align: left !important;
	}

	button {
	font-family: Didact Gothic;
	font-size: 20px;
	}