A clean, beautiful and responsive portfolio template for Developers
Features
⚡️ Modern UI Design + Reveal Animations
⚡️ One Page Layout built with React
⚡️ Styled with Bootstrap v4.3 + Custom SCSS
⚡️ Fully Responsive
⚡️ Configurable color scheme
⚡️ Image optimization with Gatsby
⚡️ Easy site customization
⚡️ 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.
Also you need to have installed Gatsby CLI
[email protected] or higher
[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 this repository
$ git clone https://github.com/cobidev/gatsby-simplefolio
# Go into the repository
$ cd gatsby-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 run develop
Using Yarn:
# Install dependencies
$ yarn
# Start development server
$ yarn develop
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:8000/
and you will see the website running on a Development Server:
Instructions:
Step 1 - STRUCTURE
Go to /src/mock/data.js
and fill your information, they are 5 objects:
Hero Section
export const heroData = {
title: '', // Hello, my name is
name: '', // John
subtitle: '', // I'm the Unknown Developer.
cta: '', // Know more
};
About Section
Important Note: All the images must live inside the src/images/
folder in order for Gatsby to show the images correctly.
export const aboutData = {
img: 'profile.jpg', // put your profile image (recommended aspect radio: square)
paragraphOne: '',
paragraphTwo: '',
paragraphThree: '',
resume: 'https://www.resumemaker.online/es.php', // if no resume, the button will not show up
};
Projects Section
Important Note: All the images must live inside the src/images/
folder in order for Gatsby to show the images correctly.
Put as many projects object you want inside the array
.
export const projectsData = [
{
id: nanoid(),
img: 'project.jpg',
title: '',
info: '',
info2: '',
url: '',
repo: 'https://github.com/cobidev/react-simplefolio', // if no repo, the button will not show up
},
{
id: nanoid(),
img: 'project.jpg',
title: '',
info: '',
info2: '',
url: '',
repo: 'https://github.com/cobidev/react-simplefolio', // if no repo, the button will not show up
},
...
];
Contact Section
export const contactData = {
cta: '', // call to action text for the contact section
btn: '', // text inside the button
email: '',
};
Footer Section
You can remove or add as many you social-media icons you want.
Just put an object with the corresponding values inside the networks array
or remove it from there.
export const footerData = {
networks: [
{
id: nanoid(),
name: 'twitter',
url: '', // your twitter url
},
{
id: nanoid(),
name: 'codepen',
url: '', // your codepen url
},
{
id: nanoid(),
name: 'linkedin',
url: '', // your linkedin url
},
{
id: nanoid(),
name: 'github',
url: '', // your github url
},
],
};
Required - Disable GitHub buttons
Set isEnabled
to false
once you finish setup your portfolio.
By setting to false
it will hide the GitHub stars/fork buttons
export const githubButtons = {
isEnabled: true, // true is the default value
};
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
Others versions 👥
Simplefolio by Jacobo Martinez
Ember.js Simplefolio by Michael Serna
Technologies used 🛠️
- Gatsby - Static Site Generator
- GraphQL - Query language for APIs
- React - Front-End JavaScript library
- Bootstrap 4 - Front-End UI library
- Sass - CSS extension language
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