Simplefolio ⚡️

A minimal portfolio template for Developers!

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

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
To view a live example, click here

---

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.

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher

Also, you can use Yarn instead of NPM ☝️

yarn@v1.21.1 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:

---

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 **** --><divid="hero" class="jumbotron"><divclass="container"><h1class="hero-title" class="load-hidden">
Hi, my name is <spanclass="text-color-main">Your Name</span><br/>
I'm the Unknow Developer.
</h1><pclass="hero-cta" class="load-hidden"><aclass="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 **** --><sectionid="about"><divclass="container"><h2class="section-title">
About me
</h2><divclass="row about-wrapper"><divclass="col-md-6 col-sm-12"><divclass="about-wrapper__image"><imgclass="img-fluid rounded shadow-lg"
height="auto"
width="300px"
src="./assets/profile.jpg"
alt="Profile Image"
/></div></div><divclass="col-md-6 col-sm-12"><divclass="about-wrapper__info"><pclass="about-wrapper__info-text">
Lorem ipsum dolor sit, about my text.
</p><pclass="about-wrapper__info-text">
Lorem ipsum dolor sit, about my text.
</p><spanclass="d-flex mt-3"><atarget="_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 **** --><sectionid="projects">
...
<!-- Each .row is a project --><divclass="row"><divclass="col-lg-4 col-sm-12"><divclass="project-wrapper__text"><h3class="project-wrapper__text-title">[Project Title]</h3><div><pclass="mb-4">
Lorem ipsum dolor sit, my project information.
</p></div><atarget="_blank" class="cta-btn cta-btn--hero" href="#!">
See Live
</a><atarget="_blank" class="cta-btn text-color-main" href="#!">
Source Code
</a></div></div><divclass="col-lg-8 col-sm-12"><divclass="project-wrapper__image"><ahref="#!" target="_blank"><divdata-tiltclass="thumbnail rounded"><imgclass="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 **** --><sectionid="contact"><divclass="container"><h2class="section-title">
Contact
</h2><divclass="contact-wrapper"><pclass="contact-wrapper__text">
Put here your contact CTA
</p><atarget="_blank"
class="cta-btn cta-btn--resume"
href="mailto:example@email.com"
>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.

<footerclass="footer navbar-static-bottom">
...
<divclass="social-links"><ahref="#!" target="_blank"><iclass="fa fa-twitter fa-inverse"></i></a><ahref="#!" target="_blank"><iclass="fa fa-codepen fa-inverse"></i></a><ahref="#!" target="_blank"><iclass="fa fa-linkedin fa-inverse"></i></a><ahref="#!" target="_blank"><iclass="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 🛠️

• Webpack - Static module bundler
• Bootstrap 4 - Front-end component library
• Sass - CSS extension language
• ScrollReveal.js - JavaScript library
• Tilt.js - JavaScript tiny parallax library
• Popper.js - JavaScript popover library

Authors

• Jacobo Martinez - https://github.com/cobidev

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