A Personal Portfolio Webpage

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

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <header>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  <script src="https://use.fontawesome.com/328c6579bd.js"></script>
</header>
<div class="pageOne text-center">
  <ul class="nav nav-pills">
    <li>
      <a href="#">Moataz Mostafa</a>
    </li>
    <li class="pull-right">
      <a href="#p2">About Me</a>
    </li>
    <li class="pull-right">
      <a href="#p3">Portfolio</a>
    </li>
    <li class="pull-right">
      <a href="#p4">Contact</a>
    </li>
  </ul>

  <div class="block text-center">
  <h1>Moataz Mostafa</h1>
  <h3>Front-End Developer and UX/UI designer</h3>
  </div>
  
  <div class="btnList text-center">
    <a class="btn btn-default" href="https://www.facebook.com/elsharbatle"><i class="fa fa-facebook-official fa-lg" id="facebookIcon" aria-hidden="true"></i> Facebook</a>
    <a class="btn btn-default" href="https://www.twitter.com/elsharbatle"><i class="fa fa-twitter fa-lg" id="twitterIcon" aria-hidden="true"></i>  Twitter</a>
    <a class="btn btn-default" href="https://github.com/elsharbatle"><i class="fa fa-github fa-lg" id="githubIcon" aria-hidden="true"></i> GitHub</a>
    <a class="btn btn-default" href="https://www.linkedin.com/in/moatazelsharbatly/"><i class="fa fa-linkedin-square fa-lg" id="linkedinIcon" aria-hidden="true"></i> Linkedin</a>
    <a class="btn btn-default" href="https://www.youtube.com/channel/UCDkIijREPUye3LAFVHRqHgQ"><i class="fa fa-youtube-play fa-lg" id="youtubeIcon" aria-hidden="true"></i> Youtube</a>   
</div>
</div>

<div class="pageTwo" id="p2">
  <div class="container">
  <div class="row">
    <div class="col-md-6 text-center">
      <h1>Moataz Mostafa</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper et.</p>
    </div>
    <div class="col-md-6">
      <img src="http://i67.tinypic.com/121alxk.jpg" class="me"/>
    </div>
  </div>
  </div>
</div>
  
<div class="pageThree text-center" id="p3">
  <div class="paddingTop">
    <h1>Gallery</h1>
  </div>
  <div class="gallery">
		<div class="container">
			<div class="row">
                <div class="col-xs-3 gallery-item">
                    <a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
                        <img src="http://placehold.it/558x286&text=First image" class="img-responsive img-gallery" alt="First image">
                    </a>
                </div> <!-- /.col -->
                
                <div class="col-xs-3 gallery-item">
                    <a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
                        <img src="http://placehold.it/558x286&text=Second image" class="img-responsive img-gallery" alt="Second image">
                    </a>
                </div> <!-- /.col -->
                
                <div class="col-xs-3 gallery-item">
                    <a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
                        <img src="http://placehold.it/558x286&text=Third image" class="img-responsive img-gallery" alt="Third image">
                    </a>
                </div> <!-- /.col -->
                
                <div class="col-xs-3 gallery-item">
                    <a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
                        <img src="http://placehold.it/558x286&text=Fourth image" class="img-responsive img-gallery" alt="Fourth image">
                    </a>
                </div> <!-- /.col -->
            </div> <!--/.row  -->
		</div> <!-- /.container -->
	</div> <!-- /.gallery -->

	<div class="modal fade" id="modalGallery" tabindex="-1" role="dialog" aria-labelledby="modalGalleryLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="modalGalleryLabel">Gallery</h4>
				</div> <!-- /.modal-header -->

				<div class="modal-body">
					<div id="carouselGallery" class="carousel slide" data-ride="carousel" data-interval="false">
						<div class="carousel-inner">
						</div> <!-- /.carousel-inner -->
					</div> <!-- /.carousel -->
				</div> <!-- /.modal-body -->

				<div class="modal-footer">
					<ul class="pagination">
					</ul>
				</div> <!-- /.modal-footer -->
			</div> <!-- /.modal-content -->
		</div> <!-- /.modal-dialog -->
	</div> <!-- /.modal -->
