Portfolio V3

In this example below you will see how to do a Portfolio V3 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by captnstarburst, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright captnstarburst ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Portfolio V3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Dosis|Playfair+Display+SC" rel="stylesheet">

<script src='https://www.google.com/recaptcha/api.js'></script>
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="no-js wrapper">
	<div id="loader-wrapper">

		<div id="loader"></div>

		<div class="loader-section section-left"></div>
		<div class="loader-section section-right"></div>

	</div>
</div>

<!-- NAVBAR -->
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
	<a class="navbar-brand" href="#">Conor Hinchee</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
	<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
		<ul class="navbar-nav">
			<li class="nav-item active">
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#section_portfolio">Portfolio</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#section_contact">Contact</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Blog</a>
			</li>
		</ul>
	</div>
</nav>
<!-- NAVBAR -->

<div class="container-fluid">

	<div id="home">
		<div class="about-section" id="section_about">
			<div class="row">
				<div class="col text-center">
					<h1 class="header">Hello! My name is Conor and I am ...</h1>
				</div>
			</div>
			<div class="row">
				<div class="col text-center">
					<h2 class="header"><span id="type_it">A Freelance Web Developer , A Website Designer , A Programmer , A SEO Consultant , Available For Work  </span><span id="cursor">|</span> </h2>
				</div>
			</div>
			<div class="btn-row row">
				<div class="col-6 text-center">
					<a class="btn btn-dark btn-lg text-white" href="https://github.com/captnstarburst" target="_blank"><span class="btn-txt">Github <i class="fa fa-github"></i></span></a>
				</div>
				<div class="col-6 text-center">
					<button class="btn btn-dark btn-lg" id="btn_more"><span class="btn-txt">Learn More <i class="fa fa-address-card"></i></span></button>
				</div>
			</div>
		</div>

		<div class="about-more bg-dark" id="learn_more">
			<div class="row">
				
				<div class="col-lg-4 col-md-4 d-none d-md-block">
					<img class="img-fluid img-thumbnail rounded my-pic" src="https://conorhinchee.com/imgs/main/MeOnMyWedding.jpg" alt="Conor Hinchee Wedding Day" />
				</div>
				<div class="col-lg-7 col-md-7 d-none d-md-block">
					<p class="profile-txt">My name is Conor Hinchee. I am a freelance software developer, web deisgner, and builder of cool things. I live in and work in Zanesville, Ohio. I am passionate about clean code and agile software solutions. My philosophy for the web is to have mobile
						ready sites, featuring natively intuitive design concepts, and client oriented features. I am constantly learning and building new things. Check out my blog for my most recent projects, follow me on github, and feel free to contact me !</p>
					<div class="row">
						<div class="col text-center">
							<button class="btn btn-secondary" id="btn_hideMd"><span class="btn-txt">Hide Me</span></button>
						</div>
					</div>
					<div class="row icon-row">
						<div class="col text-center">
							<a class="no-color" href="https://www.facebook.com/conor.hinchee?ref=bookmarks" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
							<a class="no-color" href="https://github.com/captnstarburst" target="_blank"><i class="fa fa-github"></i></a>
							<a class="no-color" href="https://www.freecodecamp.org/captnstarburst" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a>
							<a class="no-color" href="https://codepen.io/captnstarburst/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a>
						</div>
					</div>
				</div>
				
				<div class="col-12 d-md-none">
					<div class="row icon-row">
						<div class="col text-center">
							<a class="no-color" href="https://www.facebook.com/conor.hinchee?ref=bookmarks" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
							<a class="no-color" href="https://github.com/captnstarburst" target="_blank"><i class="fa fa-github"></i></a>
							<a class="no-color" href="https://www.freecodecamp.org/captnstarburst" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a>
							<a class="no-color" href="https://codepen.io/captnstarburst/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a>
						</div>
					</div>
					<div class="row justify-content-center">
						
						<div class="col-10">
							
							<p class="profile-txt">My name is Conor Hinchee. I am a freelance software developer, web deisgner, and builder of cool things. I live in and work in Zanesville, Ohio.<img class="img-fluid img-thumbnail rounded my-pic" src="https://conorhinchee.com/imgs/main/MeOnMyWedding.jpg" alt="Conor Hinchee Wedding Day" /> I am passionate about clean code and agile software solutions. My philosophy for the web is to have mobile ready sites, featuring natively intuitive design concepts, and client oriented features. I am constantly learning and building new things. Check out my blog for my most recent projects, follow me on github, and feel free to contact me !</p>
						</div>
					</div>
					<div class="row">
						<div class="col text-center">
							<button class="btn btn-secondary" id="btn_hideSm"><span class="btn-txt">Hide Me</span></button>
				</div>
			</div>
			
		</div>
			</div>
		</div>	
		<!-- ^MAIN SECTION^ -->
		<!-- ^MAIN SECTION^ -->

		<!-- PORTFOLIO SECTION -->
		<div class="row">
			<div class="col text-center">
				<hr class="main-line" />
				<h1 class="header" id="section_portfolio">Portfolio</h1>
				<p class="portfolio-txt"> My projects range from simple web sites showcasing skills using html and css, to more verbose pages implementing JavaScript logic and server-side technology!</p>
			</div>
		</div>
		<div class="row portfolio-row">
			<div class="col-6 text-center">
				<h5 class="header">Intermediate Front End Projects</h5>

				<div class="row d-flex justify-content-center" id="portfolio_intermediate">
					<div class="col-12 portfolio-square" tabindex="0" data-toggle="tooltip" data-placement="bottom" title="Click Learn More">

						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/RandomQuote.PNG" alt="Free Code Camp Random Quote Generator by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio//LocalWeather.PNG" alt="Free Code Camp Local Weather by Conor Hinche"/>
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio//WikipediaView.PNG" alt="Free Code Camp Wikipedia Viewer by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/TwitchTV.PNG" alt="Free Code Camp Twith.TV API by Conor Hinche" />

					</div>
				</div>
			</div>
			<div class="col-6 text-center">
				<h5 class="header">Advanced Front End Projects</h5>

				<div class="row d-flex justify-content-center" id="portfolio_advanced">
					<div class="col-12 portfolio-square" tabindex="0" data-toggle="tooltip" data-placement="bottom" title="Click Learn More">

						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/Calculator.PNG" alt="Free Code Camp JavaScript Calculator by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/pomodoroClock.JPG" alt="Free Code Camp Pomodoro Clock by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/TicTacToe.PNG" alt="Free Code Camp Tic Tac Toe by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/simon.JPG" alt="Free Code Camp Simon by Conor Hinche" />

					</div>
				</div>
			</div>
		</div>
		<div class="row portfolio-row">
			<div class="col-6 text-center">
				<div class="row d-flex justify-content-center">
					<div class="col-12 portfolio-square" tabindex="0" data-toggle="tooltip" data-placement="top" title="Click Learn More" id="portfolio_react">

						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/GitHubMarkdown.PNG" alt="Free Code Camp GitHub Markdown by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/FreeCodeCampLeaderBoard.PNG" alt="Free Code Camp Leaderboard by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/RecipeApp.PNG" alt="Free Code Camp Recipe App by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " />

					</div>
				</div>

				<h5 class="header">ReactJS Projects</h5>
			</div>
			<div class="col-6 text-center">
				<div class="row d-flex justify-content-center">
					<div class="col-12 portfolio-square" tabindex="0" data-toggle="tooltip" data-placement="top" title="Click Learn More" id="portfolio_backend">

						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio//TimeStamp.PNG" alt="Free Code Camp Time Stamp API by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/HeaderInfo.PNG" alt="Free Code Camp Header Info by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail " src="https://conorhinchee.com/imgs/portfolio/URLShortner.PNG" alt="Free Code Camp URL Shortener by Conor Hinche" />
						<img class="img-fluid portfolio-thumbnail" src="https://conorhinchee.com/imgs/portfolio/ImageSearch.PNG" alt="Free Code Camp Flickr Image Search by Conor Hinche" />

					</div>
				</div>

				<h5 class="header">API Projects</h5>
			</div>
		</div>
		<!-- ^PORTFOLIO SECTION^ -->

		<!-- CONTACT SECTION -->
		<div class="row">
			<div class="col text-center">
				<hr class="main-line" />
				<h1 class="header" id="email_response"></h1>
				<h1 class="header" id="section_contact">Contact Me</h1>
				<p class="portfolio-txt"> Send me an email if I am not online and I will get back to you as soon as possible!</p>
			</div>
		</div>
		<div class="row d-flex justify-content-center">
			<div class="col-lg-6 col-md-6 col-8">
				<form class="sendEmail" method="post" autocomplete="off">
					<input type="text" placeholder="Name" name="name" id="contact_name" required>
					<input type="email" placeholder="Email" name="email" id="contact_email" required>
					<textarea placeholder="Message" name="message" id="contact_message" required></textarea>
					<div class="portfolio-txt text-danger" id="captcha_required"></div>
					<div class="g-recaptcha" data-sitekey="6LdxeSQUAAAAAJBj-R2bcQ8Elh_m9oGp2rdoWF5A" data-theme="dark"></div>

					<button class="btn btn-primary btn-block" type="submit"><span class="header">Submit<span></button>
				</form>
			</div>
		</div>
		<!-- ^CONTACT SECTION^ -->
	</div>

	<div id="portfolio" class="no-js">

		<div id="portfolio_page1" class="no-js">
			<div class="row portfolioExpanded-row">
				<div class="col text-center">
					<hr class="portfolio-line" />
					<h1 class="header">Intermediate Front End Projects</h1>
					<h5 class="header">These projects focus responsiveness using Bootstrap 3, API data retrieved, and intermediate JavaScript skills! </h5>
				</div>
			</div>
			<div class="d-none d-sm-block">
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<img class="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/RandomQuote.PNG" alt="Free Code Camp Random Quote Generator by Conor Hinchee" />
					</div>
					<div class="col-6">
						<h2 class="header text-center">Random Quote Generator</h2>
						<p class="portfolio-description">Click a button to get a random quote, another button to share on Facebook, and another to share of Twitter!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/WwPWMP/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/WwPWMP" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<h2 class="header text-center">Local Weather</h2>
						<p class="portfolio-description">Using the browsers geolocation and the weather api from Weather Underground display the local area along with a weather specific graphic!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/VaNBwE/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/VaNBwE" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
					<div class="col-6">
						<img class="img-fluid portfolio-img" src="https://conorhinchee.com/imgs/portfolio//LocalWeather.PNG" alt="Free Code Camp Local Weather by Conor Hinchee" />
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<img class="img-fluid portfolio-img" src="https://conorhinchee.com/imgs/portfolio//WikipediaView.PNG" alt="Free Code Camp Wikipedia Search by Conor Hinchee" />
					</div>
					<div class="col-6">
						<h2 class="header text-center">Wikipedia Viewer</h2>
						<p class="portfolio-description">Search Wikipedia using their API, Displaying results by appending the DOM! If your not sure what to look for get a random article with the random button!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/NrqoBx/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/NrqoBx" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<h2 class="header text-center">Twitch.tv Viewer</h2>
						<p class="portfolio-description">See if some of my favorite Twitch streamers are online or offline. If the streamer is online you can see what they are playing!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/ezZqKQ/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/ezZqKQ" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
					<div class="col-6">
						<img class="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/TwitchTV.PNG" alt="Free Code Camp Twitch.TV Viewer by Conor Hinchee" />
					</div>
				</div>
			</div>
			<div class="d-sm-none">
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Random Quote Generator</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/RandomQuote.PNG" alt="Free Code Camp Random Quote Generator by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/WwPWMP/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Local Weather</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio//LocalWeather.PNG" alt="Free Code Camp Local Weather Viewer by Conor Hinchee" /> />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/VaNBwE/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Wikipedia Searcher</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio//WikipediaView.PNG" alt="Free Code Camp Wikipedia Searcher by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/NrqoBx/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Twitch.TV Viewer</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/TwitchTV.PNG" alt="Free Code Camp Twitch.TV API by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/ezZqKQ/" target="_blank">Visit Site</a>
					</div>
				</div>
			</div>
		</div>

		<div id="portfolio_page2" class="no-js">
			<div class="row portfolioExpanded-row">
				<div class="col text-center">
					<hr class="portfolio-line" />
					<h1 class="header ">Advanced Front End Projects</h1>
					<h5 class="header">These projects focus responsiveness using Bootstrap 3 and advanced JavaScript skills!</h5>
				</div>
			</div>
			<div class="d-none d-sm-block">
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<img class="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/Calculator.PNG" alt="Free Code Camp JavaScript Calculator by Conor Hinchee" />
					</div>
					<div class="col-6">
						<h2 class="header text-center">JavaScript Calculator</h2>
						<p class="portfolio-description">A calculator built in JavaScript, features keydown button presses and it does maths!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/RRJOyQ/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/RRJOyQ" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<h2 class="header text-center">Pomodoro Clock</h2>
						<p class="portfolio-description">A timer that features an hour glass with sand that moves! Using timing events set up a personal work flow(breaks included)!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/xOZmyX/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/xOZmyX" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
					<div class="col-6">
						<img class="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/pomodoroClock.JPG" alt="Free Code Camp Pomodoro Clock by Conor Hinchee" />
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<img class="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/TicTacToe.PNG" alt="Free Code Camp Tic Tac Toe by Conor Hinchee" /> />
					</div>
					<div class="col-6">
						<h2 class="header text-center">Tic Tac Toe</h2>
						<p class="portfolio-description">Play against the computer or versus a friend in a game of tic tac toe! Features an unbeatable computer logic and timing events!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/GjNmYY/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/GjNmYY" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<h2 class="header text-center">Simon® game</h2>
						<p class="portfolio-description">The game of Simon® codified for your browser! Features timing events and sound!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/jVEaby/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/jVEaby" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
					<div class="col-6">
						<img class="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/simon.JPG" alt="Free Code Camp Simon®  by Conor Hinchee" />
					</div>
				</div>
			</div>
			<div class="d-sm-none">
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">JavaScript Calculator</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/Calculator.PNG" alt="Free Code Camp JavaScript Calculator by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/RRJOyQ/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Pomodoro Clock</h1>
						<img class="img-responsive portfolio-img" src="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/pomodoroClock.JPG" alt="Free Code Camp Pomodoro Clock by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/xOZmyX/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Tic Tac Toe</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/TicTacToe.PNG" alt="Free Code Camp Tic Tac Toe  by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/GjNmYY/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Simon® game</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/simon.JPG" alt="Free Code Camp Simon®  by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/jVEaby/" target="_blank">Visit Site</a>
					</div>
				</div>
			</div>
		</div>

		<div id="portfolio_page3" class="no-js">
			<div class="row portfolioExpanded-row">
				<div class="col text-center">
					<hr class="portfolio-line" />
					<h1 class="header">ReactJS Projects</h1>
					<h5 class="header">These projects focus responsiveness using Bootstrap 4 and logic with React.JS!</h5>
				</div>
			</div>
			<div class="d-none d-sm-block">
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<img class="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/GitHubMarkdown.PNG" alt="Free Code Camp React.JS GitHub Markdown by Conor Hinchee" />
					</div>
					<div class="col-6">
						<h2 class="header text-center">GitHub Markdown</h2>
						<p class="portfolio-description">Type in the text area etiher plain text or GitHub Mark down and have it display on the other half the screen dynamically with the thanks of React.JS!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/dOEQjL/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/dOEQjL" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<h2 class="header text-center">Free Code Camp Leaderboard</h2>
						<p class="portfolio-description">Check out who is on the top of the Free Code Camp leaderboard either all time points or who's on top for the last month! Rendered with React JS and fed data with API call!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/jyaMrY/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/jyaMrY" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
					<div class="col-6">
						<img class="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/FreeCodeCampLeaderBoard.PNG" alt="Free Code Camp React.JS Leader Board  by Conor Hinchee" />
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<img class="img-fluid portfolio-img" src="https://conorhinchee.com/imgs/portfolio/RecipeApp.PNG" alt="Free Code Camp React.JS Recipe App by Conor Hinchee" />
					</div>
					<div class="col-6">
						<h2 class="header text-center">Recipe Box</h2>
						<p class="portfolio-description">Customize your own recipe box! Delete Recipes, Add Recipes, or see some of my personal recipes! Changes are persistant thanks to cookies! Created with React.JS</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/full/NdYjBY/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://codepen.io/captnstarburst/pen/NdYjBY" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="d-sm-none">
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">GitHub Markdown</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/GitHubMarkdown.PNG" alt="Free Code Camp React.JS GitHub Markdown by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/dOEQjL/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Free Code Camp Leaderboard</h1>
						<img class="img-responsive portfolio-img" src="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/FreeCodeCampLeaderBoard.PNG" alt="Free Code Camp React.JS Leader Board by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/jyaMrY/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Recipe Box</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/RecipeApp.PNG" alt="Free Code Camp React.JS Recipe App by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://codepen.io/captnstarburst/full/NdYjBY/" target="_blank">Visit Site</a>
					</div>
				</div>
			</div>
		</div>

		<div id="portfolio_page4">
			<div class="row portfolioExpanded-row">
				<div class="col text-center">
					<hr class="portfolio-line" />
					<h1 class="header ">API Backend Projects</h1>
					<h5 class="header">Creating my own API's! Showcasing my learning of Backend development. I used Node.JS and MongoDB, hosted on the Heroku cloud! </h5>
				</div>
			</div>
			<div class="d-none d-sm-block">
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<img class="img-fluid portfolio-img" src="https://conorhinchee.com/imgs/portfolio//TimeStamp.PNG" alt="Free Code Camp Back End Time Stamp API  by Conor Hinchee" />
					</div>
					<div class="col-6">
						<h2 class="header text-center">Timestamp API</h2>
						<p class="portfolio-description">Pass a string as a parameter to the end of the URL, and it will check to see whether that string contains either a unix timestamp or a natural language date!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://fierce-ocean-25947.herokuapp.com/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://github.com/captnstarburst/timestamp-API" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<h2 class="header text-center">Header API</h2>
						<p class="portfolio-description">Show your browser's IP address, Language and Software!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://whispering-anchorage-97783.herokuapp.com/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://github.com/captnstarburst/header_api" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
					<div class="col-6">
						<img class="img-fluid portfolio-img " src="https://conorhinchee.com/imgs/portfolio/HeaderInfo.PNG" alt="Free Code Camp Back End Header Info API  by Conor Hinchee" />
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<img class="img-fluid portfolio-img" src="https://conorhinchee.com/imgs/portfolio/URLShortner.PNG" alt="Free Code Camp Back End URL Shortener API  by Conor Hinchee" />
					</div>
					<div class="col-6">
						<h2 class="header text-center">Tiny URL API</h2>
						<p class="portfolio-description">Passing a valid url to the app will return a JSON object containing the original url and a new shortened url! Visit the shortened URL will redirect you to the original page!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://tranquil-hollows-27076.herokuapp.com/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://github.com/captnstarburst/url-shortener" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<h2 class="header text-center">Flickr Image Search</h2>
						<p class="portfolio-description">Passing a string returns a Flickr search with related image URLs, alt text, and page urls! Paginate through the responses by adding a ?2 parameter to the URL and Review the most recent 10 search queries!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://young-dawn-20354.herokuapp.com/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://github.com/captnstarburst/abstract_img_search" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
					<div class="col-6">
						<img class="img-fluid portfolio-img" src="https://conorhinchee.com/imgs/portfolio/ImageSearch.PNG" alt="Free Code Camp Back End Flikr Search API  by Conor Hinchee" />
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-6">
						<iframe class="portfolio-frame" src="https://rocky-river-94267.herokuapp.com/"></iframe>
					</div>
					<div class="col-6">
						<h2 class="header text-center">File Metadata</h2>
						<p class="portfolio-description">Upload a file to the database. Return the file size!</p>
						<div class="row btn-row">
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://rocky-river-94267.herokuapp.com/" target="_blank">See the Site</a>
							</div>
							<div class="col-6 text-center">
								<a class="btn btn-primary btn-txt" href="https://github.com/captnstarburst/File_Metadata" target="_blank">See the Code</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="d-sm-none">
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Timestamp API</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio//TimeStamp.PNG" alt="Free Code Camp Back End Time Stamp API  by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://fierce-ocean-25947.herokuapp.com/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Header API</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/HeaderInfo.PNG" alt="Free Code Camp Back End Header Info API  by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://whispering-anchorage-97783.herokuapp.com/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Tiny URL API</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/URLShortner.PNG" alt="Free Code Camp Back End URL Shortener API  by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://tranquil-hollows-27076.herokuapp.com/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">Flickr Image Search API</h1>
						<img class="img-responsive portfolio-img" src="https://conorhinchee.com/imgs/portfolio/ImageSearch.PNG" alt="Free Code Camp Back End Flikr Search API  by Conor Hinchee" />
						<a class="btn btn-primary btn-block btn-txt" href="https://young-dawn-20354.herokuapp.com/" target="_blank">Visit Site</a>
					</div>
				</div>
				<div class="row portfolioExpanded-row">
					<div class="col-12">
						<h1 class="header text-center">File Meta data API</h1>
						<iframe class="portfolio-frame" src="https://rocky-river-94267.herokuapp.com/"></iframe>
						<a class="btn btn-primary btn-block btn-txt" href="https://rocky-river-94267.herokuapp.com/" target="_blank">Visit Site</a>
					</div>
				</div>
			</div>
		</div>

		<div class="row portfolioExpanded-row">
			<div class="col-12 text-center">
				<nav aria-label="Portfolio page navigation">
					<ul class="pagination justify-content-center">
						<li class="page-item disabled" id="previous">
							<a class="page-link">Previous</a>
						</li>
						<li class="page-item active" id="pageLink_1"><a class="page-link">1</a></li>
						<li class="page-item" id="pageLink_2"><a class="page-link">2</a></li>
						<li class="page-item" id="pageLink_3"><a class="page-link">3</a></li>
						<li class="page-item" id="pageLink_4"><a class="page-link">4</a></li>
						<li class="page-item" id="next">
							<a class="page-link">Next</a>
						</li>
					</ul>
				</nav>
				<hr class="portfolio-line" />
			</div>
		</div>

		<div class="back-home" id="back_home">
			<h3 class="backHome-title"><i class="fa fa-home" aria-hidden="true"></i></h3>
		</div>

	</div>

	<div class="chat-box-header opacity no-js" id="chatbox_header">
		<header class="chat-top">
			<div class="expander">-</div>
			<h4 class="chat-title ">Offline</h4>
		</header>
	</div>
	<div class="chat-box-body no-js" id="chatbox_body">
		<div class="chat-body" id="chat_body">

			<p class="whos-typing" id="whos_typing"></p>
		</div>

		<form class="chat-enter" action="javascript:void(0);" onSubmit="chatEnter()" id="chat_enter">
			<input type="text" id="chat_input" placeholder="Enter text here" autofocus />
		</form>
	</div>

	<div class="row footer">
		<div class="col-12 text-center">
			<h5 class="header white-txt">Coded by Conor Hinchee </h5>
		</div>
	</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/portfolio-v3-ddGJqv */
