An awesome HTML, CSS and jQuery based developer portfolio template best for resume and to describe personal info. Also, the template contains different animation & features like lightbox.
Plugin Preview
How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins
Plugin Overview
| Plugin: | Developer Portfolio |
| Author: | Armand Abecilla |
| Licence: | MIT Licence |
| Published: | March 1, 2024 |
| Repository: | Fork on GitHub |
| Dependencies: | jQuery 1.3.1 or Latest version, WOW js and WayPoints js |
| File Type: | zip archive (HTML, CSS & JavaScript) |
| Package Size: | 9 MB |
How to Use Developer Portfolio Template:
1. To getting started with this portfolio, first of all load all the necessary CSS files into your project.
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/lity.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css">
2. Create HTML structure for complete portfolio/resume/personal info.
<section id="hero">
<div class="container">
<div class="site-header">
<div class="header-logo">
<a href="#" class="site-name">Your Name Here</a>
</div>
<span class="flex-spacer"></span> <!-- IE WORKAROUND -->
<nav class="site-nav">
<ul>
<!--<li><a href="#">Home</a></li>-->
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a class="contact-me btn-primary" href="mailto:[email protected]">Contact Me</a></li>
</ul>
</nav>
<!-- Mobile hidden nav -->
<nav class="mobile-nav overlay">
<div class="nav-burger toggle" id="toggle">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</div>
<ul class="nav-overlay" id="overlay">
<!--<li><a href="#">Home</a></li>-->
<li><a href="#about" class="toggle">About</a></li>
<li><a href="#portfolio" class="toggle">Portfolio</a></li>
<li><a href="mailto:your-email" class="toggle">Contact Me</a></li>
</ul>
</nav>
</div>
<div class="hero-content">
<h1 class="cta">Hi. I’m "Your Name"</h1>
<p>Web Designer / Developer</p>
<a href="#portfolio" class="button-cta">View My Portfolio</a>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="about-pic">
<img src="img/my-picture.jpg" class="about-img" alt="Beach Picture 2018">
</div>
<div class="about-content">
<h2>About</h2>
<p class="mg-bot-20">Describe your Self Here </p>
</div>
</div>
</section>
<section id="skills">
<div class="container">
<div class="skills-content">
<h2>Skills</h2>
<p class="mg-bot-20">Describe Your Skills info</p>
<div class="skills-icons">
<i class="fab fa-html5"></i>
<i class="fab fa-css3"></i>
<i class="fab fa-wordpress"></i>
<i class="fab fa-js"></i>
<i class="fab fa-adobe"></i>
<i class="fab fa-php"></i>
<i class="fas fa-database"></i>
</div>
<!--<a href="#" class="btn-primary">View my Work</a>-->
</div>
<div class="skills-rating">
<p>HTML5 & CSS3</p>
<div class="outer-meter">
<div class="inner-meter html5"></div>
</div>
<p>Photoshop</p>
<div class="outer-meter">
<div class="inner-meter photoshop"></div>
</div>
<p>Javascript & jQuery</p>
<div class="outer-meter">
<div class="inner-meter js-jquery"></div>
</div>
<p>Wordpress</p>
<div class="outer-meter">
<div class="inner-meter wordpress"></div>
</div>
<p>PHP & MySQL</p>
<div class="outer-meter">
<div class="inner-meter php-mysql"></div>
</div>
<p>ReactJS and Redux (Learning in progress)</p>
<div class="outer-meter">
<div class="inner-meter react-redux"></div>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="container">
<h2>Recent <span>Projects</span></h2>
<div class="thumbnails-wrapper">
<img src="img/thumbnail-1.jpg" alt="Garage Door Company sample" class="project-thumbnails" data-lity-target="img/project1.png">
<img src="img/thumbnail-2.jpg" alt="Automotive template sample" class="project-thumbnails" data-lity-target="img/project2.png">
<img src="img/thumbnail-3.jpg" alt="Construction sample template" class="project-thumbnails" data-lity-target="img/project3.png">
</div>
</div>
</section>
<section id="footer">
<section id="quote">
<div class="container">
<h3>“Have no fear of perfection—you’ll never reach it.”</h3>
<p>–Salvador Dali</p>
</div>
</section>
<section id="copyright">
<div class="container">
<p>© Your Site Name</p>
<span class="flex-spacer"></span> <!-- IE WORKAROUND -->
<div class="social-icons">
<a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank"><i class="fab fa-github"></i></a>
<a href="#" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="#" target="_blank"><i class="fab fa-soundcloud"></i></a>
</div>
</div>
</section>
</section>
3. Load the all javascript files at the end of the page before closing body tag.
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.waypoints.min.js"></script> <script type="text/javascript" src="js/wow.min.js"></script> <script src="js/lity.min.js" charset="utf-8"></script> <script type="text/javascript" src="js/main.js"></script>
Similar Code Snippets:
Bootstrap List/Grid View Switcher with jQuery
jQuery Portfolio Gallery with Categories Filter
Responsive Masonry Layout with Sortable Items
Bootstrap Image Portfolio Gallery with jQuery
Bootstrap Filter Gallery with Lightbox using JavaScript
Bootstrap 4 Modern Photography Portfolio Page Concept
Responsive Horizontal Timeline with jQuery & CSS3
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.