</div>

<div class="pageFour jumbotron jumbotron-sm" id="p4">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <h2 class="h2">
                    Contact us <small> Let’s make great things together.

Feel free to contact us</small></h2>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="well well-sm">
                <form>
                <div class="row" style=color:#000;>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">
                                Name</label>
                            <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
                        </div>
                        <div class="form-group">
                            <label for="email">
                                Email Address</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
                                </span>
                                <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
                        </div>
                        <div class="form-group">
                            <label for="subject">
                                Subject</label>
                            <select id="subject" name="subject" class="form-control" required="required">
                                <option value="na" selected="">Choose One:</option>
                                <option value="service">General Customer Service</option>
                                <option value="suggestions">Suggestions</option>
                                <option value="product">Product Support</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">
                                Message</label>
                            <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
                                placeholder="Message"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary pull-right" id="btnContactUs">
                            Send Message</button>
                    </div>
                </div>
                </form>
            </div>
        </div>
        <div class="col-md-4">
            <form>
            <legend><span class="glyphicon glyphicon-globe"></span> My Info</legend>
            <address>
                <!--<strong>Twitter, Inc.</strong><br>
                795 Folsom Ave, Suite 600<br>
                San Francisco, CA 94107<br>-->
                <abbr title="Phone">
                    Mobile:</abbr>
                (20) 100-910-9249
            </address>
            <address>
                <strong>Moataz Mostafa</strong><br>
                <a href="mailto:#">elsharbatle@gmail.com</a>
            </address>
            </form>
        </div>
    </div>
</div>

  <div class="footer text-center">
    <h3>
    <a href="https://www.facebook.com/elsharbatle" target="_blank">Moataz Mostafa</a> - 
    <a href="#p3" target="_blank">Portofolio</a> - 
    <a href="#p2" target="_blank">About Me</a> - 
    <a href="#p4" target="_blank">Contact Me</a>
    </h3>
    <p>Copyright &copy; Elsharbatle 2017. All Rights Reserved</p>
  </div>

/*Downloaded from https://www.codeseek.co/elsharbatle/a-personal-portfolio-webpage-vmoMaG */
    

.col-md-6 {
  padding-top:auto;
  padding-bottom:auto;
}

#facebookIcon {
  color:rgb(59, 89, 152);
}

#twitterIcon {
  color:rgb(0, 172, 237);
}

#githubIcon {
  color:rgb(102,43,129);
}

#linkedinIcon {
  color:#007bb6;
}

#youtubeIcon {
  color:#c4302b;
}

.block {
  background-color:#000;
  opacity:0.9;
  padding:10px;
  width:50%;
  margin-right:auto;
  margin-left:auto;
  border-radius:10px;
  margin-bottom:10px;
}

.nav-pills {
  font-size:23px;
  background-color:black;
  margin-bottom:10%;
}

body {
  background-color:white;
  font-family:Lobster;
  color:white;
}

h1 {
  padding:0px;
  margin-top:0px;
  font-size:60px;
}

.btn-default {
  background-color:black;
  border:none;
  color:#337ab7;
  font-size:18px;
}

.pageOne {
  background:url("https://static.pexels.com/photos/90807/pexels-photo-90807.jpeg");
  background-size:cover;
  padding-bottom:10%;
}

.pageTwo {
  /*background:url("https://images.pexels.com/photos/32237/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");*/
  background-color:#100f13;
  background-size:cover;
  padding-top:5%;
  padding-bottom:5%;
  border-top:2px solid #000;
  border-bottom:2px solid #000;
}

.pageThree {
  /*background:url("https://images.pexels.com/photos/192633/pexels-photo-192633.jpeg?w=940&h=650&auto=compress&cs=tinysrgb");*/
  background-color:#212124;
  background-size:cover;
  padding-top:2%;
  padding-bottom:2%
}

.pageFour {
  background:url("");
  background-size:cover;
  /*padding-bottom:5%;*/
  padding-top:5%;
}