@charset "UTF-8";
.no-js {
  display: none;
}

body {
  background-color: #999999;
}

.navbar-brand {
  font-family: "Playfair Display SC", serif;
}

.nav-link {
  font-family: "Playfair Display SC", serif;
}

.header {
  font-family: "Playfair Display SC", serif;
}

.btn-txt {
  font-family: "Playfair Display SC", serif;
}

.profile-txt {
  color: white;
  font-family: "Dosis", sans-serif;
  text-align: justify;
  padding-top: 5%;
}

.no-color {
  color: white;
  font-size: 1.5em;
}

.no-color:hover {
  color: white;
}

.portfolio-txt {
  font-family: "Dosis", sans-serif;
}

.portfolio-description {
  font-family: "Playfair Display SC", serif;
  padding-top: 2%;
}

.white-txt {
  color: white;
  text-shadow: 1px 1px 0 black;
}

.about-section {
  padding-top: 10%;
  padding-bottom: 10%;
}

.btn-row {
  padding-top: 5%;
}

.icon-row {
  padding-top: 5%;
}

.portfolio-row {
  padding-top: 2%;
}

.portfolioExpanded-row {
  padding-top: 5%;
}

.carousel-link {
  padding-top: 3%;
}

.footer {
  padding-top: 1%;
}

