Portfolio Sample

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

Thumbnail
This awesome code was written by ryok_codepen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ryok_codepen ©
  • HTML
  • CSS
  • JavaScript
    <body>
	<nav>
		<ul>
			<li><a href="#aboutme">About me</a></li>
			<li><a href="#skills">Skills</a></li>
			<li><a href="#products">Products</a></li>
			<li><a href="#sns">SNS</a></li>
		</ul>
	</nav>
	<div id="top">
		<h1>Ryok's&nbsp;Portal</h1>
		<p>Welcome my portfolio site</p>
	</div>
	<div class="contents" id="aboutme">
		<h2><span class="accent">A</span>bout me</h2>
		<div class="image">
			<img src="https://visualhunt.com/photos/t/1/dawn-sun-mountain-landscape.jpg" alt="" width="300" height="300" />
		</div>
		<div class="raireki">
			<h3>About</h3>
			<p><strong>北川&nbsp;凌汰</strong></p>
			<p>平成4年5月31日生まれ&nbsp;23歳</p>
			<p>生まれも育ちも京都の生粋の京都人です。</p>
			<p>大学でプログラミングを学び、在学中に、HTMLやCSSに触れ、その世界に魅了されました。</p>
			<p>大学院進学から、Web業界への就職に進路を切り替えて、日々活動しています。</p>
			<h3>Hobby</h3>
			<ul>
				<li>スポーツ、スポーツ観戦
					<ul>
						<li>野球、格闘技</li>
					</ul>
				</li>
				<li>音楽
					<ul>
						<li>EDM、Future Bassが最近のお気に入り</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div class="contents" id="skills">
		<h2><span class="accent">S</span>kills</h2>
		<div class="first_table">
			<h3>Adobe</h3>
			<ul>
				<li>Photoshop</li>
				<li>Illustrator</li>
				<li>Dreamweaver</li>
			</ul>
			<h3>Programming</h3>
			<ul>
				<li>C</li>
				<li>JavaScript</li>
				<li>jQuery</li>
				<li>PHP</li>
			</ul>
			<h3>Coding</h3>
			<ul>
				<li>HTML5</li>
				<li>CSS3</li>
				<li>emmet</li>
				<li>SASS/SCSS</li>
			</ul>
			<h3>Other</h3>
			<ul>
				<li>git</li>
				<li>gulp</li>
				<li>MySQL</li>
				<li>SublimeText</li>
			</ul>
		</div>
		<div class="second_table">
		</div>
	</div>
	<div class="contents" id="products">
		<h2><span class="accent">P</span>roducts</h2>
		<div class="ps">
			<h3>Photoshop</h3>
			<img src="https://visualhunt.com/photos/t/1/dawn-sun-mountain-landscape.jpg" alt="" width="150" height="150" />
			<img src="https://visualhunt.com/photos/t/1/dog-mountain-mombarone-clouds-landscape-andrate.jpg" alt="" width="150" height="150" />
			<img src="https://visualhunt.com/photos/t/1/landscape-rocks-ocean-nature-mountain-sky-travel.jpg" alt="" width="150" height="150" />
		</div>
		<div class="il">
			<h3>Illustrator</h3>
			<img src="https://visualhunt.com/photos/t/1/sunglasses-windshield-car.jpg" alt="" width="150" height="150" />
		</div>
		<div class="ws">
			<h3>Website</h3>
			<img src="https://visualhunt.com/photos/t/1/auto-car-cadillac-oldtimer-automotive-vehicle.jpg" alt="" width="150" height="150" />
			<img src="https://visualhunt.com/photos/t/1/car-vintage-parking-narrow.jpg" alt="" width="150" height="150" />
		</div>
		<div class="cp">
			<h3>Codepen</h3>
			<p data-height="500" data-theme-id="0" data-slug-hash="vLoRVg" data-default-tab="result" data-user="ryok_codepen" class='codepen'>See the Pen <a href='https://codepen.io/ryok_codepen/pen/vLoRVg/'>SNS Button Simple hover effect</a> by Ryota Kitagawa (<a href='https://codepen.io/ryok_codepen'>@ryok_codepen</a>) on <a href='https://codepen.io'>CodePen</a>.</p>
			<p data-height="500" data-theme-id="0" data-slug-hash="zqOryo" data-default-tab="result" data-user="ryok_codepen" class='codepen'>See the Pen <a href='https://codepen.io/ryok_codepen/pen/zqOryo/'>Shopping Card </a> by Ryota Kitagawa (<a href='https://codepen.io/ryok_codepen'>@ryok_codepen</a>) on <a href='https://codepen.io'>CodePen</a>.</p>
			<p data-height="500" data-theme-id="0" data-slug-hash="WwbVvO" data-default-tab="result" data-user="ryok_codepen" class="codepen">See the Pen <a href="https://codepen.io/ryok_codepen/pen/WwbVvO/">Random color maker</a> by Ryota Kitagawa (<a href="https://codepen.io/ryok_codepen">@ryok_codepen</a>) on <a href="https://codepen.io">CodePen</a>.</p>
			<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
			<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
		</div>
	</div>
	<div class="contents" id="sns">
		<h2><span class="accent">S</span>NS</h2>
		<!-- FC2RetalForm Start -->
		<iframe src="http://form1.fc2.com/form/?id=c6d8294c5a48e18b" width="780" height="600" frameborder=""></iframe>
		<!-- FC2RetalForm End   -->
		<!--
		<div class="tw">
			<h3>Twitter</h3>
			<a class="twitter-timeline" href="https://twitter.com/ryok0531" data-widget-id="703107694471688192" width="450" height="350">@ryok0531さんのツイート</a>
			<script>
				!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
			</script>

	</div>
