TEST

act JS Landing Page Template

LIVE DEMO

The demo repo is located here

Description

This is a ReactJS based landing page template. All 'visual' data can be easily modified by changing the json files located in the data folder.

Make it Yours!

1. Add your own data

Change the data in the data/ folder as well as add any images to img/ folder. Change the "About" section directly in the README.md (see https://www.markdownguide.org/basic-syntax/ for markdown syntax)

1.1. Data Structure

the data is stored in json files in the data/ folder. This folder contains the following files:

• main_data.json -> contains the data for the header section
• project_crates.json -> contains the data for the project crates section
• project_profiles.json -> contains the data for the project profiles section
• contacts.json -> contains the data for describing the project contacts
• tabular_data.json -> contains the data for the tabular data page
• publications.json -> contains the data for the publications section

there is also a README.md file that is used to populate the about section of the page. This file can be changed to your liking. For tips on how to write markdown files, see here.

In the img/ folder you can add any images that you want to use in the project. These images can be referenced in the json files.

1.1.1. main_data.json

This file contains the data for the header section. The structure of the file is as follows:

{
    "name_site": "ARMS",
    "main_image": "https://assets.newatlas.com/dims4/default/e58452e/2147483647/strip/true/crop/1498x999+0+0/resize/1440x960!/quality/90/?url=http%3A%2F%2Fnewatlas-brightspot.s3.amazonaws.com%2Fb1%2Fb4%2F2a5bc31341fbaa31e2230d038f66%2Ficture1.jpeg",
    "description": "The European ARMS programme (ARMS-MBON) is a network of Autonomous Reef Monitoring Structures (ARMS) placed in the vicinity of marine stations, ports, marinas, and Long-Term Ecological Research (LTER) sites distributed over Europe and polar regions. The aim of ARMS-MBON is to assess the status of, and changes in, hard-bottom communities of near-coast environments, using genetic methods supplemented with image analysis and visual inspection methods. ARMS-MBON is part of GEO BONs Marine Biodiversity Observation Network (MBON).",
    "long_name": "Autonomous Reef Monitoring System",
    "short_name": "ARMS",
    "logo": "https://www.researchobject.org/ro-crate/assets/img/ro-crate-w-text.svg",
    "markdown_about_us":"README.md"
}

1.1.2. project_crates.json

This file contains all the crates of the project.

[
    {
    "icon": "fa fa-wordpress",
    "name": "Lorem ipsum dolor",
    "url" : "http://www.google.com",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
  },
  {
    "icon": "fa fa-cart-arrow-down",
    "name": "Consectetur adipiscing",
    "url" : "http://www.google.com",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
  }
]

1.1.3. project_profiles.json

This file contains all the profiles for the project. These will most likely be links to your github repos.

[
    {
      "icon": "fa fa-comments-o",
      "title": "Lorem ipsum",
      "url" : "http://www.google.com",
      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
    },
    {
      "icon": "fa fa-bullhorn",
      "title": "Lorem ipsum",
      "url" : "http://www.google.com",
      "text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
    }
]

1.1.4. contacts.json

This file contains all the contacts for the project. These will most likely be links to your github repos.

[
    {
        "img": "img/contacts/01.jpg",
        "name": "Hugh Jass",
        "job": "Corporate Directives Executive",
        "email": "Hugh_Jasst@doe.com",
        "ORCID": "0000-0000-0000-0000",
        "affiliation": {
            "name": "University of Test",
            "id": "0000-0000-0000-0000",
            "url": "http://www.test.com"
        }
      },
      {
        "img": "img/contacts/02.jpg",
        "name": "Mike Hawk",
        "job": "Future Solutions Planner",
        "email": "hotmale@hotmail.com",
        "ORCID": "0000-0000-0000-0000",
        "affiliation": {
            "name": "University of Test",
            "id": "0000-0000-0000-0000",
            "url": "http://www.test.com"
        }
      }
]

1.1.4.1 person

1.1.4.2 affiliation

1.1.5. tabular_data.json WILL BE DEPRECATED

This file contains all the tabular data for the project. These will most likely be links to your github repos.

[
    {
      "name": "combined imagedata",
      "url": "https://github.com/arms-mbon/Data/blob/main/QualityControlledData/Combined/combined_ImageData.csv",
      "description": "tabular data of all images in the combined dataset",
      "extra_info": "https://github.com/arms-mbon/Data/blob/main/QualityControlledData/Combined/README.md"
    },
    {
      "name": "test 2",
      "url": "https://github.com/arms-mbon/Data/blob/main/QualityControlledData/Combined/combined_ImageData.csv",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc sit amet aliquam lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl"
    },
]

1.1.6. publications.json

This file contains all the publications information for the project. These will most likely be links to your publications uri's.

[
    {
        "title": "Something Something interesting",
        "text": "Text about something interesting here A",
        "img": "/img/publications/1.jpg",
        "link": "https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley"
    },
    {
        "title": "The cat in the hat",
        "text": "The cat in the hat sat on the mat. One hopes he didn't leave a fat cat track in the form of a shattered mat.",
        "img": "/img/publications/2.jpeg",
        "link": "https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley"
    }
]

2. Deployment

the project is deployed using github pages. To deploy the project, simply push the changes to the master branch. The project will be deployed automatically.

2.1. Resolving conflicts

2.1.1. Action failed with "The process '/usr/bin/git' failed with exit code 128"

Resolve this issue by following the steps below:

• Go to the settings of the repository
• Click on the actions tab and then the general button
• scroll down until you see the section "Workflow permissions"
• Select the option "Read and write permissions" and click save

Credits

Free CSS

Free-CSS.com