Build an iPhone X Style Portfolio Page
Last week I published an open source library called “Phoneawesome”. It builds a phone display on HTML pages.
Let’s get started. We need Phoneawesome and Bootstrap. You can get them here: https://github.com/omerimzali/phoneawesome
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Let’s include Phone awesome and Bootstrap to the portfolio page.
<html>
<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="../dist/build/phoneawesome.js"></script>
<title> Elen - My Portfolio Page </title>
</head>
Let’s create a div with phoneawesome.
<div>
<p><div class='phoneawesome'></div></p>
</div>After creating that, We need to use phoneawesome to create an iPhone X. Src option is empty for now.
<script>
var options = {device:"iphone-8",src:""}; var a = phoneawesome('.phoneawesome',options);</script>
I want to show iPhone X center of the page so I did use Bootstrap Grids
<div class="container">
<div class="row">
<div class="col-sm">
</div>
<div class="col-sm">
<div>
<p><div class='phoneawesome'></div></p>
</div>
</div>
<div class="col-sm">
</div>
</div>
</div>
After this, We need an HTML portfolio template to show on the iPhone. You can select one of these: https://colorlib.com/wp/free-personal-website-templates/
I chose Elen.
<script>
var options = {device:"iphone-8",src:"./elen/index.html"};var a = phoneawesome('.phoneawesome',options);</script>
After this, you can customize the portfolio for your own.
The portfolio page is totally ready to use.
You can get it on Github: https://github.com/omerimzali/phoneawesome.
You can see it in action here: http://programlama.xyz/phoneawesome/examples/
And you can see the portfolio page here: