Awesome Open Source
Awesome Open Source

Simplefolio ⚡️ GitHub GitHub stars GitHub forks

A minimal portfolio template for Developers!

Simplefolio

IMPORTANT NOTE: New fastest version came out, built with React + Gatsby! 🎉🎉🎉 See more: Gatsby Simplefolio

Look up!

Features

⚡️ Modern UI Design + Reveal Animations
⚡️ One Page Layout
⚡️ Styled with Bootstrap v4.3 + Custom SCSS
⚡️ Fully Responsive
⚡️ Valid HTML5 & CSS3
⚡️ Optimized with Webpack
⚡️ Well organized documentation

To view a demo example, click here


Need of portfolio for a developer ☝️

  • Professional way to showcase your work
  • Increases your visibility and online presence
  • Shows you’re more than just a resume

Getting Started 🚀

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites 📋

You'll need Git and Node.js (which comes with NPM) installed on your computer.

[email protected] or higher
[email protected] or higher
[email protected] or higher

Also, you can use Yarn instead of NPM ☝️

[email protected] or higher

How To Use 🔧

From your command line, first clone Simplefolio:

# Clone this repository
$ git clone https://github.com/cobidev/simplefolio

# Go into the repository
$ cd simplefolio

# Remove current origin repository
$ git remote remove origin

Then you can install the dependencies either using NPM or Yarn:

Using NPM:

# Install dependencies
$ npm install

# Start development server
$ npm start

Using Yarn:

# Install dependencies
$ yarn

# Start development server
$ yarn start

NOTE: If your run into issues installing the dependencies with NPM, use this command:

# Install dependencies with all permissions
$ sudo npm install --unsafe-perm=true --allow-root

Once your server has started, go to this url http://localhost:8080/ and you will see the website running on a Development Server:

Simplefolio


Template Instructions:

Step 1 - STRUCTURE

Go to /src/template.html and fill your information, they are 5 sections:

Hero Section

  • On .hero-title, put your custom title.
  • On .hero-cta, put your custom button cta.
<!-- **** Hero Section **** -->
<div id="hero" class="jumbotron">
  <div class="container">
    <h1 class="hero-title" class="load-hidden">
      Hi, my name is <span class="text-color-main">Your Name</span>
      <br />
      I'm the Unknow Developer.
    </h1>
    <p class="hero-cta" class="load-hidden">
      <a class="cta-btn cta-btn--hero" href="#about">Know more</a>
    </p>
  </div>
</div>
<!-- /END Hero Section -->

About Section

  • On <img> tag, fill the src property with your profile picture, your picture must be located inside assets/ folder.
  • On <p> tag with class-name .about-wrapper__info-text, include information about you, I recommend to use 2 paragraphs in order to work well and a maximum of 3 paragraphs.
  • On last <a> tag, include your resume url on href property.
<!-- **** About Section **** -->
<section id="about">
  <div class="container">
    <h2 class="section-title">About me</h2>
    <div class="row about-wrapper">
      <div class="col-md-6 col-sm-12">
        <div class="about-wrapper__image">
          <img
            class="img-fluid rounded shadow-lg"
            height="auto"
            width="300px"
            src="./assets/profile.jpg"
            alt="Profile Image"
          />
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <div class="about-wrapper__info">
          <p class="about-wrapper__info-text">
            Lorem ipsum dolor sit, about my text.
          </p>
          <p class="about-wrapper__info-text">
            Lorem ipsum dolor sit, about my text.
          </p>
          <span class="d-flex mt-3">
            <a target="_blank" class="cta-btn cta-btn--resume" href="">
              View Resume
            </a>
          </span>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /END About Section -->

Projects Section

  • Each project lives inside on a row.
  • On <h3> tag with class-name .project-wrapper__text-title, include your project title.
  • On <p> tag with loremp ipsum text, include your project information.
  • On first <a> tag, put your project url on href property.
  • On second <a> tag, put your project repository url on href property.

  • Inside <div> tag with class-name .project-wrapper__image, put your project image url on the src of the <img> and put again your project url on href property of <a> tag.
  • Recommended size for project image (1366 x 767px), your project image must live on assets/ folder.
<!-- **** Projects Section **** -->
<section id="projects">
  ...
  <!-- Each .row is a project -->
  <div class="row">
    <div class="col-lg-4 col-sm-12">
      <div class="project-wrapper__text">
        <h3 class="project-wrapper__text-title">[Project Title]</h3>
        <div>
          <p class="mb-4">Lorem ipsum dolor sit, my project information.</p>
        </div>
        <a target="_blank" class="cta-btn cta-btn--hero" href="#!">
          See Live
        </a>
        <a target="_blank" class="cta-btn text-color-main" href="#!">
          Source Code
        </a>
      </div>
    </div>
    <div class="col-lg-8 col-sm-12">
      <div class="project-wrapper__image">
        <a href="#!" target="_blank">
          <div data-tilt class="thumbnail rounded">
            <img class="img-fluid" src="./assets/project.jpg" />
          </div>
        </a>
      </div>
    </div>
  </div>
  <!-- /END Project block -->
  ...
</section>

Contact Section

  • On <p> tag with class-name .contact-wrapper__text, include some custom call-to-action message.
  • On <a> tag, put your email address on href property.
<!-- **** Contact Section **** -->
<section id="contact">
  <div class="container">
    <h2 class="section-title">Contact</h2>
    <div class="contact-wrapper">
      <p class="contact-wrapper__text">Put here your contact CTA</p>
      <a
        target="_blank"
        class="cta-btn cta-btn--resume"
        href="mailto:[email protected]"
        >Call to Action</a
      >
    </div>
  </div>
</section>
<!-- /END Contact Section -->

Footer Section

  • Put your social media link on each <a> links.
  • If you have more social-media accounts, see Font Awesome Icons to put the corresponding additional social icon .class
  • You can delete or add as many a links your want.
<footer class="footer navbar-static-bottom">
  ...
  <div class="social-links">
    <a href="#!" target="_blank">
      <i class="fa fa-twitter fa-inverse"></i>
    </a>
    <a href="#!" target="_blank">
      <i class="fa fa-codepen fa-inverse"></i>
    </a>
    <a href="#!" target="_blank">
      <i class="fa fa-linkedin fa-inverse"></i>
    </a>
    <a href="#!" target="_blank">
      <i class="fa fa-github fa-inverse"></i>
    </a>
  </div>
  ...
</footer>

Step 2 - STYLES

Change the color theme of the website ( choose 2 colors to create a gradient ):

Go to src/styles/abstracts/_variables.scss and only change the values on this classes $main-color and $secondary-color to your prefered HEX color

// Default values
$main-color: #02aab0;
$secondary-color: #00cdac;

NOTE: I highly recommend to checkout gradients variations on UI Gradient


Deployment 📦

Once you have done with your setup. You need to put your website online!

I highly recommend to use Netlify to achieve this on the EASIEST WAY

Because this template use Webpack maybe you can get errors during deployment, Please watch my step-by-step video tutorial to successfully upload your Simplefolio Website on Netlify!

WATCH NOW MY STEP-BY-STEP TUTORIAL FOR DEPLOYMENT

Others versions 👥

Gatsby Simplefolio by Jacobo Martinez
Ember.js Simplefolio by Michael Serna

Technologies used 🛠️

Authors

Status

Netlify Status

License 📄

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments 🎁

I was motivated to create this project because I wanted to contribute on something useful for the dev community, thanks to ZTM Community and Andrei


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,541,314
Scss (16,429
Html5 (12,192
Webpack (9,669
Css3 (7,956
Template (7,595
Portfolio (4,211
Related Projects