.my-pic {
  width: 50%;
  float: right;
}

.portfolio-thumbnail {
  width: 40%;
  height: 100px;
}

input,
textarea {
  width: 100%;
}

.g-recaptcha {
  width: 100%;
}

.portfolio-img {
  width: 100%;
}

.portfolio-frame {
  width: 100%;
}

.img-logo {
  width: 75px;
}

.btn {
  cursor: pointer;
}

.active {
  text-decoration: underline;
}

.portfolio-square {
  cursor: pointer;
}

.page-link {
  cursor: pointer;
}

.main-line {
  border-top: 5px solid black;
  text-align: center;
}

.main-line:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -14px;
  padding: 0 10px;
  background: black;
  color: #8c8b8b;
  font-size: 18px;
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
}

.portfolio-line {
  border-top: 5px solid black;
  text-align: center;
}

.portfolio-line:after {
  content: "☬";
  display: inline-block;
  position: relative;
  top: -14px;
  padding: 0 10px;
  background: black;
  color: #8c8b8b;
  font-size: 18px;
}

.chat-box {
  bottom: 0;
  font-size: 12px;
  right: 24px;
  position: fixed;
  width: 300px;
}

.chat-box-header {
  bottom: 0;
  font-size: 12px;
  right: 5px;
  position: fixed;
  width: 25%;
}