p {
  font-size:18px;
  /*padding-left:5px;*/
  margin-left:10px;
}

.pItems {
  height:250px;
}

.footer h3 {
  font-size:19px;
}

.footer p {
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
}

.paddingBTN {
  /*padding-top:25%;
  padding-bottom:25%;*/
  width:200px;
  margin-bottom:15px;
}

.paddingTop {
  padding-top:2%;
  padding-bottom:2%;
}

.footer {
  background-color:black;
  padding-top:1px;
  padding-bottom:1px;
}

.me {
  height:300px;
  width:280px;
  display:block;
  margin-right:auto;
  margin-left:auto;
  border-radius:50%
}

.jumbotron {
background: #000;
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 2px;
padding-bottom: 2px; }
.jumbotron small {
color: #FFF;
}
.h2 small {
font-size: 14px;
}

.col-md-4 form {
  color:#000;
}

.container {
  font-family:Arial, Helvetica, sans-serif;
}

.gallery{
    margin-top: 100px;
}
.gallery-item{
	margin-bottom: 30px;
}
.modal-footer{
	text-align: center;
}
.pagination{
	margin: 0;
}


/*Downloaded from https://www.codeseek.co/elsharbatle/a-personal-portfolio-webpage-vmoMaG */
    $(document).ready(function(){
    $('.link-gallery').click(function(){
		var galleryId = $(this).attr('data-target');
		var currentLinkIndex = $(this).index('a[data-target="'+ galleryId +'"]');

		createGallery(galleryId, currentLinkIndex);
		createPagination(galleryId, currentLinkIndex);

		$(galleryId).on('hidden.bs.modal', function (){
			destroyGallry(galleryId);
			destroyPagination(galleryId);
		});

		$(galleryId +' .carousel').on('slid.bs.carousel', function (){
			var currentSlide = $(galleryId +' .carousel .item.active');
			var currentSlideIndex = currentSlide.index(galleryId +' .carousel .item');

			setTitle(galleryId, currentSlideIndex);
			setPagination(++currentSlideIndex, true);
		})
	});

	function createGallery(galleryId, currentSlideIndex){
		var galleryBox = $(galleryId + ' .carousel-inner');

		$('a[data-target="'+ galleryId +'"]').each(function(){
			var img = $(this).html();
			var galleryItem = $('<div class="item">'+ img +'</div>');

			galleryItem.appendTo(galleryBox);
		});

		galleryBox.children('.item').eq(currentSlideIndex).addClass('active');
		setTitle(galleryId, currentSlideIndex);
	}

	function destroyGallry(galleryId){
		$(galleryId + ' .carousel-inner').html("");
	}

	function createPagination(galleryId, currentSlideIndex){
		var pagination = $(galleryId + ' .pagination');
		var carouselId = $(galleryId).find('.carousel').attr('id');
		var prevLink = $('<li><a href="#'+ carouselId +'" data-slide="prev">«</a></li>');
		var nextLink = $('<li><a href="#'+ carouselId +'" data-slide="next">»</a></li>');

		prevLink.appendTo(pagination);
		nextLink.appendTo(pagination);

		$('a[data-target="'+ galleryId +'"]').each(function(){
			var linkIndex = $(this).index('a[data-target="'+ galleryId +'"]');
			var paginationLink = $('<li><a data-target="#carouselGallery" data-slide-to="'+ linkIndex +'">'+ (linkIndex+1) +'</a></li>');

			paginationLink.insertBefore('.pagination li:last-child');
		});

		setPagination(++currentSlideIndex);
	}

	function setPagination(currentSlideIndex, reset = false){
		if (reset){
			$('.pagination li').removeClass('active');
		}

		$('.pagination li').eq(currentSlideIndex).addClass('active');
	}

	function destroyPagination(galleryId){
		$(galleryId + ' .pagination').html("");
	}

	function setTitle(galleryId, currentSlideIndex){
		var imgAlt = $(galleryId + ' .item').eq(currentSlideIndex).find('img').attr('alt');

		$('.modal-title').text(imgAlt);
	}
});

Comments