Introduction

This is the source code of my portfolio website. I use the Gatsby Simplefolio as a template to contain my projects.

Live Demo: https://wxx0136.github.io/RRC_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.
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 let projectsData;
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 set up 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 preferred HEX color

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

Note: I highly recommend to check out gradients variations on UI Gradient

---

Deployment

I use GitHub Pages to deploy my website, and there is a "GitHub Action" tutorial to help me to do that:

• https://www.youtube.com/watch?v=JIMord7-G10