Personal Portfolio Webpage

index.html

	
	<header>
		<div class="container mb-4 mb-lg-5">
			<nav class="mynavbar border-bottom justify-content-md-start">
				<a class="mynavbar-link" href="#about">About</a>
				<a class="mynavbar-link" href="#portfolio">Portfolio</a>
			</nav>
		</div>
	</header>
	
	<main>
		<!--About-->
		<div id="about" class="container mb-4 mb-lg-5">
			<div class="row mb-4 mb-lg-5">
				
				<!--About I/Left-->
				<div class="col-12 col-md-6
										d-flex justify-content-center align-items-center">
					<div class="mb-4 mb-lg-0">
						<h1>Ivan</h1>
						<h4>Web Development <br>
						<small class="text-muted">Front End Development</small>
						</h4><br>
						<div class="text-center mb-2 mb-md-0">
							<a href="https://codepen.io/ivanzk/">
								<i class="fa fa-codepen fa-2x" aria-hidden="true"></i>
							</a>
						</div>
					</div>
				</div>
				
				<!--About II/Right-->
				<div class="col-12 col-md-6 
										d-flex justify-content-center align-items-center">
					<div>
						<h4>Skills</h4>
						<ul>
							<li>HTML5</li>
							<li>CSS3</li>
							<li>SASS</li>
							<li>JavaScript</li>
							<li>Bootstrap</li>
							<li>jQuery</li>
							<li>Vue</li>
							<li>React</li>
						</ul>
					</div>
				</div>
			</div>
			</div>
		
		<!--Portfolio-->
		<div id="portfolio" class="container mb-2 mb-lg-2">
			<div id="vue-portfolio" class="row mb-lg-4 d-flex justify-content-center">
				<div class="col-12 col-md-6 col-lg-4"
						 v-for="project in portfolios">
					<a :href="project.url" target="_blank">
						<div class="card card-inverse bg-inverse mb-4">
							<div class="card-block">
								<h4 class="card-title">{{project.name}}</h4>
								<p class="card-text">{{project.info}}</p>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
		
	</main>

	<footer>
		<p class="text-center">&copy;2018 
			<a href="https://codepen.io/ivanzk/">Ivan</a></p>
	</footer>

personal-portfolio-webpage.markdown

Personal Portfolio Webpage

freeCodeCamp: Basic Front End Development Projects - Build a Personal Portfolio Webpage

A Pen by Ivan on CodePen.

License.

script.js

var portfolioCollection = [
	{
		"name": "Drum Machine",
		"info": "freeCodeCamp: Front End Libraries Projects - Build a Drum Machine",
		"url": "https://codepen.io/ivanzk/full/gjPYBx"
	},
	{
		"name": "Technical Documentation",
		"info": "freeCodeCamp: Responsive Web Design Projects - Build a Technical Documentation Page",
		"url": "https://codepen.io/ivanzk/full/zLYQqv/"
	},
	{
		"name": "Product Landing Page",
		"info": "freeCodeCamp: Responsive Web Design Projects - Build a Product Landing Page",
		"url": "https://codepen.io/ivanzk/full/RJXEZj/"
	},
	{
		"name": "Survey Form",
		"info": "freeCodeCamp: Responsive Web Design Projects - Build a Survey Form",
		"url": "https://codepen.io/ivanzk/full/QxoMyN/"
	},
	{
		"name": "Markdown Previewer",
		"info": "freeCodeCamp: Data Visualization - React Projects - Build a Markdown Previewer",
		"url": "https://codepen.io/ivanzk/full/WZXPmL/"
	},
	{
		"name": "JavaScript Calculator",
		"info": "freeCodeCamp: Advanced Front End Development Projects - Build a JavaScript Calculator",
		"url": "https://codepen.io/ivanzk/full/pwNYeJ/"
	},
	{
		"name": "Simon Game",
		"info": "freeCodeCamp: Advanced Front End Development Projects - Build a Simon Game",
		"url": "https://codepen.io/ivanzk/full/pwwEvM/"
	},
	{
		"name": "Random Quote Machine",
		"info": "freeCodeCamp: Intermediate Front End Development Projects - Build a Random Quote Machine",
		"url": "https://codepen.io/ivanzk/full/mmvRKp/"
	},
	{
		"name": "Pomodoro Clock",
		"info": "freeCodeCamp: Advanced Front End Development Projects - Build a Pomodoro Clock",
		"url": "https://codepen.io/ivanzk/full/RgKZxb/"
	},
	{
		"name": "Wikipedia Viewer",
		"info": "freeCodeCamp: Intermediate Front End Development Projects - Build a Wikipedia Viewer",
		"url": "https://codepen.io/ivanzk/full/vZOGQG/"
	},
	{
		"name": "Twitch JSON API",
		"info": "freeCodeCamp: Intermediate Front End Development Projects - Use the Twitchtv JSON API",
		"url": "https://codepen.io/ivanzk/full/awOrqQ/"
	},
	{
		"name": "Local Weather",
		"info": "freeCodeCamp: Intermediate Front End Development Projects - Show the Local Weather",
		"url": "https://codepen.io/ivanzk/full/VbJdgd/"
	},
	{
		"name": "Tribute Page",
		"info": "freeCodeCamp: Basic Front End Development Projects - Build a Tribute Page",
		"url": "https://codepen.io/ivanzk/full/KmQdPB/"
	}
];


var vmPortfolio = new Vue({
	el: "#vue-portfolio",
	data: {
		portfolios: portfolioCollection
	}
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

style.css

body {
	background-color: #111;
	color: white;
	line-height: 1.75;
}

a:link {
	text-decoration: none;
	color: inherit;
}
a:hover {
	text-decoration: none;
	color: inherit;
}
a:visited {
	text-decoration: none;
	color: inherit;
}
a:active {
	text-decoration: none;
	color: inherit;
}

hr {
  height: 2px;
  border: none;
  width: 80%;
  background: linear-gradient(
    to right, 
		rgba(255,255,255, 0),
    rgba(255,255,255, 1),
    rgba(255,255,255, 0));
  margin: 2rem auto;
}

.mynavbar {
	min-height: 50px;
	padding: 8px;
	margin: 0px auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mynavbar-link {
	margin: 0px 8px;
	padding: 4px 8px;
	text-align: center;
	border: 2px solid #111;
	border-radius: 50%;
	transition: all 0.25s ease;
}
.mynavbar-link:hover {
	border-left: 2px solid white;
	border-right: 2px solid white;
}

.container {
	border-bottom: 1px solid rgba(255,255,255,.2);
}

.card-block {
	min-height: 150px;
}

.card {
	border: 1px solid black;
	transition: all 0.25s ease;
}
.card:hover {
	border: 1px solid white;
	box-shadow: 0px 0px 4px 0px white;
}

i {
	padding: 8px 16px;
	border: 1px solid white;
	border-radius: 5px;
	transition: all 0.25s ease;
}
i:hover {
	box-shadow: 0px 0px 5px 1px white;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />