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:abecilla.paularmand@gmail.com">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:
Responsive Masonry Layout with Sortable Items
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.