Simplefolio ⚡️

A minimal portfolio template for Developers!

Features

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

To view the demo: click here

---

Why do you need a portfolio? ☝️

• 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.

node@v16.4.2 or higher
npm@7.18.1 or higher
git@2.30.1 or higher

Also, you can use Yarn instead of NPM ☝️

yarn@v1.22.10 or higher

---

How To Use 🔧

From your command line, first clone Simplefolio:

# Clone the repository
$ git clone https://github.com/cobiwave/simplefolio

# Move into the repository
$ cd simplefolio

# Remove the current origin repository
$ git remote remove origin

After that, you can install the dependencies either using NPM or Yarn.

Using NPM: Simply run the below commands.

# 2022 Update - Fix Dependencies
$ npm audit fix
$ npm i @parcel/transformer-sass

# Install dependencies
$ npm install

# Start the development server
$ npm start

Using Yarn: Be aware of that you'll need to delete the package-lock.json file before executing the below commands.

# Install dependencies
$ yarn

# Start the development server
$ yarn start

NOTE: If your run into issues installing the dependencies with NPM, use this below 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:1234/ to see the portfolio locally. It should look like the below screenshot.

---

Template Instructions:

Step 1 - STRUCTURE

Go to /src/index.html and put your information, there are 5 sections:

(1) Hero Section

• On .hero-title, put your custom portfolio title.
• On .hero-cta, put your custom button label.

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

(2) About Section

• On <img> tag, fill the src property with your profile picture path, your picture must be located inside /src/assets/ folder.
• On <p> tag with class name .about-wrapper__info-text, include information about you, I recommend to put 2 paragraphs in order to work well and a maximum of 3 paragraphs.
• On last <a> tag, include your CV (.pdf) path on href property, your resume CV must be located inside /src/assets/ folder.

<!-- **** About Section **** -->
<section id="about">
  <div class="container">
    <h2 class="section-title load-hidden">About me</h2>
    <div class="row about-wrapper">
      <div class="col-md-6 col-sm-12">
        <div class="about-wrapper__image load-hidden">
          <img
            alt="Profile Image"
            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 load-hidden">
          <p class="about-wrapper__info-text">
            This is where you can describe about yourself. The more you describe
            about yourself, the more chances you can!
          </p>
          <p class="about-wrapper__info-text">
            Extra Information about you! like hobbies and your goals.
          </p>
          <span class="d-flex mt-3">
            <a
              rel="noreferrer"
              target="_blank"
              class="cta-btn cta-btn--resume"
              href="assets/resume.pdf"
            >
              View Resume
            </a>
          </span>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /END About Section -->

(3) Projects Section

• Each project lives inside 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 description.
• 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 in the href property of the <a> tag.
• Recommended size for project image (1366 x 767), your project image must be located inside /src/assets/ folder.

<!-- **** Projects Section **** -->
<section id="projects">
  ...
  <!-- Notice: each .row is a project -->
  <div class="row">
    <div class="col-lg-4 col-sm-12">
      <div class="project-wrapper__text load-hidden">
        <h3 class="project-wrapper__text-title">Project Title</h3>
        <div>
          <p class="mb-4">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi
            neque, ipsa animi maiores repellendus distinctio aperiam earum dolor
            voluptatum consequatur blanditiis inventore debitis fuga numquam
            voluptate ex architecto itaque molestiae.
          </p>
        </div>
        <a
          rel="noreferrer"
          target="_blank"
          class="cta-btn cta-btn--hero"
          href="#!"
        >
          See Live
        </a>
        <a
          rel="noreferrer"
          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 load-hidden">
        <a rel="noreferrer" href="#!" target="_blank">
          <div
            data-tilt
            data-tilt-max="4"
            data-tilt-glare="true"
            data-tilt-max-glare="0.5"
            class="thumbnail rounded js-tilt"
          >
            <img
              alt="Project Image"
              class="img-fluid"
              src="assets/project.jpg"
            />
          </div>
        </a>
      </div>
    </div>
  </div>
  <!-- /END Project -->
  ...
</section>

(4) 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 load-hidden">
      <p class="contact-wrapper__text">[Put your call to action here]</p>
      <a
        rel="noreferrer"
        target="_blank"
        class="cta-btn cta-btn--resume"
        href="mailto:example@email.com"
        >Call to Action</a
      >
    </div>
  </div>
</section>
<!-- /END Contact Section -->

(5) Footer Section

• Put your Social Media URL on each href attribute of the <a> tags.
• If you an additional Social Media account different than Twitter, Linkedin or GitHub, then go to Font Awesome Icons and search for the icon's class name you are looking.
• You can delete or add as many <a> tags 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-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/sass/abstracts/_variables.scss and only change the values for this variables $main-color and $secondary-color with your prefered HEX color. If you want to get some gradients inspiration I highly recommend you to check this website UI Gradient

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

---

Deployment 📦

Once you finish your setup. You need to put your website online!

I highly recommend to use Netlify because it is super easy.

Others versions 👥

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

Technologies used 🛠️

• Parcel - Bundler
• Bootstrap 4 - Frontend component library
• Sass - CSS extension language
• ScrollReveal.js - JavaScript library
• Tilt.js - JavaScript tiny parallax library

Authors

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

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