Abstract Content in to JSON files

[George-Madeley]

Abstract Content into JSON Files

Problem

All of the text on the website is cluttering up the code making it hard to understand and debug. This needs to be fixed.

Solution

We can move the text (not the HTML tags) into JSON files then import those json files into the TSX and access those object attributes like a normal object. This cleans up the code massively. Examples can be seen below:

JSON File:

{
    "introduction": [
        "Over the years, I have developed a passion for ...",
        "The following section is a ..."
    ],
    ...
}

Then the TSX file where we import the JSON file contents:

import json from '../../data/about_page.real.json'

export default function AboutPage() {
  return (
    <div className='about-page'>
      <Heading>
        <div className='heading-content'>
          <h1>About Me</h1>
        </div>
      </Heading>
      <Description content={json.introduction} />
      <Timeline content={json.experiences} />
    </div>
  )
}