-->
	</div>
</body>

/*Downloaded from https://www.codeseek.co/ryok_codepen/portfolio-sample-eZOQWK */
    @import url(https://fonts.googleapis.com/css?family=Poiret+One);

*{
	margin: 0;
	padding: 0;
	font-family: 'Poiret One', cursive;
}

body{
	background: url("https://visualhunt.com/photos/xl/1/computer-pen-phones.jpg") no-repeat fixed center 0;
}

h1{
	font-size: 80px;
	text-align: center;
	line-height: 200px;
	text-shadow: 2px 2px 15px #333;
}
h2{
	font-size: 50px;
	padding-top: 40px;
	padding-left: 40px;
	padding-bottom: 10px;
	border-bottom: solid 2px #333;
	.accent{
		color:#991122;
	}
}
h3{
	font-size: 24px;
	padding-top: 20px;
	padding-bottom: 10px;
}
nav{
	width: 100%;
	min-width: 500px;
	ul{
		list-style: none;
		li a{
		width: 25%;
		color: #ffe;
		font-size: 20px;
		padding: 20px 0;
		background-color: rgba(33,33,33,0.8);
		float: left;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		transition: all .3s;
		}
		li:nth-child(1) a{
			border-right: solid 2px #ddd;
		}
		li:nth-child(2) a{
			border-right: solid 2px #ddd;
		}
		li:nth-child(3) a{
			border-right: solid 2px #ddd;
		}
		li a:hover{
			background-color: rgba(33,33,33,1);
		}
	}
}
#top{
	height: 300px;
	color: #ffe;
	margin-top: 300px;
	margin-bottom: 300px;
	background-color: rgba(55,55,55,0.5);
	p{
		color: #ffe;
		font-size: 24px;
		text-align: center;
		text-shadow: 2px 2px 5px #333;
	}
}
.contents{
	width: 900px;
	height: 100%;
	background-color: #ddd;
	color: #333;
	border-radius: 10px;
	margin: 0 auto;
	margin-bottom: 40px;
	padding-bottom: 40px;
	box-sizing: border-box;
	box-shadow:rgba(21, 27, 36, 0.54902) 2px 2px 17px 0px;
	-webkit-box-shadow:rgba(21, 27, 36, 0.54902) 2px 2px 17px 0px;
	-moz-box-shadow:rgba(21, 27, 36, 0.54902) 2px 2px 17px 0px;
}
#aboutme{
	.image{
		text-align: center;
		margin-top: 40px;
		margin-bottom: 40px;
		img{
			border-radius: 150px;			
		}
	}
	.raireki{
		margin-left: 60px;
		p{
			font-family: sans-serif;
		}
		ul{
			margin-left: 20px;
			li{
				font-family: sans-serif;
			}
		}
	}
}
#skills{
	.first_table{
			margin-left: 60px;
			margin-right: 30px;
	}
	ul{
		list-style: none;
		font-size: 18px;
		font-weight: bold;
		margin-left: 20px;
	}
}
#products > div{
	margin-left: 60px;
	margin-right: 60px;
	img{
		margin-right: 30px;
		cursor: pointer;
	}
}
#sns iframe{
	margin-left: 60px;
	margin-right: 60px;
}

.fixed{
	position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}


/*Downloaded from https://www.codeseek.co/ryok_codepen/portfolio-sample-eZOQWK */
    $(function() {
	// パララックス
	var parallax = function() {
		var scroll_top = $(window).scrollTop();
		console.log(scroll_top);
		$('body').css(
			"background-position", "center " + Math.floor(-scroll_top / 15) + "px"
		);
	}
	parallax();
// スムーズスクロール
	var nav = $('nav');
	var offset = nav.offset();

	$('a[href^=#]').click(function() {
		var speed = 1000;
		var href = $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$('body,html').animate({
			scrollTop: position - 75
		}, speed, 'swing');
		return false;
	});
	
	$('#products img').hover(function(){
		//console.log("hover!");
		
	});

	$(window).scroll(function() {
		parallax();
		// ナビゲーションバーの固定
		if ($(window).scrollTop() > offset.top) {
			nav.addClass('fixed');
		} else {
			nav.removeClass('fixed');
		}
	});
});

Comments