.chat-top {
  background: #171717;
  border-radius: 5px 5px 0 0;
  color: #fff;
  cursor: pointer;
  padding: 8px;
}

.chat-title:before {
  background: #ED0A3F;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 8px;
  margin: 0 8px 0 0;
  width: 8px;
  animation: blink 5s ease infinite;
}

.chat-title {
  font-size: 1.5em;
}

.expander {
  background: #a00;
  border-radius: 50%;
  color: #fff;
  float: right;
  line-height: 13px;
  text-align: center;
  width: 16px;
  border: solid #a00 2px;
}

.expander:hover {
  background: #a00;
  border: solid 2px white;
}

.opacity {
  opacity: 0.5;
}

.chat-box-body {
  height: 50%;
  bottom: 0px;
  right: 5px;
  position: fixed;
  width: 25%;
  display: none;
}

.chat-body {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 25%;
  height: 50%;
  background-color: #fff;
  position: fixed;
  text-align: right;
  display: none;
}

.chat-img {
  font-size: 2em;
  border: 5px solid black;
}

.robot {
  float: left;
  margin-right: 5px;
}

.chat-enter {
  width: 250px;
  bottom: 0px;
  right: 5px;
  position: fixed;
  display: none;
  width: 25%;
}

.whos-typing {
  text-align: left;
  opacity: .5;
  position: fixed;
  bottom: 3%;
}

