Feel free to use it as-is or customize it as much as you want. I was motivated to create this project because I wanted to contribute on something useful for the dev community :)
βοΈ Modern UI Design + Reveal Animations
βοΈ One Page Layout
βοΈ Built with Bootstrap v4.3 + Custom SCSS
βοΈ Light Clean Codes
βοΈ 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
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.
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
From your command line, clone and run 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
# Install dependencies
$ npm install
# Start development server
$ npm start
NOTE: If your run into issues installing the dependencies, use this command:
# Install dependencies with all permissions
$ sudo npm install --unsafe-perm=true --allow-root
# Start development server
$ npm start
Once your server has started, go to this url http://localhost:8080/
and you will see the website running on a Development Server:
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">John Doe</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 thesrc
property with your profile picture, your picture must live onassets/
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 onhref
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.png"
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 withloremp ipsum
text, include your project information. - On first
<a>
tag, put your project url onhref
property. - On second
<a>
tag, put your project repostiroy url onhref
property.
- Inside
<div>
tag with class-name.project-wrapper__image
, put your project image url on thesrc
of the<img>
and put again your project url onhref
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/banner.png" />
</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 onhref
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: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.
<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>
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
// Defaut values
$main-color: #02aab0;
$secondary-color: #00cdac;
NOTE: I highly recommend to checkout gradients variations on UI Gradient
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
Simplefolio Ember.js by Michael Serna
- Webpack - Static module bundler
- Bootstrap 4 - Front-end component library
- Sass - CSS extension language
- ScrollReveal.js - JavaScript library
- Jacobo Martinez - https://github.com/cobidev
This project is licensed under the MIT License - see the LICENSE.md file for details
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