Portfolio Website

A Portfolio website for https://github.com/pawarrchetan hosted in AWS S3 and AWS CloudFront

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 the code, click here

---

Getting Started

The instructions will help you to bootstrap the project and get it 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
• Node.js (which comes with NPM) installed on your computer.
• Gatsby CLI
• Gatsby S3 Plugin

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
gatsby-cli@2.8.22 or higher
gatsby-s3-plugin@0.3.8 or higher

Also, you can use Yarn instead of NPM ☝️

yarn@v1.21.1 or higher

---

How To Use

From your command line, first clone Simplefolio:

# Clone this repository
$ git clone https://github.com/pawarrchetan/portfolio-static-website

# Go into the repository
$ cd portfolio-static-website

# 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: '<path to your Read-only resume in github>', // 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/testuser/portfolio', // if no repo, the button will not show up
  },
  {
    id: nanoid(),
    img: 'project.jpg',
    title: '',
    info: '',
    info2: '',
    url: '',
    repo: 'https://github.com/testuser/portfolio', // 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/style/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! There are several ways to do it. For example :

• AWS S3 and AWS CloudFront
• Netlify
• Third Party Hosting solutions like GoDaddy, Wordpress etc.
• Self hosting using wordpress.org

I have chosen AWS S3 and AWS CloudFront to host my portfolio website.

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

Credits

• https://github.com/cobidev

License

This project is licensed under the MIT License - see the LICENSE.md file for details