.my-text {
  text-align: left;
  padding-bottom: 10px;
}

.your-text {
  float: right;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

.user {
  text-align: left;
  word-wrap: break-word;
  display: inline;
  margin-left: 5px;
}

.back-home {
  bottom: 0;
  font-size: 12px;
  left: 5px;
  position: fixed;
  background: #171717;
  border-radius: 5px 5px 0 0;
  color: #fff;
  cursor: pointer;
  padding: 8px;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  z-index: 1001;
  animation: spin 2s linear infinite;
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  animation: spin 3s linear infinite;
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  left: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  animation: spin 1.5s linear infinite;
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222;
  z-index: 1000;
  transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

.loaded #loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.3s 1s ease-out;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes blink {
  0% {
    background: #ED0A3F;
  }
  25% {
    background: #FF7A00;
  }
  50% {
    background: #ED0A3F;
  }
  100% {
    background: #FF7A00;
  }
}
@media screen and (min-width: 2560px) {
  .navbar-brand {
    font-size: 3em;
  }

  .nav-link {
    font-size: 2em;
  }

  .navbar-nav > li {
    padding-left: 30px;
    padding-right: 30px;
  }

  h1 {
    font-size: 5em;
  }

  h2 {
    font-size: 4em;
  }

  h5 {
    font-size: 2.5em;
  }

  .btn-txt {
    font-size: 2.5em;
  }

  .profile-txt {
    font-size: 2em;
  }

  .no-color {
    font-size: 4em;
    padding-right: 2%;
  }

  .main-line:after {
    font-size: 2em;
  }

  .portfolio-line:after {
    font-size: 2em;
  }

  .portfolio-txt {
    font-size: 2em;
  }

  .portfolio-description {
    font-size: 2em;
  }

  .page-link {
    font-size: 2.5em;
  }

  .backHome-title {
    font-size: 5em;
  }

  .chat-box-header {
    font-size: 2em;
  }

  .chat-body {
    font-size: 1.5em;
  }

  .portfolio-thumbnail {
    height: 300px;
  }

  .chat-title:before {
    height: 16px;
    width: 16px;
  }

  .expander {
    width: 32px;
    line-height: 26px;
  }
}
@media screen and (max-width: 1440px) {
  .portfolio-thumbnail {
    height: 150px;
  }
}
@media screen and (max-width: 1024px) {
  .portfolio-description {
    font-size: .9em;
  }

  .backHome-title {
    font-size: 2em;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  h5 {
    font-size: 1em;
  }

  .my-pic {
    width: 100%;
  }

  .chat-box-header {
    width: 35%;
  }

  .chat-box-body {
    width: 35%;
  }
}
@media screen and (max-width: 425px) {
  h1 {
    font-size: 1.2em;
  }

  h2 {
    font-size: 1.1em;
  }

  h5 {
    font-size: 0.7em;
  }

  .btn-txt {
    font-size: 0.8em;
  }

  .portfolio-txt {
    font-size: 0.9em;
  }

  .btn-row {
    padding-top: 25%;
  }

  .my-pic {
    width: 25%;
    float: left;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
  }

  .profile-txt {
    text-align: none;
  }

  .portfolio-thumbnail {
    height: 80px;
  }

  .chat-box-header {
    width: 45%;
  }

  .chat-box-body {
    width: 45%;
  }

  .chat-body {
    width: 45%;
  }

  .chat-enter {
    width: 45%;
  }
}
@media screen and (max-width: 375px) {
  h1 {
    font-size: 1em;
  }

  h2 {
    font-size: 0.99em;
  }

  .g-recaptcha {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }

  .recaptcha-container {
    width: 50%;
  }
}
@media screen and (max-width: 320px) {
  h1 {
    font-size: 0.98em;
  }

  h2 {
    font-size: 0.8em;
  }

  .btn-txt {
    font-size: 0.7em;
  }
}


/*Downloaded from https://www.codeseek.co/captnstarburst/portfolio-v3-ddGJqv */
$(".no-js").removeClass("no-js");

let pageNumber = 1;

$(document).ready(function($) {
	hidePortfolio();
	$("#type_it").hide();
	
	$('[data-toggle="tooltip"]').tooltip();
	

	setTimeout(function() {
		$(".wrapper").addClass("loaded");
		setInterval("cursorAnimation()", 1500);
		$("#learn_more").hide();
		startTyping();
	}, 500);
});

function hidePortfolio(){
	$("#portfolio").hide();
	$("#portfolio_page1").hide();
	$("#portfolio_page2").hide();
	$("#portfolio_page3").hide();
	$("#portfolio_page4").hide();
}

function cursorAnimation() {
	$("#cursor")
		.animate(
			{
				opacity: 0
			},
			"fast",
			"swing"
		)
		.animate(
			{
				opacity: 1
			},
			"fast",
			"swing"
		);
}

function startTyping() {
	let statementArr = getText();
	$("#type_it").text("");
	$("#type_it").show();

	let erasing = false;
	let writing = true;
	let typeInterval;
	let index = 0;
	let charIndex = 0;

	typeInterval = setInterval(function() {
		if (index === statementArr.length) {
			// writing = false;
			erasing = false;
			clearInterval(typeInterval);
		}

		if (erasing) {
			let textArr = $("#type_it")
				.text()
				.split("");
			if (textArr.length === 0) {
				setTimeout(function() {
					erasing = false;
					writing = true;
				}, 500);
			} else {
				textArr.pop();
				textArr = textArr.join("");
				$("#type_it").text(textArr);
			}
		} else if (writing) {
			let text = $("#type_it").text();

			let textArr = statementArr[index].split("");

			let newText = text + textArr[charIndex];
			charIndex++;
			$("#type_it").text(newText);

			if (newText === statementArr[index]) {
				erasing = true;
				writing = false;
				charIndex = 0;
				index++;
			}
		} else if (!erasing && !writing) {
			clearInterval(typeInterval);
		}
	}, 100);
}

function getText() {
	let arr = $("#type_it")
		.text()
		.split(",");
	return arr;
}

function expandChat() {
	$(".expander").text("+");
	$("#chatbox_header").removeClass("opacity");
	$("#chatbox_header").css("bottom", "50%");
	$("#chatbox_body").css("display", "inline");
	$("#chat_body").css("display", "inline");
	$("#chat_enter").css("display", "inline");

	botChat();
}

function collapseChat() {
	$(".expander").text("-");
	$("#chatbox_header").addClass("opacity");
	$("#chatbox_header").css("bottom", "0");
	$("#chatbox_body").css("display", "none");
	$("#chat_body").css("display", "none");
	$("#chat_enter").css("display", "none");
}

function chatEnter() {
	let text = $("#chat_input").val();

	if (text !== "") {
		appendText(text);
		$("#whos_typing").text("");
		$("#chat_input").val("");
	}
}

function appendText(text) {
	let html =
		"<div class='bottom-text your-text break-after'><p class='user'>" +
		text +
		"</p><h5 class='chat-img user '><i class='fa fa-user' aria-hidden='true'></i></h5></div><br class='' />";

	$("#chat_body").append(html);
	scrollChat();
	botChat(text);
	
}

function botChat(input) {
	let length = $("#chat_body").has("div").length;
	let text = "";
	let html = "";
	
	let responseArray = ["whatdoyouknow", "howoldisconor", "wheredoesconorlive", "howcanigetincontact", "whatratesdoesconorcharge", "thispagesucks", "yourstupid" ];
	
	
	if (length < 1) {
		text =
			"Beep. Boop. I am a chat bot. I am not very smart but I try to be helpful. Conor is offline but I might be able to answer some questions. Ask 'What do you know ?' for info or maybe ask me a question!";
	}else{
		
		let sanitized = sanitizeInput(input)
		switch(sanitized){
			case responseArray[0]:
														text ="You can ask me stuff like \"How old is Conor\", \"How can contact Conor\", or \"What rates does Conor charge\"   ";
														break;
			
			case responseArray[1]:
			case responseArray[2]:											
														text = "Conor is 26 years old! He lives and works out of Zanesville, Ohio! Maybe ask me \"What rates does Conor charge? \" next! ";
														break;
				
			case responseArray[3]:
														text ="You can Get in touch with Conor via this chat when he is online! Or Send him an email on his web page with the contact form! Visit his Facebook! Maybe ask me \"What rates does Conor charge ? \" next!";
														break;
			
			case responseArray[4]:
														text ="You know it varies with the scope and size of the job. Usually its a $250.00 charge per page or $20.00 per hour worked. This is something you will need to discuss with him directly for more info. Maybe ask me  \"How can I get in contact? \" next!";
														break;
			case responseArray[5]:
			case responseArray[6]:	
														text ="Well that's rude!";
														break;		
				
			default: text = "I am not sure how to respond... Ask me \"what do you know ?\" to learn what I can tell you about my main man Conor."
		}
	}
	html =
			"<div class='my-text'><h5 class='chat-img robot'><i class='fa fa-android' aria-hidden='true'></i></h5><p class=''>" +
			text +
			"</p></div><br />";

		setTimeout(function() {
			$("#whos_typing").text("The Bot is Typing ...");
		}, 500);
	
		setTimeout(function() {
			$("#whos_typing").text("");
		}, 2500);

		setTimeout(function() {
			$("#chat_body").append(html);
			scrollChat();
		}, 3000);

		
	
		
}

function scrollChat(){
	container = $('#chat_body');
container[0].scrollTop = container[0].scrollHeight;
	container.animate({ scrollTop: container[0].scrollHeight }, "slow");
}

function sanitizeInput(text){
	
	let punctuation = ',.?!\" \"';
	let inputLower = text.toLowerCase();
	let sanitized = "";
	for(let i = 0; i < inputLower.length; i++){
		let tester = false;
		for(let x =0; x < punctuation.length; x++){
			if(text.charAt(i) === punctuation.charAt(x)){
				tester = true;
			}
		}
		if(!tester){
			sanitized += inputLower.charAt(i);
		}
	}
	
	return(sanitized);
}

function scrollTop() {
  $("html, body").animate(
    {
      scrollTop: 0
    },
    800
  );
}

$('.nav-link').click(function() {
	if (
		location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") &&
		location.hostname == this.hostname
	) {
		var target = $(this.hash);
		target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
		if (target.length) {
			$("html,body").animate(
				{
					scrollTop: target.offset().top
				},
				1000
			);
			return false;
		}
	}
});

$("#btn_more").click(function() {
	$("#learn_more").fadeIn(2000);
	$("#section_about").slideUp(1500);
	$(this).effect("bounce", { times: 3 }, 500);
});

$("#btn_hideMd").click(function() {
	$("#section_about").slideDown(1000);
	$("#learn_more").fadeOut(900);
});

$("#btn_hideSm").click(function() {
	$("#section_about").slideDown(1000);
	$("#learn_more").fadeOut(900);
});

$("#chatbox_header").click(function() {
	let state = $(".expander").text();

	switch (state) {
		case "-":
			expandChat();
			break;

		case "+":
			collapseChat();
			break;
		default:
			console.log("something happened");
	}
});

$("#chat_input").keydown(function() {
	$("#whos_typing").text("You are Typing...");
	
	$("#chat_input").keyup(function() {
		setTimeout(function() {
			$("#whos_typing").text("");
		}, 2000);
	});
});

$("#portfolio_intermediate").click(function(){
	$("#home").hide();
	$("#portfolio").fadeIn(1500);
	portfolioPage1();
	pageNumber = 1;
	scrollTop();
});

$("#portfolio_advanced").click(function(){
	$("#home").hide();
	$("#portfolio").fadeIn(1500);
	portfolioPage2();
	pageNumber = 2;
	scrollTop();
});

$("#portfolio_react").click(function(){
	$("#home").hide();
	$("#portfolio").fadeIn(1500);
	portfolioPage3();
	pageNumber = 3;
	scrollTop();
});

$("#portfolio_backend").click(function(){
	$("#home").hide();
	$("#portfolio").fadeIn(1500);
	portfolioPage4();
	pageNumber = 4;
	scrollTop();
});

$("#back_home").click(function(){
	$("#portfolio").hide();
	$("#home").fadeIn(1500);
	scrollTop();
});

$("#carousel_intermediate").click(function(e){
	e.preventDefault();
	$("#carousel0").attr('src', "https://conorhinchee.com/imgs/screenshots/Calculator.PNG");
	$("#carousel1").attr('src', "https://conorhinchee.com/imgs/screenshots/pomodoroClock.PNG");
	$("#carousel2").attr('src', "https://conorhinchee.com/imgs/screenshots/TicTacToe.PNG");
	$("#carousel3").attr('src', "https://conorhinchee.com/imgs/screenshots/simon.PNG");
});

$("#carousel_advanced").click(function(e){
	e.preventDefault();
	$("#carousel0").attr('src', "https://conorhinchee.com/imgs/screenshots/Calculator.PNG");
	$("#carousel1").attr('src', "https://conorhinchee.com/imgs/screenshots/pomodoroClock.PNG");
	$("#carousel2").attr('src', "https://conorhinchee.com/imgs/screenshots/TicTacToe.PNG");
	$("#carousel3").attr('src', "https://conorhinchee.com/imgs/screenshots/simon.PNG");
});


function portfolioPage1() {
	$("#portfolio_page1").show();
	$("#portfolio_page2").hide();
	$("#portfolio_page3").hide();
	$("#portfolio_page4").hide();
	$("#previous").addClass("disabled");
	$("#next").removeClass("disabled");
	$("#pageLink_1").addClass("active");
	$("#pageLink_2").removeClass("active");
	$("#pageLink_3").removeClass("active");
	$("#pageLink_4").removeClass("active");
}

function portfolioPage2() {
	$("#portfolio_page2").show();
	$("#portfolio_page1").hide();
	$("#portfolio_page3").hide();
	$("#portfolio_page4").hide();
	$("#previous").removeClass("disabled");
	$("#next").removeClass("disabled");
	$("#pageLink_2").addClass("active");
	$("#pageLink_1").removeClass("active");
	$("#pageLink_3").removeClass("active");
	$("#pageLink_4").removeClass("active");
}

function portfolioPage3() {
	$("#portfolio_page3").show();
	$("#portfolio_page1").hide();
	$("#portfolio_page2").hide();
	$("#portfolio_page4").hide();
	$("#previous").removeClass("disabled");
	$("#next").removeClass("disabled");
	$("#pageLink_3").addClass("active");
	$("#pageLink_1").removeClass("active");
	$("#pageLink_2").removeClass("active");
	$("#pageLink_4").removeClass("active");
}

function portfolioPage4() {
	$("#portfolio_page4").show();
	$("#portfolio_page1").hide();
	$("#portfolio_page2").hide();
	$("#portfolio_page3").hide();
	$("#previous").removeClass("disabled");
	$("#next").addClass("disabled");
	$("#pageLink_4").addClass("active");
	$("#pageLink_1").removeClass("active");
	$("#pageLink_2").removeClass("active");
	$("#pageLink_3").removeClass("active");
}

$("#pageLink_1").click(function() {
	portfolioPage1();
	pageNumber = 1;
});
$("#pageLink_2").click(function() {
	portfolioPage2();
	pageNumber = 2;
});
$("#pageLink_3").click(function() {
	portfolioPage3();
	pageNumber = 3;
});
$("#pageLink_4").click(function() {
	portfolioPage4();
	pageNumber = 4;
});

$("#next").click(function() {
	
	if (!$("#next").hasClass("disabled")) {
		pageNumber++;
		
		switch (pageNumber) {
			case 1:
				portfolioPage1();
				break;
			case 2:
				portfolioPage2();
				break;
			case 3:
				portfolioPage3();
				break;
			case 4:
				portfolioPage4();
				break;
		}
	}
});

$("#previous").click(function() {
	
	if (!$("#previous").hasClass("disabled")) {
		pageNumber--;

		switch (pageNumber) {
			case 1:
				portfolioPage1();
				break;
			case 2:
				portfolioPage2();
				break;
			case 3:
				portfolioPage3();
				break;
			case 4:
				portolioPage4();
				break;
		}
	}
});

$(".sendEmail").submit(function(e) {
	e.preventDefault();

	let response = $(".g-recaptcha-response").val();
	if (!response) {
		$("#captcha_required").text("Captcha is required");
		$("#captcha_required").fadeOut(10000);
	} else {
		let to = "conorphinchee@gmail.com";
		let name = $("#contact_name").val();
		let from = $("#contact_email").val();
		let message = $("#contact_message").val();

		$.ajax({
			url: "https://mybench-sendingemail.beta-bench.backbench.io/send",
			data: {
				from: from,
				to: to,
				subject: "Sent from Codepen",
				emailbody: message
			},
			error: function() {
				$("#email_response").addClass("text-danger");
				$("#email_response").text("Email Failed to send, try again later?");
				$("#email_response").fadeOut(10000);
			},
			success: function(data) {
				$("#email_response").text("Email Sent! Thank You! I will be in touch");
				$("#email_response").fadeOut(10000);
				$("#contact_name").val("");
				$("#contact_email").val("");
				$("#contact_message").val("");
			},
			type: "POST"
		});
	}
});

Comments