An Open Source HTML Template to create a Portfolio site for your work. Download the project, customize it however you like, and share your work with the world.
(Click the image to watch Portfolio Template | Introduction & Tutorial)
• Clean Mobile-First Design
• Attractive Social Media Embeds
• Supports Light & Dark Mode
• Easy to Use
• Fully Customizable & Open Source
My Portfolio Page: http://www.mobypixel.com
Portfolio Template:
Portfolio Template (Dark Mode):
Portfolio Card Grid:
Portfolio Image Grid:
- Download the "portfolio" folder. Here you will find index.html, image-example.html, text-example.html, style.css, and an image and video folder.
index.html - The page people will see when they visit http://www.YOUR_WEBSITE_NAME.com
image-example.html & text-example.html - Starting point for pages off of the index page.
style.css - The styles for the site.
img - This is where all the art is stored.
-
Open the index.html in a code editor and update it with all your information.
-
Add the files to your site's root directory. Now your page is available at
http://www.YOUR_WEBSITE_NAME.com -
Share the link and do the happy dance!
Add your projects to the card grid:
index.html
...
<!-- Portfolio Grid -->
<div class="grid">
<!-- Portfolio Item -->
<a href="image-example.html" class="card">
<div class="content">
<img src="img/card1.jpg" height="390" width="390" alt="Card Image"></img>
<div class="card-body">
<div class="subtitle">CATEGORY</div>
<div class="title">Card Title</div>
<div class="description">Short Description</div>
</div>
</div>
</a>
<!-- Portfolio Item -->
<a href="image-example.html" class="card">
<div class="content">
<img src="img/card2.jpg" height="390" width="390" alt="Card Image"></img>
<div class="card-body">
<div class="subtitle">CATEGORY</div>
<div class="title">Card Title</div>
<div class="description">Short Description</div>
</div>
</div>
</a>
</div>
Add your images to a grid:
index.html
...
<!-- Image Grid -->
<div class="grid">
<!-- Image Item -->
<div class="item">
<div class="content">
<img src="img/image1.jpg" height="390" width="594" alt="Image"></img>
</div>
</div>
<!-- Image Item -->
<div class="item">
<div class="content">
<img src="img/image2.jpg" height="390" width="594" alt="Image"></img>
</div>
</div>
</div>
</div>
Add corner rounding:
index.html
...
<div class="rounded"></div>
Full-Size Image:
index.html
...
<!-- Full-Size Image -->
<img class="img-full" src="img/logo.png" height="512" width="512" alt="Image"></img>
Make multiple sections like this:
index.html
...
<h1>Section 1 Title</h1>
<p>A brief description.</p>
<h2>Section 2 Title</h2>
<p>A brief description.</p>
Simple HTML Portfolio Template is an Open Source project to create an easy site for your work. No fluff or unnecessary code bloat. It's minimal and built to be easily customized and maintained. Watch the tutorial video for a quick explanation on what does what.
I'm making this template Open Source because I want to empower creatives to support themselves. I hope it helps make your first impression for your followers most triumphant! If you have any questions, suggestions, or feedback please send them my way. This is as much for me as it is for you. If you use it, send me a link! I'd love to see your work.
Enjoy!
Nick Culbertson @MobyPixel
Share the project and/or drop some change in the tip jar. If I've saved you some time in development, please compensate my efforts so that I can keep making cool stuff. Donations are not required, but greatly appreciated! :D
