This is my website that I developed using Gatsby - an Open Source React based framework for static websites.

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

To view it in production, click here

---

How it's made 🔧

STRUCTURE

/src/mock/data.js is where I store all my data:

Hero Section

export const heroData = {
  title: '', // Hello, my name is
  name: '', // Ross
  subtitle: '', // I'm a Front End 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',
  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.

You can put as many projects object you want inside the array.

export const projectsData = [
  {
    id: nanoid(),
    img: 'project.jpg',
    title: '',
    info: '',
    info2: '',
    url: '',
    repo: '', // if no repo, the button will not show up
  },
  {
    id: nanoid(),
    img: 'project.jpg',
    title: '',
    info: '',
    info2: '',
    url: '',
    repo: '', // 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

export const footerData = {
  networks: [
    {
      id: nanoid(),
      name: 'twitter',
      url: '', // twitter url
    },
    {
      id: nanoid(),
      name: 'codepen',
      url: '', // codepen url
    },
    {
      id: nanoid(),
      name: 'linkedin',
      url: '', // linkedin url
    },
    {
      id: nanoid(),
      name: 'github',
      url: '', // github url
    },
  ],
};

Step 2 - STYLES

I am using SASS pre-processor to handle all the CSS

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

Note: I highly recommend to checkout gradients variations on UI Gradient

---

Deployment 📦

Once I was done. I put my website online!

I use Netlify to achieve this on the EASIEST WAY

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

• Ross Maguire
• Credit to Jacobo Martinez - https://github.com/cobidev for developing the starter boiler plate that I initialised my project with