simplefolio README

The project's README from github.com/cobiwave/simplefolio. As one markdown file: README.md.

Simplefolio ⚡️ GitHub GitHub stars GitHub forks

A minimal portfolio template for Developers!

Simplefolio

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? ☝️

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

Simplefolio

Template Instructions:

Step 1 - STRUCTURE

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

(1) Hero Section

<!-- **** 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

<!-- **** 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

<!-- **** 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

<!-- **** 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:[email protected]"
        >Call to Action</a
      >
    </div>
  </div>
</section>
<!-- /END Contact Section -->

<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 🛠️

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

simplefolio (cobiwave/simplefolio)

Searching Database…

14.2K ·GitHub
Simplefolio
Что это такое?Simplefolio — это минималистичный одностраничный шаблон портфолио для разработчиков: клонируете его, заменяете содержимое на своё и получаете личный сайт с современным интерфейсом, анимациями появления и полностью адаптивной вёрсткой.
Это конструктор сайтов или код, который я правлю сам?Код, который вы правите сами: контент лежит в /src/index.html, стили — это собственный SCSS поверх Bootstrap 4, а всё вместе собирает Parcel. Никакой админки или визуального редактора здесь нет.
Как запустить это у себя на компьютере?Склонируйте репозиторий из командной строки, установите зависимости через NPM или Yarn, затем запустите dev-сервер ('npm start' запускает Parcel) и откройте локальный адрес, который он выдаст.
Что должно быть установлено перед началом работы?Git и Node.js (NPM идёт в комплекте); Yarn можно использовать как альтернативный пакетный менеджер. Всё остальное, например Bootstrap и jQuery, придёт вместе с зависимостями проекта.
Есть ли подводные камни при установке?Два небольших: при использовании Yarn перед установкой нужно удалить package-lock.json, а если у NPM возникнут проблемы, в README есть запасная команда для их устранения.
Могу ли я свободно использовать это для своего портфолио?Да — проект под лицензией MIT, так что вы можете использовать, изменять и публиковать сайт без ограничений.
Что внутри, на чём всё построено?Parcel в качестве сборщика, Bootstrap 4 с собственным Sass для стилей, ScrollReveal.js для анимаций появления и vanilla-tilt (Tilt.js) для параллакс-эффектов; jQuery и Popper приходят вместе с Bootstrap.
Как поменять цветовую схему?Задайте свои два цвета в HEX как $main-color и $secondary-color в файле /src/sass/abstracts/variables.scss — градиент темы строится всего на этих двух переменных.
Есть ли другие версии Simplefolio?Да — в README есть ссылки на версию на Gatsby от Jacobo Martinez и версию на Ember.js от Michael Serna, если вам ближе эти стеки.
Почему автор его создал?Ему хотелось внести что-то полезное в сообщество разработчиков; он благодарит ZTM Community и Andrei.
What are similar projects?mdb-ui-kit, tabler, LearnCS8-Resume, card, Hover, gentelella, coreui-free-bootstrap-admin-template, materialize
Which topics is it in?portfolio-website, portfolio, css3, bootstrap, scss, sass, jquery, html5, template, design, beginner-friendly, animation
Creator
cobiwave
Size
16.6 MB
Stars
14.2K
Updated
CommitDec 27
Age
7y
Commits · 90 Days