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 :)
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
[email protected] or higher
[email protected] or higher
[email protected] or higher
From your command line, clone and run Simplefolio:
# Clone this repository
$ git clone https://github.com/cobimr/simplefolio
# Go into the repository
$ cd simplefolio
# Remove current origin repository
$ git remote remove origin
# Install dependencies
$ npm install
# Run the app
$ npm startNOTE: If your run into issues installing the dependencies, use this command:
$ sudo npm install --unsafe-perm=true --allow-root
# Run the app
$ npm startOnce 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:
Header Section - Edit the h1 with ID #opening-text and p with ID #opening-paragraph.
<div id="welcome-section" class="jumbotron">
<div class="container">
<!-- Opening Text -->
<h1 id="opening-text">
Hi, my name is <span class="text-color-main">[YOUR NAME HERE]</span>
<br />
I'm the Unknow Developer.
</h1>
<!-- /END Opening Text -->
<!-- Opening Call To Action -->
<p id="opening-paragraph">
<a class="cta-btn cta-btn--hero" href="#about">[CALL TO ACTION]</a>
</p>
</div>
</div>About Section
- Edit the
imgsrc with your profile picture url, your profile picture must live onassets/folder. - Edit
pwith class.about-wrapper__info-textwith information about you. I recommend separate each paragraph with 2<br />and max 4 block of text in order to work well. - Lastly and not mandatory, put your resume link in the
abutton that lives insideabout-wrapper__info.
<div class="row about-wrapper">
<div class="col-md-6 col-sm-12">
<div class="about-wrapper__image">
<!-- Profile image: change path: ./assets/yourpic.jpg -->
<img
class="img-fluid rounded shadow-lg"
height="auto"
width="300px"
src="./assets/[YOUR_IMAGE.png]"
alt="Profile Image"
/>
<!-- /END Profile image -->
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="about-wrapper__info">
<!--
Profile about-text: separate each block of text with 2 <br />
I recommend to have no more that 4 block of text
-->
<p class="about-wrapper__info-text">
[YOUR ABOUT INFO HERE]
<!--
Resume Link: Put your external link for resume.
If you want you can comment this link
-->
<a
target="_blank"
class="cta-btn cta-btn--resume"
href="[YOUR_EXTERNAL_LINK_CV]"
>
View Resume
</a>
<!-- /END Resume link -->
</p>
<!-- /END Profile about text -->
</div>
</div>
</div>Projects Section
- Projects are organized in
rowand they lives inside.project-wrapper. - The left-side
colcontains 4 blocks to fill information such as (project-title, project-information, project-url, project-repo-url). Fill each information! - The right-side
colcontains theimgof the project, place again yourproject-urlon theatag that holds theimgand define thesrcpath of your project image. The projectimgmust live inside theassets/folder.
<!-- Each .row is a project block -->
<div class="row">
<!-- LEFT SIDE -->
<div class="col-lg-4">
<div class="project-wrapper__text">
<!-- 1) project title -->
<h3 class="project-wrapper__text-title">[YOUR-PROJECT-TITLE]</h3>
<!-- 2) project info -->
<div>
<p class="mb-4">
[YOUR-PROJECT-INFORMATION]
</p>
</div>
<!-- 3) project url -->
<a
target="_blank"
class="cta-btn cta-btn--hero"
href="[YOUR-PROJECT-URL]"
>
See Live
</a>
<!-- 4) project repository url -->
<a
target="_blank"
class="cta-btn text-color-main"
href="[YOUR-PROJECT-REPO-URL]"
>
Source Code
</a>
</div>
</div>
<!-- RIGHT-SIDE -->
<div class="col-lg-8">
<div class="project-wrapper__image">
<!-- 1) project url -->
<a href="[PROJECT-URL]" target="_blank">
<div data-tilt class="thumbnail rounded">
<!-- 2) project image path -->
<img class="img-fluid" src="./assets/[YOUR-PROJECT-IMAGE.png]" />
</div>
</a>
</div>
</div>
</div>
<!-- /END Project block -->Contact Section - Simply change the p with class .contact-wrapper__text and include some call-to-action message. Lastly change your email address on the href property.
<div class="contact-wrapper">
<!-- 1) Contact Call To Action: change if necessary -->
<p class="contact-wrapper__text">
[YOUR-CONTACT-CALL-TO-ACTION]
</p>
<br />
<!-- 2) Contact mail link: change to your work email & change text if necessary -->
<a target="_blank" class="cta-btn cta-btn--resume" href="mailto:[YOUR-EMAIL]"
>Button</a
>
</div>Footer Section
- Put your social media link on each
alinks. - If you have more social-media accounts, see Font Awesome Ions to put the corresponding additional social icon
.class - You can delete or add as many
alinks your want.
<div class="social-links">
<a href="[YOUR-SOCIAL-MEDIA-URL]" target="_blank">
<i class="fa fa-twitter fa-inverse"></i>
</a>
<a href="[YOUR-SOCIAL-MEDIA-URL]" target="_blank">
<i class="fa fa-codepen fa-inverse"></i>
</a>
<a href="[YOUR-SOCIAL-MEDIA-URL]" target="_blank">
<i class="fa fa-linkedin fa-inverse"></i>
</a>
<a href="[YOUR-SOCIAL-MEDIA-URL]" target="_blank">
<i class="fa fa-github fa-inverse"></i>
</a>
</div>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
- Webpack - Static module bundler
- Bootstrap 4 - Front-end component library
- Sass - CSS extension language
- ScrollReveal.js - JavaScript library
- Jacobo Martinez - https://github.com/cobimr
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent