Generate Vue.js site from API JSON

We need to display content from an API to a website. # About the project Babel Between Us is an experiment in collaboratively created fiction, a group of 18 writers collectively improvise a story on an online forum. # Purpose of the site The site is the access point for the general public to the stories written on Babel Between Us. -The threads are accessed by a public api from: [login to view URL] -The threads need to be displayed on a website. -Each thread element should link to our custom reader of the forum, that is currently only is accessible from the forum. Example: [login to view URL] -Each thread from the public api need to link to the custom reader view of that thread, by replacing the id in the url. # Programming guidelines - Build the site in vue.js - It's important that the code is well structured and that you use ES6 conventions. - The code also needs to render on older browsers, so you need to use Babel to compile. - The application should be ready to run in a browser, it must be completely client-side. # Design guidelines White background and black text: Colours: - White (hex fdfdfd, rgb 253,253,253) - Black (hex 111111, rgb 17,17,17) Fonts: - Body: Times New Roman - Headers: Arial Bold # Site map The site consists of three pages: - The homepage. With a link to each thread, sorted by youngest to oldest. - About the project. - A subpage with more a more detailed description. # Homepage The homepage consist of a grid of square elements: - 6 elements wide on a 13” inch screen (I don’t know exactly how many this would be on a wider screen.) - As many elements as there is threads on the forum. - Each element is identical in size. - Each element is square. - Each element has enough padding to make it readable. On mobile: - One element per column. - The element does not need to be square, instead, focus should be on including at least three or four elements on the screen. The first element links to the About the project subpage. Each subsequent element links to the reader view of its respective forum thread. For example, for thread [login to view URL], the link would be to [login to view URL] The page is scrollable to reveal more elements. # Links to [login to view URL] Each thread element displays the title and an excerpt of its respective forum thread. All threads in the [login to view URL] forum, with the tag “ethno-bbu” should be included. You retrieve these via this API call: [login to view URL] From this JSON you will need to use: - Thread title - Thread excerpt - Thread most recent updated, for sorting. - Thread ID for linking to the reader. ATTN: You will need to filter out images and emojis, as the reader cannot handle those. Each element includes: - The title of the thread, in Arial Bold. - As much of the excerpt part that fits, in Times New Roman. The whole element is clickable. The user can click anywhere on the element to be sent to the reader view of the thread. Each element links to the [login to view URL] view of its thread. This means it should link to: [login to view URL] Where [id] is replaced by each thread's unique id. # About the project Identical to: [login to view URL] Except one change: The 2 subpage links in the top left corner are replaced with two subpage links to: - Description (sends you to the detail description subpage.) - Project (sends you back to the home page.) ATTN: The logos in the bottom must be included. Description Identical to: [login to view URL]