Craft a Beautiful Web Design for your Portfolio
A majority of websites are places to showcase your work whether it is a personal portfolio, a client portfolio, or even an offering of products or services. Ultimately, whether you fit into any of those personas, you are all trying to do the same thing.
You’re all trying to showcase what you have to offer in a way that is aesthetically amazing so that others want to engage with you. Your website is the best place to do this but where your website is hosted and managed can have a massive effect on how much web design control you have over your showcase design. In this tutorial we are utilizing echo.js to lazy load the images in your portfolio so you have a wonderfully designed portfolio without compromising on page speed or web design.
Below is the HTML, CSS, and JavaScript required.
Step 1 — portfolio.html
Copy and paste the following code into portfolio.html
<section class="paddingSection100 work-tiles workTiles">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2>Unlock your digital potential.</h2>
<p class="paddingBottom45">Craft this web design into your own by replacing images and styles with that consistent with your goals.</p>
</div>
</div>
<ul class="row">
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 1" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-1.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 2" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-2.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 3" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-3.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 4" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-4.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 5" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-5.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 6" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-6.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 7" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-7.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 8" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-8.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 9" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-9.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 10" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-10.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 11" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-11.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
<li class="col-xs-6 col-md-3 work-tiles-items">
<div class="portfolioInner">
<a href="#"><img alt="Image Alt 12" class="img-responsive" src="https://www.solodev.com/assets/featured-portfolio/client-loader.gif" data-echo="https://www.solodev.com/assets/featured-portfolio/portfolio-item-12.jpg"></a>
<div class="textOverlay">
<span>Portfolio Item Title</span>
</div>
</div>
</li>
</ul>
<div class="text-center paddingTop40">
<a href="#" class="btn btn-home">View Portfolio</a>
</div>
</div>
</section><script>
echo.init();
</script>
Step 3 — Add the following includes to your web page
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="portfolio.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/toddmotto/echo/master/dist/echo.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>In this tutorial Solodev showed you how to craft a web design for your website’s portfolio. Ideally, we recommend choosing a content management system (CMS) to host and manage your website that gives you total design freedom so you can truly express yourself with your portfolio showcase. Customize your web design to showcase what you love and make it your own! Enjoy!
Originally Posted on the Solodev Web Design Blog
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
