Developer Portfolio Template using CSS and jQuery

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 Overview

Plugin: Developer Portfolio
Author: Armand Abecilla
Licence: MIT Licence
Published: March 24, 2019
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>

Be the first to comment

Leave a Reply

Your email address will not be published.


*